/* ==========================================================================
   Dumbo Growth Lab — Secciones
   Cada bloque = una sección de la landing (y un contenedor en Elementor).
   Orden: header · hero · vídeo · formulario · propuesta · método · cta · footer
   ========================================================================== */

/* --- Header ---------------------------------------------------------------
   Barra "glass" oscura permanente: como el logo real solo existe en versión
   isotipo-sage + wordmark-blanco (ver assets/img/logo-dumbo.png), el header
   se mantiene siempre sobre una superficie oscura translúcida — así el
   contraste es correcto en cualquier sección, sin duplicar el logo en color. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--paper);
  background: rgba(18, 18, 17, 0.34);
  border-bottom: var(--rule-w) solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* El desenfoque del fondo se aplica SOLO después de hacer scroll. Arriba de
   todo, el header está sobre el fondo plano del hero (#121211): desenfocar un
   color plano devuelve exactamente el mismo color plano, así que ahí el
   efecto no se ve, y en cambio cuesta caro. Es un backdrop-filter sobre un
   elemento fijo: el navegador lo recalcula cada vez que algo repinta debajo,
   que es justo lo que hace la animación del hero durante sus 2 segundos. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header.is-scrolled {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}
.site-header.is-scrolled {
  background: rgba(18, 18, 17, 0.72);
  border-color: var(--paper-14);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.logo { display: block; height: 34px; width: auto; } /* agrandado a petición del cliente */
.logo img { height: 100%; width: auto; display: block; }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.site-header__links {
  display: flex;
  gap: var(--space-4);
  font-size: calc(var(--step--1) * 0.88);
  letter-spacing: 0.02em;
}
.site-header__links a {
  position: relative;
  color: inherit;
  opacity: 0.78;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-header__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--green);
  transition: right var(--dur) var(--ease-out);
}
.site-header__links a:hover { opacity: 1; }
.site-header__links a:hover::after { right: 0; }
.site-header .btn { padding: 0.65em 1.1em; font-size: var(--step--1); }

@media (max-width: 860px) {
  .site-header__links { display: none; }
}

/* --- Hero -------------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  padding-top: calc(var(--header-h) + var(--section-y) * 0.85);
  padding-bottom: calc(var(--section-y) * 0.7);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__kicker {
  margin-bottom: var(--space-4);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sage);
}

/* Titular: escala reducida y proporcionada (Axiforma Regular), no ocupa toda
   la mitad izquierda. "predecible" queda integrado en la misma familia,
   solo diferenciado por color — sin salto a otra tipografía. */
.hero h1 {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.65rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.hero h1 .em {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  color: var(--green);
}
/* Última palabra con efecto de tecleo (borra y reescribe otras palabras).
   white-space:nowrap para que la palabra + el cursor no se partan. La
   reserva de ancho (min-width) se aplica en el layout ancho, donde la
   línea es estable; ver @media (min-width: 1100px). */
.hero-type {
  display: inline-block;
  white-space: nowrap;
}
/* Altura estable del H1 en el rango tablet: reserva 3 líneas para que el
   cambio de palabra (p. ej. "estratégico", más larga) no lo haga saltar. */
.hero h1 { min-height: calc(3 * 1.18em); }
.hero-type__caret {
  display: none;
  width: 0.06em;
  height: 0.9em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.06em;
}
.hero-type.is-typing .hero-type__caret {
  display: inline-block;
  animation: hero-caret 1s step-end infinite;
}
@keyframes hero-caret {
  0%, 45% { opacity: 1; }
  45.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-type { min-width: 0; }
  .hero-type.is-typing .hero-type__caret { display: none; }
}
.hero__sub {
  margin-top: var(--space-4);
  max-width: 42ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.1rem);
  line-height: var(--lh-snug);
  color: var(--paper-70);
}
.hero__hl {
  color: var(--green);
  font-weight: 500;
}
.hero__actions { margin-top: var(--space-5); }
.hero__actions .btn--primary,
.video-section .btn-row .btn--primary { gap: var(--space-2); padding: 0.75em 1.3em; font-size: var(--step--1); }
.hero__actions .btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.hero__actions .btn--primary:hover .btn__arrow { transform: translateX(3px); }
.hero__actions .link-arrow { color: var(--paper); border-color: var(--paper-14); font-size: var(--step--1); }
.hero__audience { margin-top: var(--space-6); }
.hero__audience .chip {
  padding: 0.6em 1em;
  color: var(--paper);
  background: transparent;
  border-color: var(--paper);
  font-weight: 500;
}
.hero__audience .chip:nth-child(2)::before { background: var(--accent); }

/* Recurso gráfico del hero — referencia directa: grafico-hero.png.
   Un recorrido azul que asciende de abajo-izquierda a arriba-derecha:
   andamiaje discontinuo fijo + trazado de crecimiento animado. */
.hero__figure {
  position: relative;
  width: min(78%, 500px);
  margin-inline: auto;
  z-index: 1;
  pointer-events: none;
}
.hero__figure svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; }

/* --- Gráfico del hero: la luz recorre la figura ---------------------------
   Guion (referencia, pasos 01→04): la ilustración ya está dibujada en el azul
   de marca. Una luz sale del punto de inicio (01), sube por la curva
   iluminándola (02), fogonea al cruzar el centro (03) y llega al nodo de
   arriba (04). Ahí termina: la iluminación se desvanece y queda la ilustración
   plana, quieta. Es un acento secundario — la jerarquía es el texto del hero. */

