/* ==========================================================================
   Luna Terra — Landing
   Brief visual y de experiencia web v1.0 + Manual de Marca v3.1
   ========================================================================== */

/* ---- 02 · Hero audiovisual ---------------------------------------------- */

.hero {
  position: relative;
  min-height: 88vh;               /* brief §02: mínimo 85–90vh */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--superficie-oscura);
  padding-block: calc(var(--alto-cabecera) + var(--e-8)) var(--e-9);
}

.hero__media,
.hero__poster,
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;    /* mantiene a María en el tercio derecho */
}

/* El video se pinta sobre el póster una vez cargado */
.hero__media video { z-index: 1; }

/* El paralaje desplaza el fondo: se le da altura extra para que no asome
   el borde inferior del hero al bajar. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero__media { height: 118%; will-change: transform; }
}

/* Degradado desde la izquierda y desde la base: el copy siempre sobre
   azul noche sólido, nunca sobre el detalle de la imagen (brief §02). */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(13, 27, 42, 0.96) 0%,
      rgba(13, 27, 42, 0.88) 32%,
      rgba(13, 27, 42, 0.45) 58%,
      rgba(13, 27, 42, 0.15) 100%),
    linear-gradient(to top,
      rgba(13, 27, 42, 0.92) 0%,
      rgba(13, 27, 42, 0.25) 42%,
      rgba(13, 27, 42, 0) 70%);
}

.hero__contenido {
  position: relative;
  z-index: 2;
  max-width: var(--ancho-hero);
}

.hero h1 {
  color: var(--texto-inverso);
  margin-bottom: var(--e-5);
}

.hero__bajada {
  font-size: var(--t-cuerpo-grande);
  line-height: 1.55;
  color: var(--texto-inverso-suave);
  margin-bottom: var(--e-6);
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Los dos publicos, breves, bajo la propuesta de valor (Fase 1). */
.hero__publicos {
  list-style: none;
  margin: 0 0 var(--e-6);
  padding: 0;
  display: grid;
  gap: var(--e-4);
  max-width: 34rem;
}
.hero__publicos li { display: grid; gap: 3px; }
.hero__publico-tipo {
  font-family: var(--fuente-funcional);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-linea);
}
.hero__publico-texto {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--texto-inverso-suave);
}

/* Control de reproducción: discreto, siempre alcanzable por teclado */
.hero__control {
  position: absolute;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(245, 239, 230, 0.38);
  background: rgba(13, 27, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--texto-inverso);
  cursor: pointer;
  transition: border-color var(--mov-control) var(--curva),
              background-color var(--mov-control) var(--curva);
}
.hero__control:hover {
  border-color: var(--lt-crema);
  background: rgba(13, 27, 42, 0.75);
}
.hero__control::before { content: "\275A\275A"; font-size: 0.75rem; letter-spacing: 1px; }
.hero__control[data-estado="pausado"]::before { content: "\25B6"; letter-spacing: 0; }

@media (max-width: 780px) {
  .hero { min-height: auto; padding-top: calc(var(--alto-cabecera) + var(--e-7)); align-items: flex-end; }
  .hero__publicos { gap: var(--e-3); }
  /* El recorte vertical ya viene centrado en María: no se reencuadra. */
  .hero__media img { object-position: center; }
  .hero__media video { object-position: 62% center; }
  .hero__velo {
    background: linear-gradient(to top,
      rgba(13, 27, 42, 0.97) 0%,
      rgba(13, 27, 42, 0.86) 34%,
      rgba(13, 27, 42, 0.35) 62%,
      rgba(13, 27, 42, 0.12) 100%);
  }
}

/* ---- Selector de recorrido (brief visual v1.1 §02) ---------------------- *
 * Dos puertas explícitas. La de organizaciones conserva la prioridad visual;
 * la de emprendedores es claramente visible, no una nota al pie.            */

.puertas {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-4);
  margin-top: var(--e-7);
}
@media (max-width: 860px) { .puertas { grid-template-columns: 1fr; } }

.puerta {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-7);
  border-radius: var(--radio-panel);
  text-decoration: none;
  border: var(--borde);
  background: var(--superficie-elevada);
  transition: transform var(--mov-control) var(--curva),
              border-color var(--mov-control) var(--curva),
              box-shadow var(--mov-control) var(--curva);
}
.puerta:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 27, 42, 0.30);
  box-shadow: var(--sombra);
}

/* La puerta principal se distingue por peso, no por color chillón */
.puerta--principal {
  background: var(--superficie-oscura);
  border-color: rgba(245, 239, 230, 0.16);
}
.puerta--principal .puerta__titulo { color: var(--texto-inverso); }
.puerta--principal .puerta__texto { color: var(--texto-inverso-suave); }
.puerta--principal .enlace-flecha { color: var(--texto-inverso); }

.puerta__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
  color: var(--texto);
}
.puerta__texto { color: var(--texto-suave); font-size: 1rem; flex-grow: 1; }
.puerta .enlace-flecha { margin-top: var(--e-3); }

/* ---- 09 · Ruta para emprendedores --------------------------------------- */

.emprendedores__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-8);
}

/* Las tarjetas viven dentro de una banda azul noche: superficie translúcida
   sobre oscuro, no crema. Además esto las diferencia de las tarjetas de los
   casos corporativos, que son crema sobre crema (brief v1.1 §09). */
.proyecto {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  background: rgba(245, 239, 230, 0.06);
  border: var(--borde-inverso);
  border-radius: var(--radio-tarjeta);
  padding: var(--e-6);
}
.banda-oscura .proyecto h3 { color: var(--texto-inverso); }

/* El estado real de cada proyecto va siempre visible (brief §09) */
.estado {
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lt-azul-noche);
  background: var(--lt-arena);
  border-radius: 999px;
  padding: 4px var(--e-3);
}

.proyecto h3 { font-size: 1.25rem; }
.proyecto__texto { font-size: 0.9375rem; color: var(--texto-inverso-suave); flex-grow: 1; }
.proyecto__demuestra {
  font-size: 0.8125rem;
  color: var(--texto-inverso-suave);
  border-top: var(--borde-inverso);
  padding-top: var(--e-3);
}
.proyecto__demuestra strong { color: var(--texto-inverso); font-weight: 600; }

/* --- Portada de la ruta de emprendedores ---------------------------------- *
 * Dos columnas en escritorio: el argumento manda, la fotografía acompaña.
 * A diferencia de las tarjetas, aquí la imagen sí puede verse entera.        */

.emp-portada {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 42vw, 560px);
  padding: var(--e-8) var(--e-7);
  border-radius: var(--radio-panel);
  overflow: hidden;
  isolation: isolate;
}

/* La fotografia ocupa todo el hero como fondo. */
.emp-portada__foto {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.emp-portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;   /* mantiene los rostros dentro del encuadre */
  filter: saturate(0.94);
}

/* Degradado horizontal: azul noche denso a la izquierda para leer el texto,
   transicion suave y borde derecho donde la imagen conserva luz y detalle. */
.emp-portada__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(13, 27, 42, 0.92) 0%,
      rgba(13, 27, 42, 0.82) 26%,
      rgba(13, 27, 42, 0.48) 50%,
      rgba(13, 27, 42, 0.16) 74%,
      rgba(13, 27, 42, 0.02) 100%),
    linear-gradient(0deg, rgba(13, 27, 42, 0.28) 0%, rgba(13, 27, 42, 0) 42%);
}

.emp-portada__texto {
  position: relative;
  z-index: 1;
  max-width: 540px;
  text-shadow: 0 1px 2px rgba(13, 27, 42, 0.45);   /* legibilidad sobre la foto */
}

