/* ==========================================================================
   Trayecta · Secciones específicas de página
   ========================================================================== */

/* --- Hero de Home --------------------------------------------------------
   Composición editorial: el titular ocupa la mitad izquierda a tamaño de
   afiche y la fotografía sangra por el borde derecho. No es texto-izquierda +
   rectángulo-derecha: la foto no está adentro de una caja, es el borde de la
   página. Abajo cierra la firma de marca (punto de partida → objetivo). */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0;
  overflow: hidden;
}

/* Trazo de "recorrido": líneas finas, sin gradientes pesados */
.hero__trazo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--verde);
  opacity: 0.16;
}

.hero__grid {
  position: relative;
  align-items: start;
  row-gap: var(--e6);
}

/* El titular ocupa el ancho completo de contenido; el cuerpo y la foto se
   reparten abajo. Así el H1 llega a 76 px sin chocar con la fotografía. */
.hero__titulo {
  font-size: clamp(2.6rem, 1.1rem + 5.6vw, 4.75rem);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: initial; /* los cortes los decide el <br>, no el balanceo */
}

.hero__titulo em {
  font-style: normal;
  color: var(--verde-press);
}

.hero__lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--tinta-2);
  margin-top: var(--e5);
  max-width: 34ch;
}

.hero__acciones {
  margin-top: var(--e6);
}

.hero__pies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linea);
  list-style: none;
  padding-left: 0;
  font-size: var(--t-sm);
  color: var(--tinta-2);
}

.hero__pies li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero__pies li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--verde);
  flex: none;
}

/* La foto sube hasta la altura de las últimas líneas del titular: profundidad
   por bandas, sin poner texto grande encima de la imagen. */
.hero__media {
  position: relative;
}

@media (min-width: 900px) {
  .hero__media {
    margin-top: clamp(-8rem, -6vw, -3rem);
  }
}

.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
}

@media (max-width: 899px) {
  .hero__media img {
    aspect-ratio: 3 / 2;
    border-radius: var(--r-lg);
  }
}

/* Etiqueta sobre la foto: dónde pasa esto. */
.hero__etiqueta {
  position: absolute;
  top: clamp(0.85rem, 2vw, 1.5rem);
  left: clamp(0.85rem, 2vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-full);
  background: rgba(10, 19, 48, 0.86);
  color: #fff;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

.hero__etiqueta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--verde);
  flex: none;
}

/* Recorte superpuesto: profundidad sin collage. Se va en pantallas chicas,
   donde el solape se convierte en ruido y tapa la foto principal. */
.hero__recorte {
  position: absolute;
  left: clamp(-3.5rem, -4vw, -2rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  width: clamp(8.5rem, 13vw, 11.5rem);
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sombra-media);
  outline: 5px solid var(--papel);
}

.hero__recorte img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width: 1099px) {
  .hero__recorte {
    display: none;
  }
}

/* Firma de marca: punto de partida ─●─●─●─ próximo objetivo. */
.hero__ruta {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: var(--e5);
  border-top: 1px solid var(--linea);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.hero__ruta-linea {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 1px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--linea-fuerte) 100%);
}

.hero__ruta-linea i {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--verde);
}

@media (max-width: 599px) {
  .hero__ruta {
    font-size: 0.6875rem;
  }
}

/* `.hero-pagina` vivía acá: un titular chico con una bajada gris, igual en las
   siete páginas internas. Lo reemplazó `.hero--interior`, que usa la grilla
   editorial y el trazo. La regla se borra para que no vuelva por inercia. */

/* --- Diferenciales ------------------------------------------------------- */

.diferencial {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4) 0 0;
  border-top: 1px solid var(--linea-fuerte);
}

.diferencial__num {
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--verde-texto);
  margin-bottom: var(--e2);
}

.diferencial__titulo {
  font-size: var(--t-h4);
}

.diferencial p {
  color: var(--tinta-2);
  font-size: var(--t-base);
  line-height: 1.55;
}

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

.seccion--oscura .diferencial__num {
  color: var(--verde);
}

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

/* Acá vivía `.galeria`, la grilla de fotos con bordes redondeados. La
   reemplazó `.mosaico`, que va a sangre y con recortes de distinto tamaño. */

/* --- Persona / equipo ----------------------------------------------------
   `.lugar` comparte la geometría (foto al costado, texto al lado) pero se
   llama distinto porque muestra un espacio, no a alguien. Misma regla, dos
   nombres honestos, en vez de poner `persona` alrededor de un aula. */

