/* ============================================================================
   Nebur Systems · web v4 (scroll-craft, landing editorial oscura). El motor no se toca.
   ========================================================================== */
/* Archivo recortada a los caracteres del español (79 KB en vez de 189 KB), con sus ejes de peso y anchura. La completa
   solo se descarga si algún día aparece una letra fuera del recorte (ł, ő, ș...): la regla definida en último lugar
   se consulta primero, así que el recorte manda en todo lo que cubre. */
@font-face { font-family: "Archivo"; src: url("assets/fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-024F, U+0259, U+02B9-02DD, U+0300-036F, U+0394, U+03A9, U+03BC, U+03C0, U+1E00-1EFF, U+2017, U+2020-2021, U+2030, U+2044, U+2070-209F, U+20A0-20AB, U+20AD-20CF; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/Archivo-sub.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2009, U+2010-2011, U+2013-2015, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
:root {
  --sc-canvas: #070a12; --sc-surface: #111827; --sc-ink: #f8f7f5; --sc-ink-soft: #a7b0c0;
  --sc-accent: #c63131; --sc-accent-ink: #f8f7f5;
  --accent-text: #e06060; --hair: rgb(248 247 245 / 0.14); --hair-2: rgb(248 247 245 / 0.08);
  --sc-font-display: "Archivo", system-ui, sans-serif; --sc-font-text: "Archivo", system-ui, sans-serif;
  --sc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-shadow-color: 225 45% 3%;
  --fade: clamp(10rem, 26vh, 20rem); /* lo que tarda una lámina en hacerse opaca / transparente */
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-weight: 420; }
.sc-display { font-weight: 560; font-stretch: 108%; }
.sc-display--xl { font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; }
.sc-display--lg { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); }
.sc-display--md { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem); }
.sc-body { color: var(--sc-ink-soft); line-height: 1.58; }
.sc-label { font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.accent { color: var(--accent-text); }
h3 { margin: 0; }

/* ------------------------------------------------------------- barra -- */
.barra { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding: 0.9rem var(--sc-gutter); background: linear-gradient(rgb(7 10 18 / 0.78), rgb(7 10 18 / 0)); }
.barra__marca img { height: clamp(1.7rem, 2.9vw, 2.2rem); width: auto; display: block; }
.barra__nav { display: flex; gap: clamp(0.8rem, 1.8vw, 1.6rem); margin-left: auto; }
.barra__nav a { color: var(--sc-ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 480; padding: 0.4rem 0.1rem; border-bottom: 1px solid transparent; transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
.barra__nav a:hover, .barra__nav a[aria-current="true"] { color: var(--sc-ink); border-color: var(--accent-text); }
.cta--barra { padding: 0.6rem 1rem; font-size: 0.9rem; }
.cta { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.5rem; border-radius: var(--sc-r-md); background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 560; text-decoration: none; border: 0; cursor: pointer; font-size: 1rem; white-space: nowrap; box-shadow: var(--sc-e2), var(--sc-edge); transition: translate 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.cta:hover { translate: 0 -1px; background: #d13636; box-shadow: var(--sc-e3), var(--sc-edge); }
.cta:active { translate: 0 1px; box-shadow: var(--sc-e1); }
.cta svg { width: 1.05rem; height: 1.05rem; transition: translate 160ms var(--sc-ease-out); }
.cta:hover svg { translate: 3px 0; }

/* -------------------------------------------------------------- hero -- */
/* El cielo es una capa FIJA detrás de toda la página (Kael, 2026-09-04: "el fondo estático al principio, que se
   muevan los demás, por capas que entran y pasan por encima"). El titular sube con el scroll y `.capas` (todo lo
   que sigue) entra por encima como una lámina opaca. Cuando ya está tapado, site.js oculta la capa fija
   (visibility) para no seguir componiendo un 4K que nadie ve. El cierre conserva su propio cielo con paralaje. */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; background: transparent; }
.hero__fondo { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; background: var(--sc-canvas); pointer-events: none; }
.hero__fondo.oculto { visibility: hidden; }
.hero__estrellas, .hero__cielo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__cielo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; max-width: none; display: block; }
/* .hero__escena = la caja del texto a lo ancho de la pantalla. Sus márgenes de arriba (--pt) y abajo (--pb) son las
   dos franjas libres donde flotan las tareas: así nunca pisan el texto, mida lo que mida la pantalla. */
.hero__escena { position: relative; width: 100%; display: grid; justify-items: center; --pt: clamp(10.5rem, 18vh, 11.5rem); --pb: clamp(6rem, 13vh, 8rem); }
.hero__copy { position: relative; z-index: 1; width: min(64rem, 90vw); text-align: center; display: grid; justify-items: center; gap: var(--sc-4); padding: var(--pt) 0 var(--pb); }
.hero__copy .sc-display--xl { max-width: 24ch; text-wrap: balance; }
.hero__sub { max-width: 60ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.5; color: rgb(248 247 245 / 0.9); text-shadow: 0 1px 12px rgb(7 10 18 / 0.6); }
/* eyebrow editorial: tres palabras separadas por filetes finos, sin cápsula ni mono (Kael: la píldora "tenía estilo muy IA") */
.hero__eyebrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.2rem 0; margin: 0; font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.92rem); font-weight: 500; letter-spacing: 0.01em; color: rgb(248 247 245 / 0.82); text-shadow: 0 1px 10px rgb(7 10 18 / 0.6); }
.hero__eyebrow span { display: inline-flex; align-items: center; }
.hero__eyebrow span + span::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; margin: 0 0.8rem; background: linear-gradient(90deg, transparent, rgb(248 247 245 / 0.55), transparent); }
.hero__copy .cta { margin-top: var(--sc-3); }
.hero__gratis { display: inline-flex; align-items: center; gap: 0.45rem; margin: -0.2rem 0 0; font-size: 0.88rem; color: rgb(248 247 245 / 0.82); text-shadow: 0 1px 10px rgb(7 10 18 / 0.7); }
.hero__gratis svg { width: 1rem; height: 1rem; color: #7cc7a7; flex: none; }
/* el titular se aleja un poco al bajar mientras las tareas cercanas pasan de largo: la cámara avanza.
   --sc-p del hero vale ~0.5 al cargar y 1 cuando ya ha salido; q = 0 → 1 en ese tramo. */
.hero { --q: clamp(0, (var(--sc-p, 0.5) - 0.5) * 2, 1); }
.hero__copy { z-index: 1; scale: calc(1 - var(--q) * 0.08); transform-origin: 50% 40%; }
/* capas de profundidad: las seis tareas a mano, flotando. Tres planos: lejos (pequeñas, desenfocadas, se quedan
   atrás), medio y cerca (grandes, nítidas, por delante del titular, se van rápido y crecen). La velocidad vertical
   la pone el motor (data-sc-parallax); la deriva lateral, el crecimiento y la respuesta al ratón, este CSS
   (translate/scale, que no pisan el transform del motor). */
.hero__capas { position: absolute; inset: 0; overflow: clip visible; pointer-events: none; --mx: 0; --my: 0; }
.flota { position: absolute; z-index: 0; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.8rem; border-radius: 12px; background: rgb(17 24 39 / 0.62); border: 1px solid rgb(248 247 245 / 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.9); color: var(--sc-ink); font-size: 0.86rem; font-weight: 500; line-height: 1.25; white-space: nowrap;
  --d: 1; --crece: 0.3;
  translate: calc(var(--q) * var(--dx, 0) * 16vw + var(--mx) * var(--d) * 18px) calc(var(--my) * var(--d) * 12px);
  scale: calc(var(--s0, 1) + var(--q) * var(--crece));
  opacity: calc(var(--a0, 1) * (1 - var(--q) * 2.4)); }
.flota i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 3px rgb(224 96 96 / 0.18); flex: none; }
.flota em { font-style: normal; font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); margin-left: 0.2rem; }
.flota--lejos { --s0: 0.8; --a0: 0.5; --d: 0.35; --crece: 0.05; filter: blur(0.7px); }
.flota--lejos em { display: none; }
.flota--medio { --s0: 0.92; --a0: 0.78; --d: 0.7; --crece: 0.15; }
.flota--cerca { --s0: 1.06; --a0: 0.95; --d: 1.2; --crece: 0.45; }
/* filas: A y B en la franja de arriba (B, la más cercana al texto), C y D en la de abajo (C, la más cercana) */
.f1 { left: 8%; top: calc(var(--pt) - 5.3rem); }
.f4 { right: 20%; top: calc(var(--pt) - 5.5rem); }
.f2 { right: 6%; top: calc(var(--pt) - 2.8rem); }
.f3 { left: 4%; top: calc(100% - var(--pb) + 0.9rem); }
.f6 { right: 5%; top: calc(100% - var(--pb) + 0.5rem); }
.f5 { left: 23%; top: calc(100% - var(--pb) + 3.5rem); }
/* pantallas anchas: las dos cercanas pasan a los costados, a media altura, junto al titular */
@media (min-width: 1500px) {
  .f3 { left: 3%; top: 56%; } .f6 { right: 3.5%; top: 47%; }
}
.hero__suelo { position: absolute; inset: auto 0 0 0; height: 22vh; background: linear-gradient(transparent, var(--sc-canvas)); pointer-events: none; }
/* las láminas: opacas en el cuerpo y DIFUMINADAS en los bordes (Kael: "mantener el difuminado, no líneas rectas").
   Sin hairline ni sombra. --fade es lo que tarda en hacerse opaca; ese tramo deja ver el fondo fijo de debajo. */