/* La promesa cierra el argumento: mismo cuerpo que la entradilla, más aire. */
.emp-portada__promesa {
  margin-top: var(--e-6);
  max-width: 34ch;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--texto-inverso);
}

/* El cobre solo sobre texto grande: a cuerpo normal no alcanza el contraste
   exigido (4,26:1 sobre azul noche). Ver nota en tokens.css.                 */
.realce-cobre { color: var(--acento-linea); }

/* --- Los tres momentos, como tarjetas ------------------------------------- *
 * Misma familia visual que los pilares de Organizaciones: mismo radio, mismo
 * borde tenue. La diferencia es que aquí la foto ocupa toda la tarjeta y se
 * mantiene por debajo del texto, como textura.                                */

.rutas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-8);
}

.ruta {
  position: relative;
  display: flex;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(245, 239, 230, 0.12);
  border-radius: var(--radio-panel);
  background: #0F2233;
  transition: border-color var(--mov-revelado) var(--curva);
}

.ruta__foto, .ruta__velo { position: absolute; inset: 0; pointer-events: none; }

.ruta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(0.94);
  opacity: 0.85;
  transition: opacity var(--mov-revelado) var(--curva);
}

/* Azul noche denso: deja pasar la textura arriba y se cierra bajo el texto. */
.ruta__velo {
  background: linear-gradient(
    to bottom,
    rgba(13, 27, 42, 0.62) 0%,
    rgba(13, 27, 42, 0.86) 52%,
    rgba(13, 27, 42, 0.95) 100%
  );
}

.ruta__cuerpo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: var(--e-6);
}

.ruta__indice {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 2rem;                 /* ≥24px: el cobre está autorizado */
  line-height: 1;
  color: var(--acento-linea);
  margin-bottom: var(--e-5);
}

.ruta h3 {
  font-size: 1.5rem;
  color: var(--texto-inverso);
  margin-bottom: var(--e-3);
}

.ruta p {
  font-size: 0.9375rem;
  color: var(--texto-inverso-suave);
  max-width: 30ch;
}

@media (hover: hover) {
  .ruta:hover { border-color: rgba(185, 104, 75, 0.42); }
  .ruta:hover .ruta__foto img { opacity: 1; }   /* algo más de detalle, sin zoom */
}

/* --- Cierre de la ruta: breve y compacto, antes de continuar -------------- */

#emprendedores { padding-bottom: var(--e-7); }   /* menos vacio tras el cierre */
/* Banda editorial compacta de una linea: titulo serif + CTA en la misma franja.
   Una pausa breve entre contenidos, no otra gran seccion. En movil rompe en dos
   lineas de forma natural sin volver a crecer. */
.emp-cierre {
  margin-top: var(--e-6);
  padding: var(--e-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-4) var(--e-6);
}
.emp-cierre__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.2;
  color: var(--texto-inverso);
  max-width: 26ch;
  margin: 0;
  text-wrap: balance;
}
/* Boton solido burdeos, ancho ajustado al contenido, sin sombra ni doble linea. */
.emp-cierre__boton {
  flex: none;
  min-height: 46px;
  padding: 0 var(--e-6);
}
.emp-cierre__boton .flecha { transition: transform var(--mov-control) var(--curva); }
.emp-cierre__boton:hover .flecha { transform: translateX(3px); }

/* ---- 02b · Validacion temprana: prueba social editorial (Fase 1) ------ *
 * Franja breve de confianza: una voz real, dos proyectos y una microfrase.
 * Sin cards, estrellas ni avatares; cita en serif, logos discretos.          */

.prueba-temprana .pt-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(var(--e-5), 4vw, var(--e-8));
  align-items: start;
  margin-top: var(--e-6);
}
.pt-cita { margin: 0; }
.pt-cita__frase {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.4;
  color: var(--texto);
  margin: 0 0 var(--e-3);
}
.pt-cita__contexto {
  font-family: var(--fuente-funcional);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-enfasis);
}
.pt-proyectos,
.pt-experiencia {
  border-left: var(--borde);
  padding-left: clamp(var(--e-5), 3vw, var(--e-7));
}
.pt-rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 var(--e-4);
}
.pt-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--e-6);
  flex-wrap: wrap;
}
.pt-logos img {
  height: 30px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(1);          /* discretos: no compiten con el contenido */
  transition: opacity var(--mov-control) var(--curva),
              filter var(--mov-control) var(--curva);
}
@media (hover: hover) {
  .pt-logos img:hover { opacity: 1; filter: none; }
}
.pt-experiencia {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--texto-suave);
  margin: 0;
}

@media (max-width: 860px) {
  .prueba-temprana .pt-grid { grid-template-columns: 1fr; gap: var(--e-6); }
  .pt-proyectos,
  .pt-experiencia {
    border-left: 0;
    border-top: var(--borde);
    padding-left: 0;
    padding-top: var(--e-6);
  }
}

/* ---- 03 · Franja de confianza ------------------------------------------- */

.confianza { background: var(--superficie-hundida); }
.confianza__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-6);
}
.confianza__dato { display: flex; flex-direction: column; gap: var(--e-2); }
.confianza__dato strong {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--texto);
}
.confianza__dato span { font-size: 0.9375rem; color: var(--texto-suave); }
.confianza__nota {
  margin-top: var(--e-6);
  font-size: 0.8125rem;
  color: var(--texto-suave);
  max-width: 62ch;
}

/* ---- 04 · Punto de partida ----------------------------------------------- *
 * Composición asimétrica 60/40: el argumento a la izquierda, una pieza gráfica
 * a la derecha. La imagen es decorativa; el sentido siempre lo lleva el texto. */

/* Los conceptos son breves: el cierre de la sección no necesita el respiro
   completo de una banda larga. */
#problema { padding-bottom: var(--e-8); }

.partida {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--e-8);
  align-items: center;
}

.problema__cabecera { max-width: 20ch; margin-bottom: var(--e-5); }
.problema__texto { max-width: var(--ancho-lectura); }

/* --- Fotografia editorial ------------------------------------------------ *
 * Sustituye a la pieza grafica anterior. Sin sombra ni marco: el radio sutil
 * y el recorte hacen todo el trabajo. Entrada unica al aparecer (fundido y
 * unos pocos pixeles de desplazamiento); sin paralaje ni movimiento continuo. */

.partida__pieza {
  width: 100%;
  margin: 0;
  transition-duration: 620ms;        /* dentro del rango 500-700 ms pedido */
}

.partida__pieza img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 846;
  object-fit: cover;
  border-radius: var(--radio-panel);
}

.conceptos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-6);
  margin-top: var(--e-7);
}

.concepto { display: flex; flex-direction: column; }

.concepto__numero {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);  /* ≥24px: cobre autorizado */
  line-height: 1;
  color: var(--acento-linea);
  margin-bottom: var(--e-4);
}

.concepto__filete {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(13, 27, 42, 0.18);
  margin-bottom: var(--e-4);
  position: relative;
}
/* Un tramo de cobre sobre el filete, distinto en cada concepto */
.concepto__filete::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: var(--tramo, 28%);
  background: var(--acento-linea);
}
.concepto:nth-child(2) .concepto__filete { --tramo: 46%; }
.concepto:nth-child(3) .concepto__filete { --tramo: 68%; }

.concepto p {
  font-size: var(--t-cuerpo-grande);
  line-height: 1.4;
  color: var(--texto);
  font-family: var(--fuente-titulo);
  max-width: 22ch;
}