/* Andamiaje: patrón de puntos en el azul de marca. Se dibuja junto con el
   resto (la figura entera "crece" desde el punto de abajo). */
.hero-figure__scaffold {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.75;
  stroke-linecap: round;
  stroke-dasharray: 17 7;
}
.hero-figure__growth {
  fill: none;
  stroke: url(#heroGrowthGradient);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Trazado: las dos ramas se dibujan a la vez desde el círculo, con la luz
   a la cabeza de la rama de crecimiento. Lo que queda dibujado es el
   resultado final (la ilustración plana). */
.hero-figure__scaffold-reveal,
.hero-figure__growth-reveal {
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
}
.hero__figure.is-inview .hero-figure__scaffold-reveal,
.hero__figure.is-inview .hero-figure__growth-reveal {
  animation: hero-growth-draw 1900ms var(--ease-flow) forwards;
}
@keyframes hero-growth-draw {
  from { stroke-dashoffset: var(--len, 900); }
  to   { stroke-dashoffset: 0; }
}

/* Aureola ambiental: trazo grueso e invisible en sí mismo (el filtro
   heroAmbient lo reemplaza por su versión difuminada y teñida). Avanza con
   su propio dashoffset, al mismo ritmo que la luz. */
.hero-figure__ambient {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 34;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
}
.hero__figure.is-inview .hero-figure__ambient {
  animation: hero-growth-draw 1900ms var(--ease-flow) forwards;
}

/* --- Iluminación ---------------------------------------------------------
   Todo el resplandor lo genera el filtro #heroBloom (4 etapas de desenfoque
   teñidas) sobre estos núcleos blancos finitos. Acá solo se define el núcleo:
   fino y blanco, para que el azul de la línea base asome por los bordes —
   que es lo que da el efecto de "luz blanca con bordes azules". */
.hero-figure__litcore {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.hero-figure__litcore-curve { stroke-width: 2.9; stroke-linejoin: round; }

/* Cabeza de la luz: mismo núcleo blanco, algo más grueso — más masa en el
   filtro = más resplandor justo ahí. Viaja por delante del borde iluminado. */
.hero-figure__spark {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-dasharray: 26 6000;
  stroke-dashoffset: 0;
  opacity: 0;
}
.hero__figure.is-inview .hero-figure__spark {
  animation:
    hero-spark-move 1900ms var(--ease-flow) forwards,
    hero-spark-fade 1900ms linear forwards;
}
@keyframes hero-spark-move {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: var(--len-neg, -900); }
}
@keyframes hero-spark-fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Toda la iluminación se desvanece al terminar el recorrido: queda la
   ilustración plana, quieta. */
.hero__figure.is-inview .hero-figure__lit {
  animation: hero-lit-fade 3000ms linear forwards;
}
@keyframes hero-lit-fade {
  0%, 72% { opacity: 1; }
  100%    { opacity: 0; }
}

/* Nodos: azul de marca. Se materializan desde el centro del gráfico
   (--tx/--ty = distancia del nodo al centro) cuando la luz llega a su
   altura: salen difuminados y pequeños y se vuelven sólidos en su sitio.
   El de inicio y el final dan además un fogonazo breve, y vuelven al azul. */
.hero-figure__node {
  fill: var(--accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.hero__figure.is-inview .hero-figure__node {
  animation: hero-node-in 700ms var(--ease-out) var(--delay, 0ms) both;
}
.hero__figure.is-inview .hero-figure__node--flash {
  animation:
    hero-node-in 700ms var(--ease-out) var(--delay, 0ms) both,
    hero-node-flash 900ms var(--ease-out) var(--flash, 0ms) 1 both;
}
@keyframes hero-node-in {
  from { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0.2); filter: blur(7px); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
}
@keyframes hero-node-flash {
  0%   { fill: var(--accent); transform: scale(1); }
  20%  { fill: #d8e6ff;       transform: scale(1.3); }
  100% { fill: var(--accent); transform: scale(1); }
}

/* Halo de explosión (pasos 01 y 04): degradado radial #3f84fe → #002fa6 →
   #000d31, que se desvanece a transparente contra el fondo. */
.hero-figure__halo {
  fill: url(#heroNodeHalo);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
/* Fogonazo del centro (paso 03): su propia paleta, #99c4ff → … → #000a26. */
.hero-figure__flarehalo {
  fill: url(#heroCenterFlare);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.hero__figure.is-inview .hero-figure__halo,
.hero__figure.is-inview .hero-figure__flarehalo {
  animation: hero-halo 1500ms var(--ease-out) var(--delay, 0ms) 1 both;
}
@keyframes hero-halo {
  0%   { opacity: 0; transform: scale(0.3); }
  18%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* Anillos: líneas finas, en el azul eléctrico. Dos por explosión,
   levemente desfasados. Una sola vez — no se repiten. */
.hero-figure__ring {
  fill: none;
  stroke: #3f84fe;
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.hero__figure.is-inview .hero-figure__ring {
  animation: hero-ring 1300ms var(--ease-out) var(--delay, 0ms) 1 both;
}
.hero__figure.is-inview .hero-figure__ring--b {
  animation-delay: calc(var(--delay, 0ms) + 170ms);
}
@keyframes hero-ring {
  0%   { opacity: 0;   transform: scale(0.35); }
  16%  { opacity: 0.8; }
  100% { opacity: 0;   transform: scale(2.9); }
}

/* Sin animación: se ve directamente la ilustración terminada (el mismo
   estado de reposo al que llega la animación). */
@media (prefers-reduced-motion: reduce) {
  .hero-figure__scaffold-reveal,
  .hero-figure__growth-reveal { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .hero-figure__ambient,
  .hero-figure__lit,
  .hero-figure__spark,
  .hero-figure__halo,
  .hero-figure__flarehalo,
  .hero-figure__ring { display: none; }
  .hero-figure__node { opacity: 1; animation: none; }
}

/* Tablet (vertical y horizontal) y por debajo: hero en una sola columna —el
   gráfico va debajo del texto, centrado y a buen tamaño—. El layout de 2
   columnas (texto a la izquierda, gráfico a la derecha) solo entra desde
   1100px, que es donde hay ancho real para que el título respire en 2 líneas:
   "Convertimos la captación de clientes" / "en un sistema <palabra>". */
@media (min-width: 1100px) {
  .hero__grid {
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
  }
  .hero h1 { max-width: none; min-height: calc(2 * 1.18em); }
  .hero h1 .hero-h1-line { display: block; }
  .hero-type { min-width: 11ch; }
  .hero__sub { max-width: 62ch; }
  /* Gráfico cerca del texto: la columna de la derecha es del tamaño exacto
     del gráfico (auto), sin espacio muerto entre medio; el gráfico crece con
     el viewport pero deja siempre ancho suficiente al título (2 líneas). */
  .hero__figure { width: clamp(320px, 30vw, 470px); margin-inline: 0; }
}

/* --- Sección genérica: encabezado con kicker --------------------------- */
.s-kicker { display: block; margin-bottom: var(--space-3); }

/* --- Vídeo principal ---------------------------------------------------------
   Aprovecha el ancho disponible: sin kicker redundante, columna más amplia.
   Separación con el hero reducida (ambas secciones son oscuras, sin corte
   visual entre ellas): la mitad, repartida entre el padding-bottom del hero
   y el padding-top de aquí. */
.video-section { padding-top: calc(var(--section-y) * 0.7); padding-bottom: calc(var(--section-y) * 0.7); }
.video-section .section__head { max-width: none; }

/* El reproductor va a todo el ancho del contenedor (de donde empieza el texto
   a donde termina), alineado a la izquierda. El tope por altura evita que en
   pantallas bajas se corte arriba/abajo al reproducirlo. */
.video-section .media {
  width: 100%;
  max-width: calc(80vh * 16 / 9);   /* nunca más alto que 80vh: siempre entra completo, sin romper el 16:9 */
  margin-inline: auto;              /* centrado en la sección */
}

/* Línea divisoria fina entre el hero y esta sección: color fijo #2F2F2F,
   más sutil/oscura que --rule, y a un tercio de su grosor. */
.section-divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: #2F2F2F;
}

/* Título: misma tipografía y tamaño que el H1 del hero (regular, no bold),
   para que todos los titulares del sitio se sientan de la misma familia. */
.video-section #video-title {
  max-width: none;
  font-weight: 400;
  font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.65rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.video-section .section__head .prose {
  margin-top: var(--space-3);
  max-width: none;
  line-height: var(--lh-snug);
  color: var(--paper-70);
}

@media (max-width: 640px) {
  .video-section #video-title { white-space: normal; }
}

.video-section__meta {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  max-width: 900px;
  font-size: var(--step--1);
  color: var(--muted);
}
.video-section__meta li {
  position: relative;
  padding-left: var(--space-3);
}
.video-section__meta li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage);
}
.video-section__meta li:nth-child(3n+2)::before { background: var(--green); }
.video-section__meta li:nth-child(3n)::before { background: var(--accent); }
.video-section .btn-row { margin-top: var(--space-6); }

/* --- Quiénes están detrás (fundadores) -------------------------------------
   Fotos grandes, en blanco y negro (guía de marca: "imágenes en B/N, enfoque
   documental") — el color vive en el marco/hover, no en la foto en sí.
   Referencia de layout: growthing.info/nosotros y boyledigital.com/team,
   adaptado a dos personas en vez de un equipo grande, y sin citas inventadas
   atribuidas a Santiago/Eduardo — ver nota en index.html. */
.team-head {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 860px) {
  .team-head { grid-template-columns: 1fr auto; align-items: end; gap: var(--space-7); }
}
.team-head h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin-top: var(--space-3);
}
/* Sin tope de medida: el ancho lo marca la columna del grid, para que el
   párrafo ocupe hasta donde empieza el texto lateral y no queden tantos
   renglones cortos. */
.team-head .prose { margin-top: var(--space-4); max-width: none; }
.team-head .prose + .prose { margin-top: var(--space-3); }
/* Lo importante de cada párrafo, en Axiforma semibold blanco. */
.team-head strong,
.team-member__bio strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paper);
}
/* Salto de línea de la maqueta: solo en escritorio, donde la medida da.
   En móvil estorbaría y parte la frase en un lugar raro. */
.br-lg { display: none; }
@media (min-width: 860px) {
  .br-lg { display: inline; }
}

/* Solo en mobile: el video se veía chico contra la referencia de la cliente
   (Real Estate Rocket, casi a sangre). Se lo saca del ancho del container
   (que en mobile ya viene angosto: container-max en vw + gutter interno) y
   se lo agranda casi a los bordes de la pantalla, en vez de tocar el token
   global --container-max/--gutter que afectaría a toda la página. Cubre las
   dos "versiones" del mismo bloque (poster y el video ya reproduciéndose):
   es la misma caja, solo cambia el contenido de adentro. */
@media (max-width: 640px) {
  .video-section .media {
    width: calc(100vw - 16px);
    margin-inline: calc(50% - 50vw + 8px);
  }
}
.team-head__aside {
  padding-left: var(--space-4);
  border-left: 1.5px solid var(--paper-14);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.6;
  white-space: nowrap;
}

.team-list {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-8);
}
.team-member {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 860px) {
  /* La foto es un cuadrado fijo (así son los archivos reales) y tiene que
     superar en alto al bloque de texto más largo (~570px con este copy) sin
     recortarse — por eso la columna de la foto necesita casi tanto ancho
     como la del texto, no la mitad. Si el texto cambia de longitud más
     adelante, este número hay que revisarlo de nuevo.
     grid-template-columns fija el ancho de columna física 1 y 2 — no
     "sigue" a la foto cuando se la reordena con order. Por eso la variante
     --reverse invierte también las columnas, no solo el order: si no, en la
     tarjeta de Eduardo la foto quedaría en la columna angosta. */
  .team-member {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-8);
  }
  .team-member--reverse { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .team-member--reverse .team-member__media { order: 2; }
}
.team-member__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  isolation: isolate;
  /* El resplandor va acá y NO en ::after: overflow:hidden recorta a los
     hijos (incluido el pseudo-elemento), y el brillo se dibuja por fuera de
     la caja. En el propio elemento no lo recorta su propio overflow. */
  transition: box-shadow var(--dur) var(--ease);
}
.team-member__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.team-member__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  box-shadow: 0 0 0 0 transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
  z-index: 2;
}
.team-member__media:hover img { transform: scale(1.045); }
/* Mismo gesto que .stage-card:hover (sección "piezas sueltas"): borde azul
   de marca + iluminación alrededor. */
.team-member__media:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 0 32px rgba(45, 91, 255, 0.35);
}
.team-member__media:hover::after { border-color: var(--accent); }
.team-member__caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
  max-width: 12ch;
  line-height: 1.4;
}
/* Variante arriba a la derecha (la foto de Eduardo, según la maqueta).
   El bloque se apoya a la derecha, pero el texto se lee de izquierda a
   derecha, en tres renglones fijos. */
.team-member__caption--tr {
  left: auto;
  bottom: auto;
  right: var(--space-4);
  top: var(--space-4);
  text-align: left;
  max-width: none;
}
.team-member__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 18, 17, .75), transparent 45%);
  z-index: 1;
}
/* Con la leyenda arriba, el degradado tiene que ir arriba para que se lea. */
.team-member__media:has(.team-member__caption--tr)::before {
  background: linear-gradient(to bottom, rgba(18, 18, 17, .75), transparent 45%);
}
/* Solo en mobile la leyenda de Eduardo tapaba la cara: baja a la esquina
   inferior derecha y pasa a verde (contraste con el fondo). Desktop no se
   toca — sigue arriba a la derecha en blanco. */