.capas { position: relative; z-index: 2; background: linear-gradient(180deg, transparent 0, var(--sc-canvas) var(--fade), var(--sc-canvas) calc(100% - var(--fade)), transparent 100%); }

/* ------------------------------------------------------- pantalla + flujo -- */
.pantalla { border-radius: var(--sc-r-lg); border: 1px solid var(--hair); background: rgb(11 15 26 / 0.86); backdrop-filter: blur(10px); box-shadow: var(--sc-e3), var(--sc-edge); overflow: hidden; }
.pantalla__barra { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--hair-2); background: rgb(7 10 18 / 0.5); }
.pantalla__titulo { font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Ejemplo", no "activo": son ejemplos de lo que construimos, no sistemas de clientes en marcha */
.pantalla__estado { margin-left: auto; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--hair); font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
.carrusel__pausa { appearance: none; cursor: pointer; flex: none; width: 2rem; height: 2rem; margin: -0.3rem -0.4rem -0.3rem 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--sc-ink-soft); display: grid; place-items: center; transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.carrusel__pausa:hover { background: rgb(248 247 245 / 0.08); color: var(--sc-ink); }
.carrusel__pausa svg { width: 0.95rem; height: 0.95rem; }
.carrusel__pausa .i-play, .carrusel__pausa[aria-pressed="true"] .i-pausa { display: none; }
.carrusel__pausa[aria-pressed="true"] .i-play { display: block; }
.carrusel__pausa[hidden] { display: none; }
/* en pausa, fuera de pantalla o en un ejemplo oculto, también se paran el fondo que deriva y el punto que late */
.carrusel__pista .esc:not(.activo) .esc__fondo, .carrusel__pista .esc:not(.activo) .esc__punto,
.carrusel--quieto .esc__fondo, .carrusel--quieto .esc__punto, .flujo-contacto--quieto .esc__fondo { animation-play-state: paused; }

/* --------------------------------------------------------- manifiesto -- */
.manifiesto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.manifiesto .sc-display--md { max-width: 22ch; }
.manifiesto__b { color: var(--sc-ink-soft); }
.manifiesto__nota { max-width: 44ch; }
.manifiesto__dinero { max-width: 44ch; margin: 0; padding: 0.9rem 1rem 0.9rem 1.1rem; border-left: 2px solid var(--sc-accent); background: linear-gradient(90deg, rgb(198 49 49 / 0.10), transparent); color: var(--sc-ink-soft); font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); line-height: 1.5; border-radius: 0 var(--sc-r-md) var(--sc-r-md) 0; }
.manifiesto__dinero b { color: var(--sc-ink); font-weight: 560; }
/* constelación: seis tareas como ESTRELLAS sueltas en un campo cuadrado (punto con destello + etiqueta de cristal
   al lado, nunca encima de la línea). Al entrar se encienden una a una y una línea ROJA se dibuja de una a la
   siguiente (lo que ocurre entre tareas). Cerrada la ruta, la línea se calma en marfil, cada etiqueta pasa de
   "a mano" a "automatizado" y una señal recorre la ruta en bucle: el sistema. Coordenadas en % del campo; el SVG
   usa el mismo sistema (500x500) para que las líneas caigan sobre los puntos. */