@media (max-width: 900px) {
  .partida { grid-template-columns: 1fr; gap: var(--e-6); }
  .emp-portada {
    align-items: flex-end;
    min-height: 440px;
    padding: var(--e-6);
  }
  .emp-portada__foto img { object-position: 34% center; }  /* prioriza los rostros */
  .emp-portada__foto::after {
    background: linear-gradient(0deg,
      rgba(13, 27, 42, 0.94) 0%,
      rgba(13, 27, 42, 0.74) 40%,
      rgba(13, 27, 42, 0.32) 68%,
      rgba(13, 27, 42, 0.08) 100%);
  }
  .emp-portada__texto { max-width: none; }
  .emp-portada h2 { font-size: 1.9rem; }
  .emp-portada__promesa { max-width: none; }
  .partida__pieza { max-width: none; }
  .partida__pieza img { aspect-ratio: 3 / 2; }   /* recorte mas apaisado en columna unica */
  .conceptos { grid-template-columns: 1fr; gap: var(--e-5); }
  .concepto { flex-direction: row; align-items: baseline; gap: var(--e-4); }
  .concepto__numero { margin-bottom: 0; flex: 0 0 auto; }
  .concepto__filete { display: none; }
  .concepto p { max-width: none; }
}

/* ---- 05 · Organizaciones: tres pilares ----------------------------------- *
 * Columnas verticales de igual altura. La fotografía es atmósfera: entra por
 * arriba y se funde en el azul noche antes de llegar al título.               */

.pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-8);
}

.pilar {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(245, 239, 230, 0.14);
  border-radius: var(--radio-panel);
  background: #0F2233;               /* apenas más claro que el azul noche */
  transition: border-color var(--mov-revelado) var(--curva);
}

/* --- Fotografía: capa secundaria ---------------------------------------- */

.pilar__foto,
.pilar__velo {
  position: absolute;
  inset: 0 0 auto;
  height: 300px;
  pointer-events: none;
}

.pilar__foto { overflow: hidden; }
.pilar__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(0.9) contrast(0.98);
  opacity: 0.95;
  transition: opacity var(--mov-revelado) var(--curva);
}

/* Degradado que apaga la imagen antes de la zona de lectura */
.pilar__velo {
  height: 302px;   /* 2px mas que la foto: evita la costura de 1px al redondear */
  background: linear-gradient(
    to bottom,
    rgba(15, 34, 51, 0.1) 0%,
    rgba(15, 34, 51, 0.24) 42%,
    rgba(15, 34, 51, 0.66) 68%,
    rgba(15, 34, 51, 0.97) 87%,
    rgba(15, 34, 51, 1) 96%
  );
}

/* --- Contenido ----------------------------------------------------------- *
 * Sin iconos: la fotografía es el único elemento visual de la tarjeta.
 * El padding superior fijo alinea el arranque del texto en los tres pilares. */

.pilar__cuerpo {
  position: relative;
  z-index: 2;
  padding: var(--e-6);
  padding-top: 268px;
  padding-bottom: var(--e-7);
}

.pilar__numero {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;                 /* 24px: el cobre queda dentro de norma */
  line-height: 1;
  color: var(--acento-linea);
  margin-bottom: var(--e-5);
}

.pilar h3 {
  font-size: 1.5rem;
  color: var(--texto-inverso);
  margin-bottom: var(--e-3);
  text-wrap: balance;
  /* Reserva dos líneas: así las descripciones arrancan a la misma altura
     aunque un título ocupe una sola. */
  min-height: 2.3em;
}

.pilar p {
  font-size: 0.9375rem;
  color: var(--texto-inverso-suave);
}

/* --- Hover: presencia, no espectáculo ------------------------------------ */

@media (hover: hover) {
  .pilar:hover { border-color: rgba(185, 104, 75, 0.5); }
  .pilar:hover .pilar__foto img { opacity: 1; }
}

@media (max-width: 980px) {
  .pilares { grid-template-columns: 1fr; gap: var(--e-4); }
  .rutas { grid-template-columns: 1fr; }
  .ruta { min-height: 260px; }
  .pilar__foto { height: 220px; }
  .pilar__velo { height: 222px; }
  .pilar__cuerpo { padding-top: 190px; padding-bottom: var(--e-6); }
  .pilar h3 { min-height: 0; }
}

/* ---- 06 · Método --------------------------------------------------------- */

.metodo__recorrido {
  margin-top: var(--e-8);
  display: grid;
  gap: 0;
}

.metodo__paso {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--e-6);
  padding-block: var(--e-6);
  border-top: 1px solid rgba(245, 239, 230, 0.16);
  align-items: baseline;
}
.metodo__paso:last-child { border-bottom: 1px solid rgba(245, 239, 230, 0.16); }

.metodo__indice {
  font-family: var(--fuente-titulo);
  font-size: 2rem;                 /* ≥24px: cobre autorizado */
  color: var(--acento-linea);
  line-height: 1;
}
.metodo__paso h3 { color: var(--texto-inverso); margin-bottom: var(--e-2); }
.metodo__paso p { color: var(--texto-inverso-suave); max-width: 58ch; }

@media (max-width: 640px) {
  .metodo__paso { grid-template-columns: 1fr; gap: var(--e-2); }
}

/* ---- 09 · Creaciones ----------------------------------------------------- */

.creaciones__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-7);
}
.creacion {
  border-top: 2px solid var(--lt-arena);
  padding-top: var(--e-4);
}
.creacion h3 { font-size: 1.25rem; margin-bottom: var(--e-2); }
.creacion p { font-size: 0.9375rem; color: var(--texto-suave); }

/* ---- 08 · Sobre María ---------------------------------------------------- */

.sobre {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-8);
  align-items: start;
}
.sobre__retrato img {
  width: 100%;
  border-radius: var(--radio-panel);
  border: var(--borde);
}
.sobre__pie {
  margin-top: var(--e-3);
  font-size: 0.75rem;
  color: var(--texto-suave);
}
.sobre__texto { max-width: var(--ancho-lectura); }

@media (max-width: 860px) {
  .sobre { grid-template-columns: 1fr; gap: var(--e-6); }
}

/* ---- 10 · Contacto ------------------------------------------------------- */

.contacto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e-8);
  align-items: start;
}
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; gap: var(--e-6); } }

.formulario { display: grid; gap: var(--e-4); }

/* Pregunta de recorrido antes del formulario (brief v1.1 §11) */
.ruta { border: 0; margin: 0 0 var(--e-2); padding: 0; }
.ruta legend {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
  padding: 0;
  margin-bottom: var(--e-3);
}
.ruta__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-3); }
.ruta__opcion {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  border: 1px solid rgba(245, 239, 230, 0.28);
  border-radius: var(--radio-boton);
  padding: var(--e-3) var(--e-4);
  min-height: 48px;
  cursor: pointer;
  color: var(--texto-inverso);
  font-size: 0.9375rem;
  transition: border-color var(--mov-control) var(--curva),
              background-color var(--mov-control) var(--curva);
}
.ruta__opcion:hover { border-color: rgba(245, 239, 230, 0.55); }
.ruta__opcion input { accent-color: var(--lt-cobre); width: 18px; height: 18px; margin: 0; }
/* El estado elegido se marca con borde y fondo, no solo con el radio */
.ruta__opcion:has(input:checked) {
  border-color: var(--lt-arena);
  background: rgba(245, 239, 230, 0.10);
}

.campo { display: grid; gap: var(--e-2); }
/* Campo oculto por ruta (organización). El [hidden] de UA no basta sobre display:grid. */
.campo[hidden] { display: none; }
.campo label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
}
.campo input,
.campo textarea,
.campo select {
  font-family: var(--fuente-funcional);
  font-size: 1rem;
  color: var(--texto-inverso);
  background: rgba(245, 239, 230, 0.06);
  border: 1px solid rgba(245, 239, 230, 0.28);
  border-radius: var(--radio-boton);
  padding: var(--e-3) var(--e-4);
  min-height: 48px;                 /* área táctil suficiente */
  transition: border-color var(--mov-control) var(--curva),
              background-color var(--mov-control) var(--curva);
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:hover,
.campo textarea:hover,
.campo select:hover { border-color: rgba(245, 239, 230, 0.5); }
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(245, 239, 230, 0.55); }