@media (max-width: 859px) {
  .team-member__caption--tr {
    top: auto;
    bottom: var(--space-4);
    color: var(--green);
  }
  .team-member__media:has(.team-member__caption--tr)::before {
    background: linear-gradient(to top, rgba(18, 18, 17, .75), transparent 45%);
  }
}

/* En escritorio la foto se achica entera (nada recortado): sin aspect-ratio
   forzado, la imagen manda su propia proporción real a un ancho más chico
   (lo da la columna angosta de arriba) y el alto sale solo. Este bloque va
   DESPUÉS de las reglas base a propósito: con la misma especificidad, gana
   la última, y si estuviera antes el aspect-ratio de arriba lo pisaría. */
@media (min-width: 860px) {
  .team-member__media { aspect-ratio: auto; }
  .team-member__media img { position: static; height: auto; object-fit: contain; }
}

.team-member__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: var(--tracking-label);
  color: var(--sage);
}
.team-member h3 {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
}
.team-member__role {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  color: var(--green);
}
.team-member__bio {
  margin-top: var(--space-4);
  font-size: var(--step-0);
  color: var(--paper-70);
  line-height: var(--lh-text);
  max-width: 46ch;
}
.team-member__quote {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--sage-30);
  font-family: var(--font-editorial);
  /* Peso 200 (ultralight), igual que .value__close: el itálico 400 de
     Editorial New se lee casi como una negrita. */
  font-weight: 200;
  font-style: italic;
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--paper);
  max-width: 46ch;
}
.team-member__quote::before { content: "\201C"; }
.team-member__quote::after { content: "\201D"; }
.team-member__tags {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.team-member__tags span {
  padding: 0.5em 1em;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-btn);
  font-size: 0.78rem;
  color: var(--paper-70);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
/* Mismo halo azul que las fotos. :active cubre el toque en celular (el
   :hover de por sí no se dispara con el dedo, se queda pegado tras soltar). */
.team-member__tags span:hover,
.team-member__tags span:active {
  box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(45, 91, 255, 0.35);
}

/* En mobile/tablet se apila (como .team-head): la fila etiqueta+línea+texto
   dejaba una columna de ~120px de ancho para el título y el botón, y el
   contenido se salía del contenedor y se cortaba contra el borde de la
   pantalla — un bug real, no solo apretado. Desde 860px pasa a fila. */
.team-closing {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--rule-w) solid var(--paper-14);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.team-closing > div { min-width: 0; flex: 1 1 auto; }
@media (min-width: 860px) {
  .team-closing { flex-direction: row; }
}
.team-closing__label {
  flex: none;
  padding-top: 0.2em;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-55);
  line-height: 1.6;
}
/* En columna (mobile/tablet) la frase queda sola sin la línea de al lado
   (.team-closing__rule se oculta ahí, ver arriba) — se le agrega una propia
   como borde, sin depender del alto de fila que solo existe en desktop. */