.constelacion { position: relative; margin: 0; aspect-ratio: 1; }
.constelacion__campo { position: absolute; inset: 0; }
.constelacion__campo::before { content: ""; position: absolute; inset: -6%; pointer-events: none; opacity: 0.6; background-image:
  radial-gradient(circle 1px at 8% 44%, rgb(248 247 245 / 0.55), transparent 60%), radial-gradient(circle 1.2px at 30% 6%, rgb(248 247 245 / 0.45), transparent 60%),
  radial-gradient(circle 1px at 46% 50%, rgb(248 247 245 / 0.4), transparent 60%), radial-gradient(circle 1.4px at 90% 12%, rgb(248 247 245 / 0.5), transparent 60%),
  radial-gradient(circle 1px at 74% 78%, rgb(248 247 245 / 0.4), transparent 60%), radial-gradient(circle 1px at 12% 94%, rgb(248 247 245 / 0.45), transparent 60%),
  radial-gradient(circle 1.2px at 96% 56%, rgb(248 247 245 / 0.4), transparent 60%), radial-gradient(circle 1px at 40% 84%, rgb(248 247 245 / 0.35), transparent 60%),
  radial-gradient(circle 1px at 58% 24%, rgb(248 247 245 / 0.35), transparent 60%), radial-gradient(circle 1px at 22% 62%, rgb(248 247 245 / 0.3), transparent 60%),
  radial-gradient(circle 1px at 84% 96%, rgb(248 247 245 / 0.35), transparent 60%), radial-gradient(circle 1px at 3% 14%, rgb(248 247 245 / 0.3), transparent 60%); }
.constelacion__lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seg { stroke: var(--accent-text); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.95; transition: stroke-dashoffset 480ms var(--sc-ease-out), stroke 900ms var(--sc-ease-out), opacity 900ms var(--sc-ease-out); }
.pulso { opacity: 0; transition: opacity 700ms var(--sc-ease-out); }
.pulso__halo { fill: rgb(224 96 96 / 0.22); }
.pulso__punto { fill: var(--accent-text); }
.constelacion__nodos { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.nodo { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; }
.nodo__estrella { position: absolute; left: 0; top: 0; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: var(--sc-ink); box-shadow: 0 0 0 3px rgb(248 247 245 / 0.12), 0 0 18px 4px rgb(248 247 245 / 0.5); scale: 0.2; transition: scale 520ms cubic-bezier(0.2, 0.9, 0.3, 1.25), box-shadow 160ms var(--sc-ease-out); }
.nodo__estrella::before, .nodo__estrella::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 1px; translate: -50% -50%; background: linear-gradient(90deg, transparent, rgb(248 247 245 / 0.75), transparent); }
.nodo__estrella::after { rotate: 90deg; }
.nodo:hover .nodo__estrella { box-shadow: 0 0 0 4px rgb(248 247 245 / 0.16), 0 0 24px 6px rgb(248 247 245 / 0.65); }
.nodo__ficha { position: absolute; display: grid; gap: 0.2rem; width: max-content; max-width: 15rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: rgb(17 24 39 / 0.66); border: 1px solid var(--hair-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--sc-e1); opacity: 0; transition: opacity 420ms var(--sc-ease-out), translate 420ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.nodo:hover .nodo__ficha { border-color: rgb(248 247 245 / 0.28); background: rgb(17 24 39 / 0.9); }
.nodo--br .nodo__ficha { left: 10px; top: 10px; translate: 0 8px; }
.nodo--r .nodo__ficha { left: 14px; top: 0; translate: 0 calc(-50% + 8px); }
.nodo--l .nodo__ficha { right: 14px; top: 0; translate: 0 calc(-50% + 8px); text-align: left; }
.nodo--t .nodo__ficha { bottom: 14px; left: 0; translate: -50% 8px; text-align: center; }
.nodo__t { font-size: clamp(0.88rem, 0.84rem + 0.2vw, 0.98rem); font-weight: 520; letter-spacing: -0.005em; color: var(--sc-ink); line-height: 1.25; max-width: 19ch; text-wrap: balance; }
.nodo__estado { display: flex; gap: 0.5rem; font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; }
.nodo--t .nodo__estado { justify-content: center; }
.nodo__n { color: var(--sc-ink-soft); }
.nodo__flip { position: relative; }
.nodo__flip s { position: absolute; inset: 0 auto auto 0; text-decoration: none; color: var(--sc-ink-soft); transition: opacity 360ms var(--sc-ease-out); }

.nodo__flip b { font-weight: 500; color: var(--accent-text); opacity: 0; transition: opacity 360ms var(--sc-ease-out); }
/* coreografía al entrar (una vez): estrella k a 520·(k−1)+80 ms; línea k arranca a 520·(k−1)+120 y dura 480; cierre a 3150 */
.constelacion.sc-in .nodo__ficha { opacity: 1; }
.constelacion.sc-in .nodo--br .nodo__ficha { translate: 0 0; }
.constelacion.sc-in .nodo--r .nodo__ficha, .constelacion.sc-in .nodo--l .nodo__ficha { translate: 0 -50%; }
.constelacion.sc-in .nodo--t .nodo__ficha { translate: -50% 0; }
.constelacion.sc-in .nodo__estrella { scale: 1; }
.constelacion.sc-in .nodo:nth-child(1) .nodo__ficha, .constelacion.sc-in .nodo:nth-child(1) .nodo__estrella { transition-delay: 80ms; }
.constelacion.sc-in .nodo:nth-child(2) .nodo__ficha, .constelacion.sc-in .nodo:nth-child(2) .nodo__estrella { transition-delay: 600ms; }
.constelacion.sc-in .nodo:nth-child(3) .nodo__ficha, .constelacion.sc-in .nodo:nth-child(3) .nodo__estrella { transition-delay: 1120ms; }
.constelacion.sc-in .nodo:nth-child(4) .nodo__ficha, .constelacion.sc-in .nodo:nth-child(4) .nodo__estrella { transition-delay: 1640ms; }
.constelacion.sc-in .nodo:nth-child(5) .nodo__ficha, .constelacion.sc-in .nodo:nth-child(5) .nodo__estrella { transition-delay: 2160ms; }
.constelacion.sc-in .nodo:nth-child(6) .nodo__ficha, .constelacion.sc-in .nodo:nth-child(6) .nodo__estrella { transition-delay: 2680ms; }
.constelacion.sc-in .nodo:hover .nodo__ficha, .constelacion.sc-in .nodo:hover .nodo__estrella { transition-delay: 0ms; }
.constelacion.sc-in .seg { stroke-dashoffset: 0; stroke: var(--sc-ink); opacity: 0.34; }
.constelacion.sc-in .seg:nth-of-type(1) { transition-delay: 120ms, 3150ms, 3150ms; }
.constelacion.sc-in .seg:nth-of-type(2) { transition-delay: 640ms, 3150ms, 3150ms; }
.constelacion.sc-in .seg:nth-of-type(3) { transition-delay: 1160ms, 3150ms, 3150ms; }
.constelacion.sc-in .seg:nth-of-type(4) { transition-delay: 1680ms, 3150ms, 3150ms; }
.constelacion.sc-in .seg:nth-of-type(5) { transition-delay: 2200ms, 3150ms, 3150ms; }
.constelacion.sc-in .nodo__flip s { opacity: 0; transition-delay: 3150ms; }
.constelacion.sc-in .nodo__flip b { opacity: 1; transition-delay: 3250ms; }
.constelacion.sc-in .pulso { opacity: 1; transition-delay: 3500ms; }
/* "esto me pasa": con JavaScript cada ficha es un botón que se marca y viaja al formulario */
.nodo__ficha[role="button"] { cursor: pointer; }
.nodo__ficha[role="button"]:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.nodo__ficha[aria-pressed="true"] { border-color: rgb(224 96 96 / 0.7); background: rgb(58 22 28 / 0.78); box-shadow: 0 0 0 1px rgb(224 96 96 / 0.25), 0 12px 30px -18px rgb(224 96 96 / 0.8); }
.nodo__ficha[aria-pressed="true"] .nodo__n::after { content: " ✓"; color: var(--accent-text); }
.nodo:has(.nodo__ficha[aria-pressed="true"]) .nodo__estrella { background: var(--accent-text); box-shadow: 0 0 0 3px rgb(224 96 96 / 0.2), 0 0 18px 4px rgb(224 96 96 / 0.6); }
.marcadas { display: grid; gap: 0.35rem; }
.marcadas[hidden] { display: none; }
.marcadas__hint { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.marcadas__hint::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 0.55rem; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 3px rgb(224 96 96 / 0.2); vertical-align: 0.1em; }
.marcadas__cuenta { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink); min-height: 1.4em; }
.marcadas__cuenta a { color: var(--accent-text); font-weight: 560; }