.campo select option { color: var(--texto); background: var(--lt-crema); }

.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-2);
}

.formulario__aviso {
  font-size: 0.875rem;
  color: var(--texto-inverso-suave);
  border-left: 2px solid var(--acento-linea);
  padding-left: var(--e-4);
}
.formulario__aviso[hidden] { display: none; }

/* Privacidad + fallback del formulario → WhatsApp (Fase 4 §5/§6). Banda oscura. */
.formulario__privacidad {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--texto-inverso-suave);
  max-width: 54ch;
}
.formulario__legal-pendiente { display: block; margin-top: var(--e-2); opacity: 0.75; font-style: italic; }
.formulario__directo {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--texto-inverso-suave);
}
.formulario__directo a {
  color: var(--texto-inverso);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Índice de secciones (ancla) ---------------------------------------- */

.seccion[id] { scroll-margin-top: calc(var(--alto-cabecera) + var(--e-4)); }

/* ==========================================================================
   Densidad y experiencia — menos texto a la vista, más recorrido
   ========================================================================== */

/* Las tarjetas muestran una entrada, no el resumen completo. El texto sigue
   en el DOM para lectores de pantalla y buscadores. */
.tarjeta-caso__resumen {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.proyecto__texto {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.proyecto[data-abierto] .proyecto__texto { -webkit-line-clamp: unset; overflow: visible; }

.leer-mas {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--fuente-funcional);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texto-inverso);
  cursor: pointer;
  border-bottom: 1px solid var(--acento-linea);
  transition: border-color var(--mov-control) var(--curva);
}
.leer-mas:hover { border-color: var(--lt-crema); }

/* Fila de acciones de una tarjeta de proyecto: "Leer mas" (accion principal)
   junto a "Visitar sitio" (secundaria, mas discreta). Envuelve si no cabe. */
.proyecto__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
}

/* Enlace externo: sin relleno, cobre suave, con flecha diagonal. */
.enlace-externo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;                /* area tactil, coherente con el resto */
  font-family: var(--fuente-funcional);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--texto-inverso-suave);
  text-decoration: none;
  transition: color var(--mov-control) var(--curva);
}
.enlace-externo span { transition: transform var(--mov-control) var(--curva); }
.enlace-externo:hover { color: var(--acento-linea); }
.enlace-externo:hover span { transform: translate(2px, -2px); }

/* ---- Indicación de descenso en el hero ---------------------------------- */

.hero__descender {
  position: absolute;
  left: 50%;
  bottom: var(--e-5);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-inverso-suave);
  text-decoration: none;
}
.hero__descender::after {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--lt-cobre), transparent);
  animation: descender 2.4s var(--curva) infinite;
  transform-origin: top;
}
@keyframes descender {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (max-width: 780px) { .hero__descender { display: none; } }

/* ---- Método: el recorrido se dibuja al bajar ---------------------------- */

.metodo__recorrido { position: relative; padding-left: var(--e-6); }
.metodo__recorrido::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(245, 239, 230, 0.14);
}
/* Línea de cobre que crece con el avance del scroll */
.metodo__recorrido::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: calc(var(--avance, 0) * 100%);
  background: var(--lt-cobre);
  transition: height 120ms linear;
}

.metodo__paso { position: relative; }
.metodo__paso::before {
  content: "";
  position: absolute;
  left: calc(var(--e-6) * -1 - 5px);
  top: calc(var(--e-6) + 10px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--superficie-oscura);
  border: 2px solid rgba(245, 239, 230, 0.28);
  transition: border-color var(--mov-control) var(--curva),
              background-color var(--mov-control) var(--curva);
}
.metodo__paso.es-visible::before {
  border-color: var(--lt-cobre);
  background: var(--lt-cobre);
}

@media (max-width: 640px) {
  .metodo__recorrido { padding-left: var(--e-5); }
  .metodo__paso::before { left: calc(var(--e-5) * -1 - 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__descender::after { animation: none; }
  .metodo__recorrido::after { height: 100%; }
}

/* ---- Línea de tiempo de la trayectoria ---------------------------------- */

.hitos { position: relative; padding-left: var(--e-6); }
.hitos::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--lt-arena);
}
.hito { position: relative; padding-bottom: var(--e-6); }
.hito:last-child { padding-bottom: 0; }
.hito::before {
  content: "";
  position: absolute;
  left: calc(var(--e-6) * -1);
  top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--superficie-hundida);
  border: 2px solid var(--acento-linea);
}
.hito__periodo {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-enfasis);
  margin-bottom: var(--e-1);
}
.hito h3 { font-size: 1.25rem; margin-bottom: var(--e-2); }
.hito p { font-size: 0.9375rem; color: var(--texto-suave); }

/* ---- Desplegable de texto largo ----------------------------------------- */

.desplegable { margin-top: var(--e-6); }
.desplegable summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texto-enfasis);
  border-bottom: 1px solid var(--acento-linea);
  padding-bottom: 2px;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.desplegable[open] summary::after { content: "\2013"; }
.desplegable__cuerpo { margin-top: var(--e-5); }
.desplegable__cuerpo p + p { margin-top: var(--e-4); }

/* Texto de ayuda bajo un campo del formulario */
.campo__ayuda {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--texto-inverso-suave);
}


/* ---- 08 · Casos: dos historias en evolución --------------------------- *
 * Dos tarjetas editoriales sobre superficie clara. El logo de cada marca da
 * identidad; el detalle largo vive en un panel que se abre con “Leer más”.
 * Sin JS los paneles quedan visibles en linea (ver bloque .no-js).           */

.casos {
  display: flex;
  gap: var(--e-5);
  margin-top: var(--e-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-bottom: var(--e-2);
}
.casos::-webkit-scrollbar { display: none; }
.casos > li {
  flex: 0 0 clamp(300px, 44%, 460px);   /* ~2 tarjetas + asomo (desktop); 1 (movil) */
  scroll-snap-align: start;
  display: flex;
}
.casos > li > .caso { width: 100%; height: 100%; }

.caso {
  --caso-acento: var(--lt-cobre);          /* PeakLab: mas fresco y energetico */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  width: 100%;
  min-height: 320px;                       /* dentro del rango 320-400 px */
  padding: var(--e-5) var(--e-6);
  background: var(--superficie-elevada);
  border: var(--borde);
  border-top: 3px solid var(--caso-acento);
  border-radius: var(--radio-tarjeta);
  transition: transform var(--mov-revelado) var(--curva),
              border-color var(--mov-control) var(--curva),
              box-shadow var(--mov-revelado) var(--curva);
}
.caso--crisalia { --caso-acento: var(--lt-borgona); }   /* mas calido y artesanal */

/* Zona del logo real de cada marca, arriba a la izquierda. */
.caso__marca { display: inline-flex; align-items: center; margin: 0 0 var(--e-2); }
.caso__marca img { display: block; width: auto; }
.caso__marca--placa img { height: 40px; border-radius: 8px; }
.caso__marca--disco img {
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.08);   /* separa el disco crema del panel */
}

.caso .estado { align-self: flex-start; }

.caso__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  color: var(--texto);
  margin: 0;
}
.caso__bajada {
  font-family: var(--fuente-titulo);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--texto-enfasis);
  margin: 0;
}
.caso__texto {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--texto-suave);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.caso__acciones {
  margin-top: auto;                        /* empuja las acciones al pie: alturas parejas */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  padding-top: var(--e-4);
}