.persona,
.lugar {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .persona,
  .lugar {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.persona__retrato,
.lugar__foto {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--papel-3);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
}

.persona__retrato img,
.lugar__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder honesto mientras no haya foto de la persona */
.persona__retrato--vacio {
  padding: var(--e6);
  text-align: center;
}

.persona__retrato--vacio p {
  font-size: var(--t-sm);
  color: var(--tinta-3);
}

.persona__rol {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--verde-texto);
  margin-bottom: var(--e3);
}

.seccion--oscura .persona__rol {
  color: var(--verde);
}

.seccion--oscura .persona__retrato {
  border-color: rgba(255, 255, 255, 0.16);
  background: var(--navy-2);
}

/* La foto de Gabriela es de 591 px de ancho: se usa contenida, nunca a
   sangre ni a todo el ancho, porque no da para escalar sin que se note. */
.persona__retrato--contenido {
  max-width: 21rem;
}

/* Monograma mientras no haya foto (Lautaro): misma caja que un retrato, con
   las iniciales en el verde de texto. Al llegar la foto, se reemplaza por <img>. */
.persona__retrato--vacio .persona__monograma {
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-size: clamp(3.5rem, 2rem + 5vw, 5.5rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--verde-texto);
  margin: 0;
}

/* Línea "A cargo de ..." en /steam/: enlace discreto dentro del texto de apoyo. */
.docente-linea a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--verde);
  text-underline-offset: 0.18em;
}

/* --- Confianza y alianzas ------------------------------------------------ */

.alianzas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.alianzas img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

.certificacion {
  display: grid;
  gap: var(--e5);
  align-items: start;
}

@media (min-width: 900px) {
  .certificacion {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--e7);
  }
}

/* --- CTA final ----------------------------------------------------------- */

.cta-final {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--navy);
  color: #fff;
  padding: clamp(2.5rem, 2rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 4vw, 4rem);
  overflow: hidden;
  text-align: center;
}

.cta-final__trazo {
  position: absolute;
  inset: 0;
  color: var(--verde);
  opacity: 0.22;
  pointer-events: none;
}

/* Todo el contenido por encima del trazo, pero sin sacar al trazo de su
   position:absolute (si no, el SVG vuelve al flujo y empuja el bloque). */
.cta-final > *:not(.cta-final__trazo) {
  position: relative;
}

.cta-final h2 {
  color: #fff;
  max-width: 22ch;
  margin-inline: auto;
}

.cta-final p {
  color: var(--tinta-inv-2);
  max-width: 52ch;
  margin: var(--e4) auto 0;
}

.cta-final .grupo-botones {
  justify-content: center;
  margin-top: var(--e6);
}

/* --- Detalle de formación ------------------------------------------------ */

.ficha {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .ficha {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
}

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

@media (min-width: 1000px) {
  .ficha__lateral {
    position: sticky;
    top: 6rem;
  }
}

.ficha__bloque + .ficha__bloque {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.ficha__bloque > h2 {
  margin-bottom: var(--e4);
}

.ficha__bloque > * + * {
  margin-top: var(--e4);
}

.ficha__bloque .acordeon + .acordeon {
  margin-top: var(--e3);
}

.ficha__prosa {
  max-width: var(--ancho-texto);
  color: var(--tinta-2);
}

.ficha__prosa > * + * {
  margin-top: var(--e4);
}

/* Ruta de la muestra / flujo horizontal */
.flujo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.flujo li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background: var(--papel);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--tinta-2);
}

.flujo li:not(:last-child)::after {
  content: "→";
  color: var(--verde);
  margin-left: 0.15rem;
}

/* --- Contacto ------------------------------------------------------------ */

.contacto-grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .contacto-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.canal {
  display: flex;
  gap: var(--e4);
  padding: var(--e5);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--papel);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.canal:hover {
  border-color: var(--linea-fuerte);
  transform: translateY(-2px);
}

.canal + .canal {
  margin-top: var(--e3);
}

.canal__icono {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--verde-tinte);
  color: var(--verde-press);
}

/* Son nietos de .canal, así que la flexbox del padre no los blockifica:
   sin display:block el nombre y el dato caen en la misma línea. */
.canal__nombre {
  display: block;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.canal__dato {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-sm);
  color: var(--tinta-2);
}

.mapa {
  border: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  background: var(--papel-3);
}

/* --- Formulario ---------------------------------------------------------- */

.formulario {
  display: grid;
  gap: var(--e5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--papel-2);
}

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

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