@media (max-width: 859px) {
  .team-closing__label {
    padding-left: var(--space-3);
    border-left: 2px solid var(--green);
  }
}
.team-closing__rule {
  /* Decorativa: pensada como línea vertical al lado del texto en fila. En
     columna (mobile/tablet) align-self:stretch ya no tiene un alto de fila
     que estirar, así que directamente se oculta ahí. */
  display: none;
}
@media (min-width: 860px) {
  .team-closing__rule {
    display: block;
    flex: none;
    width: 2px;
    align-self: stretch;
    background: var(--green);
    border-radius: 2px;
  }
}
.team-closing p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--paper);
  max-width: 46ch;
}
/* Solo en mobile: el título entraba en 4 renglones — se achica para que
   entre en 3. Desktop sigue en --step-2. */
@media (max-width: 639px) {
  .team-closing p:not(.team-closing__sub) { font-size: var(--step-1); }
}
.team-closing p.team-closing__sub {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--paper-55);
  max-width: none;
}
/* Párrafo de cierre duplicado: la versión de escritorio (texto corrido)
   se oculta en mobile y se reemplaza por la de mobile (con el punto y
   aparte y la frase en blanco), para no tocar nada de la de escritorio.
   Mismo patrón que .br-lg pero con la polaridad invertida. */