/* Los CTA de cada caso son botones (.boton .boton--*). Aqui solo el cursor. */
.caso__leermas { cursor: pointer; }

/* El enlace externo hereda su forma de .enlace-externo; aqui solo el color
   para superficie clara (el valor base es para bandas oscuras). */
.caso .enlace-externo { color: var(--texto-suave); }
.caso .enlace-externo:hover { color: var(--acento-linea); }

@media (hover: hover) {
  .caso:hover {
    transform: translateY(-3px);
    border-color: rgba(13, 27, 42, 0.2);
    box-shadow: var(--sombra);
  }
}

@media (max-width: 780px) {
  .casos > li { flex: 0 0 88%; }   /* una tarjeta por vez en movil */
  .caso { min-height: 0; }
}

/* ---- Panel editorial del caso ------------------------------------------- */

.caso-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: var(--e-7) var(--e-5);
  overflow-y: auto;
}
.caso-modal[hidden] { display: none; }   /* gana al display:flex de arriba */

.caso-modal__fondo {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.caso-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: auto;
  background: var(--superficie-elevada);
  border-radius: var(--radio-panel);
  padding: clamp(var(--e-6), 4vw, var(--e-8));
  box-shadow: var(--sombra-elevada);
}

.caso-modal__cerrar {
  position: absolute;
  top: var(--e-4);
  right: var(--e-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--texto-suave);
  border-radius: 999px;
  transition: background var(--mov-control) var(--curva),
              color var(--mov-control) var(--curva);
}
.caso-modal__cerrar:hover { background: rgba(13, 27, 42, 0.06); color: var(--texto); }

.caso-modal__cabecera {
  margin-bottom: var(--e-6);
  padding-right: var(--e-7);          /* deja aire para el boton de cerrar */
}
.caso-modal__logo { display: block; width: auto; margin: 0 0 var(--e-4); }
.caso-modal__logo--placa { height: 52px; border-radius: 8px; }
.caso-modal__logo--disco {
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.08);
}
.caso-modal__cabecera .estado { display: inline-block; margin-bottom: var(--e-3); }
.caso-modal__cabecera h2 { margin: var(--e-2) 0 0; }

.caso-historia { max-width: 60ch; }
.caso-historia h3 {
  font-family: var(--fuente-funcional);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento-linea);
  margin: var(--e-6) 0 var(--e-2);
}
.caso-historia p {
  color: var(--texto-suave);
  line-height: 1.6;
  margin: 0 0 var(--e-4);
}
.caso-historia ul { margin: 0 0 var(--e-4); padding: 0; list-style: none; }
.caso-historia li {
  position: relative;
  padding-left: var(--e-5);
  margin-bottom: var(--e-2);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}
.caso-historia li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento-linea);
}
.caso-historia__destacado {
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--texto-enfasis);
  border-left: 3px solid var(--acento-linea);
  padding-left: var(--e-4);
  margin: var(--e-5) 0;
}
.caso-modal__panel .boton { margin-top: var(--e-6); }

body[data-modal-abierto] { overflow: hidden; }

/* Sin JavaScript: el panel se muestra en linea, como contenido normal. */
.no-js .caso-modal { position: static; display: block; padding: 0; overflow: visible; }
.no-js .caso-modal[hidden] { display: block; }
.no-js .caso-modal__fondo,
.no-js .caso-modal__cerrar { display: none; }
.no-js .caso-modal__panel {
  max-width: var(--ancho-lectura);
  margin: var(--e-6) 0 0;
  box-shadow: none;
}
.no-js .caso__leermas { display: none; }

@media (prefers-reduced-motion: reduce) {
  .caso, .caso__leermas .flecha { transition: none; }
}


/* ---- Casos: ampliacion a cinco (chips, recursos, tarjeta ancha) --------- *
 * Tres categorias en un mismo sistema: la diferencia es de relleno/borde,
 * nunca de color fuerte. El acento (borde superior) distingue cada familia.  */

/* Acentos por familia (borde superior de la tarjeta) */
.caso--emprendedores { --caso-acento: var(--lt-cobre); }
.caso--mujeres { --caso-acento: var(--lt-borgona); }
.caso--20grados { --caso-acento: var(--lt-azul-noche); }

/* Chips: EN EVOLUCION rellena; ACOMPANAMIENTO y COLABORACION con contorno.
   Mismo tamano, forma y color de texto: un solo sistema.                    */
.estado--acompanamiento,
.estado--colaboracion {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--lt-arena);
}
.estado--colaboracion { box-shadow: inset 0 0 0 1px rgba(13, 27, 42, 0.32); }

/* Recurso editorial minimo para las tarjetas sin logo: una linea de acento,
   en el mismo lugar que ocupa el logo. Sin iconos ni marcas inventadas.      */
.caso__marca--linea {
  display: block;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--caso-acento);
  margin: var(--e-2) 0 var(--e-4);
}

/* Logo de 20 Grados sobre placa blanca (el original es azul sobre blanco). */
.caso__marca--placa-blanca {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.08);
}
.caso__marca--placa-blanca img {
  display: block;
  max-height: 46px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;   /* conserva proporcion; nunca se estira */
}

/* Tarjeta ancha de cierre (20 Grados): cruza las dos columnas y se ordena en
   horizontal. Cierra la seccion como una colaboracion, no como un cliente.   */
/* 20 Grados: en el carrusel es una tarjeta vertical mas, como las demas. */
.caso--ancho {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.caso--ancho .caso__col-marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}
.caso--ancho .caso__col-texto { display: flex; flex-direction: column; flex-grow: 1; gap: var(--e-3); }
.caso--ancho .caso__acciones { margin-top: auto; padding-top: var(--e-4); }
.caso--ancho .caso__col-marca .estado { margin: 0; }

/* Kicker tipografico en las cabeceras de modal sin logo (se reutiliza el
   nombre del caso como pequena marca de texto).                              */
.caso-modal__marca {
  margin: 0 0 var(--e-3);
  font-family: var(--fuente-funcional);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-linea);
}


/* ---- Casos: controles del carrusel (todas las pantallas) --------------- *
 * El carrusel funciona en desktop y en movil. Los controles (flechas + dots)
 * son discretos y coherentes con Luna Terra. El autoplay vive en sitio.js.    */

.casos-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  margin-top: var(--e-6);
}
.casos-flecha {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--lt-azul-noche);
  opacity: 0.55;
  transition: opacity var(--mov-control) var(--curva);
}
.casos-flecha:hover { opacity: 1; }
.casos-dots { display: flex; align-items: center; gap: 8px; }
.casos-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(13, 27, 42, 0.22);
  cursor: pointer;
  transition: background var(--mov-control) var(--curva),
              width var(--mov-control) var(--curva);
}
.casos-dot[aria-current="true"] {
  width: 22px;
  background: var(--lt-cobre);         /* activo: alargado en cobre */
}

@media (prefers-reduced-motion: reduce) {
  .casos { scroll-behavior: auto; }
}


/* ---- 06 · Metodo: cinta editorial continua ----------------------------- *
 * Cinco etapas en cinta horizontal que avanza sola, lenta y sobria (mas
 * calmada que Testimonios). El numero y el nombre mandan; la frase es breve.
 * El orden 01->05 se conserva siempre (los clones repiten la misma secuencia).
 * overflow-x permite arrastre/swipe manual; el avance se pausa con hover, foco
 * y al tocar. La imagen es atmosfera estatica (poster); no se reproducen videos
 * dentro de la cinta. Comparte la logica de Testimonios, no su diseno. Ver
 * sitio.js (cintaContinua).                                                    */

.metodo-marquee {
  margin-top: var(--e-8);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--e-1);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.metodo-marquee::-webkit-scrollbar { display: none; }
