/* ── Tipografías propias ─────────────────────────────────────────
Inter y Poppins se sirven desde /assets/fonts, no desde Google.
Razón legal: con Google Fonts, cada visitante le mandaba su IP a
Google al cargar la página, sin contrato de por medio. Así nada sale
del sitio hacia terceros (ver /cookies). Solo el subconjunto latino:
cubre acentos, ñ, ¿ y ¡. Inter es fuente variable: un archivo cubre
400, 500 y 600.
font-display:block: si la fuente aún no llegó, el texto espera (hasta
3 s, invisible) y aparece ya con la letra correcta. Con `swap` salía
primero en la letra del sistema y cambiaba a media carga: ese brinco
de tipografía se veía en celular cada vez que se abría el sitio. Las
dos fuentes principales van precargadas desde el de cada
página, así que en la práctica casi nunca hay espera. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:block;
src:url("/assets/fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:block;
src:url("/assets/fonts/poppins-400-latin.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:block;
src:url("/assets/fonts/poppins-500-latin.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:block;
src:url("/assets/fonts/poppins-600-latin.woff2") format("woff2")}
/* ── oleaje.css · canvas de fondo, fijo detrás del contenido ─── */
#oleaje{position:fixed;inset:0;z-index:-1;width:100%;height:100%;display:block;pointer-events:none}
/* ═══════════════════════════════════════════════════════════════
Kaigoh · Design System — construido sobre tokens/, no a mano.
Copiado 1:1 de: colors.css · theme.css · typography.css ·
spacing.css · elevation.css · motion.css · base.css · brand.css
Fuentes: el sistema pide auto-hospedarlas desde assets/fonts/.
El CSP de los Artifacts solo admite Google Fonts, así que aquí
van por CDN. En producción hay que servir los TTF del paquete.
═══════════════════════════════════════════════════════════════ */
/* ── colors.css ─────────────────────────────────────────────── */
:root{
color-scheme:dark;
--paper:#F4F3EE; --ink:#141414; --blue:#3B5BFF; --mist:#E6E6E1;
--paper-lift:#FAF9F5; --mist-deep:#D8D8D2;
--ink-soft:#5A5A55; --ink-mute:#6E6E68;
--blue-deep:#2A47E0; --blue-light:#7B92FF;
--blue-wash:#ECEFFF; --blue-veil:rgba(59,91,255,.10);
--ink-lift:#1E1E1D; --ink-line:#2E2E2C; --ink-line-strong:#454542;
--paper-soft:#C9C8C2; --paper-mute:#A3A29C;
--critical:#B3261E; --critical-light:#FF9C93;
}
/* ── theme.css · roles semánticos, declarados tres veces ────── */
:root{
--surface:var(--paper); --surface-2:var(--mist); --surface-lift:var(--paper-lift);
--surface-fill:var(--ink); --on-surface-fill:var(--paper);
--on-surface:var(--ink); --on-surface-soft:var(--ink-soft); --on-surface-mute:var(--ink-mute);
--border:var(--mist); --border-strong:var(--mist-deep); --border-ink:var(--ink);
--accent:var(--blue); --accent-text:var(--blue); --accent-hover:var(--blue-deep);
--on-accent:#FFFFFF; --accent-surface:var(--blue-wash);
--focus:var(--blue); --critical-text:var(--critical); --shadow-color:20,20,20;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--surface:var(--ink); --surface-2:var(--ink-lift); --surface-lift:var(--ink-lift);
--surface-fill:var(--paper); --on-surface-fill:var(--ink);
--on-surface:var(--paper); --on-surface-soft:var(--paper-soft); --on-surface-mute:var(--paper-mute);
--border:var(--ink-line); --border-strong:var(--ink-line-strong); --border-ink:var(--paper);
--accent-text:var(--blue-light); --accent-hover:var(--blue-light);
--accent-surface:rgba(59,91,255,.16);
--focus:var(--blue-light); --critical-text:var(--critical-light); --shadow-color:0,0,0;
}
}
[data-theme="dark"]{
--surface:var(--ink); --surface-2:var(--ink-lift); --surface-lift:var(--ink-lift);
--surface-fill:var(--paper); --on-surface-fill:var(--ink);
--on-surface:var(--paper); --on-surface-soft:var(--paper-soft); --on-surface-mute:var(--paper-mute);
--border:var(--ink-line); --border-strong:var(--ink-line-strong); --border-ink:var(--paper);
--accent-text:var(--blue-light); --accent-hover:var(--blue-light);
--accent-surface:rgba(59,91,255,.16);
--focus:var(--blue-light); --critical-text:var(--critical-light); --shadow-color:0,0,0;
}
/* Tema claro explícito — declarado después del media query para que
gane sobre el oscuro automático. */
[data-theme="light"]{
color-scheme:light;
--surface:var(--paper); --surface-2:var(--mist); --surface-lift:var(--paper-lift);
--surface-fill:var(--ink); --on-surface-fill:var(--paper);
--on-surface:var(--ink); --on-surface-soft:var(--ink-soft); --on-surface-mute:var(--ink-mute);
--border:var(--mist); --border-strong:var(--mist-deep); --border-ink:var(--ink);
--accent:var(--blue); --accent-text:var(--blue); --accent-hover:var(--blue-deep);
--on-accent:#FFFFFF; --accent-surface:var(--blue-wash);
--focus:var(--blue); --critical-text:var(--critical); --shadow-color:20,20,20;
}
/* Inversión local: banda de tinta dentro de página de papel, y al
revés. Sobrevive ambos temas — nunca negro sobre negro. */
[data-section="invert"]{
--surface:var(--ink); --surface-2:var(--ink-lift); --surface-lift:var(--ink-lift);
--surface-fill:var(--paper); --on-surface-fill:var(--ink);
--on-surface:var(--paper); --on-surface-soft:var(--paper-soft); --on-surface-mute:var(--paper-mute);
--border:var(--ink-line); --border-strong:var(--ink-line-strong); --border-ink:var(--paper);
--accent-text:var(--blue-light); --accent-hover:var(--blue-light);
--accent-surface:rgba(59,91,255,.16); --focus:var(--blue-light);
background:var(--surface); color:var(--on-surface);
}
/* El pie es una banda de tinta sobre papel. En tema oscuro esa banda
sería del mismo color que la página, así que se voltea a papel: la
otra mitad del "y al revés". Dos declaraciones porque el tema
automático y el explícito no se pueden agrupar en un selector. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) footer[data-section="invert"]{
--surface:var(--paper); --surface-2:var(--mist); --surface-lift:var(--paper-lift);
--surface-fill:var(--ink); --on-surface-fill:var(--paper);
--on-surface:var(--ink); --on-surface-soft:var(--ink-soft); --on-surface-mute:var(--ink-mute);
--border:var(--mist); --border-strong:var(--mist-deep); --border-ink:var(--ink);
--accent-text:var(--blue); --accent-hover:var(--blue-deep);
--accent-surface:var(--blue-wash); --focus:var(--blue);
}
}
[data-section="paper"],
[data-theme="dark"] footer[data-section="invert"]{
--surface:var(--paper); --surface-2:var(--mist); --surface-lift:var(--paper-lift);
--surface-fill:var(--ink); --on-surface-fill:var(--paper);
--on-surface:var(--ink); --on-surface-soft:var(--ink-soft); --on-surface-mute:var(--ink-mute);
--border:var(--mist); --border-strong:var(--mist-deep); --border-ink:var(--ink);
--accent-text:var(--blue); --accent-hover:var(--blue-deep);
--accent-surface:var(--blue-wash); --focus:var(--blue);
background:var(--surface); color:var(--on-surface);
}
/* ── typography.css ─────────────────────────────────────────── */
:root{
--font-display:"Poppins",system-ui,-apple-system,sans-serif;
--font-body:"Inter",system-ui,-apple-system,sans-serif;
--tracking-display:-0.018em; --tracking-tight:-0.03em;
--tracking-label:0.08em; --tracking-kicker:0.10em;
--text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.8125rem;
--text-body-sm:0.875rem; --text-body:1rem; --text-body-lg:1.125rem;
--text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.5rem;
--text-4xl:3.25rem; --text-5xl:4.25rem; --text-6xl:6rem;
--leading-tight:1.04; --leading-heading:1.1; --leading-snug:1.4; --leading-body:1.75;
--weight-regular:400; --weight-medium:500; --weight-semibold:600;
}
/* ── spacing.css · elevation.css · motion.css ───────────────── */
:root{
--space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;
--space-24:24px;--space-32:32px;--space-48:48px;--space-64:64px;--space-96:96px;
--gutter:7vw; --measure:36rem; --measure-wide:70rem;
--radius-control:8px; --radius-card:12px; --radius-card-lg:16px;
--radius-pill:999px; /* chips/switch — NUNCA botones */
--hairline:1px;
--shadow-1:0 1px 2px rgba(var(--shadow-color),.05);
--shadow-2:0 6px 20px rgba(var(--shadow-color),.08);
--shadow-3:0 16px 34px rgba(var(--shadow-color),.16);
--ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.22,1,.36,1);
--dur:.22s; --dur-slow:.42s;
/* Ritmo ambiental de las ventanillas — fuera de la escala del
sistema, que solo define transiciones de estado. */
--orbita-giro:2.6s; /* una vuelta del satélite */
--orbita-salto:2600; /* ms entre ventanilla y ventanilla (lo lee el JS) */
--ruta-recorre:9s; /* el punto azul cruza la línea del método de
extremo a extremo: cuatro tramos con una
parada en cada estación y un respiro al final */
--orbita-fundido:.8s; /* relevo entre ventanillas — más lento que --dur,
que es para respuestas a un clic, no para ambiente.
Es más largo que antes a propósito: el salto va
más rápido, así que los fundidos de entrada y
salida se traslapan y el relevo se lee como un
paso continuo de luz, no como un parpadeo. */
}
/* --orbita-fundido también: es el relevo entre ventanillas y no sale de
--dur, así que sin esta línea se quedaba fundiendo medio segundo para
quien pidió que nada se moviera. */
@media (prefers-reduced-motion:reduce){:root{--dur:0.01s;--dur-slow:0.01s;--orbita-fundido:0.01s}}
/* ── base.css ───────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--surface);color:var(--on-surface);
font-family:var(--font-body);font-size:var(--text-body);
line-height:var(--leading-body);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
font-family:var(--font-display);font-weight:var(--weight-semibold);
letter-spacing:var(--tracking-display);line-height:var(--leading-heading);
/* ⚠ Desviación consciente pedida por el cliente: el readme fija
los titulares "siempre en minúsculas". Se usa capitalización
normal. De paso evita que "IA" se renderice como "ia". */
margin:0;color:var(--on-surface);
}
p{margin:0}
a{color:var(--accent-text);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--focus);outline-offset:3px
}
:where(.num,table){font-variant-numeric:tabular-nums}
hr{border:none;border-top:var(--hairline) solid var(--border);margin:0}
::selection{background:var(--accent);color:var(--on-accent)}
/* ── brand.css ──────────────────────────────────────────────── */
.wm{
font-family:var(--font-display);font-weight:var(--weight-semibold);
letter-spacing:var(--tracking-display);color:var(--on-surface);
white-space:nowrap;font-size:var(--text-lg);line-height:1;text-decoration:none;
}
.wm:hover{text-decoration:none;color:var(--on-surface)}
.wm .iw{position:relative;display:inline-block}
.wm .dot{
position:absolute;left:50%;top:-0.045em;width:0.15em;height:0.15em;
border-radius:50%;background:var(--accent);transform:translateX(-50%);
}
.kicker{
font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);
letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--accent-text);
}
.dot-sep{color:var(--on-surface-mute);padding:0 .4em}
.bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-12)}
.bullets>li{position:relative;padding-left:var(--space-24);color:var(--on-surface-soft)}
.bullets>li::before{
content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
border-radius:50%;background:var(--accent);
}
/* ── Layout ─────────────────────────────────────────────────── */
.wrap{max-width:var(--measure-wide);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding-block:var(--space-64);scroll-margin-top:5.5rem}
.head{max-width:var(--measure);margin-bottom:var(--space-48)}
.head .kicker{display:block;margin-bottom:var(--space-16)}
/* El punto de la marca cierra el descriptor de cada sección, igual que
cierra "Crece con inteligencia." — es un elemento de diseño, no un
adorno de la animación, así que existe siempre. */
/* accent-text, no accent: el punto es el punto final del descriptor, así
que tiene que ser exactamente el azul del texto que puntúa. En oscuro
el texto sube a #7B92FF y con --accent el punto se quedaba más oscuro. */
.head .kicker::after{
content:"";display:inline-block;vertical-align:middle;
margin-left:.55em;width:6px;height:6px;border-radius:50%;
background:var(--accent-text);
}
/* El kicker sí traía margen y el titular no, así que la bajada se pegaba. */
.head h1 + .lede,.head h2 + .lede{margin-top:var(--space-24)}
.lede{color:var(--on-surface-soft);max-width:var(--measure)}
.lede + .lede{margin-top:var(--space-12)}
.lede b{color:var(--on-surface);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
h1{font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));letter-spacing:var(--tracking-tight)}
h2{font-size:clamp(var(--text-2xl),4vw,var(--text-3xl))}
/* Los titulares de sección pasaron de h2 a h1 (Google necesita uno por
página). Se ven igual que antes: aquí el h1 dentro de .head conserva el
tamaño y el espaciado que tenía como h2. La 404 sí lo quiere grande, y
por eso la segunda línea le devuelve la medida general de h1. La portada
no entra: su titular vive en .hero, no en .head. */
.head h1{font-size:clamp(var(--text-2xl),4vw,var(--text-3xl));letter-spacing:var(--tracking-display)}
.perdida .head h1{font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));letter-spacing:var(--tracking-tight)}
h3{font-size:var(--text-body-lg)}
/* ── Botones · radius-control, jamás píldora ────────────────── */
.btn{
font-family:var(--font-body);font-weight:var(--weight-medium);
font-size:var(--text-body-sm);display:inline-flex;align-items:center;
justify-content:center;gap:var(--space-8);
padding:11px 20px;min-width:112px; /* min-width, no ancho fijo: ES/EN */
border-radius:var(--radius-control);
border:var(--hairline) solid transparent;cursor:pointer;text-decoration:none;
line-height:1.2;white-space:nowrap;
transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--surface-fill);color:var(--on-surface-fill);border-color:var(--surface-fill)}
.btn--primary:hover{color:var(--on-surface-fill);opacity:.88}
.btn--secondary{background:transparent;color:var(--on-surface);border-color:var(--border-ink)}
.btn--secondary:hover{background:var(--surface-2);color:var(--on-surface)}
.btn--quiet{background:transparent;color:var(--on-surface);border-color:var(--border-strong)}
.btn--quiet:hover{background:var(--surface-2);color:var(--on-surface)}
/* ── Nav · borde 1px, sin blur ni glass ─────────────────────── */
.nav{
position:sticky;top:0;z-index:50;background:var(--surface);
border-bottom:var(--hairline) solid transparent;
transition:border-color var(--dur) var(--ease);
}
.nav[data-stuck="true"]{border-bottom-color:var(--border)}
/* Saltar el nav. Con ratón nadie lo ve; con teclado es lo primero que
aparece y ahorra seis tabulaciones antes de llegar al contenido.
Se esconde con transform, no con display ni con left:-9999px: así
sigue en el flujo del foco y el navegador puede llevarlo a pantalla.
:focus a secas, no :focus-visible — a este enlace solo se llega con
el teclado, y si se enfoca tiene que verse siempre. */
.salta{
position:fixed;left:var(--gutter);top:var(--space-12);z-index:60;
transform:translateY(-250%);
transition:transform var(--dur) var(--ease);
}
.salta:focus{transform:none}
.nav-in{
max-width:var(--measure-wide);margin:0 auto;
padding:var(--space-16) var(--gutter);
display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);
}
.nav-links{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex:1}
/* Los seis van juntos y centrados: Inicio abre y Soporte cierra. */
.nav-inicio{order:-1}
.nav-soporte{order:9}
.nav-links a{
font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--on-surface-soft);
padding:var(--space-8) var(--space-12);border-radius:var(--radius-control);
white-space:nowrap;position:relative;
}
.nav-links a:hover{color:var(--on-surface);text-decoration:none;background:var(--surface-2)}
.nav-links a[aria-current="true"]{color:var(--on-surface)}
.nav-links a[aria-current="true"]::after{
content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.nav-right{display:flex;align-items:center;gap:var(--space-12)}
.tag{
font-size:var(--text-2xs);font-weight:var(--weight-semibold);
letter-spacing:var(--tracking-label);text-transform:uppercase;
color:var(--on-surface-mute);border:var(--hairline) solid var(--border);
border-radius:var(--radius-pill);padding:5px 10px;white-space:nowrap; /* chip: píldora permitida */
}
.menu-btn{
display:none;width:38px;height:38px;padding:0;flex:0 0 auto;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
background:transparent;border:var(--hairline) solid var(--border);
border-radius:var(--radius-control);cursor:pointer;
}
.menu-btn span{
display:block;width:15px;height:1.5px;background:var(--on-surface);
transition:transform var(--dur) var(--ease);
}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
/* ── Hero ───────────────────────────────────────────────────── */
/* padding-block, no el atajo `padding`: el atajo tiene la misma
especificidad que .wrap y, al ir después, le borraba el gutter. */
/* Portada centrada: el titular, la bajada y los botones comparten eje.
Los anchos máximos siguen puestos —centrar no es ensanchar—, así que
la línea del titular sigue quebrando donde debe. */
/* La tesis se queda sola en la primera pantalla: ocupa el alto del
viewport, así que la línea y las ventanillas empiezan justo abajo del
pliegue y aparecen al deslizar, no al entrar. svh y no vh para que en
móvil la barra del navegador no las empuje dentro de cuadro. */
.hero{
padding-block:var(--space-32) var(--space-64);text-align:center;
display:flex;flex-direction:column;
}
/* La primera pantalla es un solo presupuesto: la tesis toma el aire que
sobra y la señal se queda pegada al pliegue, dentro de cuadro. Antes la
tesis pedía sola casi todo el viewport y la señal caía debajo. */
/* El presupuesto descuenta lo que la portada ya gastó antes de empezar:
la barra (~74px) más el padding superior de la sección. Si no, el bloque
pide más alto del que hay y la señal se sale del cuadro. */
/* height, no min-height: la primera pantalla es un techo, no un piso —con
min-height el contenido desbordaba y empujaba la señal fuera del cuadro.
Y min-height:0 en la tesis para que pueda ceder: el auto implícito de un
ítem flex es lo que impedía que se comprimiera. */
.hero-primera{
height:calc(100svh - 106px);
display:flex;flex-direction:column;gap:var(--space-24);
}
.hero-tesis{
flex:1;min-height:0;
display:flex;flex-direction:column;justify-content:center;
}
.hero-primera .sigue{flex:none}
.hero > .linea{margin-top:var(--space-96)}
/* ── Desliza para más ────────────────────────────────────────
La señal de scroll con el vocabulario de siempre: etiqueta en
mayúsculas, la línea y el punto. El punto baja por la línea y se
desvanece —lee como una gota, no como una flecha animada. */
.sigue{
align-self:center;display:flex;flex-direction:column;align-items:center;
gap:var(--space-12);margin-top:auto;padding-top:var(--space-24);
text-decoration:none;color:var(--on-surface-mute);
}
.sigue:hover{text-decoration:none;color:var(--on-surface-soft)}
.sigue-et{
font-family:var(--font-body);font-weight:var(--weight-medium);
font-size:var(--text-2xs);letter-spacing:var(--tracking-kicker);
text-transform:uppercase;
transition:color var(--dur) var(--ease);
}
.sigue-linea{
position:relative;width:1px;height:var(--space-32);
background:linear-gradient(to bottom,var(--border-strong),transparent);
}
.sigue-punto{
position:absolute;left:-2px;top:0;width:5px;height:5px;
border-radius:50%;background:var(--accent);opacity:0;
}
@media (prefers-reduced-motion:no-preference){
@keyframes gotea{
0% {transform:translateY(0);opacity:0}
22% {opacity:1}
75% {opacity:.9}
100% {transform:translateY(var(--space-32));opacity:0}
}
.sigue-punto{
animation:gotea 2.8s cubic-bezier(.45,0,.55,1) infinite;
}
}
/* Sin movimiento se queda el punto arriba, visible: la señal sigue
existiendo, nomás no se mueve. */
@media (prefers-reduced-motion:reduce){ .sigue-punto{opacity:1} }
/* Más grande que el h1 de las secciones: es la única línea que tiene que
leerse desde lejos. El clamp llega hasta 96px, el tope de la escala. */
.hero h1{
max-width:14ch;margin:0 auto var(--space-24);
font-size:clamp(3.575rem,9.9vw,6.6rem);
/* En viewports bajos manda el alto, no el ancho: si no, el titular deja
sin aire a la bajada, los botones y la señal. */
font-size:min(clamp(3.575rem,9.9vw,6.6rem),12.5svh);
letter-spacing:var(--tracking-tight);
line-height:var(--leading-tight);
}
/* El eslogan va después del titular, no antes: aquí cierra la idea en
vez de anunciarla. En azul, la única línea de la página que rompe la
regla de "el azul aparece poco" — es la firma, no un adorno. Pegado
al titular, como un pie — el espacio grande queda abajo, hacia la
bajada, que es la siguiente idea de verdad. */
/* La bajada dice el método en una línea. Va en tinta suave y a un tamaño
claramente menor que el titular: es la explicación, no el anuncio. */
.hero-sub{
max-width:32ch;margin:0 auto var(--space-24);
font-family:var(--font-body);font-weight:var(--weight-regular);
font-size:var(--text-body-lg);line-height:var(--leading-snug);
color:var(--on-surface-soft);text-wrap:pretty;
}
.slogan-punto{color:var(--accent-text)}
.hero-cta{display:flex;justify-content:center;gap:var(--space-12);margin-top:var(--space-32);flex-wrap:wrap}
/* Con el titular a 96px los botones se veían pesados: aquí van un punto
más chicos que el botón estándar, sin bajar de 40px de alto para que
sigan siendo cómodos de tocar. */
.hero-cta .btn{font-size:var(--text-xs);padding:8px 16px;min-width:0}
/* ── Latido de portada ───────────────────────────────────────
El titular y los botones respiran juntos: un ciclo de opacidad, no un
parpadeo duro —el corte seco lee como error de carga. La profundidad y
la velocidad viven en dos variables que el panel de Fondo escribe, así
que con profundidad 0 el mínimo es 1 y el latido desaparece sin apagar
la animación. */
:root{--latido-min:.72; --latido-dur:3.2s; --latido-gris:#8C8C87}
/* ── Destello del titular ────────────────────────────────────
Las letras se aclaran y vuelven a tinta en desorden, como si la frase
respirara por partes. Se anima el color, no la opacidad: el papel no se
asoma por debajo y el texto nunca pierde peso. Cada letra trae su propia
fase (--f), sembrada al cargar, así que no se ve la ola de un stagger
lineal sino un titileo repartido. */
@keyframes destello{
0%,100%{color:var(--on-surface)}
50% {color:var(--latido-gris)}
}
.ltr{
animation-name:destello;
animation-duration:var(--latido-dur);
animation-delay:calc(var(--latido-dur) * var(--f) * -1);
animation-timing-function:cubic-bezier(.45,0,.55,1);
animation-iteration-count:infinite;
}
@media (prefers-reduced-motion:reduce){ .ltr{animation-name:none} }
@keyframes latido{
0%,100%{opacity:1}
50%{opacity:var(--latido-min)}
}
.hero-cta .btn{
animation-name:none;
animation-duration:var(--latido-dur);
animation-timing-function:cubic-bezier(.45,0,.55,1);
animation-iteration-count:infinite;
}
/* Los botones van medio ciclo atrás: con la curva simétrica, invertir la
dirección da exactamente lo mismo, así que el desfase se hace con un
retardo negativo —arranca el ciclo ya empezado a la mitad. */
.hero-cta .btn{animation-delay:calc(var(--latido-dur) / -2)}
@media (prefers-reduced-motion:reduce){
.hero-cta .btn{animation-name:none}
}
/* ── La línea · el punto azul la recorre ────────────────────── */
/* position:relative para que la línea pueda trazarse sola al cargar
(ver «Movimiento de marca»); sin JS y sin movimiento se queda el
border-top de siempre. */
.linea{position:relative;margin-top:var(--space-96);border-top:var(--hairline) solid var(--border);padding-top:var(--space-32)}
.linea-cap{
font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;
color:var(--on-surface-mute);margin-bottom:var(--space-32);
}
/* Ventanillas. El doble anillo concéntrico ES el isotipo de marca
(punto-pulso), y el anillo con satélite es punto-orbita, que la
ficha brand-dots reserva a movimiento.
⚠ Desviación consciente pedida por el cliente: el readme dice que
en marketing el único elemento gráfico es la línea, la cifra y el
punto — estas viñetas de trazo son la excepción autorizada. */
/* ── La losa ─────────────────────────────────────────────────
Fondo negro plano: no hay nada que refractar, así que el bloque se
despega por elevación (superficie más clara + filo interior + sombra),
nunca por blur ni por invertir a papel. */
.losa{
--vent-w:clamp(74px,8.6vw,102px);
--vent-gap:clamp(3px,0.5vw,10px);
/* Ancho real de la fila: 7 columnas + 6 huecos. El halo y el circuito se
miden contra esto, no contra la losa, para que el corte caiga siempre
antes de la séptima columna sea cual sea el viewport. */
--fila-w:calc(var(--vent-w) * 7 + var(--vent-gap) * 6);
position:relative;isolation:isolate;
margin-top:var(--space-32);
padding:clamp(28px,4vw,48px) clamp(16px,3vw,40px) clamp(24px,3vw,36px);
background:#131316;border:1px solid rgba(255,255,255,.07);border-radius:28px;
box-shadow:0 28px 64px -24px rgba(0,0,0,.72);
overflow:hidden;
}
/* Filo interior superior: una sola línea de luz arriba, como canto de
material. No es un borde: se detiene antes de las esquinas. */
.losa::after{
content:"";position:absolute;left:28px;right:28px;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.05) 18%,rgba(255,255,255,.05) 82%,transparent);
pointer-events:none;
}
/* La luz es de cada círculo, no una sola que recorre: circular, centrada
en su ícono, se enciende cuando el círculo se pone azul y se queda —
la fila se ilumina de forma acumulada y todo se apaga solo al
reiniciarse el ciclo. El séptimo nunca la recibe. */
.vent::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
left:50%;top:calc(var(--vent-w) * .54);translate:-50% -50%;
width:calc(var(--vent-w) * 1.9);aspect-ratio:1;border-radius:50%;
opacity:0;transition:opacity var(--paso-dur,.5s) var(--ease-out);
background:radial-gradient(circle at 50% 50%,
color-mix(in oklch,var(--accent) 30%,transparent) 0%,
color-mix(in oklch,var(--accent) 12%,transparent) 26%,
transparent 48%);
}
.vent[data-live="true"]::before,
.vent[data-listo="true"]::before{opacity:1}
/* El séptimo es la persona: un solo anillo, trazo blanco, sin punto de
sistema y un 8% más grande. No está apagado — está aparte y al mando.
El azul es de la máquina; el blanco es de quien decide. */
/* Cierra el flujo: el sistema llega hasta ti (azul un momento) y al
confirmar la lectura el círculo pasa a verde — el trabajo quedó hecho
y tú tienes el número. En reposo es blanco: la persona, no la máquina. */
.vent--tu{--ok:oklch(.74 .16 152)}
.vent--tu[data-live="true"] .anillo-ext,
.vent--tu[data-live="true"] .anillo-int,
.vent--tu[data-live="true"] .vineta{stroke:var(--accent)}
/* Especificidad por encima del bloque data-listo, que va después: el
séptimo lleva los dos atributos a la vez y si no, ganaba el azul. */
.vent.vent--tu[data-ok="true"] .anillo-ext,
.vent.vent--tu[data-ok="true"] .anillo-int,
.vent.vent--tu[data-ok="true"] .vineta{stroke:var(--ok)}
.vent--tu[data-ok="true"]::before{
background:radial-gradient(circle at 50% 50%,
color-mix(in oklch,var(--ok) 26%,transparent) 0%,
color-mix(in oklch,var(--ok) 10%,transparent) 26%,
transparent 48%);
}
.vent--tu[data-ok="true"] .vent-lbl{color:var(--on-surface)}
.vent--tu .anillo-ext{stroke:color-mix(in oklch,var(--on-surface) 90%,transparent)}
.vent--tu .anillo-int{stroke:color-mix(in oklch,var(--on-surface) 90%,transparent);opacity:.45}
.vent--tu .vineta{stroke:color-mix(in oklch,var(--on-surface) 90%,transparent);opacity:1}
.vent--tu .vent-lbl{color:var(--on-surface)}
@media (prefers-reduced-motion:reduce){.vent::before{transition:none}}
.ventanillas{
position:relative;
/* max-content + margen automático, no justify-content: con overflow-x
el centrado del flex no aplica y la fila se pegaba a la izquierda. */
display:flex;width:max-content;max-width:100%;margin-inline:auto;
gap:var(--vent-gap,clamp(3px,0.5vw,10px));
list-style:none;padding:0;
}
/* El scroll vive en el envoltorio, no en la fila: si la fila recortara, se
comería la luz circular que sobresale de cada columna. El relleno le da
aire y el margen negativo lo devuelve al layout. */
.fila-scroll{
overflow-x:auto;scrollbar-width:none;
padding:calc(var(--vent-w) * .5) calc(var(--vent-w) * .5) 0;
margin:calc(var(--vent-w) * -.5) calc(var(--vent-w) * -.5) 0;
}
.fila-scroll::-webkit-scrollbar{display:none}
/* El circuito: 1px a la altura del centro de los círculos, con fade en
los dos extremos y muerto antes de la séptima columna — el argumento
del bloque es justamente que "tú" no estás cableado a él. */
/* Riel apagado: el cable existe siempre, pero solo se pinta lo ya
recorrido. Termina antes de la séptima columna. */
.ventanillas::before{
content:"";position:absolute;z-index:0;pointer-events:none;
left:0;right:0;top:calc(var(--vent-w) * .54);height:1px;
background:linear-gradient(90deg,transparent,
rgba(255,255,255,.08) 10%,rgba(255,255,255,.08) 90%,transparent 100%);
}
/* Trazo recorrido: el JS escribe --trazo-x/--trazo-w y esto lo alarga. */
.ventanillas::after{
content:"";position:absolute;z-index:0;pointer-events:none;
left:var(--trazo-x,0);width:var(--trazo-w,0px);
top:calc(var(--vent-w) * .54);height:1px;
background:color-mix(in oklch,var(--accent) 35%,transparent);
transition:width var(--paso-dur,.5s) cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){.ventanillas::after{transition:none}}
.vent{position:relative;z-index:1;--vent-w:clamp(74px,8.6vw,102px)}
.ventanillas::-webkit-scrollbar{display:none}
.vent{flex:0 0 auto;width:clamp(74px,8.6vw,102px);text-align:center}
/* El ancho de la caja lo manda la etiqueta de dos líneas, no el
círculo — que solo ocupa el 76% del viewBox. El dibujo se sale un
poco de su caja para que el aire entre ventanillas venga del gap y
no del relleno sobrante. */
.vent svg{display:block;width:108%;margin-inline:-4%;height:auto;overflow:visible}
.anillo-ext,.anillo-int{
fill:none;stroke:var(--border-strong);stroke-width:1.25;
transition:stroke var(--orbita-fundido) var(--ease-out),opacity var(--orbita-fundido) var(--ease-out);
/* Sin esto el gris saltaba a azul de golpe. */
transition:stroke var(--orbita-fundido) var(--ease),
opacity var(--orbita-fundido) var(--ease);
}
.cristal{fill:var(--surface)}
.vineta{
fill:none;stroke:var(--on-surface);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;opacity:.5;
transition:opacity var(--orbita-fundido) var(--ease);
}
.nucleo{fill:var(--border-strong);transition:fill var(--orbita-fundido) var(--ease)}
.orbita-anillo{fill:none;stroke:var(--accent);stroke-width:1;opacity:0;transition:opacity var(--orbita-fundido) var(--ease-out)}
.satelite{fill:var(--accent);opacity:0;transition:opacity var(--orbita-fundido) var(--ease-out)}
/* Arranca donde está el punto para que la aparición no se vea saltada. */
.orb{transform:rotate(90deg)}
.vent[data-live="true"] .anillo-ext{stroke:var(--accent)}
.vent[data-live="true"] .anillo-int{stroke:var(--accent);opacity:.45}
.vent[data-live="true"] .vineta{opacity:1}
.vent[data-live="true"] .nucleo{fill:var(--accent)}
.vent[data-live="true"] .orbita-anillo{opacity:.5}
.vent[data-live="true"] .satelite{opacity:1}
/* Propiedades largas, no el atajo `animation`: con el atajo el
var() no resolvía y la duración caía a 0s. */
.orb{
animation-name:orbita;
animation-duration:var(--orbita-giro);
animation-timing-function:linear;
animation-fill-mode:both;
animation-iteration-count:infinite;
}
/* Solo gira la ventanilla encendida, y su vuelta arranca siempre abajo,
donde está el punto: la animación se quita de las apagadas (no se
congela), así que al encenderse empieza en 0% —el satélite sale del
punto y sube. Además evita siete rotaciones de SVG por cuadro, que se
pagan en tirones en el resto de la página. */
.vent:not([data-live="true"]) .orb{animation-name:none}
.orb{transform-origin:50px 50px;transform-box:view-box}
@keyframes orbita{from{transform:rotate(90deg)}to{transform:rotate(450deg)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none!important}}
.vent-lbl{
margin-top:var(--space-12);font-size:var(--text-2xs);
line-height:var(--leading-snug);color:var(--on-surface-mute);
transition:color var(--orbita-fundido) var(--ease-out);
}
.vent[data-live="true"] .vent-lbl{color:var(--on-surface)}
/* Ya pasó: la ventanilla se queda encendida en azul —el anillo y el punto—
pero sin órbita ni satélite, que son la marca de "esto está corriendo
ahora". Así la fila se va llenando y se lee como progreso acumulado, no
como una luz que va y viene. */
.vent[data-listo="true"] .anillo-ext{stroke:var(--accent)}
.vent[data-listo="true"] .anillo-int{stroke:var(--accent);opacity:.45}
.vent[data-listo="true"] .vineta{opacity:1}
.vent[data-listo="true"] .nucleo{fill:var(--accent)}
.vent[data-listo="true"] .vent-lbl{color:var(--on-surface)}
/* ── El método · la línea y sus cuatro puntos ───────────────── */
/* El método es una secuencia en el tiempo, así que se dibuja como
recorrido: la línea de la marca cruza la sección y cada paso es
un punto sobre ella. Sin caja, sin tarjetas. */
.ruta{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
/* La franja del punto viajero mide cuatro tramos y al final del recorrido
sobresale de la pantalla por la derecha: invisible, pero el navegador la
cuenta y saca una barra horizontal. La sección la recorta en x (clip no
crea scroll propio ni toca lo vertical). El punto nunca sale del gutter. */
#metodo{overflow-x:clip}
/* El aire va en el texto, no en la columna: así la línea no se corta. */
.paso-et,.paso h3,.paso-desc{padding-right:var(--space-32)}
.paso:last-child .paso-et,
.paso:last-child h3,
.paso:last-child .paso-desc{padding-right:0}
.paso-et{
margin:0 0 var(--space-16);font-size:var(--text-xs);font-weight:var(--weight-semibold);
letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--on-surface-mute);
}
.paso-num{
color:var(--accent-text);font-variant-numeric:tabular-nums;
margin-right:var(--space-8);
}
.paso-marca{
position:relative;height:var(--space-24);margin-bottom:var(--space-24);
border-top:var(--hairline) solid var(--border-strong);
}
/* El punto que recorre la línea. Es el mismo gesto de la órbita del hero
pero recto, y es el único punto de la sección: los marcadores fijos se
quitaron a propósito.
UN solo punto y UNA sola animación para toda la ruta. Antes había una
franja por tramo pasándose el punto en el píxel exacto de cada estación:
la geometría era correcta, pero cada estación era un relevo entre dos
elementos con dos animaciones distintas, y un relevo solo se ve limpio
si el cuadro cae justo en el cruce. Los tirones estaban ahí, no en la
curva. Sin relevos no hay dónde trabarse.
Se anima `transform`, no `left`: `left` obliga a recalcular maquetación
en cada cuadro. La franja mide los cuatro tramos, así que translateX(25%)
—que es relativo a la propia franja— es exactamente una estación. */
.viajero{
display:none;
position:absolute;left:0;top:-4.5px;
width:100%;height:9px;
opacity:0;pointer-events:none;will-change:transform,opacity;
animation-duration:var(--ruta-recorre), var(--ruta-recorre);
animation-timing-function:linear, linear;
animation-iteration-count:infinite, infinite;
animation-fill-mode:none, none;
}
.paso:first-child .viajero{
display:block;width:400%;
animation-name:cruza, cruza-prende;
}
/* La franja cruza por encima de las hairlines de los otros tramos. */
.paso:first-child .paso-marca{z-index:2}
/* El punto en sí, quieto dentro de la franja que se mueve. */
.viajero::before{
content:"";position:absolute;left:0;top:0;
width:9px;height:9px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 5px var(--surface);
transform:translateX(-50%);
}
/* Solo posición. La curva por tramo es lo que hace que la parada se lea
como intencional: a velocidad constante, frenar y arrancar de golpe
parece que la animación se atoró. Cada tramo son 17.5 puntos del ciclo
avanzando con curva simétrica y 5 de reposo en la estación. */
@keyframes cruza{
0% {transform:translateX(0); animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
17.5% {transform:translateX(25%)}
22.5% {transform:translateX(25%); animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
40% {transform:translateX(50%)}
45% {transform:translateX(50%); animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
62.5% {transform:translateX(75%)}
67.5% {transform:translateX(75%); animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
85% {transform:translateX(100%)}
100% {transform:translateX(100%)}
}
/* Solo encendido. El punto se apaga en el extremo derecho y vuelve a
nacer en el izquierdo, así el reinicio del ciclo no es un salto sino
un relevo — y el respiro a oscuras deja leer que la ruta terminó. */
@keyframes cruza-prende{
0% {opacity:0}
2.5% {opacity:1}
91% {opacity:1}
96% {opacity:0}
100% {opacity:0}
}
/* Versión vertical (móvil): ahí los tramos NO miden lo mismo —cada paso
es tan alto como su texto—, así que una sola franja no podría parar en
las estaciones. Solo en ese caso vuelve el relevo por tramo. */
@keyframes recorre-v{
0% {transform:translateY(0); animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
20% {transform:translateY(100%)}
100% {transform:translateY(100%)}
}
@keyframes prende{
0% {opacity:1}
25% {opacity:1}
25.01% {opacity:0}
100% {opacity:0}
}
@keyframes prende-entra{
0% {opacity:0}
4% {opacity:1}
25% {opacity:1}
25.01% {opacity:0}
100% {opacity:0}
}
@keyframes prende-sale{
0% {opacity:1}
22% {opacity:1}
25% {opacity:0}
100% {opacity:0}
}
.paso:nth-child(2) .viajero{animation-delay:calc(var(--ruta-recorre) * .25),calc(var(--ruta-recorre) * .25)}
.paso:nth-child(3) .viajero{animation-delay:calc(var(--ruta-recorre) * .5),calc(var(--ruta-recorre) * .5)}
.paso:nth-child(4) .viajero{animation-delay:calc(var(--ruta-recorre) * .75),calc(var(--ruta-recorre) * .75)}
/* El apagado por movimiento reducido no vive aquí: va al final de la hoja,
después del bloque móvil. Ver «apagar el recorrido». */
.paso h3{font-size:var(--text-lg);margin:0 0 var(--space-8)}
.paso-desc{
margin:0;font-size:var(--text-body-sm);color:var(--on-surface-soft);
line-height:var(--leading-snug);
}
/* ── ¿Qué hacemos? · tres anzuelos hacia el catálogo ────────── */
/* La cifra va primero: es lo que hace que alguien siga leyendo.
Divisores entre columnas, sin caja alrededor. */
.anzuelos{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
border-top:var(--hairline) solid var(--border-ink);
}
.anz{padding:var(--space-32) var(--space-32) var(--space-32) 0}
.anz + .anz{padding-left:var(--space-32);border-left:var(--hairline) solid var(--border)}
.anz-cat{
margin:0 0 var(--space-24);font-size:var(--text-xs);font-weight:var(--weight-semibold);
letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--on-surface-mute);
}
.anz-m{
margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);
font-size:var(--text-3xl);line-height:1;letter-spacing:var(--tracking-tight);
font-variant-numeric:tabular-nums;
}
.anz-q{margin:var(--space-8) 0 var(--space-24);font-size:var(--text-xs);color:var(--on-surface-mute)}
.anz h3{font-size:var(--text-lg);margin:0 0 var(--space-8)}
.anz-d{margin:0;font-size:var(--text-body-sm);color:var(--on-surface-soft);line-height:var(--leading-snug)}
.anz-pie{
display:flex;justify-content:space-between;align-items:center;
gap:var(--space-32);flex-wrap:wrap;
padding-top:var(--space-32);border-top:var(--hairline) solid var(--border);
}
.anz-pie p{margin:0;font-size:var(--text-body-sm);color:var(--on-surface-soft)}
/* ── Calculadora · banda invertida ──────────────────────────── */
.calc{border:var(--hairline) solid var(--border);border-radius:var(--radius-card-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.calc-in{padding:var(--space-48)}
.campo + .campo{margin-top:var(--space-32)}
.campo-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-16);margin-bottom:var(--space-12)}
.campo label{font-size:var(--text-body-sm);color:var(--on-surface)}
.campo output{
font-family:var(--font-display);font-weight:var(--weight-semibold);
font-size:var(--text-body);letter-spacing:var(--tracking-display);
color:var(--on-surface);font-variant-numeric:tabular-nums;
}
input[type=range]{
-webkit-appearance:none;appearance:none;width:100%;height:2px;
background:var(--border-strong);border-radius:2px;outline:none;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
background:var(--accent);cursor:pointer;border:3px solid var(--surface);
}
input[type=range]::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;background:var(--accent);
cursor:pointer;border:3px solid var(--surface);
}
.calc-out{padding:var(--space-48);display:flex;flex-direction:column;justify-content:center}
.calc-cap{
font-size:var(--text-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;
color:var(--on-surface-mute);margin-bottom:var(--space-12);
}
.calc-big{
font-family:var(--font-display);font-weight:var(--weight-semibold);
font-size:clamp(var(--text-3xl),7vw,var(--text-5xl));
letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);
color:var(--on-surface);font-variant-numeric:tabular-nums;
}
/* accent-text, no accent: en tinta el azul de texto es --blue-light (6.60:1).
#3B5BFF sobre #141414 da 3.68:1 y reprueba AA. */
.calc-big .cur{color:var(--accent-text)}
.calc-sub{margin-top:var(--space-16);font-size:var(--text-body-sm);color:var(--on-surface-soft);max-width:34ch}
.calc-sub b{color:var(--on-surface);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.calc-foot{margin-top:var(--space-32);padding-top:var(--space-24);border-top:var(--hairline) solid var(--border)}
.calc-foot p{font-size:var(--text-xs);color:var(--on-surface-mute);margin-bottom:var(--space-16)}
/* ── FAQ ────────────────────────────────────────────────────── */
.faq{border-top:var(--hairline) solid var(--border);max-width:54rem}
.qa{border-bottom:var(--hairline) solid var(--border)}
.qa summary{
list-style:none;cursor:pointer;padding:var(--space-24) var(--space-32) var(--space-24) 0;
position:relative;font-family:var(--font-display);font-weight:var(--weight-semibold);
font-size:var(--text-body-lg);letter-spacing:var(--tracking-display);
color:var(--on-surface);
transition:color var(--dur) var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-text)}
.qa summary::after{
content:"▾";position:absolute;right:var(--space-8);top:50%;transform:translateY(-50%);
color:var(--on-surface-mute);transition:transform var(--dur) var(--ease);
}
.qa[open] summary::after{transform:translateY(-50%) rotate(180deg);color:var(--accent-text)}
.qa .ans{padding:0 var(--space-32) var(--space-24) 0;max-width:var(--measure)}
.qa .ans p{font-size:var(--text-body-sm);color:var(--on-surface-soft)}
/* ── Diagnóstico ────────────────────────────────────────────── */
.diag{
border:var(--hairline) solid var(--border);border-radius:var(--radius-card-lg);
padding:var(--space-48);max-width:52rem;
}
.prog{display:flex;align-items:center;gap:var(--space-12);margin-bottom:var(--space-32)}
.prog-bar{flex:1;height:2px;background:var(--border);overflow:hidden}
.prog-fill{height:100%;width:33.33%;background:var(--accent);transition:width var(--dur-slow) var(--ease)}
.prog-t{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--on-surface-mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.q{display:none}
.q[data-on="true"]{display:block}
.q h3{font-size:var(--text-xl);margin-bottom:var(--space-8)}
.q > p{font-size:var(--text-body-sm);color:var(--on-surface-soft);margin-bottom:var(--space-24)}
.q .campo{margin:var(--space-24) 0 var(--space-32)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-32)}
.chip{
font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--on-surface-soft);
background:transparent;border:var(--hairline) solid var(--border);
border-radius:var(--radius-pill); /* chip: píldora permitida */
padding:10px 18px;cursor:pointer;
transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.chip:hover{border-color:var(--border-strong);color:var(--on-surface)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-text);background:var(--accent-surface)}
/* El punto de la marca confirma la elección. El hueco se reserva siempre
—transform no ocupa espacio—, así el chip no cambia de tamaño al
elegirlo y la selección deja de depender solo del color. */
.chip::before{
content:"";display:inline-block;vertical-align:middle;
width:6px;height:6px;border-radius:50%;margin-right:.55em;margin-top:-1px;
background:var(--accent-text);transform:scale(0);
}
.chip[aria-pressed="true"]::before{transform:scale(1)}
/* El campo de "Otro" solo existe cuando se elige ese chip — [hidden]
ya lo quita del flujo, no hace falta display:none aparte. */
.campo-otro{margin-bottom:var(--space-32)}
.campo-otro label{display:block;font-size:var(--text-body-sm);color:var(--on-surface-soft);margin-bottom:var(--space-8)}
.campo-otro input[type="text"]{
width:100%;max-width:24rem;font-family:var(--font-body);font-size:var(--text-body);
color:var(--on-surface);background:var(--surface);border:var(--hairline) solid var(--border);
border-radius:var(--radius-control);padding:11px var(--space-16);
transition:border-color var(--dur) var(--ease);
}
.campo-otro input[type="text"]:hover{border-color:var(--border-strong)}
.campo-otro input[type="text"]::placeholder{color:var(--on-surface-mute)}
.q-nav{display:flex;gap:var(--space-12);align-items:center;flex-wrap:wrap}
.atras{
background:none;border:none;font-family:var(--font-body);font-size:var(--text-body-sm);
color:var(--on-surface-mute);cursor:pointer;padding:11px var(--space-4);
transition:color var(--dur) var(--ease);
}
.atras:hover{color:var(--on-surface)}
.recap{border-top:var(--hairline) solid var(--border);border-bottom:var(--hairline) solid var(--border);padding:var(--space-8) 0;margin:var(--space-24) 0 var(--space-32)}
.recap-r{display:flex;justify-content:space-between;gap:var(--space-24);padding:10px 0;font-size:var(--text-body-sm);border-bottom:var(--hairline) solid var(--border)}
.recap-r:last-child{border-bottom:none}
/* La cifra del diagnóstico sale de un sueldo de referencia fijo y de una
sola persona. Se dice, porque es un número que acaba en una llamada. */
.recap-nota{
margin:calc(var(--space-24) * -1) 0 var(--space-32);
font-size:var(--text-xs);color:var(--on-surface-mute);max-width:52ch;
}
.recap-nota b{color:var(--on-surface-soft);font-weight:var(--weight-medium)}
.recap-r span:first-child{color:var(--on-surface-mute)}
.recap-r span:last-child{color:var(--on-surface);font-weight:var(--weight-medium);text-align:right}
.recap-hi{color:var(--accent-text)!important;font-weight:var(--weight-semibold)!important;font-variant-numeric:tabular-nums}
/* ── Footer ─────────────────────────────────────────────────── */
/* Banda de tinta al cierre: el cambio de color separa el pie de la
página, así que ahí sobra el filete de arriba. */
footer{padding:var(--space-64) 0 var(--space-48)}
.foot{display:flex;justify-content:space-between;gap:var(--space-48);flex-wrap:wrap}
.foot-slogan{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);letter-spacing:var(--tracking-display);margin:var(--space-16) 0 var(--space-8)}
.foot-meta{font-size:var(--text-body-sm);color:var(--on-surface-mute)}
/* Redes: fila de iconos bajo el logo. Los iconos van dibujados aqui mismo
(SVG en el HTML), no como imagenes de fuera: asi no dependen de un servidor
ajeno, no aflojan la politica de seguridad y no cargan nada extra.
El cuadro de 40px es para el dedo: es el minimo comodo en celular, aunque
el dibujo mida 18. */
.foot-redes{display:flex;gap:var(--space-8);margin-top:var(--space-24)}
.foot-redes a{
display:grid;place-items:center;width:40px;height:40px;
border-radius:var(--radius-control);border:var(--hairline) solid var(--border);
/* Mismo tono que los enlaces de las columnas del pie, para que la fila de
iconos no se vea mas apagada que el resto. */
color:var(--on-surface-soft);
transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.foot-redes a:hover{color:var(--on-surface);border-color:var(--on-surface-soft)}
/* currentColor: el dibujo toma el color del enlace, asi el hover lo alcanza
sin tener que repetir el color en el SVG. */
.foot-redes svg{width:18px;height:18px;fill:currentColor;display:block}
.foot-cols{display:flex;gap:var(--space-64);flex-wrap:wrap}
.foot-c h3{font-size:var(--text-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--on-surface-mute);margin-bottom:var(--space-12);font-family:var(--font-body);font-weight:var(--weight-semibold)}
.foot-c a{display:block;font-size:var(--text-body-sm);color:var(--on-surface-soft);margin-bottom:var(--space-8)}
.foot-c a:hover{color:var(--on-surface)}
.foot-bot{margin-top:var(--space-48);padding-top:var(--space-24);border-top:var(--hairline) solid var(--border);display:flex;justify-content:space-between;gap:var(--space-24);flex-wrap:wrap;font-size:var(--text-xs);color:var(--on-surface-mute)}
/* ── Reveal · desplazamiento de 2–6px, nada más ─────────────── */
[data-js="true"] .rv{opacity:0;transform:translateY(6px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.rv[data-in="true"]{opacity:1;transform:none}
/* Red de seguridad para el teclado: si el foco entra en un bloque que
todavía no se ha revelado, se muestra al instante. Tabular lleva el
elemento a pantalla antes de que el observador alcance a reaccionar,
y ahí habría foco sobre algo invisible. Misma especificidad que la
regla base (0,2,0) y después que ella, si no, no gana. */
.rv:focus-within{opacity:1;transform:none}
/* Tiene que llevar el mismo [data-js] que la regla de arriba: si no, pierde
por especificidad y quien pide menos movimiento se queda con la animación
de entrada — y dependiendo del observador para ver el contenido. */
@media (prefers-reduced-motion:reduce){
[data-js="true"] .rv{opacity:1;transform:none;transition:none}
}
/* ── Movimiento de marca ────────────────────────────────────── */
/* Todo lo de aquí abajo sale del sistema: la línea, la cifra y el punto.
Nada decorativo y nada que se repita para siempre — lo único que gira
sin parar en la página es la ventanilla encendida y el punto del método.
Va dentro de `no-preference` a propósito: quien pide menos movimiento
ni siquiera recibe las reglas, así no hay pelea de especificidad. */
@media (prefers-reduced-motion:no-preference){
/* 1 · El hero llega en orden de lectura. Es la tesis de la página, así
que se lee como se escribió: titular, eslogan, bajada, botones y al
final la línea. Una sola secuencia, al cargar. */
@keyframes sube{
from{opacity:0;transform:translateY(10px)}
to {opacity:1;transform:none}
}
/* Propiedades largas, no el atajo: con `animation` el var() de la curva
no resolvía y la duración caía a 0s. */
[data-js="true"] .hero h1,
[data-js="true"] .hero .hero-sub,
[data-js="true"] .hero .hero-cta,
[data-js="true"] .hero > .linea{
animation-name:sube;
animation-duration:.62s;
animation-timing-function:cubic-bezier(.22,1,.36,1);
animation-fill-mode:both;
}
[data-js="true"] .hero .hero-sub {animation-delay:.08s}
[data-js="true"] .hero .hero-cta {animation-delay:.24s}
[data-js="true"] .hero > .linea {animation-delay:.34s}
/* Y si alguien llega tabulando durante esos 1.65 s, lo que reciba el
foco corta su entrada y se muestra ya. Nunca hay foco en algo que
todavía está invisible. */
[data-js="true"] .hero :focus-within{animation-name:none}
/* El titular encadena las dos: entra una vez y el latido toma el relevo
justo cuando termina. Va aquí y no en .hero h1 porque la regla de
entrada gana por especificidad y se quedaba con animation-name. */
/* El titular solo entra. El latido no vive aquí sino letra por letra
(ver «Destello del titular»): así el bloque no cambia de opacidad y
el fondo no se transparenta a través del texto. */
/* 2 · Y la línea se dibuja. Es el único elemento gráfico que el sistema
autoriza en marketing, así que en vez de aparecer, se traza — y deja
al punto azul listo para recorrerla. Cierra la secuencia del hero. */
[data-js="true"] .linea{border-top-color:transparent}
[data-js="true"] .linea::before{
content:"";position:absolute;left:0;right:0;top:0;
height:var(--hairline);background:var(--border);
transform:scaleX(0);transform-origin:left center;
animation-name:traza;
animation-duration:.6s;
/* Después de que el bloque termine de entrar (.42s + .62s), no encima:
solapados se leían como un solo movimiento confuso en vez de dos
tiempos — llega la línea, y entonces se traza. */
animation-delay:1.05s;
animation-timing-function:cubic-bezier(.22,1,.36,1);
animation-fill-mode:both;
}
@keyframes traza{to{transform:scaleX(1)}}
/* 3 · El punto de la marca abre cada sección. Es el mismo punto que
cierra "Crece con inteligencia." y el que le falta a la i del
wordmark: aparece cuando la sección entra, no se desliza. */
/* Solo si el encabezado es .rv. Si no lleva el gancho del observador
nadie le pondría data-in y el punto se quedaría escondido para
siempre — y esta hoja también la usa la página de servicios. */
[data-js="true"] .head.rv .kicker::after{transform:scale(0)}
[data-js="true"] .head.rv[data-in="true"] .kicker::after{
transform:scale(1);
transition:transform .42s cubic-bezier(.34,1.56,.64,1) .14s;
}
/* 4 · Las tres fichas entran una tras otra en vez de en bloque. El
padre deja de fundirse él mismo: si no, se sumaban dos fundidos y
el escalonado se veía sucio. */
[data-js="true"] .anzuelos.rv{opacity:1;transform:none;transition:none}
[data-js="true"] .anzuelos.rv .anz{
opacity:0;transform:translateY(8px);
transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
[data-js="true"] .anzuelos.rv[data-in="true"] .anz{opacity:1;transform:none}
[data-js="true"] .anzuelos.rv[data-in="true"] .anz:nth-child(2){transition-delay:.09s}
[data-js="true"] .anzuelos.rv[data-in="true"] .anz:nth-child(3){transition-delay:.18s}
/* 5 · El punto del wordmark llega al cargar, y al pasar el cursor hace
un pulso: es el isotipo de pulso del sistema —punto más anillo, señal
viva— disparado una vez, no latiendo sin parar. */
[data-js="true"] .wm .dot{
animation-name:punto-llega;
animation-duration:.5s;
animation-delay:.12s;
animation-timing-function:cubic-bezier(.34,1.56,.64,1);
animation-fill-mode:both;
}
@keyframes punto-llega{
from{transform:translateX(-50%) scale(0)}
to {transform:translateX(-50%) scale(1)}
}
.wm .dot::after{
content:"";position:absolute;inset:-1px;border-radius:50%;
border:1px solid var(--accent);opacity:0;
}
.wm:hover .dot::after,
.wm:focus-visible .dot::after{
animation-name:punto-pulso;
animation-duration:.85s;
animation-timing-function:cubic-bezier(.22,1,.36,1);
}
@keyframes punto-pulso{
from{transform:scale(1);opacity:.9}
to {transform:scale(3.6);opacity:0}
}
/* 6 · Los cuatro pasos entran en el orden en que ocurren, con el mismo
compás del punto que recorre la línea. Un método es una secuencia:
que llegue como bloque lo contaba mal. */
[data-js="true"] .ruta.rv{opacity:1;transform:none;transition:none}
[data-js="true"] .ruta.rv .paso{
opacity:0;transform:translateY(8px);
transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
[data-js="true"] .ruta.rv[data-in="true"] .paso{opacity:1;transform:none}
[data-js="true"] .ruta.rv[data-in="true"] .paso:nth-child(2){transition-delay:.08s}
[data-js="true"] .ruta.rv[data-in="true"] .paso:nth-child(3){transition-delay:.16s}
[data-js="true"] .ruta.rv[data-in="true"] .paso:nth-child(4){transition-delay:.24s}
/* 7 · Gesto corto para lo que cambia en su sitio — no es una entrada de
página, así que se mueve la mitad. Con `animation` y no `transition`
porque display:none no transiciona: el elemento aparece y la animación
arranca sola en ese momento. */
@keyframes asoma{
from{opacity:0;transform:translateY(6px)}
to {opacity:1;transform:none}
}
[data-js="true"] .q[data-on="true"],
.qa[open] .ans{
animation-name:asoma;
animation-duration:.34s;
animation-timing-function:cubic-bezier(.22,1,.36,1);
animation-fill-mode:both;
}
/* 8 · Y el punto del chip llega con el mismo rebote que el de las
secciones. Sin movimiento el punto sigue ahí, solo que sin viaje. */
.chip::before{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
}
/* ── Responsive ─────────────────────────────────────────────── */
/* El menú de escritorio (seis destinos + chip + CTA) deja de caber
antes de los 1000px: a 980 el nav se desbordaba y aparecía scroll
horizontal. Por eso el panel móvil entra en 1080, no en 900. */
@media(max-width:1180px){
.calc{grid-template-columns:1fr}
/* Las ventanillas no se apilan: la fila se desliza en horizontal,
igual que en el original. */
.ventanillas{margin-inline:0}
}
@media(max-width:1080px){
.tag{display:none}
.menu-btn{display:inline-flex}
.nav-links{
display:none;position:absolute;left:0;right:0;top:100%;
flex-direction:column;align-items:stretch;gap:0;
background:var(--surface);border-bottom:var(--hairline) solid var(--border);
padding:var(--space-8) 0 var(--space-16);
}
.nav-links[data-open="true"]{display:flex}
.nav-inicio{margin-right:0}
.nav-soporte{margin-left:0}
.nav-links a{
font-family:var(--font-display);font-weight:var(--weight-semibold);
font-size:var(--text-lg);letter-spacing:var(--tracking-display);
color:var(--on-surface);border-radius:0;
padding:var(--space-12) var(--gutter);
}
.nav-links a[aria-current="true"]{color:var(--accent-text)}
.nav-links a[aria-current="true"]::after{left:auto;right:var(--gutter);bottom:auto;top:50%;transform:translateY(-50%)}
}
/* El recorrido se pone de pie: la línea baja por la izquierda y los
puntos quedan sobre ella. Cuatro columnas de texto no caben antes. */
@media(max-width:860px){
.anzuelos{grid-template-columns:1fr}
.anz{padding:var(--space-32) 0}
.anz + .anz{padding-left:0;border-left:none;border-top:var(--hairline) solid var(--border)}
.ruta{grid-template-columns:1fr}
.paso{
display:grid;grid-template-columns:9px minmax(0,1fr);
column-gap:var(--space-24);
}
.paso-marca{
grid-column:1;grid-row:1 / 4;align-self:stretch;
width:1px;height:auto;margin:6px 0 0 4px;
border-top:none;border-left:var(--hairline) solid var(--border-strong);
}
.paso:last-child .paso-marca{border-left-color:transparent}
/* Línea vertical: el recorrido cambia de eje y vuelven las cuatro
franjas, una por tramo, porque de pie los tramos son desiguales. */
.viajero,
.paso:first-child .viajero{
display:block;left:-4px;top:0;width:9px;height:100%;
animation-name:recorre-v, prende;
}
.viajero::before{transform:translateY(-50%)}
.paso:first-child .viajero{animation-name:recorre-v, prende-entra}
.paso:nth-child(4) .viajero{animation-name:recorre-v, prende-sale}
.paso-et{grid-column:2;grid-row:1;margin-bottom:var(--space-8)}
.paso h3{grid-column:2;grid-row:2}
.paso-desc{grid-column:2;grid-row:3;padding-bottom:var(--space-32)}
.paso-et,.paso h3,.paso-desc,
.paso:last-child .paso-et,
.paso:last-child h3,
.paso:last-child .paso-desc{padding-right:0}
.paso:last-child .paso-desc{padding-bottom:0}
}
/* Apagar el recorrido · movimiento reducido.
Va DESPUÉS del bloque móvil a propósito: ahí dentro hay reglas de la
misma especificidad (.paso:nth-child(4) .viajero) que, por venir más
tarde en la hoja, le ganaban a este apagado y dejaban un punto vivo. */
@media (prefers-reduced-motion:reduce){
.viajero,
.paso:first-child .viajero,
.paso:nth-child(4) .viajero{animation:none;opacity:0}
}
@media(max-width:700px){
.tag{display:none}
.anz-pie{align-items:flex-start;gap:var(--space-24)}
.anz-pie .btn{width:100%}
.calc-in,.calc-out,.diag{padding:var(--space-32)}
.hero-cta .btn,.calc-foot .btn{width:100%}
/* Celular · el recorrido cambia de eje, no de idea. La fila mide 536px
y dentro de la losa quedan ~300: se veían tres y media, el corte caía
a mitad de columna y la séptima —"y tú, viendo los números", que es
el remate del bloque— quedaba fuera de la pantalla sin ningún aviso
de que se podía deslizar de lado.
El cable se pone de pie y baja por la izquierda; los siete cuelgan de
él con su etiqueta al lado. La luz sigue viajando de uno en uno y el
trazo azul sigue pintando lo ya recorrido, ahora hacia abajo: el JS
escribe --trazo-y/--trazo-h además de los de ancho, y aquí se usan
esos. Un teléfono es alto, no ancho: en vertical caben los siete sin
esconder nada y sin apretar la letra. */
.ventanillas{
--vent-w:72px;
display:flex;flex-direction:column;align-items:stretch;
gap:var(--space-16);
/* max-content, no 100%: el bloque mide lo que mide el renglón más
ancho y se centra en la losa. Estirado a todo el ancho, los siete
círculos quedaban pegados al borde izquierdo y sobraba un hueco
muerto a la derecha. Los renglones siguen estirándose entre sí
(align-items:stretch), que es lo que mantiene los círculos
alineados y el cable recto. */
width:max-content;max-width:100%;margin-inline:auto;
}
.vent{
--vent-w:72px;
display:grid;grid-template-columns:var(--vent-w) minmax(0,1fr);
align-items:center;gap:var(--space-16);
width:auto;text-align:left;
}
.vent svg{width:100%;margin-inline:0}
.vent-lbl{margin-top:0;text-align:left;font-size:var(--text-body)}
/* El parte cada etiqueta en dos para que quepa bajo un círculo en
la fila acostada. De pie sobra ancho, y en un renglón cada etiqueta
es casi el doble de larga: es lo que hace que el bloque llene la
losa en vez de quedar flotando en medio con hueco a los lados.
El espacio que separa las palabras está en el HTML, pegado al ;
en escritorio cae al inicio de renglón y el navegador lo descarta.
Si la pantalla es muy angosta la etiqueta larga vuelve a dos
renglones sola, y como el círculo es más alto que dos renglones de
texto, el cable no se descuadra. */
.vent-lbl br{display:none}
/* El halo dejaba de estar sobre el círculo: en la fila el 50% del
recuadro era el círculo, aquí es el renglón entero. */
.vent::before{left:calc(var(--vent-w) / 2);top:50%}
/* Un respiro antes del remate: el cable no se corta, pero la séptima
no va pegada a las seis que hace la máquina. */
.vent--tu{margin-top:var(--space-12)}
/* Riel y trazo de pie, a la altura del centro de los círculos. */
.ventanillas::before{
left:calc(var(--vent-w) / 2);right:auto;width:1px;
top:var(--riel-y,0);height:var(--riel-h,0px);background:rgba(255,255,255,.08);
}
.ventanillas::after{
left:calc(var(--vent-w) / 2);width:1px;
top:var(--trazo-y,0);height:var(--trazo-h,0px);
transition:height var(--paso-dur,.5s) cubic-bezier(.22,.61,.36,1);
}
/* Ya no hay deslizamiento lateral, así que el relleno que le daba
carril al halo sobra. */
.fila-scroll{overflow-x:visible;padding-inline:0;margin-inline:0}
}
/* Teléfonos angostos · "inteligencia." es una sola palabra y no parte en
dos. Con el piso de 3.575rem medía 337px fijos, y por debajo de 364px
de pantalla se salía: la página entera se podía arrastrar de lado, que
es de las cosas que más se sienten como "está rota". Muchos Android
miden 360. Aquí el titular sí baja con el ancho: 14.5vw deja la palabra
con aire en cualquier pantalla y en el corte de 379 el escalón contra
el piso es de 2px, que no se nota. */
@media(max-width:379px){
.hero h1{font-size:min(clamp(2.6rem,14.5vw,3.575rem),12.5svh)}
}
/* Teléfonos de 320px: el CTA del nav más el botón de menú no caben
con la etiqueta completa, así que se recorta a "Diagnóstico". */
@media(max-width:359px){
.solo-ancho{display:none}
.nav-right .btn{min-width:0;padding:9px 14px;font-size:var(--text-sm)}
/* Un trae un ancho mínimo de fábrica (~225px) y no encoge: con
32px de relleno a cada lado, la calculadora medía 289 dentro de una
caja de 258 y se recortaba por la derecha. Se le quita el mínimo al
campo y se afloja el relleno. */
.calc input,.calc select,.calc textarea{min-width:0}
.calc-in,.calc-out,.diag{padding:var(--space-16)}
}
/* ── Cambio de pestaña ────────────────────────────────────────────
Transición entre páginas: en vez del corte en blanco del navegador,
la vista que sale se desvanece y la que entra sube un poco. Solo
aplica donde hay soporte; donde no, la navegación es la de siempre. */
@view-transition{navigation:auto}
::view-transition-old(root){
animation:pag-sale .34s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root){
animation:pag-entra .46s cubic-bezier(.22,.9,.24,1) both;
}
@keyframes pag-sale{to{opacity:0;transform:translateY(-6px)}}
@keyframes pag-entra{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
::view-transition-old(root),::view-transition-new(root){animation:none}
}