/* ─────────────────────────────────────────────────────────────────────────────
   textBigLede — una entradilla grande a todo el ancho.
   Un solo párrafo a cuerpo de titular (24-40 px, peso 500), medida ancha para
   que no quede media página coja, y un enlace de texto con la flecha del kit.
   Ningún fondo propio, ninguna caja, ningún filete: sólo aire.
   Una sola curva: cubic-bezier(.22,.61,.36,1). Color, siempre por variables.
   ───────────────────────────────────────────────────────────────────────────── */

/* El bloque ocupa TODO el ancho del contenedor: la medida no se pone aquí.
   (TRAMPA: un `max-width` en ch sobre este div se mide con la letra heredada de
   16 px, no con la del párrafo, y deja la entradilla en una columna de móvil
   pegada al margen izquierdo con media sección vacía a la derecha.) */
.g-textBigLede-hold { max-width: none; }

.g-textBigLede-text {
  /* la medida vive en el párrafo, donde 1ch son ~0.5em de SU cuerpo: a 40 px
     salen ~1240 px, o sea el contenedor entero, con líneas de ~62 signos —
     ancha de verdad y a todo el ancho, sin pasarse en pantallas enormes */
  max-width: min(100%, 62ch);
  font-family: var(--body), system-ui, sans-serif;
  font-weight: 500;
  /* el cuerpo baja con el ancho: a 390 px son 24 px, y así el alemán largo no
     necesita guiones (TRAMPA: `hyphens: auto` parte casi todas las líneas) */
  font-size: clamp(24px, 3.1vw, 40px);
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--text);
  text-align: left;
  text-wrap: pretty;
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* el acento: cursiva serif, como la palabra de acento de los titulares */
.g-textBigLede-text em {
  font-family: var(--em-font, var(--font-iserif)), serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.006em;
  color: var(--a2);
}

/* ── el enlace de debajo: texto + flecha, nunca un botón ──────────────────── */
.g-textBigLede-more { margin-top: clamp(30px, 4vh, 46px); }

.g-textBigLede-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--body), system-ui, sans-serif;
  font-size: clamp(15px, 1.4vw, 17.5px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--a2);
}
.g-textBigLede-link span {
  padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--a2) 34%, transparent);
  transition: border-color .4s cubic-bezier(.22,.61,.36,1);
}
.g-textBigLede-link svg { flex: none; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.g-textBigLede-link:hover span { border-bottom-color: var(--a2); }
.g-textBigLede-link:hover svg { transform: translate(3px, -3px); }

/* ── móvil: una sola columna, la medida se suelta y el cuerpo baja ────────── */
@media (max-width: 900px) {
  .g-textBigLede-hold { max-width: none; }
  .g-textBigLede-text { max-width: none; font-size: clamp(24px, 6.2vw, 30px); line-height: 1.36; letter-spacing: -0.008em; }
  .g-textBigLede-more { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-textBigLede-link span, .g-textBigLede-link svg { transition: none; }
  .g-textBigLede-link:hover svg { transform: none; }
}