.metodo-marquee:focus-visible { outline: 2px solid var(--acento-linea); outline-offset: 4px; }

.metodo-pista {
  display: flex;
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etapa-card {
  flex: 0 0 clamp(240px, 66vw, 380px);   /* ~3 desktop · ~2 tablet · ~1,15 movil (asoma la siguiente) */
  margin-inline-end: var(--e-5);
  position: relative;
  min-height: clamp(320px, 30vw, 380px);
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(245, 239, 230, 0.12);
  border-radius: var(--radio-panel);
  isolation: isolate;
}

.etapa-card__fondo { position: absolute; inset: 0; z-index: 0; }
.etapa-card__fondo video,
.etapa-card__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* encuadre estable; no recorta rostros centrales */
  object-position: center 42%;
}

/* Velo azul noche: denso abajo (donde va el texto), aclara hacia arriba. */
.etapa-card__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(13, 27, 42, 0.94) 0%,
      rgba(13, 27, 42, 0.80) 30%,
      rgba(13, 27, 42, 0.42) 58%,
      rgba(13, 27, 42, 0.14) 82%,
      rgba(13, 27, 42, 0.04) 100%);
}

.etapa-card__cuerpo {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  padding: var(--e-6);
}
/* Numero + nombre mandan (Sistema 1): reconocibles en <5s sin leer la frase. */
.etapa-card__num {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  line-height: 1;
  color: var(--acento-linea);
  margin-bottom: var(--e-2);
}
.etapa-card__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
  line-height: 1.05;
  color: var(--texto-inverso);
  margin: 0 0 var(--e-3);
  text-shadow: 0 1px 4px rgba(13, 27, 42, 0.55);
}
.etapa-card__frase {
  font-family: var(--fuente-funcional);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--texto-inverso-suave);
  margin: 0;
  max-width: 32ch;
  text-wrap: pretty;
}

/* Reduced motion: sin avance (sin clones); scroll manual con imantado suave. */
@media (prefers-reduced-motion: reduce) {
  .metodo-marquee { scroll-snap-type: x proximity; }
  .etapa-card { scroll-snap-align: start; }
  .etapa-card[data-clon] { display: none; }
}
.no-js .etapa-card[data-clon] { display: none; }


/* ---- Sobre Maria: retrato + trayectoria editorial ----------------------- */

.sobre__retrato .sobre__foto {
  display: block;
  width: min(300px, 78%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0;
  border-radius: 50%;
  margin: 0 0 var(--e-7);
}

/* Contenido desplegado: bloques editoriales, no un CV corrido. */
.trayectoria p + p { margin-top: 0; }
.tray__intro { margin-bottom: var(--e-7); }
.tray__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--texto);
  margin: 0 0 var(--e-2);
}
.tray__rol {
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--texto-enfasis);
  margin: 0 0 var(--e-3);
}
.tray__bajada {
  font-family: var(--fuente-titulo);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--texto-suave);
  max-width: 48ch;
  margin: 0;
}

.tray__bloques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-7);
}
.tray__cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-family: var(--fuente-titulo);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--texto);
  margin: 0 0 var(--e-1);
}
.tray__num { font-size: 1rem; color: var(--acento-linea); }
.tray__anios {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-enfasis);
  margin: 0 0 var(--e-3);
}
.tray__bloque p:not(.tray__cabeza):not(.tray__anios) {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0 0 var(--e-3);
  max-width: 62ch;
}
.tray__bloque p:last-child { margin-bottom: 0; }

.tray__cierre {
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--texto-enfasis);
  border-left: 3px solid var(--acento-linea);
  padding-left: var(--e-4);
  margin: var(--e-7) 0;
  max-width: 48ch;
}

.tray__formacion {
  margin-top: var(--e-7);
  border-top: var(--borde);
  padding-top: var(--e-6);
}
.tray__seccion {
  display: block;
  font-family: var(--fuente-funcional);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-enfasis);
  margin: 0 0 var(--e-3);
}
.tray__seccion--sub { margin-top: var(--e-6); }
.tray__grados {
  list-style: none;
  margin: 0 0 var(--e-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-4);
}
.tray__grado {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.0625rem;
  color: var(--texto);
}
.tray__inst {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texto-suave);
  margin-top: 2px;
}
.tray__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.tray__tags li {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  border: var(--borde);
  border-radius: 999px;
  padding: 4px var(--e-3);
}

@media (max-width: 860px) {
  .sobre__retrato .sobre__foto { width: min(220px, 60%); margin-inline: 0; }
}


/* ---- 11 · Laboratorio Luna Terra: portfolio editorial ------------------ *
 * Tres apps juntas (imagen arriba, texto abajo) y, debajo, dos marcas
 * simetricas. CTAs como botones. Sin collage ni fondos distintos.            */

.lab { margin-top: var(--e-8); }

/* --- Bloque 1: las tres apps, en fila, misma logica vertical ------------- */
.lab-digitales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--e-5), 3vw, var(--e-7));
  align-items: stretch;
}
.lab-obra { display: flex; flex-direction: column; }
.lab-obra__visual {
  display: flex;
  justify-content: center;
  margin-bottom: var(--e-5);
}
.lab-captura {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 460px;
  border-radius: 22px;
  border: 1px solid rgba(13, 27, 42, 0.08);
  box-shadow: var(--sombra);
}
.lab-obra__texto { display: flex; flex-direction: column; flex: 1; }

/* --- Texto de cada pieza ------------------------------------------------- */
.lab-obra__meta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-enfasis);      /* label pequeno en burdeos */
  margin: 0 0 var(--e-3);
}
.lab-obra .estado { display: inline-block; margin-bottom: var(--e-3); }
.lab-obra__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.15;
  color: var(--texto);
  margin: 0 0 var(--e-4);
}
.lab-obra__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--texto-suave);
  margin: 0 0 var(--e-5);
}
/* El boton se ancla al pie para que las tres tarjetas queden parejas. */
.lab-obra .boton { align-self: flex-start; margin-top: auto; }
.ig-icono { flex: 0 0 auto; }

/* Microcapa estrategica: "que estamos explorando aqui" (Fase 2). */
.lab-explora {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--texto-suave);
  margin: 0 0 var(--e-4);
}
.lab-explora__rotulo {
  display: block;
  font-family: var(--fuente-funcional);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-linea);
  margin-bottom: 3px;
}

/* Puente editorial que conecta proyectos digitales y marcas. */
.lab-cierre {
  margin: var(--e-9) auto 0;
  max-width: 54ch;
  padding-top: var(--e-7);
  border-top: var(--borde);
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.4;
  color: var(--texto);
}

/* --- Separador editorial entre bloques ----------------------------------- */
.lab-marcas-intro {
  margin-top: var(--e-9);
  padding-top: var(--e-8);
  border-top: var(--borde);
  text-align: center;
}
.lab-marcas-intro__texto {
  font-size: 0.9375rem;
  color: var(--texto-suave);
  max-width: 46ch;
  margin: var(--e-4) auto 0;
}