.team-closing__sub--mobile { display: none; }
@media (max-width: 859px) {
  .team-closing__sub--desktop { display: none; }
  .team-closing__sub--mobile { display: block; }
}
.team-closing__sub--mobile strong {
  color: var(--paper);
  font-weight: 600;
}
.team-closing__cta { margin-top: var(--space-5); }

/* --- Formulario de cualificación ------------------------------------------
   Fondo oscuro, igual que vídeo/hero — sin corte de color entre secciones;
   separación reducida (mismo criterio que hero → vídeo). */
.apply-section {
  background: var(--ink);
  color: var(--paper);
  padding-top: calc(var(--section-y) * 0.7);
}

.apply__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
/* Kicker: misma tipografía/tamaño/interlineado que el kicker del hero. */
.apply__aside .kicker {
  margin-bottom: var(--space-4);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sage);
}
/* Título: mismo tamaño que antes. Vuelve a poder partirse en 2 líneas —
   así la columna del formulario recupera su ancho (antes el nowrap forzaba
   el ancho mínimo de la columna del aside y achicaba el formulario). */
.apply__title {
  font-size: var(--step-2);
}
/* Descripción: misma tipografía, tamaño, interlineado y color que la
   descripción del hero (--font-display, no --font-editorial); más
   separación respecto al título, igual que en el resto de las secciones. */
.apply__aside .lead {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  max-width: 56ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.1rem);
  line-height: var(--lh-snug);
  color: var(--paper-70);
}
.apply__aside .lead strong { color: var(--paper); font-weight: 700; }
.apply__steps-note {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  font-size: var(--step--1);
  color: var(--muted);
}
.apply__steps-note li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
}
.apply__steps-note li > b { color: var(--accent); font-weight: 600; }
.apply__steps-note li span b { color: var(--fg); font-weight: 600; }

.form-card {
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  background: var(--surface);
}
.form-step { display: grid; gap: var(--space-4); }
.form-step[hidden] { display: none; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.form-actions {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}
.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: var(--rule-w) solid var(--sage);
  border-radius: var(--radius);
  background: var(--sage-16);
  font-size: var(--step--1);
}
.form-status[hidden] { display: none; }

@media (min-width: 720px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--2 .field--full { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .apply__layout { grid-template-columns: 1.05fr 1fr; align-items: start; gap: var(--space-8); }
}

/* --- Propuesta de valor --------------------------------------------------
   Título + dos descripciones apiladas a todo el ancho del contenedor, y
   debajo el carrusel de las 5 piezas. Sin diagrama de nodos (se quitó). */
.value-head {
  display: grid;
  gap: var(--space-4);          /* mismo aire kicker ↔ título que en el hero */
  margin-bottom: var(--space-5);
}

/* Kicker: mismo tamaño, interlineado y verde que el kicker del hero. */
#propuesta .kicker {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sage);
}

/* Título: misma familia, peso (regular) y escala que el H1 del hero.
   "Un sistema, sí." baja a su propia línea, en azul de acento. */
#propuesta h2 {
  max-width: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.65rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.value__accent { display: block; color: var(--accent); }

/* Descripciones: misma tipografía, tamaño e interlineado que el subtítulo
   del hero. Ancho acotado: la línea larga corta después de
   "…una web que no convierte—" y no llega hasta el borde. */
.value__desc {
  max-width: 85ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.1rem);
  line-height: var(--lh-snug);
  color: var(--paper-70);
}
.value__desc + .value__desc { margin-top: var(--space-4); }
.value__hl-blue { color: var(--accent); }
.value__hl-strong { color: var(--paper); font-weight: 700; }

.value__close {
  max-width: 85ch;
  margin-top: var(--space-5);
  font-family: var(--font-editorial);
  /* Peso 200: el itálico normal de Editorial New (400) tiene tanto contraste
     que se lee casi como una negrita. El ultralight es la versión más ligera
     de la familia y da el aire editorial sin ese peso. */
  font-weight: 200;
  font-style: italic;
  font-size: var(--step-1);
  color: var(--fg);
}