/* --------------------------------------------------------- soluciones -- */
.soluciones__stage { display: grid; align-items: center; }
.soluciones__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; width: 100%; }
.soluciones__fijo .sc-display--lg { max-width: 16ch; }
.soluciones__fijo .sc-body { margin-top: var(--sc-5); max-width: 40ch; }
.soluciones__lista { position: relative; margin: 0; padding: 0; list-style: none; min-height: 14rem; }
.soluciones__lista li { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.4rem 1rem; align-items: start; }
.soluciones__lista i { grid-row: 1 / span 2; font-family: var(--sc-font-mono); font-style: normal; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--accent-text); padding-top: 0.55em; }
.soluciones__lista h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 540; letter-spacing: -0.02em; line-height: 1.1; font-stretch: 104%; }
.soluciones__lista p { margin: 0; color: var(--sc-ink-soft); max-width: 42ch; line-height: 1.5; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }

/* ------------------------------------------------------------- escenas -- */
/* Una automatización contada en 4 pasos: fondo con nebulosa que deriva (capa 0), malla de puntos (capa 1), línea y
   fichas de paso (capa 2), globos que aparecen junto a cada paso (capa 3) y el paquete de luz que viaja (capa 4). */
.esc { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 420ms var(--sc-ease-out); }
.carrusel__pista .esc.activo, .flujo-contacto__lienzo .esc { opacity: 1; }
.esc__fondo { position: absolute; inset: -25%; background: radial-gradient(55% 45% at 28% 42%, rgb(198 49 49 / 0.20), transparent 62%), radial-gradient(40% 40% at 76% 68%, rgb(95 169 141 / 0.12), transparent 60%), radial-gradient(30% 30% at 60% 20%, rgb(248 247 245 / 0.05), transparent 60%); animation: esc-deriva 16s ease-in-out infinite alternate; }
@keyframes esc-deriva { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } }
.esc__malla { position: absolute; inset: 0; background-image: radial-gradient(circle 1px at 50% 50%, rgb(248 247 245 / 0.13) 0 1px, transparent 1.6px); background-size: 22px 22px; mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent); -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent); }
.esc__linea { position: absolute; left: 9%; right: 9%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgb(248 247 245 / 0.22) 12%, rgb(248 247 245 / 0.22) 88%, transparent); }
.esc__pasos { position: absolute; left: 5%; right: 5%; top: 50%; translate: 0 -50%; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 2.4%, 1.3rem); }
.esc__paso { position: relative; display: grid; gap: 0.3rem; padding: 0.75rem 0.8rem 0.7rem; border-radius: 14px; border: 1px solid var(--hair-2); background: rgb(17 24 39 / 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0.5; translate: 0 8px; transition: opacity 380ms var(--sc-ease-out), translate 380ms var(--sc-ease-out), border-color 380ms var(--sc-ease-out), box-shadow 380ms var(--sc-ease-out), background-color 380ms var(--sc-ease-out); }
.esc__paso.on { opacity: 1; translate: 0 0; border-color: rgb(224 96 96 / 0.55); background: rgb(23 29 43 / 0.9); box-shadow: 0 0 0 1px rgb(224 96 96 / 0.2), 0 14px 34px -20px rgb(224 96 96 / 0.7); }
.esc__paso.actual { box-shadow: 0 0 0 1px rgb(224 96 96 / 0.45), 0 0 28px -4px rgb(224 96 96 / 0.55); }
.esc__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgb(248 247 245 / 0.06); color: rgb(248 247 245 / 0.75); transition: background-color 300ms var(--sc-ease-out), color 300ms var(--sc-ease-out); }
.esc__ic svg { width: 19px; height: 19px; }
.esc__paso.on .esc__ic { background: rgb(198 49 49 / 0.3); color: var(--sc-ink); }
.esc__t { font-weight: 560; font-size: clamp(0.8rem, 0.76rem + 0.25vw, 0.95rem); letter-spacing: -0.01em; line-height: 1.15; color: var(--sc-ink); }
.esc__s { font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8rem); color: var(--sc-ink-soft); line-height: 1.3; }
.esc__paquete { position: absolute; top: 50%; left: var(--px, 8%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--sc-ink); box-shadow: 0 0 12px 4px rgb(224 96 96 / 0.85), 0 0 30px 10px rgb(224 96 96 / 0.25); opacity: 0; transition: left 780ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms var(--sc-ease-out); }
.esc__paquete.on { opacity: 1; }
.esc__b { position: absolute; left: 50%; translate: -50% 10px; opacity: 0; transition: opacity 360ms var(--sc-ease-out), translate 460ms cubic-bezier(0.2, 0.9, 0.3, 1.25); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.62rem; border-radius: 10px; background: rgb(11 15 26 / 0.94); border: 1px solid var(--hair); box-shadow: var(--sc-e2); font-size: 0.75rem; color: var(--sc-ink-soft); white-space: nowrap; pointer-events: none; z-index: 2; }
.esc__b--arriba { bottom: calc(100% + 10px); } .esc__b--abajo { top: calc(100% + 10px); }
.esc__b.on { opacity: 1; translate: -50% 0; }
.esc__b b { color: var(--accent-text); font-weight: 600; } .esc__b .ok { color: #7cc7a7; font-weight: 700; }
.esc__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 3px rgb(224 96 96 / 0.2); animation: esc-late 1.2s ease-in-out infinite; }
@keyframes esc-late { 50% { box-shadow: 0 0 0 6px rgb(224 96 96 / 0.08); } }
.esc__barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .esc__barras i { width: 4px; height: var(--h); background: var(--accent-text); border-radius: 1px; transform-origin: bottom; animation: esc-crece 600ms var(--sc-ease-out) both; }
@keyframes esc-crece { from { transform: scaleY(0); } }
.esc__fin { position: absolute; left: 5%; bottom: 6%; padding: 0.45rem 0.7rem; border-radius: 999px; border: 1px solid rgb(224 96 96 / 0.45); background: rgb(198 49 49 / 0.16); color: var(--sc-ink); font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); opacity: 0; translate: 0 8px; transition: opacity 400ms var(--sc-ease-out), translate 400ms var(--sc-ease-out); }
.esc__fin b { color: var(--accent-text); } .esc__fin .ok { color: #7cc7a7; font-weight: 700; }
.esc__fin.on { opacity: 1; translate: 0 0; }
.esc:first-child .esc__paso:first-child .esc__b { left: 0; translate: 0 10px; } .esc:first-child .esc__paso:first-child .esc__b.on { translate: 0 0; }
.esc__paso:last-child .esc__b { left: auto; right: 0; translate: 0 10px; } .esc__paso:last-child .esc__b.on { translate: 0 0; }
.esc__paso:first-child .esc__b { left: 0; translate: 0 10px; } .esc__paso:first-child .esc__b.on { translate: 0 0; }

/* -------------------------------------------------------------- áreas -- */
/* la nebulosa de áreas es una capa FIJA como el cielo del hero (Kael: "hay que hacer lo mismo del fondo");
   la sección va fuera de las láminas, con z-index 1 (bajo las láminas, sobre el fondo) y site.js la muestra solo
   mientras la sección está cerca de la pantalla. Sin máscara: los difuminados los ponen las láminas. */
.areas { position: relative; z-index: 1; }
.areas__fondo { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: 0; background: var(--sc-canvas) url("assets/hero-2560.webp") center 70% / cover no-repeat; pointer-events: none; }
.areas__fondo::after { content: ""; position: absolute; inset: 0; background: var(--sc-canvas); opacity: 0.68; }
.areas__fondo.oculto { visibility: hidden; }
.areas .sc-wrap { position: relative; }
.areas__cab .sc-display--lg { max-width: 22ch; }
.areas__cab .sc-body { max-width: 60ch; }
.areas__grid { margin-top: var(--sc-7); display: grid; grid-template-columns: minmax(16rem, 0.8fr) 1.4fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.areas__tabs { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.areas__tabs button { appearance: none; cursor: pointer; width: 100%; text-align: left; padding: 0.7rem 0.9rem; border-radius: var(--sc-r-md); border: 1px solid transparent; background: transparent; color: var(--sc-ink-soft); font-weight: 500; font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem); transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
.areas__tabs button:hover { color: var(--sc-ink); background: rgb(248 247 245 / 0.05); }
.areas__tabs button[aria-selected="true"] { color: var(--sc-ink); background: rgb(17 24 39 / 0.9); border-color: var(--hair); box-shadow: var(--sc-e1), var(--sc-edge); }
.areas__panel { margin-top: var(--sc-4); padding: 1.1rem 1.2rem; border-radius: var(--sc-r-lg); border: 1px solid var(--hair-2); background: rgb(17 24 39 / 0.55); }
.areas__panel ul[hidden] { display: none; }
.areas__panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.areas__panel li { color: var(--sc-ink); padding-left: 1.05rem; position: relative; line-height: 1.4; font-size: var(--sc-t-sm); }
.areas__panel li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); }
/* el carrusel */
.carrusel { display: grid; gap: var(--sc-5); }
.carrusel__pista { position: relative; aspect-ratio: 16 / 7; min-height: 15rem; }
.carrusel__pista .flujo { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms var(--sc-ease-out); }
.carrusel__pista .flujo.activo { opacity: 1; }
.carrusel__texto .sc-display--md { margin-top: var(--sc-3); max-width: 26ch; }
.carrusel__texto .sc-body { margin-top: var(--sc-3); max-width: 60ch; }
.carrusel__ctl { margin-top: var(--sc-5); display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.carrusel__btn { appearance: none; cursor: pointer; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--hair); background: rgb(17 24 39 / 0.7); color: var(--sc-ink); display: grid; place-items: center; transition: background-color 140ms var(--sc-ease-out), translate 120ms var(--sc-ease-out); }
.carrusel__btn:hover { background: rgb(248 247 245 / 0.08); } .carrusel__btn:active { translate: 0 1px; }
.carrusel__btn svg { width: 1.05rem; height: 1.05rem; }
/* puntos: el círculo se ve de 10 px pero el botón mide 32 px, que es lo que se toca con el dedo */
.carrusel__puntos { margin: 0; padding: 0; list-style: none; display: flex; gap: 0; }
.carrusel__puntos button { appearance: none; cursor: pointer; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; padding: 0; display: grid; place-items: center; }
.carrusel__puntos button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgb(248 247 245 / 0.45); transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out), scale 200ms var(--sc-ease-out); }
.carrusel__puntos button:hover::before { border-color: var(--sc-ink); }
.carrusel__puntos button[aria-current="true"]::before { background: var(--sc-accent); border-color: var(--sc-accent); scale: 1.2; }
.carrusel__puntos button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }

/* ------------------------------------------------------------- método -- */
.metodo__stage { display: grid; align-items: center; }
.metodo__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; width: 100%; }
.metodo .sc-display--lg { max-width: 22ch; }
.fases { margin: var(--sc-6) 0 0; padding: 0 0 0 1.6rem; list-style: none; position: relative; display: grid; gap: 0.9rem; }
.fases::before { content: ""; position: absolute; left: 5px; top: 0.4rem; bottom: 0.4rem; width: 1px; background: var(--hair); }
.fases::after { content: ""; position: absolute; left: 5px; top: 0.4rem; width: 1px; height: calc((100% - 0.8rem) * var(--sc-p, 0)); background: var(--accent-text); transition: height 120ms linear; }
.fases li { position: relative; padding: 0.35rem 0; opacity: 0.45; transition: opacity 300ms var(--sc-ease-out); }
.fases li::before { content: ""; position: absolute; left: calc(-1.6rem + 1px); top: 0.75rem; width: 9px; height: 9px; border-radius: 50%; background: var(--sc-canvas); border: 1.5px solid var(--sc-ink-soft); transition: border-color 300ms var(--sc-ease-out), background-color 300ms var(--sc-ease-out); }
.fases li.hecha, .fases li.actual { opacity: 1; }
.fases li.hecha::before, .fases li.actual::before { border-color: var(--accent-text); }
.fases li.actual::before { background: var(--accent-text); box-shadow: 0 0 0 4px rgb(198 49 49 / 0.22); }
.fases i { font-family: var(--sc-font-mono); font-style: normal; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--sc-ink-soft); margin-right: 0.6rem; }
.fases h3 { display: inline; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); font-weight: 540; letter-spacing: -0.01em; }
.fases p { margin: 0.25rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 320ms var(--sc-ease-out), opacity 300ms var(--sc-ease-out); }
.fases li.actual p { max-height: 6rem; opacity: 1; }
.metodo__fotos { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--sc-r-lg); overflow: hidden; border: 1px solid var(--hair); box-shadow: var(--sc-e3), var(--sc-edge); background: var(--sc-surface); }
.metodo__fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.metodo__cap { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0.9rem; border-radius: var(--sc-r-md); background: rgb(7 10 18 / 0.72); backdrop-filter: blur(8px); color: var(--sc-ink); font-weight: 520; }
.metodo__cap-n { font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--sc-ink-soft); }