/* --- Bloque 2: dos marcas simetricas, mismo peso, fondo crema ------------ */
.lab-marcas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--e-6), 5vw, var(--e-9));
  margin-top: var(--e-8);
}
.lab-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lab-marca .lab-obra__desc { max-width: 40ch; }
.lab-marca .boton { align-self: center; margin-top: var(--e-2); }
.lab-marca__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150px;
  margin-bottom: var(--e-5);
}
.lab-logo {
  max-width: 78%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- Interacciones muy sutiles ------------------------------------------- */
@media (hover: hover) {
  .lab-captura, .lab-logo { transition: transform var(--mov-revelado) var(--curva); }
  .lab-obra:hover .lab-captura { transform: translateY(-5px); }
  .lab-marca:hover .lab-logo { transform: scale(1.03); }
}

/* --- Imagen protagonista dentro del modal -------------------------------- */
.lab-modal__hero { margin: 0 0 var(--e-6); display: flex; justify-content: center; }
.lab-modal__hero img {
  height: auto; width: auto;
  max-width: 100%;
  max-height: 420px;
  border-radius: 22px;
  box-shadow: var(--sombra);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .lab-digitales { grid-template-columns: 1fr; gap: var(--e-8); }
  .lab-obra .boton { margin-top: var(--e-3); }   /* una columna: sin hueco bajo el texto */
  .lab-obra__desc { max-width: 52ch; }
  .lab-marcas { grid-template-columns: 1fr; gap: var(--e-8); }
  .lab-marcas-intro { margin-top: var(--e-8); padding-top: var(--e-7); }
}

/* ---- Sobre Maria: reorganizacion vertical ------------------------------- *
 * Quien es -> sintesis (timeline) -> profundidad (trayectoria) -> Luna Terra
 * -> formacion. Nunca dos columnas largas donde una quede vacia.            */

.sobre-intro {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--e-8);
  align-items: center;
}
.sobre-intro__foto { margin: 0; display: flex; justify-content: center; }
.sobre-intro__foto .sobre__foto {
  display: block;
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0;
  border-radius: 50%;
}
.sobre-intro__rol {
  margin: var(--e-4) 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--texto-enfasis);
}
.sobre-vermas {
  margin-top: var(--e-5);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0 0 2px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--fuente-funcional);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texto-enfasis);
  border-bottom: 1px solid var(--acento-linea);
}
.sobre-vermas::after { content: "+"; font-size: 1rem; line-height: 1; }
.sobre-vermas[aria-expanded="true"]::after { content: "\2013"; }

/* Capa 1 - la mirada: frase rectora con protagonismo editorial (Fase 2). */
.sobre-intro__mirada {
  font-size: clamp(1.5rem, 1.2rem + 1.35vw, 2.125rem);
  line-height: 1.25;
  margin-bottom: var(--e-4);
  text-wrap: balance;
}

/* Capa 2 - forma de trabajar. */
.sobre-capa { margin-top: var(--e-9); max-width: 62ch; }
.sobre-capa__rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-linea);
  margin: 0 0 var(--e-4);
}
.sobre-capa__frase {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  line-height: 1.3;
  color: var(--texto);
  margin: 0 0 var(--e-5);
  text-wrap: pretty;
}
.sobre-capa__texto { font-size: 1rem; line-height: 1.65; color: var(--texto-suave); margin: 0; }

/* Capa 3 - experiencia agrupada por capacidades. */
.sobre-capacidades { margin-top: var(--e-9); }
.sobre-capacidades__lista {
  list-style: none;
  margin: var(--e-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--e-6), 4vw, var(--e-7));
}
.sobre-capacidades__lista li { border-top: var(--borde); padding-top: var(--e-4); }
.sobre-capacidades__lista h3 {
  font-family: var(--fuente-titulo);
  font-size: 1.1875rem;
  color: var(--texto);
  margin: 0 0 var(--e-3);
}
.sobre-capacidades__lista p { font-size: 0.9375rem; line-height: 1.6; color: var(--texto-suave); margin: 0; }
.sobre-capacidades .sobre-vermas { margin-top: var(--e-7); }

@media (max-width: 860px) {
  .sobre-capacidades__lista { grid-template-columns: 1fr; gap: var(--e-5); }
}

/* Evidencia breve dentro de Sobre María (Fase Final §3/§11): reutiliza la
   tipografía de .confianza__dato (serif en la cifra). La autoridad cierra la
   sección, después de la mirada, la forma de trabajar y las capacidades — nunca
   al comienzo de la página. La grilla la aporta .confianza__lista. */
.sobre-evidencia {
  margin-top: var(--e-9);
  border-top: var(--borde);
  padding-top: var(--e-7);
}

/* Timeline horizontal: linea editorial con tres nodos */
.sobre-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-6);
  margin-top: var(--e-9);
  padding: 0;
  list-style: none;
}
.sobre-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px; right: 7px;
  height: 2px;
  background: var(--lt-arena);
}
.sobre-etapa { position: relative; padding-top: var(--e-6); }
.sobre-etapa::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--superficie-hundida);
  border: 2px solid var(--acento-linea);
}
.sobre-etapa__anio {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-enfasis);
  margin-bottom: var(--e-2);
}
.sobre-etapa h3 { font-size: 1.25rem; margin: 0 0 var(--e-2); }
.sobre-etapa p { font-size: 0.9375rem; line-height: 1.55; color: var(--texto-suave); margin: 0; }

/* Trayectoria completa: ancho completo, articulo legible */
.trayectoria-completa {
  margin-top: var(--e-8);
  border-top: var(--borde);
  padding-top: var(--e-8);
}
.trayectoria-completa[hidden] { display: none; }
.trayectoria-completa .tray__bloques,
.sobre-lunaterra__texto,
.trayectoria-completa .tray__cierre { max-width: 68ch; }

/* Cierre editorial de Luna Terra: separacion mayor y tratamiento propio */
.sobre-lunaterra { margin-top: var(--e-9); }
.sobre-lunaterra__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1.05;
  color: var(--texto);
  margin: var(--e-2) 0 var(--e-1);
}
.sobre-lunaterra__sub {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-enfasis);
  margin: 0 0 var(--e-5);
}
.sobre-lunaterra__texto p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto-suave);
  margin: 0 0 var(--e-4);
}

/* Sin JavaScript: la trayectoria queda visible y el boton se oculta. */
.no-js .trayectoria-completa[hidden] { display: block; }
.no-js .sobre-vermas { display: none; }

@media (max-width: 860px) {
  .sobre-intro { grid-template-columns: 1fr; gap: var(--e-6); text-align: left; }
  .sobre-intro__foto { justify-content: flex-start; }
  .sobre-intro__foto .sobre__foto { width: min(220px, 60%); }
  .sobre-timeline { grid-template-columns: 1fr; gap: var(--e-7); margin-top: var(--e-8); }
  .sobre-timeline::before { display: none; }
}


/* ---- 09b · Lo que dicen: carrusel continuo de testimonios ------------ *
 * Sobre azul noche. Seis testimonios en una cinta horizontal que avanza sola,
 * lenta y continua (~40s por tanda). El JS duplica los seis para un loop
 * infinito imperceptible y permite arrastre manual; se pausa con hover, foco o
 * al tocar. Con prefers-reduced-motion no hay avance: tarjetas estaticas con
 * scroll manual. Sin flechas ni puntos, sin sombras fuertes ni glassmorphism.  */

.testi-seccion { padding-block: var(--e-8); }   /* seccion mas baja que antes */
.testi-seccion .contenedor { margin-bottom: 0; }

.testi-marquee {
  margin-top: var(--e-7);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--e-1);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.testi-marquee::-webkit-scrollbar { display: none; }
.testi-marquee:active { cursor: grabbing; }