/* --- Carrusel 3D de las 5 piezas del sistema ----------------------------
   Vive dentro de la sección "Propuesta de valor" (bajo el diagrama de
   nodos). Efecto "coverflow": la tarjeta central queda grande y nítida;
   las de los costados se achican, desenfocan y rotan en 3D. El cálculo de
   escala/blur/rotación por tarjeta lo hace main.js en cada frame, según la
   distancia de cada una al centro del viewport — acá solo van las
   propiedades visuales fijas (color, tipografía, hover). */
.stage-carousel-section { overflow: hidden; }

.stage-carousel {
  /* El ancho de tarjeta vive aquí porque lo necesitan tres reglas distintas:
     la propia tarjeta, el relleno que la centra, y el cálculo del bucle. */
  --stage-card-w: 320px;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-block: var(--space-7) var(--space-3);
}
.stage-carousel__track {
  display: flex;
  gap: var(--space-6);
  padding-inline: calc(50vw - var(--stage-card-w) / 2);
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
}
.stage-carousel__track:active { cursor: grabbing; }

.stage-card {
  flex: 0 0 var(--stage-card-w);
  width: var(--stage-card-w);
  border: 1px solid var(--paper-14);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  transition: border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.stage-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 20px 45px rgba(0, 0, 0, 0.35), 0 0 32px rgba(45, 91, 255, 0.35);
}
.stage-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, #232320, #17170f 65%); /* fondo mientras carga / si falta la imagen */
}
.stage-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stage-card__eyebrow {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--paper-55);
}
.stage-card__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--paper);
}
/* Flechita ↗ azul junto al título (referencia: tarjetas de LavaX). Decorativa. */
.stage-card__arrow {
  color: var(--accent);
  font-size: 0.78em;
  margin-left: 0.3em;
  font-weight: 400;
}
.stage-card__text {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  line-height: var(--lh-text);
  color: var(--paper-70);
}
.stage-card__tags { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Tipografía más chica para que las dos etiquetas entren en una sola fila
   (antes se apilaban una debajo de la otra). */
.stage-card__tag {
  padding: 0.3em 0.7em;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-16);
  color: var(--accent);
}
.stage-card__divider { margin-top: var(--space-4); border: 0; height: var(--rule-w); background: var(--paper-14); }
.stage-card__status {
  margin-top: var(--space-3);
  display: flex;
  align-items: flex-start; /* que el puntito funcione como viñeta: alineado
                              con la 1ª línea, no centrado en un texto de 2 */
  gap: 0.5em;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--paper-55);
}
.stage-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  margin-top: calc((1.5em - 6px) / 2); /* centra el puntito en la 1ª línea */
}

.stage-carousel__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.stage-carousel__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--paper-14);
  background: transparent;
  color: var(--paper);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.stage-carousel__btn:hover { border-color: var(--accent); box-shadow: 0 0 16px rgba(45, 91, 255, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .stage-card { transform: none !important; filter: none !important; opacity: 1 !important; }
}

/* --- Método Dumbo ------------------------------------------------------------ */
#metodo { overflow: hidden; }
.method__intro {
  display: grid;
  gap: var(--space-3);
  max-width: 78ch;
  margin-bottom: var(--space-7);
}
.method__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--paper);
  max-width: 44ch;
}
.method__title-line { display: block; }
.method__intro .prose { color: var(--paper-55); }

/* Recorrido: raíl con marcador de fase (sage/verde alternos) + línea de progreso */
.journey {
  position: relative;
  display: grid;
  gap: 0;
}
.journey__step {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-top: var(--rule-w) solid var(--paper-14);
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.journey__step:last-child { border-bottom: var(--rule-w) solid var(--paper-14); }
@media (hover: hover) {
  .journey__step:hover { background: var(--paper-14); }
}
.journey__rail {
  align-self: stretch;
  width: 2px;
  border-radius: 1px;
  background: var(--sage);
  opacity: 0.55;
}
.journey__step[data-phase="disenamos"] .journey__rail,
.journey__step[data-phase="captamos"] .journey__rail,
.journey__step[data-phase="optimizamos"] .journey__rail { background: var(--green); }
.journey__step.is-active .journey__rail { background: var(--accent); opacity: 1; }

.journey__num {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--paper-55);
  transition: color var(--dur-fast) var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.journey__step.is-active .journey__num { color: var(--accent); }
.journey__body h3 {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--paper);
}
.journey__body p {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--paper-55);
  max-width: 50ch;
}
.journey__phase {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--sage);
}
.journey__step[data-phase="disenamos"] .journey__phase,
.journey__step[data-phase="captamos"] .journey__phase,
.journey__step[data-phase="optimizamos"] .journey__phase { color: var(--green); }

/* Banda resumen de los 7 verbos: cinta continua que se desplaza hacia la
   derecha (misma idea que ctrlsze.studio, dirección invertida). Tipografía
   más pequeña y regular, para que se lea prolija. A sangre completa. */