.campo {
  display: grid;
  gap: 0.45rem;
}

.campo label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta);
}

/* El cuerpo va a --t-base (17 px) y no a --t-sm: por debajo de 16 px Safari en
   iOS hace zoom al enfocar el campo y descoloca toda la página. */
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.campo ::placeholder {
  color: var(--tinta-3);
  opacity: 1;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--verde);
  outline: none;
  box-shadow: 0 0 0 3px var(--verde-tinte-2);
}

.campo textarea {
  min-height: 8rem;
  resize: vertical;
}

/* --- Encabezado de ficha de curso ----------------------------------------
   El navy acá no decora: es el color de la formación profesional. Separa la
   ficha del resto del sitio, da el registro institucional que estas páginas
   pedían y deja la decisión comercial (precio + CTA) arriba de todo, no
   enterrada al final de una columna de tres mil palabras. */

.ficha-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--tinta-inv);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(3rem, 2.5rem + 3vw, 5rem);
}

.ficha-hero__grid {
  display: grid;
  gap: var(--e6);
}

@media (min-width: 960px) {
  .ficha-hero__grid {
    grid-template-columns: minmax(0, 1.4fr) 20rem;
    gap: var(--e7);
    align-items: end;
  }
}

.ficha-hero h1 {
  color: #fff;
}

.ficha-hero__lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--tinta-inv-2);
  margin-top: var(--e5);
  max-width: 44ch;
}

/* Nombre alternativo de la formación (cómo la busca la gente), debajo del h1 */
.ficha-hero__alias {
  font-size: var(--t-sm);
  color: var(--tinta-inv-2);
  margin-top: var(--e3);
  max-width: 44ch;
}

.ficha-hero__alias strong {
  color: #fff;
  font-weight: 600;
}

.ficha-hero__alias + .ficha-hero__lead {
  margin-top: var(--e4);
}

.ficha-hero .btn--linea {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.ficha-hero .btn--linea:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Los cuatro datos duros como tramos de recorrido: un filete por dato con su
   nodo verde al inicio. Antes eran cuatro celdas de tabla con bordes. */
.ficha-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5) clamp(1.25rem, 3vw, 2.5rem);
  margin-top: var(--e6);
  padding-left: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .ficha-datos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ficha-datos li {
  position: relative;
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ficha-datos li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--verde);
}

.ficha-datos b {
  display: block;
  font-family: var(--fuente-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.ficha-datos span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-inv-3);
}

.ficha-hero__accion {
  padding: var(--e5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-lg);
  background: var(--navy-2);
}

.ficha-hero__desde {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-inv-3);
}

.ficha-hero__cuota {
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin-block: 0.25rem 0.35rem;
}

.ficha-hero__nota {
  font-size: var(--t-sm);
  color: var(--tinta-inv-2);
  margin-bottom: var(--e5);
}

.ficha-hero__accion .btn + .btn {
  margin-top: var(--e3);
}

.ficha-hero__accion .texto-micro {
  color: var(--tinta-inv-3);
  margin-top: var(--e4);
  max-width: none;
}

.ficha-hero__accion .texto-micro a {
  color: var(--tinta-inv-2);
}

/* --- Perfiles: "¿esta formación es para vos?" ----------------------------
   Cuatro perfiles escaneables en dos columnas. Sin tarjetas: el contenido es
   una línea y media cada uno y encajonarlo sólo agrega bordes. */

.perfiles {
  display: grid;
  gap: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: perfil;
}

@media (min-width: 800px) {
  .perfiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}

.perfiles li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
  margin: 0;
  padding-block: var(--e5);
  border-top: 1px solid var(--linea);
}

.perfiles li::before {
  counter-increment: perfil;
  content: counter(perfil, decimal-leading-zero);
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--verde-texto);
  padding-top: 0.4rem;
}

.perfiles b {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

.perfiles span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-sm);
  color: var(--tinta-2);
}

/* --- Hero editorial de página interna -------------------------------------
   Misma composición que la Home (titular grande + foto sangrando por el borde)
   pero un escalón más abajo de tamaño: la Home llega a 76 px, las internas a
   64. Así se lee la jerarquía entre portada y sección sin cambiar de sistema. */