.testi-pista {
  display: flex;
  align-items: flex-start;          /* alturas naturales: pequenas diferencias */
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.testi-card {
  /* escritorio ~2,7 tarjetas · tablet ~2 · movil ~1,15 (asoma la siguiente) */
  flex: 0 0 clamp(260px, 44vw, 400px);
  margin-inline-end: var(--e-5);    /* margen (no gap): loop exacto en el JS */
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-height: 260px;
  padding: var(--e-7) var(--e-6);
  background: #14273D;              /* azul apenas mas claro que el fondo */
  border: 1px solid rgba(185, 104, 75, 0.20);   /* cobre extremadamente sutil */
  border-radius: var(--radio-panel);            /* esquinas moderadas (18px) */
}

.testi-card__comilla {
  font-family: var(--fuente-titulo);
  font-size: 3.25rem;
  line-height: 0.5;
  height: 0.5em;
  color: var(--acento-linea);
  margin: 0;
}
.testi-card__frase {
  margin: 0;
  flex-grow: 1;
  font-family: var(--fuente-titulo);            /* serif editorial crema */
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--texto-inverso);
  text-wrap: pretty;
}
.testi-card__meta { margin: 0; }
.testi-card__cat {
  display: block;
  font-family: var(--fuente-funcional);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-linea);                   /* categoria en cobre */
}
.testi-card__desc {
  display: block;
  margin-top: 3px;
  font-family: var(--fuente-funcional);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--texto-inverso-suave);            /* segunda linea, crema tenue */
}

/* Reduced motion / sin JS: no hay clones ni avance; scroll manual con snap. */
@media (prefers-reduced-motion: reduce) {
  .testi-marquee { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .testi-card { scroll-snap-align: start; }
  .testi-card[data-clon] { display: none; }
}
.no-js .testi-card[data-clon] { display: none; }


/* ---- 07b · Diagnóstico interactivo (Fase 3) ------------------------- *
 * Pieza editorial interactiva, no card SaaS. Superficie crema, lineas finas,
 * preguntas en serif, controles Montserrat, cobre como acento y borgoña en
 * la accion principal. Una pregunta por vez; radios reales (accesibles).      */

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

.diag { background: var(--superficie); }
.diag-panel { max-width: 640px; }

/* Intro en composicion 55/45: valor + accion a la izquierda; anticipacion del
   resultado (marcada como EJEMPLO) a la derecha, para que el espacio trabaje y
   nazca curiosidad. Sigue siendo compacta: no crece de alto. */
.diag-intro {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(var(--e-6), 4vw, var(--e-9));
  align-items: center;
}
.diag-intro__texto { max-width: 44ch; }
.diag-intro .entradilla { margin-top: var(--e-5); }
.diag-apoyo { margin: var(--e-4) 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--texto-suave); }
.diag-micro { margin: var(--e-4) 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--texto-suave); }
.diag-comenzar { margin-top: var(--e-6); }

/* Preview editorial del resultado: mini-tarjeta azul noche, etapa real en cobre,
   marcada dos veces como ejemplo (rotulo + nota). No es un resultado nuevo. */
.diag-preview__rotulo {
  font-family: var(--fuente-funcional);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 var(--e-3);
}
.diag-preview__tarjeta {
  background: var(--superficie-oscura);
  border: 1px solid rgba(185, 104, 75, 0.28);
  border-radius: var(--radio-panel);
  padding: var(--e-7) var(--e-6);
}
.diag-preview__label {
  font-family: var(--fuente-funcional);
  font-size: 0.8125rem;
  color: var(--texto-inverso-suave);
  margin: 0 0 var(--e-2);
}
.diag-preview__etapa {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  line-height: 1.05;
  color: var(--acento-linea);
  margin: 0;
}
.diag-preview__nota {
  margin: var(--e-5) 0 0;
  padding-top: var(--e-4);
  border-top: 1px solid rgba(245, 239, 230, 0.14);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--texto-inverso-suave);
}

@media (max-width: 860px) {
  .diag-intro {
    grid-template-columns: 1fr;
    gap: var(--e-7);
  }
  .diag-intro__texto { max-width: none; }
  .diag-preview__tarjeta { padding: var(--e-6) var(--e-5); }
}

/* Cabecera: numeracion + linea de progreso discreta */
.diag-cabecera { margin-bottom: var(--e-7); }
.diag-progreso {
  font-family: var(--fuente-funcional);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--texto-suave);
  margin: 0 0 var(--e-3);
}
.diag-barra {
  height: 2px;
  background: rgba(13, 27, 42, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.diag-barra span {
  display: block;
  height: 100%;
  background: var(--acento-linea);
  transition: width var(--mov-revelado) var(--curva);
}

/* Pregunta (fieldset sin marco) */
.diag-pregunta { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.diag-pregunta:focus { outline: none; }
.diag-pregunta__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  line-height: 1.25;
  color: var(--texto);
  padding: 0;
  margin: 0 0 var(--e-6);
}

/* Opciones: filas seleccionables con borde (no depende solo del color) */
.diag-opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  min-height: 44px;
  padding: var(--e-3) var(--e-4);
  border: var(--borde);
  border-radius: var(--radio-tarjeta);
  cursor: pointer;
  margin-bottom: var(--e-3);
  transition: border-color var(--mov-control) var(--curva),
              background-color var(--mov-control) var(--curva);
}
.diag-opcion:hover { border-color: rgba(13, 27, 42, 0.3); }
.diag-opcion:focus-within { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.diag-opcion__radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.diag-opcion__marca {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid rgba(13, 27, 42, 0.4);
  position: relative;
  transition: border-color var(--mov-control) var(--curva);
}
.diag-opcion__texto { font-size: 0.9375rem; line-height: 1.5; color: var(--texto); }
.diag-opcion.es-elegida { border-color: var(--lt-borgona); background: var(--superficie-elevada); }
.diag-opcion.es-elegida .diag-opcion__texto { font-weight: 600; }
.diag-opcion.es-elegida .diag-opcion__marca { border-color: var(--lt-borgona); border-width: 2px; }
.diag-opcion.es-elegida .diag-opcion__marca::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--lt-borgona);
}

/* Controles */
.diag-controles { display: flex; align-items: center; gap: var(--e-4); margin-top: var(--e-7); }
.diag-nav {
  min-height: 44px;
  padding: 0 var(--e-2);
  background: none; border: 0; cursor: pointer;
  font-family: var(--fuente-funcional);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--texto-suave);
  transition: color var(--mov-control) var(--curva);
}
.diag-nav:hover:not([disabled]) { color: var(--texto); }
.diag-nav[disabled] { opacity: 0.4; cursor: not-allowed; }
[data-diag-siguiente][disabled] { opacity: 0.5; pointer-events: none; }
.diag-reiniciar {
  margin-top: var(--e-6);
  min-height: 44px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--fuente-funcional);
  font-size: 0.8125rem; letter-spacing: 0.03em;
  color: var(--texto-suave);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--mov-control) var(--curva);
}
.diag-reiniciar:hover { color: var(--texto-enfasis); }

/* Resultado */
.diag-resultado__etapa {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--acento-linea); margin: 0 0 var(--e-3);
}
.diag-resultado__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2; color: var(--texto); margin: 0 0 var(--e-4);
}
.diag-resultado__texto { font-size: 1rem; line-height: 1.65; color: var(--texto-suave); margin: 0; max-width: 60ch; }
.diag-paso {
  margin-top: var(--e-6);
  padding-left: var(--e-5);
  border-left: 2px solid var(--acento-linea);
}
.diag-paso__rotulo {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--texto-enfasis); margin: 0 0 var(--e-2);
}
.diag-paso p { font-size: 0.9375rem; line-height: 1.6; color: var(--texto); margin: 0; max-width: 58ch; }
.diag-metodo { margin-top: var(--e-6); }

.diag-contacto {
  margin-top: var(--e-8);
  padding-top: var(--e-7);
  border-top: var(--borde);
}
.diag-contacto__titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.375rem; color: var(--texto); margin: 0 0 var(--e-3);
}
.diag-contacto__texto { font-size: 0.9375rem; line-height: 1.6; color: var(--texto-suave); margin: 0 0 var(--e-4); max-width: 56ch; }

@media (max-width: 480px) {
  .diag-controles { gap: var(--e-3); }
}
@media (prefers-reduced-motion: reduce) {
  .diag-barra span { transition: none; }
}