.method__flow {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--rule-w) solid var(--paper-14);
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.method__flow__viewport { overflow: hidden; }
.method__flow__track {
  display: flex;
  width: max-content;
  will-change: transform;
  /* 4 secuencias idénticas: un ciclo desplaza el ancho de una (25%). De
     -25% a 0 => el contenido avanza hacia la derecha, sin cortes. */
  animation: method-flow-scroll 22s linear infinite;
}
.method__flow__seq {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-left: var(--space-3);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.method__flow__seq > span { color: var(--paper); }
.method__flow__seq .sep { color: var(--accent); }
@keyframes method-flow-scroll {
  from { transform: translateX(-25%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .method__flow__track { animation: none; transform: translateX(-25%); }
}

@media (min-width: 1024px) {
  .journey { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-7); }
}

/* --- CTA final ------------------------------------------------------------- */
.cta-final {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final__inner { position: relative; z-index: 2; display: grid; gap: var(--space-4); justify-items: center; }
.cta-final h2 { max-width: 24ch; color: var(--paper); }
.cta-final p {
  max-width: 60ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.1rem);
  line-height: var(--lh-snug);
  color: var(--paper-70);
}
.cta-final p .u-green { color: var(--green); }

/* Isotipo de marca como marca de agua a la derecha del cierre: silueta del
   PNG real usada como máscara —el símbolo no se reinterpreta—, en el verde
   más oscuro de la paleta (--sage), tenue (25%) y centrado verticalmente. */
.cta-final__figure {
  position: absolute;
  right: clamp(1rem, 4vw, 2.75rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(150px, calc(50vw - 400px), 330px);  /* se achica en pantallas medianas para no pisar el texto centrado */
  aspect-ratio: 205 / 219;
  z-index: 1;
  pointer-events: none;
  opacity: 0.25;
  background: var(--sage);
  /* Mismo blob en las dos props para compat con Safari: se define una sola
     vez en una custom property y se reutiliza, en vez de duplicar ~3KB de
     base64 dos veces en el CSS. */
  --isotipo-mask: url("data:image/png;base64,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");
  -webkit-mask: var(--isotipo-mask) center / contain no-repeat;
  mask: var(--isotipo-mask) center / contain no-repeat;
}

/* Por debajo de ~1000px el texto centrado se acerca demasiado: el isotipo
   baja a la esquina inferior derecha, más chico, y deja de pisar el texto. */
@media (max-width: 1000px) {
  .cta-final__figure {
    width: clamp(88px, 15vw, 132px);
    right: clamp(0.75rem, 3vw, 1.5rem);
    top: auto;
    bottom: clamp(1rem, 3vw, 1.75rem);
    transform: none;
  }
}

/* En móvil angosto el isotipo de abajo-derecha se choca contra el botón:
   se sube a la franja vacía por encima del título (mismo padding que ya
   separa la sección del borde), bien chico, para que no toque ni el texto
   ni el botón. */
@media (max-width: 640px) {
  .cta-final__figure {
    width: clamp(40px, 9vw, 56px);
    right: clamp(0.5rem, 3vw, 1rem);
    top: clamp(0.25rem, 1.5vw, 0.5rem);
    bottom: auto;
    transform: none;
  }
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--paper-55);
  padding-block: var(--space-6);
  border-top: var(--rule-w) solid var(--paper-14);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
}
.site-footer a { color: var(--paper-70); transition: color var(--dur-fast) var(--ease-out); }
.site-footer a:hover { color: var(--green); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.8rem;
}
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.8rem;
  padding-top: var(--space-4);
  border-top: var(--rule-w) solid var(--paper-14);
}
.site-footer .logo { height: 24px; }

/* --- gracias.html (post-formulario, stub) ------------------------------- */
.thanks {
  min-height: 100vh;
  display: grid;
  align-content: center;
  background-color: var(--ink);
  color: var(--paper);
  padding-block: var(--space-6);
  /* Textura de puntitos (referencia: canvas de Cal.com) — va en el fondo,
     detrás de la tarjeta, no adentro de ella. La tarjeta en sí queda sólida
     y limpia, igual que las cajas del canvas de Cal.com no tienen puntos
     encima, solo el espacio negativo alrededor. */
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 14px 14px;
}
/* Tarjeta compacta (referencia visual: Real Estate Rocket), con la marca y
   el copy de Dumbo. Panel izquierdo fijo (logo + resumen), panel derecho
   con el paso activo (email → calendario). */
.thanks__card {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  background-color: var(--surface);
  border: var(--rule-w) solid var(--paper-14);
  border-radius: 16px;
  overflow: hidden;
}
.thanks__card-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .thanks__card-grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }
}
.thanks__brand {
  padding: var(--space-5) var(--space-5) var(--space-6);
  border-bottom: var(--rule-w) solid var(--paper-14);
}
@media (min-width: 860px) {
  .thanks__brand {
    padding: var(--space-5);
    border-bottom: none;
    border-right: var(--rule-w) solid var(--paper-14);
  }
}
.thanks__logo { height: 88px; width: 88px; display: block; }
.thanks__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: var(--lh-snug);
  font-weight: 600;
  margin-top: var(--space-3);
}
.thanks__lead {
  font-size: 0.85rem;
  line-height: var(--lh-text);
  color: var(--paper-55);
  margin-top: var(--space-2);
}
.thanks__panel {
  padding: var(--space-4) var(--space-5);
}
.thanks__panel-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}
.thanks__panel-desc {
  font-size: 0.82rem;
  color: var(--paper-55);
  margin-top: var(--space-2);
  line-height: var(--lh-text);
}

.thanks__steps {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
}
.thanks__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--rule-w) solid var(--paper-14);
}
.thanks__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--sage);
}
/* Variante compacta: la que usa la tarjeta de gracias.html — mismo patrón
   (número · título · descripción) pero a escala de panel lateral, no de
   sección de landing. */