/* ---------------------------------------------------------- confianza -- */
/* la sección deja --fade de aire extra abajo: la cola de la lámina que se disuelve sobre el cielo del cierre no lleva texto */
.confianza-sec { padding-bottom: calc(var(--sc-section) + var(--fade)); }
.confianza { margin-top: 0; display: grid; grid-template-columns: 1fr 2fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.confianza ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.confianza b { display: block; font-weight: 540; color: var(--sc-ink); }
.confianza span { display: block; color: var(--sc-ink-soft); line-height: 1.45; margin-top: 0.15rem; font-size: var(--sc-t-sm); }

/* ------------------------------------------------------------- cierre -- */
/* el cierre ya no se fija en ninguna pantalla: con la nota, las tareas y el consentimiento el formulario no cabe en
   100vh de un portátil y el pie tapaba "Enviar". La sección mide lo que su contenido y el cielo con el planeta se queda
   pegado detrás (sticky), con el mismo encuadre que tenía fijado. El escenario sigue siendo "sticky" (el motor no avisa). */
.cierre { height: auto !important; }
.cierre__stage { display: flex; flex-direction: column; height: auto; min-height: 100svh; overflow: clip; }
/* el cierre empieza --fade por ENCIMA del final de la última lámina (margen negativo): su cielo, con el planeta, ya
   está debajo mientras la lámina se disuelve, así el suavizado cae justo sobre la capa que entra. La lámina (z 2)
   pinta por encima; la sección no necesita máscara. */
.cierre { margin-top: calc(-1 * var(--fade)); }
.cierre__cielo { position: sticky; top: 0; flex: none; display: block; width: 100%; height: 100lvh; margin-bottom: -100lvh; transform: none !important; pointer-events: none; z-index: 0; }
.cierre__cielo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; max-width: none; display: block; }
.cierre__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; width: 100%; padding-top: calc(var(--fade) + clamp(2.5rem, 7vh, 4.5rem)); }
/* el texto empieza DESPUÉS de la cola difuminada de la lámina anterior (el cierre arranca --fade más arriba, debajo
   de ella): como ya no se fija, sin este margen el titular quedaba medio tapado al final de la página */