.hero--interior {
  /* La Home cierra con la firma de recorrido, que aporta el aire de abajo.
     Acá no va (es la firma de portada), así que el padding lo pone el hero. */
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.hero--interior .hero__titulo {
  font-size: clamp(2.25rem, 1.15rem + 4.4vw, 4rem);
}

.hero--interior .hero__lead {
  max-width: 42ch;
}

/* Titular de dos líneas en vez de cuatro: la foto sube menos o se le monta
   encima al H1. */
@media (min-width: 900px) {
  .hero--interior .hero__media {
    margin-top: clamp(-4rem, -3vw, -1.5rem);
  }
}

/* --- Señales: "tal vez esto te resulta familiar" --------------------------
   Cuatro situaciones que pasan a la vez, no cuatro etapas. Por eso no llevan
   número ni tarjeta: un filete verde al costado y el enunciado grande. Lo que
   tiene que engancharse es la frase, no el borde de la caja. */

.senales {
  display: grid;
  gap: var(--e6);
  padding-left: 0;
  list-style: none;
}

@media (min-width: 800px) {
  .senales {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}

.senales li {
  margin: 0;
  padding-left: var(--e5);
  border-left: 2px solid var(--verde);
}

.senales b {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-h3);
  color: var(--tinta);
}

.senales span {
  display: block;
  margin-top: var(--e3);
  max-width: 42ch;
  color: var(--tinta-2);
}

/* --- Contraste: explicar un tema vs. acompañar un proceso -----------------
   La distinción que más veces hay que explicar por WhatsApp. Enfrentada en
   dos columnas y sobre navy, para que sea el momento de autoridad de la
   página y no dos tarjetas blancas más. */

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

@media (min-width: 860px) {
  .contraste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.contraste__lado {
  padding-top: var(--e5);
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.contraste__lado--si {
  border-top-color: var(--verde);
}

/* Los colores van con doble clase a propósito: `.seccion--oscura p` pinta
   todos los párrafos de gris claro y ganaría por especificidad. */
.contraste .contraste__rotulo {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-inv-3);
}

.contraste .contraste__lado--si .contraste__rotulo {
  color: var(--verde);
}

.contraste .contraste__frase {
  font-family: var(--fuente-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--track-h3);
  color: #fff;
  margin-top: var(--e3);
}

.contraste .contraste__lado--no .contraste__frase {
  color: var(--tinta-inv-2);
}

.contraste ul {
  margin-top: var(--e5);
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: var(--e3);
  color: var(--tinta-inv-2);
  font-size: var(--t-base);
}

.contraste li {
  margin: 0;
  padding-left: 1.6rem;
  position: relative;
}

.contraste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.contraste__lado--si li::before {
  width: 0.55rem;
  height: 0.55rem;
  top: 0.45em;
  border-radius: var(--r-full);
  background: var(--verde);
  opacity: 1;
}

/* --- Tríptico fotográfico -------------------------------------------------
   Tres niveles con foto grande. Sin marco ni sombra: la foto es el bloque. El
   escalonado del medio evita la tira de tres rectángulos idénticos. */

.triptico {
  display: grid;
  gap: var(--e6);
  padding-left: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .triptico {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2rem);
  }

  .triptico li:nth-child(2) {
    margin-top: clamp(1.5rem, 4vw, 3.5rem);
  }
}

.triptico li {
  margin: 0;
}

.triptico figure {
  position: relative;
  margin: 0 0 var(--e4);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--papel-3);
}

.triptico img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.triptico li:hover img {
  transform: scale(1.04);
}

.triptico h3 {
  font-size: var(--t-h4);
  margin-bottom: var(--e2);
}

.triptico p {
  color: var(--tinta-2);
}

/* --- Tramos: el avance en el tiempo --------------------------------------
   Distinto de .ruta a propósito. En .ruta lo que ordena es la etapa; acá lo
   que ordena es el calendario, así que manda la barra y el verde se va
   aclarando de la semana 1 a la 12. */

.tramos {
  display: grid;
  gap: var(--e5);
  padding-left: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .tramos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2rem);
  }
}

.tramos li {
  margin: 0;
  padding-top: var(--e4);
  border-top: 4px solid var(--verde);
}

.tramos li:nth-child(2) {
  border-top-color: color-mix(in srgb, var(--verde) 72%, var(--papel-3));
}

.tramos li:nth-child(3) {
  border-top-color: color-mix(in srgb, var(--verde) 46%, var(--papel-3));
}

.tramos li:nth-child(4) {
  border-top-color: color-mix(in srgb, var(--verde) 24%, var(--papel-3));
}

.tramos__semanas {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--tinta-3);
}

.tramos h3 {
  font-size: var(--t-h4);
  margin-block: var(--e2);
}

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

/* --- 404 ----------------------------------------------------------------- */

.error-404 {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--seccion);
}