/* ==========================================================================
   Trayecta · Reset, tipografía y primitivas de layout
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* Los delays también: con escalonado puesto, anular sólo la duración deja
     el contenido llegando a destiempo, que es movimiento igual. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: var(--lh-cuerpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* --- Tipografía ---------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: var(--lh-titulo);
  letter-spacing: var(--track-h2);
  text-wrap: balance;
  /* Red de seguridad para 320 px: hoy ningún titular desborda, pero alcanza
     con que el día de mañana entre una formación de nombre largo para que un
     título empuje toda la página y aparezca el scroll horizontal. */
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.06;
  letter-spacing: var(--track-h1);
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.22;
  letter-spacing: var(--track-h3);
}
h4 {
  font-size: var(--t-h4);
  line-height: 1.35;
  letter-spacing: -0.012em;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover {
  text-decoration-color: currentColor;
}

strong,
b {
  font-weight: 600;
}

ul,
ol {
  padding-left: 1.15em;
}

li + li {
  margin-top: 0.3em;
}

hr {
  border: 0;
  border-top: 1px solid var(--linea);
}

/* --- Accesibilidad ------------------------------------------------------- */

/* El anillo verde daba 2,4:1 sobre blanco y era invisible sobre el botón
   verde. En navy da 18:1 sobre papel y 7,3:1 sobre el verde de marca.
   El foco no se anima ni se retrasa nunca. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.seccion--oscura :focus-visible,
.cta-final :focus-visible,
.franja :focus-visible,
.footer :focus-visible {
  outline-color: #fff;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.15rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  transition: top 160ms var(--ease);
}

.saltar:focus {
  top: 1rem;
}

.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Layout -------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.contenedor--angosto {
  max-width: 860px;
}

/* Grilla editorial: permite que una imagen llegue al borde del viewport sin
   romper la alineación del texto ni usar 100vw (que en Windows suma el ancho
   de la barra de scroll). Va EN la <section>, reemplazando a .contenedor. */
.grid-editorial {
  display: grid;
  grid-template-columns:
    [sangre-i] minmax(var(--gutter), 1fr)
    [contenido-i] minmax(0, calc(var(--ancho) / 2 - var(--gutter)))
    [medio] minmax(0, calc(var(--ancho) / 2 - var(--gutter)))
    [contenido-f] minmax(var(--gutter), 1fr) [sangre-f];
  align-items: center;
  column-gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.a-sangre-izq {
  grid-column: sangre-i / medio;
}
.a-sangre-der {
  grid-column: medio / sangre-f;
}
.en-contenido {
  grid-column: contenido-i / contenido-f;
}
.col-izq {
  grid-column: contenido-i / medio;
}
.col-der {
  grid-column: medio / contenido-f;
}

@media (max-width: 899px) {
  .grid-editorial > * {
    grid-column: contenido-i / contenido-f;
  }
  .grid-editorial {
    row-gap: var(--e6);
  }
}

/* Tres alturas de sección. Regla para mantenerlo: nunca más de dos secciones
   seguidas con el mismo padding, y --papel-2 como máximo dos veces por página. */
.seccion {
  padding-block: var(--seccion);
}

.seccion--amplia {
  padding-block: var(--seccion-amplia);
}

.seccion--densa {
  padding-block: var(--seccion-densa);
}

.seccion--ajustada {
  padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
}

.seccion--papel2 {
  background: var(--papel-2);
}

.seccion--oscura {
  background: var(--navy);
  color: var(--tinta-inv);
}

.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 {
  color: #fff;
}

.seccion--oscura .lead,
.seccion--oscura p {
  color: var(--tinta-inv-2);
}

.seccion--oscura .texto-micro,
.seccion--oscura .texto-chico {
  color: var(--tinta-inv-3);
}

.seccion--oscura hr {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.grid {
  display: grid;
  gap: var(--e5);
}

@media (min-width: 720px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 999px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Encabezado de sección -----------------------------------------------
   Filete de cabecera editorial: el verde es un tramo del recorrido sobre la
   línea, no el color del texto. Antes eran 58 barritas verdes con versalita
   verde, el elemento más de plantilla del sitio. */

.eyebrow {
  display: block;
  position: relative;
  padding-top: 0.85rem;
  border-top: 1px solid var(--linea);
  font-family: var(--fuente-texto);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: var(--e4);
}

.eyebrow::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.75rem;
  height: 1px;
  background: var(--verde);
}

.seccion--oscura .eyebrow,
.cta-final .eyebrow,
.franja .eyebrow,
.tarjeta__cabecera .eyebrow {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: var(--tinta-inv-2);
}

.encabezado-seccion {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.encabezado-seccion--centrado {
  margin-inline: auto;
  text-align: center;
}

.encabezado-seccion--centrado .eyebrow,
.cta-final .eyebrow {
  border-top-color: transparent;
  text-align: center;
}

.encabezado-seccion--centrado .eyebrow::before,
.cta-final .eyebrow::before {
  left: 50%;
  transform: translateX(-50%);
}

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--tinta-2);
  margin-top: var(--e4);
  max-width: var(--medida-lead);
}

.texto-apoyo {
  color: var(--tinta-2);
  max-width: var(--medida-prosa);
}

.texto-chico {
  font-size: var(--t-sm);
  color: var(--tinta-2);
}

.texto-micro {
  font-size: var(--t-xs);
  color: var(--tinta-3);
  line-height: 1.55;
  max-width: var(--medida-corta);
}

/* --- Revelado al entrar en vista -----------------------------------------
   Dos formas nada más: bloque (data-revelar) e item de grilla
   (data-revelar-grupo en el contenedor, que reparte el retraso a sus hijos).
   El estado oculto vive bajo .mov, y .mov la enciende un script inline del
   <head> con vigía: si el JS falla, nada queda invisible. */

@media (prefers-reduced-motion: no-preference) {
  .mov [data-revelar-grupo] > *,
  .mov [data-revelar] {
    opacity: 0;
    transform: translate3d(0, var(--rev-y-item), 0);
    transition: opacity var(--dur-revelado) var(--ease-salida),
      transform var(--dur-revelado) var(--ease-salida);
    transition-delay: var(--rev-retraso, 0ms);
  }

  .mov [data-revelar] {
    transform: translate3d(0, var(--rev-y), 0);
  }

  .mov [data-revelar-grupo] > .es-visible,
  .mov [data-revelar].es-visible {
    opacity: 1;
    transform: none;
  }
}

@media print {
  [data-revelar],
  [data-revelar-grupo] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Utilidades puntuales ------------------------------------------------ */
.mt-4 {
  margin-top: var(--e4);
}
.mt-5 {
  margin-top: var(--e5);
}
.mt-6 {
  margin-top: var(--e6);
}
.mt-7 {
  margin-top: var(--e7);
}
.sin-vinetas {
  list-style: none;
  padding: 0;
}
.medida-prosa {
  max-width: var(--medida-prosa);
}
/* Corte de línea que sólo existe en pantallas chicas (titulares de afiche). */
.hasta-md {
  display: inline;
}
@media (min-width: 830px) {
  .hasta-md {
    display: none;
  }
}