.cierre__texto .sc-display--lg { max-width: 16ch; }
.cierre__texto .sc-body { margin-top: var(--sc-5); max-width: 42ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); color: var(--sc-ink); }
.flujo-contacto { margin-top: var(--sc-6); padding: 1rem 1.2rem 0.6rem; border-radius: var(--sc-r-lg); border: 1px solid var(--hair); background: rgb(11 15 26 / 0.82); backdrop-filter: blur(8px); box-shadow: var(--sc-e2), var(--sc-edge); max-width: 36rem; }
.flujo-contacto .sc-label { color: var(--sc-ink); }
.flujo-contacto__lienzo { margin-top: var(--sc-3); aspect-ratio: 16 / 7; }
.form { position: relative; padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--sc-r-lg); border: 1px solid var(--hair); background: rgb(17 24 39 / 0.82); backdrop-filter: blur(8px); box-shadow: var(--sc-e3), var(--sc-edge); }
.form .sc-display--md { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); }
.form__nota { margin: 0.5rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.form__nota b { color: var(--sc-ink); font-weight: 560; }
/* tareas marcadas en la constelación: chips que se pueden quitar; se envían delante del mensaje */
.form__tareas[hidden] { display: none; }
.form__tareas-t { font-size: 0.8rem; color: var(--sc-ink-soft); }
.chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips button { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding: 0.3rem 0.5rem 0.3rem 0.75rem; border-radius: 999px; border: 1px solid rgb(224 96 96 / 0.55); background: rgb(198 49 49 / 0.14); color: var(--sc-ink); font-size: 0.82rem; line-height: 1.2; text-align: left; }
.chips button:hover { background: rgb(198 49 49 / 0.26); }
.chips button svg { width: 0.85rem; height: 0.85rem; flex: none; opacity: 0.8; }
.campos { display: grid; gap: 0.8rem; margin-top: var(--sc-5); grid-template-columns: 1fr 1fr; }
.campo { display: grid; gap: 0.3rem; } .campo--full { grid-column: 1 / -1; }
.campo label { font-size: 0.8rem; color: var(--sc-ink-soft); }
.campo label .opcional { color: rgb(167 176 192 / 0.8); }
.campo input, .campo textarea { width: 100%; border-radius: var(--sc-r-md); border: 1px solid rgb(248 247 245 / 0.16); background: rgb(7 10 18 / 0.6); color: var(--sc-ink); padding: 0.75rem 0.85rem; font-size: 1rem; transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); }
.campo textarea { min-height: 6rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgb(198 49 49 / 0.25); }
.campo [aria-invalid="true"] { border-color: var(--accent-text); }
.campo .error { font-size: 0.8rem; color: var(--accent-text); min-height: 1em; }
.rgpd { display: flex; gap: 0.7rem; align-items: start; font-size: 0.8rem; color: var(--sc-ink-soft); grid-column: 1 / -1; line-height: 1.45; }
.rgpd input { margin-top: 0.2rem; width: 1rem; height: 1rem; flex: none; } .rgpd a { color: var(--sc-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { margin-top: var(--sc-5); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.estado { margin: 0; font-size: 0.86rem; color: var(--sc-ink-soft); } .estado.mal { color: var(--accent-text); }
.form.enviado .campos, .form.enviado .form__foot, .form.enviado .form__nota { display: none; }
.gracias .sc-body { margin-top: var(--sc-3); }
.pie { position: relative; margin-top: auto; padding: var(--sc-6) var(--sc-gutter) clamp(1rem, 3vh, 2rem); z-index: 1; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.8rem; color: var(--sc-ink-soft); }
.pie a { color: var(--sc-ink-soft); text-decoration-color: rgb(167 176 192 / 0.5); } .pie a:hover { color: var(--sc-ink); }

/* ------------------------------------------------------ accesibilidad -- */
.salta { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.6rem 1rem; background: var(--sc-ink); color: #111827; border-radius: 0 0 var(--sc-r-md) 0; }
.salta:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
  .nodo__ficha, .nodo__estrella, .nodo__flip s, .nodo__flip b, .seg, .pulso, .fases::after, .fases p { transition: none; }
  .esc__fondo, .esc__punto, .esc__barras i { animation: none; }
  .esc__paso, .esc__b, .esc__paquete, .esc__fin { transition: none; }
  .pulso { display: none; }
  /* capas del hero: quietas en su sitio, sin deriva, crecimiento ni respuesta al ratón */
  .flota { translate: none; scale: var(--s0, 1); opacity: var(--a0, 1); }
  .hero__copy { scale: none; }
}

/* --------------------------------------------------------------- móvil -- */
@media (max-width: 860px) {
  .barra { gap: 0.8rem; padding: 0.7rem var(--sc-gutter); }
  .barra__nav { display: none; }
  .cta--barra { margin-left: auto; padding: 0.55rem 0.85rem; font-size: 0.88rem; gap: 0.45rem; }
  .cta--barra svg { width: 0.95rem; height: 0.95rem; }
  .sc-display--xl { font-size: clamp(1.85rem, 1.05rem + 4.3vw, 2.6rem); }
  .hero__escena { --pt: 10rem; --pb: 7rem; }
  .hero__copy { width: 92vw; }
  .hero__eyebrow { font-size: 0.78rem; } .hero__eyebrow span + span::before { width: 0.9rem; margin: 0 0.5rem; }
  .hero__copy .sc-display--xl { max-width: none; }
  .hero__sub { font-size: 1rem; }
  /* móvil: cuatro tareas en los márgenes de arriba y abajo, nunca encima del texto; las otras dos no caben */
  .flota { font-size: 0.8rem; padding: 0.45rem 0.65rem; }
  .flota em { display: none; }
  .f1 { left: 4%; top: calc(var(--pt) - 5.4rem); } .f2 { right: 4%; top: calc(var(--pt) - 2.9rem); }
  .f3, .f4 { display: none; }
  .f6 { right: 4%; left: auto; top: calc(100% - var(--pb) + 0.8rem); } .f5 { left: 4%; top: calc(100% - var(--pb) + 3.9rem); }
  .manifiesto__grid, .soluciones__grid, .areas__grid, .metodo__grid, .cierre__grid, .confianza { grid-template-columns: 1fr; }
  .confianza ul { grid-template-columns: 1fr; }
  .soluciones__lista { min-height: 16rem; margin-top: var(--sc-6); }
  /* áreas: las pestañas en una fila que se desliza de lado, pegada a los bordes de la pantalla */
  .areas__izq, .carrusel { min-width: 0; } /* sin esto la fila de pestañas ensancha la columna y la página */
  .areas__tabs { display: flex; gap: 0.4rem; overflow-x: auto; margin-inline: calc(-1 * var(--sc-gutter)); padding: 0.1rem var(--sc-gutter) 0.4rem; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .areas__tabs::-webkit-scrollbar { display: none; }
  .areas__tabs li { flex: none; scroll-snap-align: start; scroll-margin-inline: var(--sc-gutter); }
  .areas__tabs button { width: auto; white-space: nowrap; padding: 0.55rem 0.95rem; border-color: var(--hair-2); font-size: 0.95rem; }
  .carrusel__btn { width: 2.75rem; height: 2.75rem; }
  /* la foto ocupa solo el hueco que deja el texto (antes, en pantallas bajas, se salía por abajo), sin pasar de 4:3 */
  .metodo__grid { align-self: stretch; align-items: start; align-content: start; grid-template-rows: auto minmax(0, 1fr); gap: 1.25rem; height: 100%; padding-top: 4.5rem; padding-bottom: 1rem; }
  .metodo__fotos { aspect-ratio: auto; height: 100%; min-height: 9rem; max-height: calc((100vw - 2 * var(--sc-gutter)) * 0.75); }
  .fases p { display: none; }
  .campos { grid-template-columns: 1fr; }
  .cierre__grid { padding-top: calc(var(--fade) + 2.5rem); }
  .flujo-contacto { display: none; }
  /* la constelación pasa a columna: estrella + etiqueta por fila, unidas por una línea vertical que atraviesa las estrellas */
  .constelacion { aspect-ratio: auto; margin-top: var(--sc-5); }
  .constelacion__campo { position: relative; inset: auto; } .constelacion__campo::before { display: none; }
  .constelacion__lineas { display: none; }
  .constelacion__nodos { position: relative; inset: auto; display: grid; gap: 0.6rem; }
  .constelacion__nodos::before { content: ""; position: absolute; left: 5px; top: 0.6rem; bottom: 0.6rem; width: 1px; translate: -0.5px 0; background: linear-gradient(var(--hair), var(--accent-text) 50%, var(--hair)); }
  .nodo { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; align-items: center; gap: 0.85rem; }
  .nodo__estrella { position: relative; translate: none; flex: none; }
  .nodo__ficha, .nodo--br .nodo__ficha, .nodo--r .nodo__ficha, .nodo--l .nodo__ficha, .nodo--t .nodo__ficha { position: static; translate: 0 8px; flex: 1; width: auto; max-width: none; text-align: left; }
  .constelacion.sc-in .nodo .nodo__ficha { translate: 0 0; }
  .nodo__t { max-width: none; }
  .nodo--l .nodo__estado, .nodo--t .nodo__estado { justify-content: flex-start; }
  .nodo--l .nodo__flip s { left: 0; right: auto; }
  /* cierre sin fijar: el formulario entero no cabe en una pantalla y antes había que hacer scroll DENTRO de él.
     La sección mide lo que su contenido y el cielo con el planeta se queda pegado detrás (sticky) mientras se lee,
     con el mismo encuadre que tenía fijado. El motor sigue viendo el escenario "sticky", así que no avisa. */
  .areas__fondo { background-image: url("assets/hero-p.webp"); }
}

/* lista de ejemplos del carrusel cuando no hay JavaScript (noscript en index.html) */
.carrusel__sinjs { margin: var(--sc-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sc-6); }
.carrusel__sinjs .sc-body { margin-top: var(--sc-3); max-width: 60ch; }
.form__sinjs { margin: var(--sc-4) 0 0; color: var(--sc-ink); line-height: 1.5; }
.form__sinjs a { color: var(--accent-text); }

/* móvil con pantalla alta: la fase actual enseña su texto (en pantallas bajas no cabe junto a la foto) */
@media (max-width: 860px) and (min-height: 700px) { .fases p { display: block; } }
/* móvil bajo (360x640): fases más juntas para que la foto tenga sitio */
@media (max-width: 860px) and (max-height: 699px) { .fases { gap: 0.3rem; margin-top: var(--sc-4); } .metodo__grid { padding-top: 4rem; gap: 1rem; } }

/* carrusel hasta 1099 px (móvil, tablet y portátil estrecho): las escenas se apilan en la misma celda, así la pista
   mide lo que la más alta, y el resultado va DEBAJO de las cuatro tarjetas en lugar de montarse encima */
@media (max-width: 1099px) {
  .carrusel__pista { display: grid; aspect-ratio: auto; min-height: 0; }
  .carrusel__pista .esc { position: relative; inset: auto; grid-area: 1 / 1; display: flex; flex-direction: column; gap: 0.9rem; padding: 0.9rem; }
  .esc__pasos { position: relative; left: auto; right: auto; top: auto; translate: none; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .carrusel__pista .esc__b, .carrusel__pista .esc__paquete, .carrusel__pista .esc__linea { display: none; }
  .esc__fin { position: relative; left: auto; bottom: auto; align-self: flex-start; }
}
/* 1100 px o más: al terminar el ejemplo, el globo de debajo del paso 2 deja sitio al resultado */
@media (min-width: 1100px) { .carrusel__pista .esc.done .esc__paso:nth-child(2) .esc__b--abajo { opacity: 0; } }
/* movimiento reducido: el texto de las fases se ve sin animar (la fase sigue al scroll) */
@media (prefers-reduced-motion: reduce) { .fases li.actual p { max-height: none; opacity: 1; } }
/* táctil: controles nuevos a 44 px (pausa, puntos, chips) */
@media (pointer: coarse) {
  .carrusel__pausa { width: 2.75rem; height: 2.75rem; margin: -0.6rem -0.6rem -0.6rem 0; }
  .carrusel__puntos button { width: 2.75rem; height: 2.75rem; }
  .chips button { min-height: 2.75rem; }
}
/* móvil: el anillo de foco de las pestañas no se corta en la fila deslizable */
@media (max-width: 860px) { .areas__tabs button:focus-visible { outline-offset: -2px; } }