.thanks__steps--compact { margin-top: var(--space-4); gap: var(--space-2); }
.thanks__steps--compact .thanks__step { padding-top: var(--space-2); gap: var(--space-3); }
.thanks__steps--compact .thanks__step::before { font-size: 0.8rem; }
.thanks__steps--compact .thanks__step h2 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
}
.thanks__steps--compact .thanks__step p {
  font-size: 0.78rem;
  color: var(--paper-55);
  margin-top: var(--space-1);
  line-height: var(--lh-text);
}
/* Aviso al visitante en la página de gracias. A diferencia de
   .thanks__placeholder, esto NO es un hueco pendiente: es un mensaje que se
   lee, así que va con el mismo acabado que el resto de la página. */
.thanks__notice {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--sage);
  background: var(--sage-16);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--paper-70);
  font-size: var(--step--1);
}

.thanks__placeholder {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: var(--rule-w) dashed var(--paper-14);
  border-radius: var(--radius);
  color: var(--paper-55);
  font-size: var(--step--1);
}


/* --- Carrusel: modo tira deslizable ------------------------------------
   Se activa desde main.js en móvil y cuando el sistema pide reducir
   animaciones. Las dos copias decorativas se ocultan: existen solo para que
   el bucle infinito del escritorio no deje huecos, y aquí estorbarían
   haciendo que la tira tuviera quince tarjetas repetidas en vez de cinco. */
.stage-carousel--simple .stage-carousel__track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: default;
  transform: none !important;

  /* ESTA ES LA LÍNEA QUE FALTABA. El track lleva touch-action: pan-y, que le
     dice al navegador que solo gestione el gesto vertical: era lo correcto
     cuando el arrastre horizontal lo manejaba el JavaScript del efecto 3D.
     En este modo no hay tal arrastre, así que con pan-y el dedo simplemente
     no podía desplazar la tira. */
  touch-action: pan-x pan-y !important;
  will-change: auto;
}
.stage-carousel--simple .stage-carousel__track::-webkit-scrollbar { display: none; }
.stage-carousel--simple .stage-card[aria-hidden="true"] { display: none; }
/* La tarjeta centrada lleva el mismo halo azul que aparece al tocar una:
   mismos valores exactos que .stage-card:hover, para que sea el mismo gesto
   visual y no dos cosas parecidas. La transición va SOLO en el borde y la
   sombra —no en la escala— para que el halo entre y salga suave sin que el
   escalado se retrase respecto al dedo. */
.stage-carousel--simple .stage-card--centro {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 20px 45px rgba(0, 0, 0, 0.35), 0 0 32px rgba(45, 91, 255, 0.35);
}

.stage-carousel--simple .stage-card {
  scroll-snap-align: center;
  z-index: auto !important;
  /* El desenfoque sí se anula: difuminar mientras se desplaza es lo que más
     traba un teléfono. La escala y la opacidad las pone el JS al desplazar,
     por eso NO llevan "none !important": si lo llevaran, ganarían siempre y
     el efecto de profundidad no podría aplicarse. */
  filter: none !important;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  /* SIN transición de escala ni de opacidad, a propósito. La escala y la opacidad se recalculan en cada
     fotograma mientras se desplaza: si además hubiera una transición, cada
     valor estaría animando hacia un destino que ya cambió, y el efecto se
     vería con retraso respecto al dedo. El movimiento ES la animación. */
}

/* --- Carrusel en pantallas chicas ---------------------------------------
   A 375 px, una tarjeta de 320 con 56 de hueco ocupa el 85% de la pantalla y
   de las vecinas asoman 27 px: no se entiende que haya más contenido al lado.
   Estrechando la tarjeta y el hueco, las de los costados asoman lo suficiente
   como para que se lea que es un carrusel y se pueda arrastrar. */
@media (max-width: 720px) {
  /* 70vw y un hueco chico: con 76vw y hueco grande, de las tarjetas de al
     lado asomaban 21 px, que no alcanza para entender que hay más contenido
     al costado. Así asoman unos 40 y se lee como carrusel. */
  .stage-carousel { --stage-card-w: min(320px, 70vw); }
  .stage-carousel__track { gap: var(--space-3); }
  .stage-card { padding: var(--space-3); }
}

/* --- Páginas legales -----------------------------------------------------
   Documentos de lectura, no de conversión: una sola columna estrecha, texto
   por delante de todo lo demás y cero adornos. Comparten los mismos tokens
   que el resto del sitio, así que si cambia la paleta, cambian con ella. */
.legal {
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  padding-block: var(--space-7) var(--space-8);
}
.legal .container { max-width: var(--container-narrow); }
.legal__back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-55);
  text-decoration: none;
}
.legal__back:hover { color: var(--green); }
.legal h1 {
  font-size: var(--step-4);
  line-height: var(--lh-tight);
  color: var(--paper);
  margin-bottom: var(--space-3);
}
.legal__updated {
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--paper-55);
  margin-bottom: var(--space-7);
}
.legal h2 {
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--paper);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p,
.legal li {
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: var(--lh-text);
  color: var(--paper-70);
  max-width: 68ch;
}
.legal p + p { margin-top: var(--space-3); }
.legal ul { margin: var(--space-3) 0 0; padding-left: 1.15em; }
.legal li + li { margin-top: var(--space-2); }
.legal a { color: var(--green); }
.legal dl { margin-top: var(--space-3); }
.legal dt {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-55);
  margin-top: var(--space-3);
}
.legal dd {
  margin: 0;
  font-family: var(--font-display);
  color: var(--paper-70);
  line-height: var(--lh-text);
}

/* Hueco pendiente: dato que solo puede dar el cliente. Se ve a propósito —
   es preferible que cante a que quede un dato inventado en un documento legal. */
.legal__todo {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent-16);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.92em;
}