/* ═══════════════════════════════════════════════════════════
MAQUETA LANDING — CRM RUTA DIGITAL
Tema claro «Marino Hondo» · tokens de marca en :root
═══════════════════════════════════════════════════════════ */
:root {
/* ═══════════════════════════════════════════════════════════
SISTEMA — CRM RUTA DIGITAL · LANDING · «Marino Hondo» (12/9/2026)
La regla que ordena todo: si tapás las capturas de producto con un
rectángulo gris, la página tiene que verse en escala de grises salvo
el azul de la acción y de la marca. Si sigue teniendo color, sobra.
Fondo claro como el lienzo y el tablero de marca, grafito para la IA
y el pie. Cero degradados, glow, blur y vidrio: superficies planas
con borde de 1 px.
═══════════════════════════════════════════════════════════ */
/* ── 0. MARINO · los tokens del lienzo «Azul · 4 variantes», tal cual.
Todo lo de abajo apunta acá. Contrastes medidos en CLAUDE.md. */
--fondo: #EBEBED;
--superficie: #FAFAFA;
--borde: #DCDCDF;
--texto: #161A1F; /* 14,7:1 sobre --fondo */
--texto-2: #5B5E66; /* 5,45:1 sobre --fondo · 6,21:1 sobre --superficie */
--azul: #003892; /* CTA y relleno de acción, siempre con --sobre-azul (10,6:1) */
--azul-hover: #002F81;
--azul-texto: #003892; /* el azul como texto sobre claro (8,91:1) */
--sobre-azul: #FFFFFF;
--tinte: #D7E6FF; /* resaltado: fila seleccionada, burbuja saliente */
--tinte-suave: #E9F1FD; /* hover */
--hermano-claro: #83ABF0; /* el azul SOBRE GRAFITO (7,53:1); --azul ahí da 1,65 */
--grafito: #161A1F; /* paneles de IA y pie */
--grafito-activo: #292D34;
--sobre-grafito: #EDEDED; /* 14,9:1 sobre --grafito */
--sobre-grafito-2: #A3A3A3; /* 6,93:1 sobre --grafito */
/* semánticos del lienzo: solo estado, nunca decoración */
--ok: #10B981; /* puntos */
--ok-texto: #065F46; /* texto: 6,45:1 sobre --fondo */
--rojo: #DC2626; /* relleno con blanco encima (4,83:1) o punto; como texto chico no llega */
--ambar: #F59E0B; /* puntos */
--ambar-texto: #B45309; /* texto: 4,81:1 sobre --superficie */
/* ── 1. LIENZO ── */
--bg: var(--fondo);
/* ── 2. SUPERFICIES · la elevación la da el borde, no la sombra ── */
--s-1: var(--superficie); /* tarjeta apoyada */
--s-2: #FFFFFF; /* tarjeta destacada */
--s-3: #FFFFFF; /* elevado */
/* ── 3. BORDES · 1px SIEMPRE ── */
--line: var(--borde); /* el 90 % de los casos */
--line-2: var(--borde); /* control, tarjeta destacada, marco */
--line-3: var(--texto-2); /* SOLO hover de control */
/* ── 4. TEXTO · dos niveles, como el lienzo. Los cuatro nombres quedan por
compatibilidad y los títulos se siguen jerarquizando por valor: el h2 en
--tx-3 y la parte que importa (.em) en --tx-1. */
--tx-1: var(--texto);
--tx-2: var(--texto-2);
--tx-3: var(--texto-2);
--tx-4: var(--texto-2);
/* ── 5. ACENTOS · Marino. Presupuesto duro: ≤2 % de las decisiones de color.
Los nombres viejos quedan por compatibilidad con las reglas que los
consumen y apuntan a los tokens de arriba. Varios mienten (--naranja,
--tinta, --blue, --violet, --wa, --grad-*): el renombre está propuesto
como paso aparte en CLAUDE.md. */
--naranja: var(--azul); /* NOMBRE VIEJO · acción, selección, foco */
--naranja-hover: var(--azul-hover);
--tinta: var(--sobre-azul); /* NOMBRE VIEJO · el texto que va sobre el azul */
--blue: var(--azul); /* relleno, anillo de foco y selección */
--blue-tx: var(--azul-texto); /* el azul como texto chico y marca chica, sobre claro */
--green: #065F46; /* verde semántico: SOLO estado OK. #10B981 como texto sobre claro da 2,1:1 */
--violet: var(--grafito); /* NOMBRE VIEJO · EXCLUSIVO agente de IA · superficie */
--violet-tx: var(--sobre-grafito);
--wa: var(--azul); /* los CTA de WhatsApp son azules con el ícono de WA (12/9) */
--warn: #DC2626; /* rojo semántico: tachado y cruz. Como texto sobre --fondo da 4,06: solo trazo o ícono */
/* ── 6. DEGRADADOS · no hay. Quedan en none para que ninguna regla vieja
vuelva a pintar una imagen de fondo. */
--grad-mark: none;
--grad-hover: none;
/* ── 7. RADIOS · el radio es función del tamaño y del nivel de interacción,
no un valor de marca. Interactivo = pill. Tarjeta = 12. Marco = 16.
NUNCA en em: el 0.8em anterior daba 10,88 / 12,80 / 14,08 px, o sea tres
formas distintas para el mismo componente. */
--r-lg: 16px; /* panel, marco de captura, tarjeta grande */
--r: 12px; /* tarjeta */
--r-s: 8px; /* interior de marco, media */
--r-xs: 6px; /* chips e inputs */
--r-pill: 9999px;/* botones, avatares, dots */
/* ── 7b. ALTURAS DE CONTROL · 44px. Antes medían 43,8 / 57,6 / 66,2 ── */
--ctl-sm: 36px;
--ctl: 44px;
--ctl-lg: 50px;
/* ── 8. ELEVACIÓN · plana. Nada flota: la separación la da el borde de
1 px. Los tokens quedan en none para que las reglas que los consumen
no pinten sombras; el foco sigue siendo un outline, no un resplandor. */
--e-1: none;
--e-2: none;
--e-shot: none;
--glow-mark: none;
--glow-ia: none;
/* ── 9. TIPOGRAFÍA (la escala entra en la fase 3) ── */
--font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
/* JetBrains Mono, la del CRM real. Space Mono salió: estaba en 41 nodos de
la landing contra 7 de JetBrains, o sea que la fuente que el cliente ve
todos los días adentro del producto era la minoritaria en la página que
se lo vende. */
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Tracking dependiente del tamaño. Antes era plano (-0.03em) y estaba
INVERTIDO: el wordmark del pie, de 176 px, llevaba proporcionalmente menos
tracking negativo que un h3 de 37 px. */
--tr-xxl: -0.05em;
--tr-xl: -0.04em;
--tr-lg: -0.03em;
--tr-md: -0.02em;
--pad-x: clamp(20px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
background: var(--bg);
color: var(--tx-2);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
font-synthesis: none;
overflow-x: hidden;
}
::selection { background: var(--tinte); color: var(--texto); }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
/* Titulares en 700 desde Marino (12/9/2026), con tracking entre -0.03em y
-0.04em, como pide el sistema de marca nuevo. Antes eran 600. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: var(--tr-lg); color: var(--tx-1); }
h1 { letter-spacing: var(--tr-xl); }
/* El énfasis de los títulos se hace con VALOR, no con color: el título va en
gris medio y la parte que importa en el texto pleno. Cuando el recurso de énfasis
está en los ocho de ocho titulares deja de ser énfasis. */
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: var(--tr-xl); color: var(--tx-3); }
h2 .em { color: var(--tx-1); }
/* La marca en texto, plana: sin degradado ni recorte de fondo. El navbar y el
pie llevan el logotipo en SVG; esto queda para cualquier mención suelta. */
.mark-grad { color: var(--azul-texto); }
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
main { position: relative; z-index: 1; }
/* Solo para lectores de pantalla (el precio que rueda, por ejemplo) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
section { padding: clamp(84px, 12vh, 150px) var(--pad-x); }
/* ── Kickers ── */
.kicker {
font-family: var(--font-mono);
font-size: clamp(0.68rem, 1vw, 0.8rem);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--tx-3);
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
}
.kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-tx); }
.section-head { max-width: 900px; margin: 0 auto clamp(40px, 6vh, 64px); text-align: center; }
.section-head .kicker { justify-content: center; }
.section-head__sub { color: var(--tx-2); max-width: 620px; margin: 18px auto 0; }
.section-head--row {
max-width: none; text-align: left; display: flex; align-items: flex-end;
justify-content: space-between; gap: 24px;
}
.section-head--row .kicker { justify-content: flex-start; }
/* ── Botones ──
Relleno plano, altura fija y anillo por sombra interior. Se fueron: el
degradado de fondo, la capa sesgada que barría en hover, los resplandores
de color y el radio en em.
OJO CON EL ORDEN si se vuelve a tocar: el ::before no era un adorno, era el
MECANISMO — .btn tenía el degradado de fondo y el ::before lo TAPABA en
reposo. Borrarlo sin poner primero un fondo sólido deja todos los botones
en degradado permanente. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: var(--ctl); padding: 0 20px; line-height: 1;
font-family: var(--font-display); font-size: 0.875rem; font-weight: 600;
letter-spacing: 0; white-space: nowrap;
/* El anillo va por sombra interior y no por borde: no ocupa caja, así todas
las variantes miden EXACTAMENTE lo mismo. Con borde, el hero tenía 4 px de
desalineación visible entre el botón de WhatsApp y el de al lado. */
border: 0; border-radius: var(--r-pill);
background-color: transparent; background-image: none;
color: var(--tx-1); box-shadow: none; cursor: pointer;
transition: background-color 180ms var(--ease, cubic-bezier(0, 0, 0.2, 1)),
background-image 180ms cubic-bezier(0, 0, 0.2, 1),
box-shadow 180ms cubic-bezier(0, 0, 0.2, 1),
color 180ms cubic-bezier(0, 0, 0.2, 1);
}
.btn .ic { width: 16px; height: 16px; flex: none; stroke-width: 1.9; }
/* El chico no baja de 36px */
.btn--sm { height: var(--ctl-sm); padding: 0 14px; font-size: 0.8125rem; }
.btn--sm .ic { width: 14px; height: 14px; }
.btn--lg { height: var(--ctl-lg); padding: 0 24px; font-size: 0.9375rem; }
/* 1 · CONVERSIÓN · WhatsApp. Seis de los once CTA de la página. Desde Marino
(12/9) son el azul de marca con el ícono de WhatsApp: el verde #25D366 sobre
el fondo claro daba 1,67:1 y el botón se deshacía. Blanco encima: 10,6:1. */
.btn--wa { background-color: var(--azul); color: var(--sobre-azul); }
.btn--wa:hover, .btn--wa:active { background-color: var(--azul-hover); }
/* 2 · MARCA · el botón del producto: azul plano, sin imagen de fondo ni
sombra. Hoy ningún botón lo usa (el CTA final pasó a .btn--outline para no
poner dos primarios iguales uno al lado del otro). */
.btn--grad { background-color: var(--azul); color: var(--sobre-azul); }
.btn--grad:hover { background-color: var(--azul-hover); }
/* 3 · SECUNDARIO · anillo. .btn--ghost y .btn--outline eran dos variantes que
se pisaban (1 px al 25 % contra 2 px al 30 %). Acá se fusionan. El anillo
de 1 px va por sombra interior y no por borde (ver .btn): es un filete, no
una elevación. El hover es el tinte suave del lienzo. */
.btn--ghost, .btn--outline {
background-color: var(--superficie);
color: var(--tx-1);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover, .btn--outline:hover { background-color: var(--tinte-suave); }
.btn--ghost:active, .btn--outline:active { background-color: var(--tinte); }
/* 4 · SÓLIDO · reservado para el CTA de entrada a la app, que todavía no
existe en la página: grafito sobre claro, sin degradado y sin sombra. */
.btn--solid { background-color: var(--texto); color: var(--superficie); }
.btn--solid:hover { background-color: var(--grafito-activo); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.btn:active { transform: scale(0.98); transition: transform 80ms cubic-bezier(0, 0, 0.2, 1); }
}
/* ── Foco de teclado ──
La página NO tenía ninguna regla de foco propia: el único :focus-visible en
866 líneas era el barrido decorativo que este bloque borra. Sin esto la
landing queda literalmente sin señal de foco. Va sobre elementos nativos y
no sobre una lista de clases, así entra todo lo enfocable. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--azul);
outline-offset: 2px;
border-radius: var(--r-xs);
}
.btn:focus-visible { border-radius: var(--r-pill); }
.switch:focus-visible { border-radius: var(--r-pill); }
.faq__list summary:focus-visible { outline-offset: -2px; border-radius: var(--r-s); }
/* ═══ S0 · PRELOADER — la intro del CRM en reversa ═══
Réplica del splash RutaIntroDesktop del CRM (fondo, camino digital, lockup).
El fondo va en una capa aparte para poder desvanecerlo mientras la R viaja. */
.preloader {
position: fixed; inset: 0; z-index: 200; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.preloader__bg {
position: absolute; inset: 0;
background: var(--fondo);
}
.preloader__route { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.preloader__route-bg { fill: none; stroke: var(--borde); stroke-width: 6; stroke-linecap: round; }
.preloader__route-line { fill: none; stroke: var(--azul); stroke-width: 6; stroke-linecap: round; }
.preloader__lockup {
position: relative; display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 4vw; font-family: var(--font-display);
}
.preloader__kicker {
font-family: var(--font-mono); font-weight: 500;
font-size: clamp(13px, 1.5vw, 24px); letter-spacing: 0.42em; text-transform: uppercase;
color: var(--texto-2); margin-bottom: 2.2vw;
}
.preloader__row { display: flex; align-items: center; justify-content: center; }
/* El lockup es el logotipo: la R (#preLogo, un ![]()
propio porque viaja al hero) y
las letras en SVG. Las letras usan el mismo marco vertical que la R (686 → 1226 del
viewBox), así que miden lo mismo de alto y caen en su línea de base; la u se mete
31 unidades adentro de la caja de la R, como en el logotipo. */
.preloader__logo {
--pre-h: clamp(26px, 8.2vw, 124px); /* a 375 el lockup entero (R + letras + CRM) mide ~316 px y entra */
position: relative; display: flex; align-items: center;
padding: 6px 10px;
}
.preloader__mark { height: var(--pre-h); width: auto; display: block; }
/* El ancho se cierra con GSAP. El recorte es solo horizontal (clip-path) para que la
g y los puntos de las íes, que salen del marco, no se corten mientras tanto. */
.preloader__word {
display: block; flex: none; white-space: nowrap;
margin-left: calc(var(--pre-h) * -31 / 540);
clip-path: inset(-40% 0 -40% 0);
}
.preloader__letras { display: block; height: var(--pre-h); width: auto; max-width: none; overflow: visible; fill: var(--azul); }
.preloader__crm {
display: inline-flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
margin-left: 24px; white-space: nowrap;
}
.preloader__crm-bar { width: 2px; height: clamp(34px, 5vw, 58px); border-radius: 2px; background: var(--borde); }
.preloader__crm-text {
font-weight: 600; font-size: clamp(18px, 2.6vw, 44px); letter-spacing: 0.22em; line-height: 1;
color: var(--azul-texto);
}
.preloader__rule {
width: clamp(280px, 40vw, 560px); height: 3px; margin-top: 1.8vw; border-radius: 2px;
background: var(--azul);
}
.preloader__slogan { font-weight: 400; font-size: clamp(20px, 2.6vw, 38px); letter-spacing: -0.01em; color: var(--texto); margin-top: 2vw; }
.preloader__slogan b { color: var(--azul-texto); font-weight: 500; }
/* ═══ NAV ═══ */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 16px var(--pad-x);
background: var(--superficie); border-bottom: 1px solid var(--borde);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav.is-hidden { transform: translateY(-110%); }
/* El logotipo completo, con la etiqueta CRM separada por un filete de 1 px.
La altura fija la mayúscula en 20 px (16 px en celular). */
.nav__mark { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__logo { display: block; height: 27px; width: auto; fill: var(--azul); }
.nav__crm {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; line-height: 1;
color: var(--texto-2);
}
.nav__crm::before { content: ""; width: 1px; height: 20px; background: var(--borde); }
/* Links estilo pill (estructura del ShaderShowcase) */
.nav__links { display: flex; gap: 4px; }
.nav__links a {
font-size: 0.8125rem; font-weight: 500; color: var(--tx-3);
padding: 8px 14px; border-radius: var(--r-pill);
transition: color 0.2s, background 0.2s;
}
.nav__links a:hover { color: var(--tx-1); background: var(--tinte-suave); }
/* El filtro gooey se eliminó: obligaba a rasterizar de nuevo en cada cuadro
del hover sobre un elemento fijo, y ya estaba apagado en celular, o sea que
el mismo CTA tenía dos comportamientos distintos. */
/* «Entrar» — la puerta al CRM para quien ya es cliente. Desde el 20/9 (A5b
del plan de lanzamiento, pedido de Emanuel) es un botón RESALTADO con el
mismo lenguaje que los .btn: relleno --azul con --sobre-azul (10,6:1).
La jerarquía con el CTA de WhatsApp se sostiene porque ese conserva el
ícono y el lugar fijo de la barra; Entrar es el acceso de clientes.
Sigue viviendo en .nav__links —que en celular es el panel de la
hamburguesa, donde también va resaltado (ver el bloque nav--js)—.
Escopado a .nav__links porque «.nav__links a» le gana a «.nav__entrar»
a secas en especificidad. */
.nav__links .nav__entrar {
display: inline-flex; align-items: center; justify-content: center;
height: var(--ctl-sm); padding: 0 16px;
font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
line-height: 1; border-radius: var(--r-pill);
background: var(--azul); color: var(--sobre-azul);
transition: background-color 180ms cubic-bezier(0, 0, 0.2, 1);
}
.nav__links .nav__entrar:hover { color: var(--sobre-azul); background: var(--azul-hover); }
.nav__cta { display: flex; align-items: center; gap: 4px; }
/* ── La hamburguesa (18/9) ──────────────────────────────────────────────────
Solo existe en celular y solo con JS (.nav--js la pone app.js): sin JS no hay
botón, y el nav cae en el fallback de siempre en vez de mostrar un control
que no abre nada.
Hasta hoy el teléfono no tenía navegación: a ≤820 se ocultaban todos los
links menos «Planes», y a ≤470 también ese. La única forma de moverse por una
página de 22.000 px era el scroll. */
.nav__burger {
display: none; align-items: center; justify-content: center;
width: 44px; height: 44px; flex: none; padding: 0;
background: none; border: 0; border-radius: var(--r-pill);
color: var(--texto); cursor: pointer;
transition: background 0.2s;
}
.nav__burger:hover { background: var(--tinte-suave); }
.nav__burger:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* Tres barras de 2 px. Las de los extremos se cruzan en X al abrir y la del
medio se apaga; todo con transform, que no repinta. */
.nav__burger-caja { position: relative; display: block; width: 20px; height: 14px; }
.nav__burger-caja i {
position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px;
background: currentColor;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s linear;
}
.nav__burger-caja i:nth-child(1) { top: 0; }
.nav__burger-caja i:nth-child(2) { top: 6px; }
.nav__burger-caja i:nth-child(3) { top: 12px; }
.nav--abierto .nav__burger-caja i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav--abierto .nav__burger-caja i:nth-child(2) { opacity: 0; }
.nav--abierto .nav__burger-caja i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ═══ S1 · HERO — estructura del hero-financial ═══
El "planeta": un círculo enorme centrado arriba cuyo borde inferior marca el
corte con un filete de 1 px, sin luz ni halo. El contenido vive adentro,
arriba del borde; la captura del CRM asoma abajo, recortada por el hero. */
.hero {
position: relative; min-height: 100svh; overflow: hidden;
background: var(--bg); isolation: isolate;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__planet {
--d: max(230vw, 170svh);
/* --rim = altura del borde brillante; la setea layoutHero() (app.js) debajo del contenido real */
position: absolute; left: 50%; top: calc(var(--rim, 74svh) - var(--d)); z-index: 0;
width: var(--d); height: var(--d); border-radius: 50%;
transform: translateX(-50%); pointer-events: none;
/* Plano desde Marino: superficie clara y filete. La geometría no se toca. */
background: var(--superficie);
border: 1px solid var(--borde);
}
/* La medialuna azul: la misma curva del planeta, dada vuelta. Arranca detrás de la
MITAD del marco del video (--luna, lo calcula layoutLuna() en app.js) y abre la
sección azul de las tarjetas, que sigue abajo sin costura. El hero la recorta. */
.hero__luna {
--d: max(230vw, 170svh);
position: absolute; left: 50%; top: var(--luna, 130svh); z-index: 1;
width: var(--d); height: var(--d); border-radius: 50%;
transform: translateX(-50%); pointer-events: none;
background: var(--azul);
}
.hero__top {
position: relative; z-index: 2; width: min(1000px, calc(100% - 48px));
padding-top: max(84px, 11svh);
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* Solo la R, plana y sin resplandor. #preLogo viaja hasta este rect (FLIP en app.js). */
.hero__logo { height: clamp(52px, 8svh, 76px); width: auto; }
.hero__title { font-size: clamp(1.9rem, 3.9vw, 3.4rem); line-height: 1.06; letter-spacing: var(--tr-xl); margin-top: 6px; }
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; padding: 0 0.06em; }
.hero__sub {
font-size: clamp(1rem, 1.35vw, 1.15rem); font-weight: 400; line-height: 1.55;
color: var(--tx-2); max-width: 560px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }
/* Captura del CRM COMPLETA debajo del borde del planeta (en flujo: el hero crece
para contenerla; --shot-mt la deja 4svh por debajo del borde brillante) */
.hero__shot {
position: relative; z-index: 2;
width: min(1120px, 92vw); margin: var(--shot-mt, calc(48px + 4svh)) auto 0;
/* --shot-pb: aire extra si la curva no llega a cubrir el ancho antes del final del hero */
padding-bottom: max(clamp(48px, 7svh, 90px), var(--shot-pb, 0px));
}
/* ── El panel grafito con la bandeja del CRM. Plano: sin bisel, brillo ni sombra. */
.hero__shot-frame {
padding: clamp(10px, 2.2vw, 28px); border-radius: 20px;
background: var(--grafito);
}
.hero__video {
display: block; width: 100%; aspect-ratio: 16 / 9;
border-radius: 12px; background: var(--s-1);
}
/* LogoMark: solo el cuerpo tiene color. Las rayitas son huecos de la máscara (se ve el fondo). */
.logomark { --logo-r: var(--azul); flex: none; }
.logomark--grafito { --logo-r: var(--hermano-claro); }
.punto { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 99px; }
.punto--ok { background: var(--ok); }
.punto--azul { background: var(--azul); }
.punto--ambar { background: var(--ambar); }
.punto--rojo { background: var(--rojo); }
.punto--pizarra { background: #394E6D; } /* era naranja en el lienzo: la regla es cero naranja */
.punto--vino { background: #9D174D; }
/* ── La bandeja del CRM (réplica del lienzo en tokens, portada de /variantes de la
maqueta original, donde se midió AA). Lienzo fijo de 1440×860 que app.js escala al
ancho del marco; en ≤820 px queda solo el chat, sobre una base de 600×800. ── */
.mock { --font: var(--font-display); --mono: var(--font-mono); }
.mock { --mock-w: 1440; --mock-h: 860; position: relative; width: 100%; height: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--grafito-activo); }
.mock__lienzo {
position: absolute; left: 0; top: 0; width: 1440px; height: 860px; transform-origin: 0 0;
display: flex; background: var(--fondo); font-family: var(--font); line-height: 1.4; color: var(--texto);
}
.mock svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mock b { font-weight: 600; }
.mk-lado { width: 244px; flex: none; display: flex; flex-direction: column; padding: 16px 12px 14px; background: var(--grafito); border-right: 1px solid var(--grafito-activo); color: var(--sobre-grafito-2); }
.mk-marca { display: flex; align-items: center; gap: 10px; padding: 2px 6px 12px; }
.mk-marca div { display: flex; flex-direction: column; gap: 2px; }
.mk-marca b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--sobre-grafito); line-height: 1; }
.mk-marca span { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--sobre-grafito-2); }
.mk-grupo { padding: 16px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sobre-grafito-2); }
.mk-menu { display: flex; flex-direction: column; gap: 2px; }
.mk-menu li { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--sobre-grafito-2); }
.mk-menu svg { width: 17px; height: 17px; }
.mk-menu li.is-activo { background: var(--grafito-activo); color: #FFFFFF; font-weight: 600; }
.mk-menu li.is-activo svg { color: var(--hermano-claro); }
.mk-usuario { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; border-radius: 12px; border: 1px solid var(--grafito-activo); background: var(--grafito-activo); }
.mk-avatar { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #3B3F43; color: var(--sobre-grafito); font-size: 12px; font-weight: 700; }
.mk-usuario div { display: flex; flex-direction: column; gap: 2px; }
.mk-usuario div b { font-size: 12.5px; color: var(--sobre-grafito); }
.mk-usuario div span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--sobre-grafito-2); }
.mk-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-barra { height: 48px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 20px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.mk-barra > b { font-size: 15px; letter-spacing: -0.01em; margin-right: auto; }
.mk-buscar, .mk-campo { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); font-size: 12px; color: var(--texto-2); }
.mk-buscar { width: 220px; }
.mk-buscar svg, .mk-campo svg { width: 15px; height: 15px; color: var(--texto-2); }
.mk-buscar kbd { margin-left: auto; font-family: var(--mono); font-size: 9.5px; border: 1px solid var(--borde); border-radius: 4px; padding: 1px 5px; }
.mk-icono { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--borde); color: var(--texto-2); }
.mk-icono svg { width: 16px; height: 16px; }
.mk-icono i { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 99px; background: var(--rojo); border: 1.5px solid var(--superficie); }
.mk-cuerpo { flex: 1; min-height: 0; display: flex; }
.mk-lista { width: 348px; flex: none; display: flex; flex-direction: column; background: var(--superficie); border-right: 1px solid var(--borde); }
.mk-lista__cabeza { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--borde); }
.mk-fila-sb { display: flex; align-items: center; gap: 6px; }
.mk-lista__cabeza .mk-fila-sb { justify-content: space-between; }
.mk-lista__cabeza .mk-fila-sb b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.mk-lista__cabeza .mk-fila-sb span { font-size: 12px; color: var(--texto-2); }
.mk-pestanas { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--fondo); }
.mk-pestanas span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--texto-2); border: 1px solid transparent; }
.mk-pestanas span.is-activa { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.mk-pestanas svg { width: 13px; height: 13px; }
.mk-pestanas em, .mk-filtros em { font-style: normal; font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--texto-2); }
.mk-filtros { display: flex; gap: 6px; }
.mk-filtros span { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-2); }
.mk-filtros span.is-activo { background: var(--grafito); border-color: var(--grafito); color: #FFFFFF; }
.mk-conversaciones { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 6px; overflow: hidden; }
.mk-conv { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; }
.mk-conv.is-seleccionada { background: var(--tinte); }
.mk-conv .mk-fila-sb b { font-size: 13.5px; white-space: nowrap; }
.mk-conv time { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--texto-2); }
.mk-conv p { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; }
.mk-badge { font-style: normal; font-size: 9.5px; font-weight: 700; color: #FFFFFF; background: var(--rojo); border-radius: 99px; padding: 0 5px; }
.mk-tilde { font-style: normal; font-weight: 700; color: var(--ok-texto); }
.mk-chispa { width: 12px; height: 12px; color: var(--texto); }
.mk-etapa { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--texto-2); }
.mk-sinasignar { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--ambar-texto); }
.mk-ini { margin-left: auto; width: 16px; height: 16px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: var(--fondo); color: var(--texto); font-size: 8px; font-weight: 700; }
.mk-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fondo); }
.mk-chat__cabeza { height: 50px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.mk-chat__cabeza > b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.mk-chat__cabeza code { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--texto-2); }
.mk-atiende { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 11.5px; color: var(--texto-2); }
.mk-boton { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); font-size: 12px; font-weight: 600; }
.mk-chat__tags { height: 26px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 18px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.mk-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--fondo); color: var(--texto-2); }
.mk-tag--ok { background: #D1FAE5; color: var(--ok-texto); }
.mk-tag--mas { background: transparent; border: 1px dashed var(--borde); }
.mk-hilo { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 24px; overflow: hidden; }
.mk-dia { display: flex; align-items: center; gap: 12px; }
.mk-dia::before, .mk-dia::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.mk-dia span { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--texto-2); }
.mk-msg { display: flex; flex-direction: column; gap: 4px; }
.mk-msg p { max-width: 60%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; border: 1px solid transparent; }
.mk-msg small { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--texto-2); }
.mk-msg small b { color: var(--texto); }
.mk-msg--entra { align-items: flex-start; }
.mk-msg--entra p { background: var(--superficie); border-color: var(--borde); border-bottom-left-radius: 4px; }
.mk-msg--ia, .mk-msg--sale { align-items: flex-end; }
.mk-msg--ia p { background: var(--grafito); color: var(--sobre-grafito); border-bottom-right-radius: 4px; }
.mk-msg--sale p { background: var(--tinte); color: var(--texto); border-bottom-right-radius: 4px; }
.mk-leido { color: var(--azul-texto); font-weight: 600; }
.mk-escribir { display: flex; align-items: center; gap: 8px; height: 52px; margin: 0 24px 18px; padding: 0 8px 0 10px; border-radius: 14px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-2); }
.mk-escribir svg { width: 18px; height: 18px; }
.mk-escribir b { font-size: 12px; color: var(--texto-2); }
.mk-sep { width: 1px; height: 20px; background: var(--borde); }
.mk-placeholder { flex: 1; padding-left: 8px; font-size: 13px; }
.mk-enviar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--azul); color: var(--sobre-azul); }
.mk-enviar svg { width: 16px; height: 16px; }
/* ── Rotador estilo TextLoop (compartido S1/S4) ──
La palabra sale colapsando su ancho a 0 y la nueva entra abriéndose hasta su
ancho real (GSAP), con el tinte del lienzo detrás y un cursor parpadeando.
[data-fixed] reserva el ancho de la palabra más larga: nada salta de línea. */
.rotator {
display: inline-flex; align-items: center; gap: 0.05em;
vertical-align: bottom; white-space: nowrap;
}
.rotator[data-fixed] { justify-content: center; }
.rotator__clip { position: relative; display: inline-block; overflow: hidden; white-space: nowrap; }
.rotator__bg {
position: absolute; inset: 0.06em 0; border-radius: var(--r-xs);
background: var(--tinte);
}
.rotator__text { position: relative; display: inline-block; padding: 0 0.08em 0 0.04em; color: var(--tx-1); }
.rotator__cursor {
display: inline-block; flex: none; width: 0.06em; min-width: 3px; height: 1.05em;
border-radius: 2px; background: var(--blue-tx);
animation: cursorBlink 0.8s ease-in-out infinite alternate;
}
@keyframes cursorBlink { from { opacity: 1; } to { opacity: 0.45; } }
/* ═══ S2 · ¿QUÉ HACE NUESTRO AGENTE? — índice y escena (13/9) ═══
Sección AZUL: la abre la medialuna del hero y sigue sin costura. El título va en blanco
(10,6:1) y «agente» lleva el bloque del tinte con texto grafito (13,9:1), el mismo recurso
que la palabra que rota en el hero.
Reemplazó a las tarjetas apiladas: es la opción B de la mesa «Tarjetas del agente». Sin
.indice--escena (celular, reduced-motion, sin JS) es una lista: cada texto abierto, su imagen
debajo y el setup después, en el gris. En desktop app.js le pone .indice--escena y pasa a una
escena fija: las siete capacidades a la izquierda, la activa abierta, y su imagen flotando a
la derecha. */
.skills { padding-left: 0; padding-right: 0; padding-bottom: 0; background: var(--azul); }
.skills__title { text-align: center; padding: 0 var(--pad-x); margin-bottom: clamp(16px, 3vh, 32px); color: var(--sobre-azul); }
.skills__title .em { color: var(--texto); background: var(--tinte); border-radius: var(--r-xs); padding: 0 0.1em; }
.skills a:focus-visible { outline-color: var(--sobre-azul); }
@media (min-width: 821px) {
/* El título queda fijo mientras pasan las capacidades y se apaga con el zoom del final. Se pega
DEBAJO del nav (--techo, su alto medido en app.js): pegado arriba de todo, el nav que vuelve al
subir el scroll lo tapaba. Mínimo 96 px de banda: el resaltado de «agente» mide ~80. El margen
negativo (= --techo) conserva la distancia de entrada a lo que sigue. El de adentro
evita que el flex parta el texto en piezas y se coma los espacios. */
.skills { --techo: var(--nav-alto, 70px); --banda: clamp(96px, 12svh, 116px); }
.skills__title { position: sticky; top: var(--techo); height: var(--banda); margin-bottom: calc(-1 * var(--techo)); display: flex; align-items: center; justify-content: center; }
}
/* ── La lista: lo que se ve sin escena ── */
.indice { position: relative; }
.indice__escena { padding: 8px var(--pad-x) 0; }
.indice__marco { max-width: 720px; margin: 0 auto; }
.indice__cuenta { display: none; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.74); }
.indice__items { list-style: none; display: flex; flex-direction: column; gap: clamp(48px, 10vw, 72px); }
.indice__texto { position: relative; }
.indice__titulo, .indice__detalle { position: relative; z-index: 1; }
.indice__titulo { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.12; letter-spacing: var(--tr-lg); color: var(--sobre-azul); text-wrap: balance; }
.indice__detalle-in { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 14px; }
.indice__detalle-in > p { font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 44ch; text-wrap: pretty; }
.indice__detalle-in > p strong { font-weight: 700; color: var(--sobre-azul); }
/* Es una nota al pie, no un botón (queja del 15/9: se veía enorme): más chica que el párrafo */
.indice__detalle-in > .indice__nota { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8125rem; line-height: 1.45; font-weight: 600; max-width: 40ch; color: var(--sobre-azul); }
.indice__nota .ic { width: 16px; height: 16px; margin-top: 1px; flex: none; color: var(--tinte); }
/* Etiquetas de la capacidad 2: no son botones (no llevan a ningún lado), por eso van sin hover */
.indice__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.indice__chips li { padding: 6px 12px; border-radius: var(--r-pill); background: var(--tinte); color: var(--azul-texto); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.indice__mas { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--sobre-azul); }
.indice__mas:hover { color: var(--tinte); }
.indice__mas span { transition: transform 0.3s; }
.indice__mas:hover span { transform: translate(3px, -3px); }
/* Sobre el bloque blanco pasa a botón chico, redondeado y sin relleno, para no competir con el
blanco que lo rodea. Solo en la activa: en la lista (sin escena) sigue siendo el link claro
sobre el azul de la sección. */
.indice--escena .is-activo .indice__mas {
height: var(--ctl-sm); padding: 0 18px; border-radius: var(--r-pill);
box-shadow: inset 0 0 0 1px var(--azul); color: var(--azul-texto);
transition: background-color 180ms cubic-bezier(0, 0, 0.2, 1), color 180ms cubic-bezier(0, 0, 0.2, 1);
}
.indice--escena .is-activo .indice__mas:hover { background-color: var(--tinte-suave); color: var(--azul-hover); }
.indice--escena .is-activo .indice__mas:active { background-color: var(--tinte); }
.indice__marca, .indice__puerta, .indice__tramos, .indice__zoom, .indice__riel { display: none; }
/* La segunda «Leer más» es solo del celular (una sola para las siete) */
.indice__mas--movil { display: none; }
.indice__media { margin: 28px 0 0; }
.indice__lienzo { display: flex; align-items: center; justify-content: center; }
/* ── EL PAR FIJO (17/9) ─────────────────────────────────────────────────────
Reemplaza a las siete .esc. Arriba lo que se dijo, abajo lo que el CRM hizo;
la GEOMETRÍA es la misma las siete veces y lo único que cambia es el
contenido. Las .esc medían 532×594, 679×380, 446×596, 512×503, 594×628,
662×430 y 495×615: el borde izquierdo saltaba 117 px de capacidad a capacidad
y la proporción se daba vuelta tres veces. Eso es lo que se leía como roto.
Por eso las dos mitades llevan min-height fijo: el par ocupa la misma caja
aunque una capacidad tenga menos texto que otra.
Sigue en em y sigue escalando con su font-size, que es lo bueno que tenían
las .esc. Lo que NO hereda es el vaivén: con un marco que se queda quieto, la
flotación era el movimiento que lo desmentía. */
.par {
display: flex; flex-direction: column;
width: min(100%, 33em); min-width: 0; font-size: 15px;
border-radius: 1.2em; overflow: hidden; background: var(--superficie);
}
/* ALTO FIJO, no min-height. Con un piso, la capacidad con más texto estiraba el
marco y volvíamos a tener siete alturas (medido: variaba 97 px). Acá el marco
manda y el contenido se escribe para entrar — que es la disciplina que la
sección no tenía. Si algo no entra, el arnés lo canta como recorte. */
.par__dicho {
height: 17.4em; box-sizing: border-box;
padding: 1.15em 1.25em 1.1em; background: #F4F6FA;
display: flex; flex-direction: column; gap: 0.62em;
}
.par__hecho {
height: 14.1em; box-sizing: border-box;
padding: 1.15em 1.25em 1.25em;
display: flex; flex-direction: column; gap: 0.8em;
}
.par__rotulo {
display: flex; align-items: center; gap: 0.5em; margin: 0;
font-size: 0.82em; font-weight: 600; letter-spacing: 0.04em; color: var(--texto-2);
}
.par__punto { width: 0.52em; height: 0.52em; border-radius: 50%; background: #25D366; flex-shrink: 0; }
/* El hablante cambia en dos de las siete, y el punto lo dice: en «escribís vos»
y en «un mes de conversaciones» no hay un cliente del otro lado. */
.par__rotulo--vos .par__punto, .par__rotulo--mes .par__punto { background: var(--azul-texto); }
.par__rotulo--hecho { color: var(--azul-texto); }
.par__rotulo--hecho .par__punto { display: none; }
.par__hora { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }
.par__b {
max-width: 18em; margin: 0; padding: 0.72em 0.92em;
font-size: 0.97em; line-height: 1.4;
}
.par__b b { font-weight: 600; }
.par__b--in { border-radius: 1em 1em 1em 0.28em; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); }
.par__b--ia { align-self: flex-end; border-radius: 1em 1em 0.28em 1em; background: var(--grafito); color: var(--sobre-grafito); }
.par__b--ia b { color: #FFFFFF; }
/* Lo que escribe el dueño no es lo mismo que lo que escribe un cliente: va en
el tinte, del lado de la casa. */
.par__b--me { align-self: flex-end; border-radius: 1em 1em 0.28em 1em; background: var(--tinte); color: var(--texto); }
.par__firma {
align-self: flex-end; margin: 0;
font-size: 0.82em; font-weight: 600; letter-spacing: 0.04em; color: var(--texto-2);
}
.par__obj { border: 1px solid var(--borde); border-radius: 0.85em; overflow: hidden; }
.par__obj-cab {
margin: 0; padding: 0.6em 0.9em; background: var(--tinte-suave);
font-size: 0.82em; font-weight: 600; color: var(--azul-texto);
}
.par__obj-cuerpo { padding: 0.75em 0.9em; display: flex; flex-direction: column; gap: 0.52em; }
.par__fila { display: flex; align-items: baseline; gap: 0.8em; margin: 0; font-size: 0.86em; line-height: 1.35; }
.par__fila-r { flex-shrink: 0; min-width: 7.6em; color: var(--texto-2); }
.par__fila-v { color: var(--texto); font-weight: 600; }
.par__check { display: flex; align-items: flex-start; gap: 0.5em; margin: 0; font-size: 0.86em; line-height: 1.35; color: var(--texto); }
.par__tick { flex-shrink: 0; width: 1em; height: 1em; margin-top: 0.12em; color: var(--ok-texto); }
.par__tags { display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0; }
.par__tag {
padding: 0.25em 0.6em; border-radius: 9999px;
background: var(--tinte); color: var(--azul-texto);
font-size: 0.82em; font-weight: 600;
}
/* El tamaño en la escena de scroll: cada escena entra entera en su columna, mida lo que mida el
viewport. Los factores salen del alto y el ancho naturales de cada una (en em, con aire) */
/* UN solo font-size para las siete, que es la mitad del punto del par fijo.
Antes había siete, calibrados uno por uno, y con ellos siete siluetas
distintas. El par mide 33em de ancho por ~25,8em de alto: el cqw lo acota
por el ancho del lienzo y el cqh por su alto, y el tope de 16,5px manda
mientras haya lugar (a 1440×900 el lienzo es 702×679 y el par sale 544×426). */
.indice--escena .par { font-size: min(16.5px, 3.08cqh, 2.95cqw); }
/* El turno de cada pieza: .an con su --d en el markup. Los fill both esconden hasta el delay */
.indice--anda .is-activo .an { animation: esc-pop 420ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0s); }
.indice--anda .is-activo .an--fade { animation-name: esc-fade; animation-duration: 320ms; animation-timing-function: ease-out; }
.indice--anda .is-activo .an--barra { animation: esc-barra 620ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0s); }
.indice--anda .is-activo .an--tacha::after { animation: esc-tacha 360ms ease-out both; animation-delay: var(--d, 0s); }
@keyframes esc-pop { from { opacity: 0; transform: translateY(0.9em) scale(0.94); } }
@keyframes esc-fade { from { opacity: 0; } }
@keyframes esc-barra { from { transform: scaleX(0); } }
@keyframes esc-tacha { from { width: 0; } }
/* ── La escena: desktop con JS y movimiento ── */
.indice--escena .indice__escena {
position: sticky; top: 0; height: 100svh; overflow: hidden;
padding: calc(var(--techo) + var(--banda) + 8px) var(--pad-x) clamp(24px, 4svh, 48px);
}
.indice--escena .indice__marco { position: relative; height: 100%; max-width: 1180px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
.indice--escena .indice__lista { display: flex; flex-direction: column; gap: clamp(10px, 1.6svh, 16px); min-height: 0; }
/* La ventana recorta la lista: si la activa abierta no entra (ventanas bajas), la lista sube lo justo
para mostrarla entera (--desplazo, calculado en app.js con la altura de cada capacidad abierta) */
.indice--escena .indice__ventana { flex: 1; min-height: 0; overflow: hidden; }
.indice--escena .indice__cuenta { display: block; }
.indice--escena .indice__items { gap: 0; border-left: 2px solid rgba(255, 255, 255, 0.18); margin-top: calc(-1 * var(--desplazo, 0px)); transition: margin-top 420ms cubic-bezier(0.23, 1, 0.32, 1); }
/* Para medir la altura de cada capacidad abierta sin esperar las transiciones (app.js) */
.indice--midiendo *, .indice--midiendo *::before, .indice--midiendo *::after { transition: none !important; }
.indice--escena .indice__item { padding: clamp(4px, 0.8svh, 8px) 0; }
/* El `transition: padding` es A PROPÓSITO (decidido el 18/9, después de que la
auditoría lo marcara tres veces como «transición que anima layout»). La
capacidad activa pasa de `padding-left: 24px` a `20px 24px 22px 24px`: sin la
transición el texto SALTA 20 px en el cuadro en que se activa, desacompasado
del círculo blanco que crece en 480 ms debajo. Es un elemento, solo en
desktop, y cambia una vez por capacidad —cada ~85 svh de scroll—, no por
cuadro: no es el caso que la regla contra animar layout viene a evitar. Con
transform no se puede: lo que crece es la caja, no su contenido. */
.indice--escena .indice__texto {
padding-left: 24px; border-radius: var(--r-lg);
transition: padding 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* El bloque blanco de la activa: un círculo que crece desde el riel (mismo lenguaje que el
círculo del final, .indice__puerta). El título y el detalle llevan z-index 1 (arriba) para
salir de atrás del ::before: al ser un hijo posicionado, si no, pintaría ENCIMA del texto
estático (orden de pintado, CSS 2.1 Apéndice E). */
.indice--escena .indice__texto::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: var(--sobre-azul); border-radius: var(--r-lg);
clip-path: circle(0% at 0% 50%);
transition: clip-path 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.indice--escena .is-activo .indice__texto { padding: 20px 24px 22px 24px; }
.indice--escena .is-activo .indice__texto::before { clip-path: circle(150% at 0% 50%); transition-duration: 480ms; }
/* El riel: las pasadas quedan llenas y tenues, la activa se llena con el scroll (--avance) */
.indice--escena .indice__marca { display: block; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--sobre-azul); transform: scaleY(0); transform-origin: top; transition: opacity 200ms linear; }
.indice--escena .is-pasado .indice__marca { transform: scaleY(1); opacity: 0.35; }
.indice--escena .is-activo .indice__marca { transform: scaleY(var(--avance, 0)); opacity: 0; transition-delay: 260ms; }
.indice--escena .indice__titulo { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.64); transition: font-size 280ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms linear; }
.indice--escena .is-activo .indice__titulo { font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.12; font-weight: 700; letter-spacing: var(--tr-lg); color: var(--azul-texto); transition: font-size 280ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms linear 260ms; }
/* La activa se abre animando grid-template-rows (0fr → 1fr): alto real sin medir nada. Las otras
quedan con visibility: hidden, así su «Leer más» no entra en el orden de tabulación. */
.indice--escena .indice__detalle { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 360ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 360ms; }
.indice--escena .indice__detalle-in { min-height: 0; overflow: hidden; gap: 14px; padding-top: 12px; opacity: 0; transition: opacity 180ms linear; }
.indice--escena .is-activo .indice__detalle { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 360ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s; }
.indice--escena .is-activo .indice__detalle-in { opacity: 1; transition: opacity 260ms linear 260ms; }
.indice--escena .is-activo .indice__detalle-in > p { color: var(--texto-2); }
.indice--escena .is-activo .indice__detalle-in > p strong { color: var(--texto); }
.indice--escena .is-activo .indice__detalle-in > .indice__nota { color: var(--texto); }
.indice--escena .is-activo .indice__nota .ic { color: var(--azul); }
/* Las siete imágenes ocupan el mismo lugar en la columna derecha; el scroll las cruza (app.js) */
.indice--escena .indice__media { position: absolute; top: 0; bottom: 0; right: 0; left: calc(min(420px, 100%) + clamp(32px, 4vw, 64px)); margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.indice--escena .indice__lienzo { width: 100%; height: 100%; container-type: size; }
/* El círculo del final: se abre desde la imagen de la séptima hasta tapar la escena (app.js anima
--radio) y adentro aparece el setup */
.indice--escena .indice__puerta { display: block; position: absolute; inset: 0; z-index: 1; background: var(--fondo); clip-path: circle(var(--radio, 0px) at var(--cx, 75%) var(--cy, 55%)); pointer-events: none; }
.indice--escena .indice__tramos { display: block; height: calc(7 * 85svh); } /* uno por capacidad */
.indice--escena .indice__zoom { display: block; height: 240svh; } /* el zoom + el chat que se escribe (20/9) */
/* Ventanas bajas: la lista tiene que entrar entera con la activa abierta */
@media (min-width: 821px) and (max-height: 760px) {
.indice--escena .indice__titulo { font-size: 1rem; }
.indice--escena .is-activo .indice__titulo { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.indice--escena .is-activo .indice__texto { padding: 14px 20px 16px 20px; }
.indice--escena .indice__detalle-in { gap: 12px; padding-top: 10px; }
.indice--escena .indice__detalle-in > p { font-size: 1rem; line-height: 1.5; }
}
/* ═══ S4 · EL DOLOR ═══ */
.pain { padding-top: clamp(110px, 18vh, 200px); padding-bottom: clamp(110px, 18vh, 200px); }
.pain__text {
font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tr-xl);
font-size: clamp(1.9rem, 5.4vw, 4.8rem); line-height: 1.14;
max-width: 1050px; margin: 0 auto; text-align: center;
}
.pain__text .w { display: inline-block; }
.pain__pct { font-size: 1.18em; }
/* ═══ S5 · GALERÍA PINEADA ═══ */
.gallery { padding: 0; }
.gallery__pin {
position: relative;
min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
gap: clamp(30px, 5vh, 54px); padding: clamp(80px, 10vh, 110px) 0;
overflow: hidden;
/* El panel agrandado (z 5) y el enganche (z 6) quedan adentro del pin: si no, al soltarse
el pin se pintarían encima de la demo, que sube sobre su parte de abajo. */
isolation: isolate;
}
/* Enganche con la demo (sobre el panel escalado, z 6 > 5). Arranca oculto; el
timeline del pin lo muestra en el último tramo del zoom. */
.gallery__hook {
position: absolute; left: 0; right: 0; top: 0; height: 100svh; z-index: 6; pointer-events: none;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
text-align: center; padding: 0 var(--pad-x);
opacity: 0; visibility: hidden; transform-origin: 50% 50%;
}
/* El texto del enganche entra por su cuenta y crece solo él (app.js). */
.gallery__hook-text { display: flex; flex-direction: column; align-items: center; gap: 14px; transform-origin: 50% 50%; }
/* Sobre la card blanca: los tokens de la página medidos contra #FFF
(--texto 17,5:1 · --texto-2 6,5:1). El dot es el azul de marca. */
.gallery__hook--light {
--tx-1: var(--texto);
--tx-2: var(--texto-2);
--tx-3: var(--texto-2);
--blue-tx: var(--azul);
}
.gallery__hook .kicker { margin: 0; color: var(--tx-1); font-size: clamp(0.8rem, 1vw, 0.95rem); }
.gallery__hook h3 { font-size: clamp(2.2rem, 4.2vw, 4.2rem); line-height: 1.02; letter-spacing: var(--tr-xl); max-width: 20ch; }
.gallery__head { padding: 0 var(--pad-x); }
.gallery__viewport { width: 100%; }
.gallery__track {
display: flex; gap: clamp(18px, 2.4vw, 30px);
padding: 0 var(--pad-x);
width: max-content;
will-change: transform;
}
/* ── Paneles de la plataforma ──
Mismo lenguaje que las stacking cards: superficie neutra, borde fino,
sombra doble, ícono en línea arriba a la derecha y link «Ver en la demo».
--accent colorea ícono, dot del kicker y link. El alto sale del viewport
(head + panel entran en el pin de 100svh); el ancho, del alto (≈1,32:1). */
.gallery { --panel-h: max(420px, min(640px, calc(100svh - 300px))); }
.panel {
--accent: var(--blue-tx); /* el azul de marca, igual en los seis paneles */
position: relative; flex: none; overflow: hidden;
width: min(60vw, calc(var(--panel-h) * 1.32)); height: var(--panel-h);
display: flex; flex-direction: column; justify-content: space-between;
padding: 38px 40px;
border-radius: var(--r-lg);
background: var(--s-1);
border: 1px solid var(--line); /* NO pasar a inset box-shadow: app.js anima borderColor en el zoom */
box-shadow: var(--e-2);
transform-origin: 50% 50%;
}
.panel__head { display: flex; justify-content: space-between; align-items: center; }
.panel__kicker {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--tx-3);
}
.panel__kicker .kicker__dot { background: var(--accent); }
.panel__icon { position: static; width: 40px; height: 40px; opacity: 1; color: var(--accent); flex: none; }
.panel__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.panel__body { display: flex; flex-direction: column; gap: 14px; max-width: 34rem; }
.panel h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.04; letter-spacing: var(--tr-lg); }
.panel__body > p { color: var(--tx-2); font-size: clamp(0.9375rem, 1.05vw, 1.0625rem); line-height: 1.5; max-width: 46ch; }
.panel__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.panel__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.panel__chips li {
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
padding: 7px 12px; border-radius: var(--r-pill);
border: 1px solid var(--line-2); background: var(--fondo); color: var(--tx-1);
}
.panel__more {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 500; font-size: 0.875rem; color: var(--tx-3);
white-space: nowrap; transition: color 180ms;
}
.panel__more:hover { color: var(--tx-1); }
.panel__more span { transition: transform 0.3s; }
.panel__more:hover span { transform: translate(3px, -3px); }
/* El último panel queda por encima durante el zoom final. El z-index de los demás es EXPLÍCITO
desde el 15/9: con el foco de la rueda cada panel lleva transform y opacity propios (capas
compositadas) y con z auto Chrome pintaba un vecino al 0,12 ENCIMA de la card blanca ya
agrandada (el hit-test daba bien y el pixel mal). Con 1 y 5 el orden queda fijo. */
.panel { z-index: 1; }
.panel:last-child { z-index: 5; }
/* ── El panel claro (el último) ──
El zoom termina cubriendo la pantalla con esta card y la sección de la demo sigue en
el mismo #FFF, así el título del enganche y el video se leen como un bloque. */
.panel--light { background: #FFFFFF; }
/* ── El riel de avance (15/9, mesa «Cuatro galerías») ──
Seis puntos bajo el carrusel; app.js prende el de la carta activa (la más cercana al centro
en la rueda, la de arriba del mazo) y lo apaga junto con el título cuando arranca el zoom.
Solo existe en la escena de desktop; vive FUERA de .gallery__viewport para que las cartas
del mazo, que suben desde abajo, no lo tapen. */
.gallery__riel { display: none; justify-content: center; gap: 10px; }
.gallery__riel i { width: 7px; height: 7px; border-radius: 50%; background: var(--borde); transition: background-color 200ms, transform 200ms; }
.gallery__riel i.is-on { background: var(--azul); transform: scale(1.3); }
@media (min-width: 821px) { .gallery__riel { display: flex; } }
html.reduced .gallery__riel { display: none; }
/* ── El mazo (15/9, la A de la mesa, conmutable con ?galeria= mientras Emanuel elige) ──
app.js pone .gallery--mazo: el track deja el desfile y pasa a ser una pila (todas las cartas
en el mismo lugar, centradas); la viewport recorta para que cada carta emerja desde abajo del
área del mazo y no desde el medio de la página. El resto (pin, zoom, demo) no cambia. */
/* SIN overflow en la viewport: recortaba el ZOOM final (la card cubría el viewport en el DOM y
en pantalla quedaba una franja). Las cartas que esperan abajo (yPercent 115) caen solas fuera
de la pantalla pineada, y las que espían arriba necesitan asomar. */
.gallery--mazo .gallery__track { display: block; position: relative; width: auto; padding: 0; height: var(--panel-h); }
.gallery--mazo .panel { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; }
/* ── Placeholder de video (componente) ── */
.vph {
position: relative; border-radius: var(--r-lg);
border: 1px solid var(--line-2);
background: var(--s-1);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
overflow: hidden;
}
.vph--card { aspect-ratio: 4 / 5; }
.vph--wide { aspect-ratio: 16 / 9; max-width: 980px; margin: 0 auto; box-shadow: var(--e-shot); }
.vph--tall { aspect-ratio: 9 / 16; max-height: 430px; margin: 0 auto; }
.vph__play {
width: 64px; height: 64px; border-radius: 50%;
background: var(--tx-1); color: var(--bg);
display: flex; align-items: center; justify-content: center;
}
.vph__play .ic { width: 26px; height: 26px; margin-left: 3px; }
.vph__label {
font-family: var(--font-mono); font-size: clamp(0.6rem, 1vw, 0.72rem);
letter-spacing: 0.18em; color: var(--tx-3); text-align: center; padding: 0 14px;
}
.vph__fs {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px; border-radius: var(--r-pill);
border: 0; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--tx-3);
display: flex; align-items: center; justify-content: center;
transition: color 180ms, box-shadow 180ms;
}
.vph__fs:hover { color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--line-3); }
/* ── Video real (componente): mismo radio que los placeholders ── */
.media {
position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
background: var(--grafito);
box-shadow: var(--e-shot);
}
.media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--wide { aspect-ratio: 16 / 9; }
/* ═══ S6 · DEMO ═══
Sigue en BLANCO, el color en el que termina el zoom de la galería. En desktop sube por
encima del final del pin (app.js le pone un margin-top negativo): cuando el pin se suelta,
el video ya está justo debajo del título del enganche, y el padding de arriba es la
distancia entre los dos. position: relative para pintarse encima del pin. El video todavía
no está: espacio 16:9 punteado con play y, abajo, dos botones del mismo tamaño. */
.demo { position: relative; background: #FFFFFF; padding-top: clamp(40px, 6vh, 64px); }
@media (min-width: 821px) {
/* En desktop el título lo muestra el enganche de la galería: acá queda solo para lectores de pantalla */
.demo__head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.vph--demo { width: 100%; max-width: 820px; aspect-ratio: 16 / 9; margin: 0 auto; border-style: dashed; background: var(--fondo); }
.vph--demo .vph__play { background: var(--azul); color: var(--sobre-azul); }
.demo__video {
display: block; width: 100%; max-width: 820px; aspect-ratio: 16 / 9; height: auto;
margin: 0 auto; border-radius: var(--r-lg);
border: 1px solid var(--line-2); background: var(--s-1);
}
.demo__ctas {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
width: 100%; max-width: 660px; margin: clamp(24px, 4vh, 36px) auto 0;
}
.demo__ctas .btn { width: 100%; }
/* ═══ S8 · SETUP — adentro de la última tarjeta (inmersiva) ═══
Copy + cara a cara + captura del agente de setup, sobre el gris claro de la página (la
captura del agente sigue en grafito: es la IA). Con la escena de «¿Qué hace nuestro agente?» es
una capa sobre la escena pegada (100svh) que aparece cuando el círculo gris ya tapó la pantalla
(app.js); sin escena va debajo de la lista. */
/* Sin escena va debajo de la lista, a sangre en el gris */
.setup--inmersiva { text-align: left; margin: clamp(64px, 12vw, 96px) calc(var(--pad-x) * -1) 0; padding: clamp(56px, 10vh, 110px) var(--pad-x); background: var(--fondo); }
.indice--escena .setup--inmersiva {
position: absolute; inset: 0; z-index: 2; margin: 0;
display: flex; align-items: center; background: none;
/* arriba deja lugar para el nav (69 px) aunque la ventana sea baja */
padding: clamp(72px, 11svh, 104px) var(--pad-x) clamp(16px, 4svh, 56px);
}
.indice--escena .setup--inmersiva .setup__grid { width: 100%; }
.setup__grid {
display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: clamp(36px, 5vw, 64px);
align-items: center; max-width: 1240px; margin: 0 auto;
}
.setup__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.setup__copy .kicker, .setup__copy h2 { margin: 0; }
.setup__copy h2 .em { display: inline-block; } /* «ya no es una pesadilla» baja entero a la segunda línea */
.setup__body { color: var(--tx-2); max-width: 56ch; margin: 0; }
/* Cara a cara: lo que cobran otros vs. lo que hace nuestro agente */
.vs { display: grid; grid-template-columns: 1fr 1.12fr; gap: 12px; width: 100%; max-width: 620px; margin-top: 4px; }
.vs__card {
display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: var(--r);
background: var(--s-1); border: 1px solid var(--line);
}
.vs__card--us { background: var(--s-2); border-color: var(--azul); }
.vs__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vs__lbl { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; color: var(--tx-3); }
.vs__card--us .vs__lbl { color: var(--tx-2); }
.vs__pill {
font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
color: var(--bg); background: var(--green); padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
.vs__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.vs__price b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: var(--tr-lg); line-height: 1; }
.vs__free { color: var(--green); } /* USD 0 = estado «incluido», no decoración */
.vs__price s { color: var(--tx-3); text-decoration-color: var(--warn); text-decoration-thickness: 3px; }
.vs__price span { font-size: 0.75rem; color: var(--tx-3); }
.vs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; color: var(--tx-2); }
.vs__list li { position: relative; padding-left: 26px; font-size: 0.78rem; line-height: 1.35; }
.vs__list li::before {
content: ""; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%;
background: rgba(220, 38, 38, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.vs__list--ok { color: var(--tx-1); }
.vs__list--ok li::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.setup__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.setup__note { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--tx-3); }
/* Captura del agente de setup: un panel GRAFITO, que es como se identifica la
IA en Marino. La chispa ✦ y la barra van en --hermano-claro, porque --azul
sobre grafito da 1,65:1. Burbujas de la IA en --grafito-activo (11,8:1) y la
del humano en el --tinte con --texto encima (13,9:1). */
.aichat {
--ia: var(--grafito-activo); --ia-2: var(--hermano-claro); --ia-soft: var(--sobre-grafito-2);
font-family: var(--font-display); color: var(--sobre-grafito);
border-radius: var(--r); border: 1px solid var(--grafito); overflow: hidden;
background: var(--grafito);
max-width: 460px; margin-left: auto;
}
.aichat :focus-visible { outline-color: var(--hermano-claro); }
.aichat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--grafito-activo); }
.aichat__spark {
flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
color: var(--ia-2); background: var(--ia);
}
.aichat__spark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aichat__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aichat__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aichat__name b { font-size: 0.875rem; font-weight: 600; color: #fff; }
.aichat__chip {
display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--r-pill);
font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--sobre-grafito); background: var(--grafito-activo);
}
/* El punto de «Configurando»: el color ES la función. Sin resplandor. */
.aichat__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ia-2); box-shadow: var(--glow-ia); animation: aipulse 1.4s ease-in-out infinite; }
@keyframes aipulse { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
.aichat__kicker, .aichat__time, .aichat__card-top span, .aichat__meta { font-family: var(--font-mono); }
.aichat__kicker { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ia-soft); }
.aichat__time { margin-left: auto; font-size: 0.66rem; font-weight: 600; color: #A3A3A3; }
.aichat__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.aichat__card {
border-radius: 14px; padding: 12px 14px 13px; border: 1px solid var(--grafito-activo);
background: transparent; display: flex; flex-direction: column; gap: 9px;
}
.aichat__card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.aichat__card-top b { font-size: 0.8125rem; font-weight: 600; }
.aichat__card-top span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ia-soft); white-space: nowrap; }
.aichat__bar { height: 5px; border-radius: 3px; background: var(--grafito-activo); overflow: hidden; }
.aichat__bar i { display: block; height: 100%; background: var(--ia-2); }
.aichat__feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.aichat__feed li { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; line-height: 1.4; }
.aichat__feed em { font-style: normal; color: var(--ia-2); font-size: 0.8125rem; line-height: 1; width: 14px; text-align: center; }
.aichat__feed .is-todo, .aichat__feed .is-todo em { color: #A3A3A3; }
.aichat__bubble { max-width: 86%; margin: 0; padding: 11px 14px; border-radius: 16px; font-size: 0.845rem; line-height: 1.55; color: #fff; }
.aichat__bubble--ai { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--ia); color: var(--sobre-grafito); }
.aichat__bubble--me {
align-self: flex-end; border-bottom-right-radius: 4px;
background: var(--tinte); color: var(--texto);
}
.aichat__meta { font-size: 0.66rem; font-weight: 600; margin: -6px 4px 0; }
.aichat__meta--ai { align-self: flex-start; color: var(--ia-soft); }
.aichat__meta--me { align-self: flex-end; color: #A3A3A3; }
/* ═══ S10 · PLANES ═══
Port del componente «pricing» que pasó Emanuel (12/9), sin React ni Tailwind. Tres tarjetas
blancas; la destacada al medio con filete azul de 2 px y la pestaña «El más elegido». En
desktop las de los costados quedan al 94 % y corridas 30 px hacia el centro, por debajo de la
destacada, que sube 20 px. Esa posición FINAL vive acá, así sin JS y con reduced-motion se ve
igual; app.js solo las trae desde abajo al entrar. */
.plans__cobro {
display: flex; align-items: center; justify-content: center; gap: 12px;
margin: 0 auto clamp(40px, 6vh, 64px);
font-size: 0.9375rem; font-weight: 600;
}
.plans__opcion { color: var(--tx-2); cursor: pointer; user-select: none; transition: color 180ms cubic-bezier(0, 0, 0.2, 1); }
.plans__opcion.is-activa { color: var(--tx-1); }
.plans__ahorro {
display: inline-block; margin-left: 4px; padding: 3px 8px; border-radius: var(--r-pill);
background: var(--tinte); color: var(--azul-texto); font-size: 0.75rem; font-weight: 600;
}
/* La pista apagada va en --texto-2 y no en el gris del borde: un control necesita 3:1 contra lo
que tiene alrededor y el borde sobre el fondo daba 1,1:1. */
.switch {
position: relative; flex: none; width: 48px; height: 28px; padding: 0;
border: 0; border-radius: var(--r-pill); cursor: pointer;
background-color: var(--texto-2);
transition: background-color 180ms cubic-bezier(0, 0, 0.2, 1);
}
.switch[aria-checked="true"] { background-color: var(--azul); }
.switch__perilla {
position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
background: #FFFFFF; transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.switch[aria-checked="true"] .switch__perilla { transform: translateX(20px); }
.plans__wrap { max-width: 1120px; margin: 0 auto; }
.plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan {
position: relative; display: flex; flex-direction: column; margin-top: 20px;
padding: 28px 24px 24px; text-align: center;
background: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.plan--popular { z-index: 1; margin-top: 0; padding: 27px 23px 23px; border: 2px solid var(--azul); }
.plan__popular {
position: absolute; top: 0; right: 0;
display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 5px;
border-radius: 0 calc(var(--r-lg) - 2px) 0 12px;
background: var(--azul); color: var(--sobre-azul); font-size: 0.75rem; font-weight: 600;
}
.plan__popular .ic { width: 13px; height: 13px; }
.plan__nombre { font-size: 1rem; letter-spacing: 0; color: var(--tx-2); }
.plan__precio { margin-top: 18px; display: flex; align-items: baseline; justify-content: center; gap: 6px; color: var(--tx-1); }
.plan__moneda, .plan__periodo { font-size: 0.875rem; font-weight: 600; color: var(--tx-2); }
.plan__monto {
font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1;
letter-spacing: var(--tr-lg);
}
/* El precio que rueda: una tira 0–9 por cifra, recortada a 1em de alto; app.js la corre en Y */
.plan__cifras { display: inline-flex; }
/* La columna mide lo que su cifra (app.js) y la tira, más ancha, queda centrada y desborda parejo.
align-items: flex-start no es opcional: con el stretch por defecto la tira mide 1em de alto en vez
de 10em, el translateY en % se calcula sobre ese alto y aparecen otras cifras («99» → «11»). */
.dig { display: flex; justify-content: center; align-items: flex-start; height: 1em; overflow: hidden; transition: width 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.dig__tira { flex: none; display: flex; flex-direction: column; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.dig__tira > span { display: block; height: 1em; line-height: 1; text-align: center; }
.plan__cobro { margin-top: 8px; font-size: 0.75rem; color: var(--tx-2); }
.plan__feats { flex: 1; margin-top: 22px; display: grid; align-content: start; gap: 10px; text-align: left; font-size: 0.875rem; color: var(--tx-2); }
.plan__feats li { display: flex; align-items: flex-start; gap: 10px; }
.plan__check {
flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--tinte); color: var(--azul-texto);
}
.plan__check .ic { width: 11px; height: 11px; stroke-width: 3; }
.plan__linea { width: 100%; margin: 22px 0 20px; border: 0; border-top: 1px solid var(--line); }
.plan__cta { width: 100%; }
/* «Todo el CRM incluido» (23/9): todos los planes traen todas las funciones; la tarjeta solo
dice cuánto USO trae, con barras de 10 segmentos. Los segmentos llenos son los
del HTML (app.js los hace crecer al entrar); Business las tiene completas. */
.plan__todo {
margin-top: 18px; display: inline-flex; align-self: center; align-items: center; gap: 8px;
font-size: 0.875rem; font-weight: 600; color: var(--tx-1);
}
/* El uso de cada plan en tres cifras: número en mono y rótulo chico. Sin barras: las únicas de la
sección son las del armador de Ruta a medida. */
.cifras { flex: 1; margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; text-align: left; }
.cifra { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--s-1); }
.cifra b { display: block; font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 600; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.cifra span { display: block; font-size: 0.71875rem; line-height: 1.3; color: var(--tx-2); }
/* La lista de lo que trae el CRM, una sola vez para los tres planes, entre las tarjetas y Ruta a
medida (la opción A del 23/9). Es un desplegable CERRADO de entrada, así el armador queda a la
vista enseguida; el signo + es el de la FAQ. Lo que se quiere destacar va en . */
.incluye {
max-width: 1120px; margin: 28px auto 0;
background: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.incluye__cabeza {
display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; padding: 20px 28px;
list-style: none; cursor: pointer; border-radius: var(--r-lg);
}
.incluye__cabeza::-webkit-details-marker { display: none; }
.incluye__cabeza:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.incluye__cabeza:hover .incluye__resumen { color: var(--tx-1); }
/* El ícono: capas en azul sobre el tinte, en un cuadrado de radio chico (como los chips) */
.incluye__icono {
flex: none; width: 36px; height: 36px; border-radius: var(--r-s);
display: flex; align-items: center; justify-content: center;
background: var(--tinte); color: var(--azul-texto);
}
.incluye__icono .ic { width: 20px; height: 20px; stroke-width: 1.9; }
.incluye__titulo { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: var(--tr-md); color: var(--tx-1); }
.incluye__resumen { font-size: 0.875rem; color: var(--tx-2); transition: color 180ms cubic-bezier(0, 0, 0.2, 1); }
.incluye__mas { margin-left: auto; }
.incluye[open] .incluye__mas::after { transform: rotate(90deg); }
.incluye[open] .incluye__mas::before, .incluye[open] .incluye__mas::after { background: var(--tx-1); }
.incluye__lista {
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px 24px;
margin: 0 28px; padding: 20px 0 24px; border-top: 1px solid var(--line);
font-size: 0.875rem; color: var(--tx-2);
}
.incluye__lista li { display: flex; align-items: flex-start; gap: 10px; }
.incluye__lista b { font-weight: 600; color: var(--tx-1); }
@media (min-width: 821px) {
.plans__grid > .plan:first-child { transform: translateX(30px) scale(0.94); transform-origin: right center; }
.plans__grid > .plan:last-child { transform: translateX(-30px) scale(0.94); transform-origin: left center; }
.plan--popular { transform: translateY(-20px); }
.cotizador, .incluye { width: calc(96% - 59px); }
}
/* ── Ruta a medida (23/9) ── el armador, debajo de las tarjetas y con su mismo ancho. Arriba el
título (solo «Ruta a medida», más grande que el de las tarjetas: es la tarjeta que se arma);
abajo, a la izquierda las barras y a la derecha el precio, que rueda con las mismas cifras. Sin
sombra: filete de 1 px y divisores. */
.cotizador {
max-width: 1120px; margin: clamp(40px, 6vh, 64px) auto 0;
display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
grid-template-areas: "cabeza cabeza" "ctrl res";
background: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.cotizador__cabeza {
grid-area: cabeza; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
padding: 22px 28px 18px; border-bottom: 1px solid var(--line);
}
.cotizador__titulo { font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.1; letter-spacing: var(--tr-md); color: var(--tx-1); }
.cotizador__bajada { font-size: 0.875rem; color: var(--tx-2); }
.cotizador__ctrl { grid-area: ctrl; padding: 22px 28px 24px; display: grid; gap: 18px; align-content: start; }
.cotizador__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.cotizador__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cotizador__lbl { font-size: 0.9375rem; font-weight: 600; color: var(--tx-1); }
.cotizador__valor { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--azul-texto); font-variant-numeric: tabular-nums; }
.cotizador__sub { margin-top: 2px; font-size: 0.8125rem; color: var(--tx-2); }
/* La barra: pista de 6 px en el tinte, lo recorrido en azul (corte seco, no degradado: --p lo
pone app.js) y la perilla blanca con anillo azul de 2 px, como el switch. */
.rango {
-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px;
margin: 10px 0 4px; background: transparent; cursor: pointer;
}
.rango::-webkit-slider-runnable-track {
height: 6px; border-radius: var(--r-pill);
background: linear-gradient(to right, var(--azul) 0 var(--p, 0%), var(--tinte) var(--p, 0%) 100%);
}
.rango::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--tinte); }
.rango::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--azul); }
.rango::-webkit-slider-thumb {
-webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
background: #FFFFFF; border: 2px solid var(--azul);
transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rango::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--azul); }
.rango:active::-webkit-slider-thumb { transform: scale(1.1); }
.rango:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: var(--r-s); }
/* Las marcas van donde cae el centro de la perilla: --x es la fracción del recorrido, que es el
ancho menos la perilla (24 px). */
.cotizador__marcas {
position: relative; height: 1.4em;
font-family: var(--font-mono); font-size: 0.6875rem; color: var(--tx-2); font-variant-numeric: tabular-nums;
}
.cotizador__marcas span { position: absolute; top: 0; left: calc(12px + var(--x) * (100% - 24px)); transform: translateX(-50%); white-space: nowrap; }
.cotizador__marcas span:first-child { transform: translateX(-12px); }
.cotizador__marcas span:last-child { transform: translateX(calc(-100% + 12px)); }
.cotizador__res {
grid-area: res; padding: 24px 28px; display: flex; flex-direction: column; text-align: center;
border-left: 1px solid var(--line); background: var(--s-1); border-radius: 0 0 var(--r-lg) 0;
}
.cotizador__res .plan__precio { margin-top: 0; }
.cotizador__consulta { margin-top: 12px; font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: var(--tr-lg); color: var(--tx-1); }
.cotizador__detalle { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; text-align: left; font-size: 0.8125rem; color: var(--tx-2); }
.cotizador__detalle li { display: flex; justify-content: space-between; gap: 12px; }
.cotizador__detalle li span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-1); white-space: nowrap; }
.cotizador__nota { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-s); background: var(--tinte-suave); text-align: left; font-size: 0.8125rem; color: var(--tx-1); }
.cotizador__nota b { font-weight: 600; color: var(--azul-texto); }
.cotizador__cta { width: 100%; margin-top: auto; }
.cotizador__detalle + .cotizador__cta, .cotizador__nota + .cotizador__cta { margin-top: 20px; }
/* Papel picado del switch (app.js lo crea y lo borra) */
.confeti { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.confeti span { position: absolute; margin: -4px 0 0 -4px; border-radius: 50%; }
/* ═══ S11 · FAQ ═══ */
.faq__list { max-width: 820px; margin: 0 auto; }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-family: var(--font-display); font-weight: 500;
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
padding: 24px 4px;
transition: color 0.3s;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--tx-1); }
.faq__plus { position: relative; width: 18px; height: 18px; flex: none; }
.faq__plus::before, .faq__plus::after {
content: ""; position: absolute; inset: 0; margin: auto; background: var(--tx-3); border-radius: 99px;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}
.faq__plus::before { width: 100%; height: 2px; }
.faq__plus::after { width: 2px; height: 100%; }
.faq__list details[open] .faq__plus::after { transform: rotate(90deg); }
.faq__list details[open] .faq__plus::before, .faq__list details[open] .faq__plus::after { background: var(--tx-1); }
.faq__list details p { color: var(--tx-2); padding: 0 4px 26px; max-width: 68ch; }
/* ═══ S12 · CTA FINAL + FOOTER ═══ */
.final { padding-bottom: clamp(60px, 8vh, 100px); }
.final__card {
position: relative; overflow: hidden;
max-width: 1000px; margin: 0 auto; text-align: center;
background: var(--s-1);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(50px, 8vw, 90px) clamp(24px, 5vw, 70px);
box-shadow: var(--e-2);
}
.final__card h2 { font-size: clamp(2.1rem, 5vw, 3.8rem); }
.final__card > p { color: var(--tx-2); max-width: 56ch; margin: 20px auto 36px; }
.final__ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
/* El pie es un panel GRAFITO: pisa los tokens de texto y de línea en vez de
reescribir cada regla (lo mismo que hace .panel--light, al revés). */
.footer {
--tx-1: var(--sobre-grafito);
--tx-3: var(--sobre-grafito-2);
--line: var(--grafito-activo);
padding: clamp(56px, 8vh, 88px) var(--pad-x) 40px;
background: var(--grafito); color: var(--sobre-grafito);
}
.footer :focus-visible { outline-color: var(--hermano-claro); }
/* El logotipo grande en hermano claro (7,53:1 sobre grafito) y la etiqueta CRM al lado */
.footer__markwrap { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); }
.footer__logo { display: block; height: clamp(40px, 9.5vw, 150px); width: auto; fill: var(--hermano-claro); }
.footer__crm {
display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.18em; line-height: 1;
font-size: clamp(0.9rem, 2vw, 2rem); color: var(--sobre-grafito-2);
}
.footer__crm::before { content: ""; width: 1px; height: 1.6em; background: var(--grafito-activo); }
.footer__cols {
display: flex; flex-wrap: wrap; gap: clamp(40px, 8vw, 120px); justify-content: center;
margin: clamp(40px, 6vh, 70px) 0;
}
.footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.footer__col h3 {
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--tx-3); margin-bottom: 6px; font-weight: 400;
}
.footer__col a, .footer__col span { color: var(--tx-1); font-size: 0.95rem; }
.footer__col a:hover { color: var(--tx-1); }
.footer__base {
display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
border-top: 1px solid var(--line); padding-top: 24px;
font-size: 0.8rem; color: var(--tx-3);
}
.footer__slogan { font-family: var(--font-mono); letter-spacing: 0.04em; }
/* ═══ EL NAV EN CHICO (≤1010px) ═══
El corte del nav NO es el de la página (821): es 1010, que es donde el
contenido deja de entrar. Medido: a 1000 px la barra queda EXACTAMENTE
llena (mark 224 + links 438 + CTA 198 + 40 de hueco + 100 de padding) y de
ahí para abajo el CTA se sale — a 900 terminaba en 934, o sea 34 px afuera,
y a 821 en 930, que son 109. Como el nav es `fixed`, eso no daba scroll
horizontal: simplemente se recortaba, y por eso vivió meses sin que se
notara. En la práctica es un iPad en vertical (834 px).
Entre 821 y 1010 el nav se ve como desktop —logo entero, etiqueta CRM,
«Probalo en WhatsApp»— y lo único que cambia es que los links se van a la
hamburguesa. Los achiques visuales siguen en el bloque de ≤820. */
@media (max-width: 1010px) {
/* ── El panel de la hamburguesa (18/9) ──
.nav__links deja de ser una fila y pasa a ser el panel. Va ABSOLUTO y no en
el flujo: el alto del nav lo mide app.js con offsetHeight y lo publica en
--nav-alto, del que cuelga el título pegado de «¿Qué hace nuestro agente?».
Si el panel empujara, el techo saltaría cada vez que abrís.
Se esconde con visibility y no con display para poder animarlo, y eso de
paso lo saca del árbol de accesibilidad y del tabulado cuando está cerrado.
El pointer-events es para que cerrado no se coma los toques de lo que hay
debajo. */
.nav--js .nav__links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 2px;
margin: 0; padding: 8px var(--pad-x) 14px;
background: var(--superficie); border-bottom: 1px solid var(--borde);
visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
transition: opacity 0.22s ease-out, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
}
.nav--js.nav--abierto .nav__links {
visibility: visible; opacity: 1; transform: none; pointer-events: auto;
transition-delay: 0s, 0s, 0s;
}
.nav--js .nav__links a {
padding: 12px 14px; font-size: 0.9375rem; border-radius: var(--r-sm, 10px);
}
/* «Entrar» cierra la lista, desde el 20/9 como botón lleno también acá:
pill azul a lo ancho del panel, centrada. El aire de margin-top la separa
de los anclas; el filete de 1 px se fue porque un border-top sobre una
pill con radio dibuja una curva suelta en las puntas. */
.nav--js .nav__links .nav__entrar {
margin-top: 10px; height: 44px; padding: 0 16px;
border-top: 0; border-radius: var(--r-pill);
justify-content: center;
font-size: 0.9375rem; color: var(--sobre-azul);
}
/* SIN JS queda el fallback de siempre: se ocultan todos los links menos el
destino que importa, y no hay botón que abra nada. */
.nav:not(.nav--js) .nav__links a { display: none; }
.nav:not(.nav--js) .nav__links a[href="#planes"] { display: block; font-size: 0.8125rem; padding: 8px 10px; }
.nav--js .nav__burger { display: flex; }
}
/* ═══ MOBILE (≤820px) ═══ */
@media (max-width: 820px) {
/* El logo no se parte en dos líneas al lado del CTA: nowrap y ambos un poco más chicos */
.nav__logo { height: 21px; }
.nav__crm { display: none; }
.nav { gap: 10px; }
/* «Entrar» ya no necesita ajuste acá: a este ancho vive en el panel de la
hamburguesa y lo gobiernan las reglas de .nav--js (pill llena, 20/9). */
.nav__cta-main { padding: 0 12px; font-size: 0.76rem; }
/* El boton se acorta a «WhatsApp» para que entren el logo, el link a planes
y el CTA en 375 px sin que nada se corte. */
.nav__cta-long { display: none; }
.hero__top { padding-top: 104px; gap: 14px; }
.hero__title { font-size: clamp(1.85rem, 8.2vw, 2.6rem); }
/* 94vw desborda el contenedor acolchado y el margin auto colapsa a 0: quedaba 20px de
canaleta a la izquierda y 3 a la derecha (queja de Emanuel, 15/9). El margen negativo
simétrico la centra de verdad. */
.hero__shot { width: 94vw; margin-inline: calc((100% - 94vw) / 2); }
.hero__shot-frame { padding: 8px; border-radius: 14px; }
/* en el celular la bandeja muestra solo la conversación, a un tamaño legible */
.mock { --mock-w: 600; --mock-h: 800; }
.mock__lienzo { width: 600px; height: 800px; }
.mk-lado, .mk-lista, .mk-barra { display: none; }
.mk-chat__cabeza .mk-boton, .mk-chat__cabeza code { display: none; }
.mk-msg p { max-width: 82%; }
.mk-escribir b, .mk-escribir .mk-sep { display: none; }
.preloader__crm { margin-left: 14px; }
/* Galería móvil → el mazo se apila con el scroll (15/9, port de la mesa Sleek): cada tarjeta
es sticky bajo el nav con un escalón por nivel (--nivel), así la nueva tapa a la anterior
y las de atrás quedan espiando arriba, como el mazo de desktop. Sin JS también funciona
(es CSS puro); con reduced-motion el bloque html.reduced del final vuelve al carrusel. */
/* overflow visible: con hidden el pin pasa a ser el «scrollport» del sticky y el apilado
no engancha (los tops daban flujo normal). En móvil no hay zoom que recortar. */
.gallery__pin { min-height: 0; overflow: visible; }
.gallery { --panel-h: auto; }
.gallery__track { width: auto; display: block; padding: 0 var(--pad-x); }
.panel { width: 100%; height: auto; min-height: 0; padding: 24px 20px; gap: 18px; }
.panel h3 { font-size: 1.45rem; }
.panel__foot { flex-direction: column; align-items: flex-start; }
html:not(.reduced) .panel {
position: sticky; top: calc(var(--nav-alto, 60px) + 10px + var(--nivel, 0px));
margin-bottom: 16px;
}
html:not(.reduced) .panel:nth-child(2) { --nivel: 8px; }
html:not(.reduced) .panel:nth-child(3) { --nivel: 16px; }
html:not(.reduced) .panel:nth-child(4) { --nivel: 24px; }
html:not(.reduced) .panel:nth-child(5) { --nivel: 32px; }
html:not(.reduced) .panel:nth-child(6) { --nivel: 40px; }
.setup__grid { grid-template-columns: 1fr; }
.aichat { margin: 0 auto; }
.vs { grid-template-columns: 1fr; max-width: none; }
/* Planes móviles → carrusel horizontal con snap (15/9, port de la mesa Sleek): «algún scroll
horizontal» pedido por Emanuel. La destacada arranca centrada (app.js). El grid 1fr queda
como base para reduced-motion. data-lenis-prevent-touch va en el HTML del grid. */
.plans__grid { grid-template-columns: 1fr; }
.plan { margin-top: 0; }
html:not(.reduced) .plans__grid {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
gap: 14px; margin: 0 calc(-1 * var(--pad-x)); padding: 6px var(--pad-x) 10px;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
html:not(.reduced) .plans__grid::-webkit-scrollbar { display: none; }
html:not(.reduced) .plan { flex: 0 0 82%; scroll-snap-align: center; }
/* La puerta del setup en móvil: el círculo gris se abre cuando la sección entra en pantalla
(la clase la pone el IntersectionObserver). Solo existe con .indice--movil: sin JS o con
reduced el setup se ve entero desde el arranque, como hasta hoy. */
/* La puerta la pinta el SCROLL: app.js escribe --puerta (0 a 1) en cada cuadro
y el radio sale de ahí. SIN transición a propósito — una transición corre por
su cuenta y se despega del dedo, que es exactamente el parpadeo que tenía
cuando esto era una clase que prendía un IntersectionObserver.
Con reduced-motion `.indice--movil` no se pone nunca y el setup se ve entero. */
/* LA CARD NEGRA INMERSIVA (20/9, segunda vuelta). La «puerta» de antes
clipeaba el setup ENTERO — que en móvil es una sección CLARA sobre página
clara: el círculo era invisible y «no pasaba nada de nada». Lo inmersivo
es la card negra del CHAT (el panel grafito del agente de setup): al
llegar crece hasta casi llenar la pantalla y se queda pegada (sticky
nativo, sin pins — la regla de la coreografía móvil), el scroll escribe
las burbujas adentro, y al soltar sigue la sección blanca del 85 %.
Todo cuelga de .indice--movil (solo la pone app.js): sin JS y con
reduced-motion el chat se ve entero y quieto, como siempre. */
.indice--movil .setup__chat { height: 230svh; }
.indice--movil .setup__chat .aichat {
position: sticky; top: 0;
display: flex; flex-direction: column;
max-width: none;
/* A metida plena la card es LA PANTALLA: 100svh de punta a punta, sin
franja clara abajo ni radio (pedido de Emanuel, 20/9). */
height: calc(54svh + var(--metida, 0) * 46svh);
width: calc(100% + var(--metida, 0) * 2 * var(--pad-x));
margin-left: calc(var(--metida, 0) * -1 * var(--pad-x));
border-radius: calc(18px - var(--metida, 0) * 18px);
}
.indice--movil .setup__chat .aichat__body { flex: 1; min-height: 0; overflow: hidden; }
/* El chat del setup se escribe con el scroll (20/9). Cuelga de .indice--movil,
que solo pone app.js: sin JS y con reduced-motion la conversación se ve
entera, como siempre. Solo opacity/transform. */
.indice--movil .setup--inmersiva .aichat__body > * {
opacity: 0; transform: translateY(10px);
transition: opacity 380ms ease-out, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.indice--movil .setup--inmersiva .aichat__body > .es-dicho { opacity: 1; transform: none; }
/* ═══ El agente en celular (16/9): SOLO TEXTO ═══
Las escenas vivas son de DESKTOP y ahí se quedan. En ≤820 salieron (pedido de Emanuel) y la
medición de por qué: las burbujas caían a 10,5 px y los micro-rótulos a 6,0-6,8 px, las siete
escenas animaban a la vez (.indice--anda vive en la SECCIÓN, no en el slide, así que la que
asomaba al costado era una columna de piezas a medio aparecer), los slides medían entre 470 y
728 px dejando hasta 258 px de azul muerto, y la secuencia tardaba 7,3 s en completarse —más
de lo que dura el gesto—. La sección medía 2.504 px.
Ahora la sección es tipografía sobre el azul, en dos variantes conmutables mientras Emanuel
elige (default el índice; ?agente=pestanas la otra). */
.indice__media { display: none; }
.indice__marco { max-width: 32rem; }
/* ── A · ÍNDICE VIVO (default) ──
La MAQUETA es de la hoja, no del JS: sin JS, con reduced-motion o si el CDN de GSAP se cae,
el celular ve igual este índice compacto (antes caía en la lista vieja, con el aire de
desktop). Lo único que agrega app.js es el FOCO de lectura (.is-activo).
Acá el scroll no abre ni cierra nada: un acordeón por scroll mueve el texto bajo el dedo (al
abrirse una, la que estás leyendo salta), así que la lista no cambia nunca de alto y el foco
es solo color. El separador ES el indicador: el filete de arriba de la que estás leyendo se
enciende en --tinte y su número pasa de blanco a tinte.
Los colores apagados son la base (sin .is-activo) a propósito: el arnés mide el PEOR caso. */
.indice__cuenta { display: none; }
.indice__items { gap: 0; counter-reset: cap; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.indice__item {
position: relative; counter-increment: cap;
padding: 17px 0 19px 2.7rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
transition: border-top-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* El número es el orden de UNA historia (el mismo lead entra, lo etiqueta, le agenda el turno
y aparece en los reportes), no una numeración decorativa. */
.indice__item::before {
content: "0" counter(cap);
position: absolute; left: 0; top: 19px;
font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.74);
transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.indice__titulo { font-size: 1.0625rem; line-height: 1.22; color: rgba(255, 255, 255, 0.72); transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.indice__detalle-in { padding-top: 7px; gap: 10px; }
.indice__detalle-in > p { font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.68); transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.indice__detalle-in > p strong { color: inherit; }
/* Las siete «Leer más» van al mismo destino: en el celular queda UNA sola al pie del índice. */
.indice__item .indice__mas { display: none; }
.indice__mas--movil { display: inline-flex; margin-top: 22px; }
/* Las etiquetas y la nota también se apagan: en tinte pleno se le llevaban el ojo a la
capacidad que estabas leyendo. */
.indice__chips li {
font-size: 0.75rem; padding: 5px 10px;
background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.82);
transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1), color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.indice__nota { font-size: 0.78125rem; color: rgba(255, 255, 255, 0.72); transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.indice__nota .ic { color: rgba(255, 255, 255, 0.5); transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1); }
/* ══ A · EL CARRUSEL (17/9) ═══════════════════════════════════════════════════════════
Cada slide se lleva la capacidad ENTERA —número, título, texto y su par— y se pasa de
a una al costado. Mismo patrón que el carrusel de planes: snap, sangrado a los bordes,
barra escondida y data-lenis-prevent-touch en el HTML.
Todo cuelga de .indice--movil, que solo pone app.js: sin JS, con reduced-motion o si se
cae el CDN de GSAP, el celular sigue viendo el índice compacto de arriba.
Antes de esto la sección era 1.208 px de texto sobre azul: la que se llama «¿Qué hace
nuestro agente?» no mostraba al agente haciendo nada, justo en el dispositivo donde cae
el tráfico de los anuncios. Se descartaron dos intentos el mismo día: el par pegado
arriba en un escenario sticky partía los 844 px en 519 de tarjeta y 255 de ranura y
guillotinaba el título contra el nav; apilado (un bloque por capacidad) medía bien pero
son 4.316 px, cinco pantallas. El carrusel entra en 795.
flex-direction: row EXPLÍCITO: la hoja declara .indice__items como flex en COLUMNA (601)
y sin darlo vuelta el flex-basis del slide gobierna el ALTO y no el ancho — la pista
queda apilada, con display flex y todo, y nada se mueve al costado. */
.indice--movil.indice--indice .indice__items {
display: flex; flex-direction: row; gap: 12px; border-bottom: 0;
overflow-x: auto; scroll-snap-type: x mandatory;
margin: 0 calc(-1 * var(--pad-x)); padding: 2px var(--pad-x) 14px;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.indice--movil.indice--indice .indice__items::-webkit-scrollbar { display: none; }
/* DOS clases, a propósito: .es-foco sigue al dedo (apagado y escala) y .is-activo entra
solo cuando el carrusel SE ASENTÓ (dispara las animaciones). Con una sola se veía al
revés: la tarjeta de al lado mostraba el chat ENTERO y, apenas cruzaba el centro, se
borraba y volvía a escribirse.
El 92 % no es a ojo: con fondo hace falta padding, y el padding come ancho. A 92 % el
contenido queda en 327 px; a 86 %, en 271. */
.indice--movil.indice--indice .indice__item {
flex: 0 0 92%; scroll-snap-align: center;
display: flex; flex-direction: column;
padding: 14px 14px 16px; border-top: 0; border-radius: 16px;
transform: scale(0.90); transform-origin: 50% 42%;
transition: opacity 320ms ease-out, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
/* 0,84 es el PISO, no un gusto: por debajo, el texto del slide vecino —compuesto con
la opacidad del padre contra el azul de la sección— cae de 4,5:1. A 0,72 da 3,88 y a
0,62, 3,35. Por eso el peso visual lo lleva la escala, que no cuesta contraste. Es el
mismo cuidado que en la rueda de la galería, donde un panel al 0,86 bajaba su kicker
a 4,46. El fondo claro es el que manda el piso: --texto-2 sobre --fondo arranca en
5,45:1 contra los 10,6 del blanco sobre azul. */
opacity: 0.84;
}
.indice--movil.indice--indice .indice__item.es-foco { opacity: 1; transform: none; }
/* Nada se revela antes de su turno: sin esto, la que asoma al costado muestra el chat
terminado y recién se borra al llegar al centro. */
.indice--movil.indice--indice.indice--anda .indice__item:not(.is-activo) .an,
.indice--movil.indice--indice.indice--anda .indice__item:not(.is-activo) .par__obj { opacity: 0; }
/* Los fondos, en ciclo de tres: tinte → claro → grafito. Antes las 3n+1 iban
en --azul, el MISMO token que la sección, y la 1, la 4 y la 7 se fundían con
el fondo — «no tenían fondo» (Emanuel, 20/9). Ahora van en --tinte: TODAS
las cards se despegan como tarjetas. El claro es --fondo y no blanco puro a
propósito: el par de adentro es --superficie, y esa es exactamente la
relación lienzo/tarjeta de la hoja. */
.indice--movil.indice--indice .indice__item:nth-child(3n + 1) { background: var(--tinte); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 2) { background: var(--fondo); }
.indice--movil.indice--indice .indice__item:nth-child(3n) { background: var(--grafito); }
/* El número sale del canal de la izquierda y va arriba del título: en un slide de 327 px,
2,7 rem de sangría son el 13 % del ancho gastado en dos dígitos. */
.indice--movil.indice--indice .indice__item::before { position: static; display: block; margin-bottom: 9px; }
/* Sobre TINTE. El texto va ENCENDIDO en las siete: en un carrusel no hay «inactiva» que
apagar, la que ves es siempre la activa. El apagado lo hace la opacidad del slide.
Contrastes sobre #D7E6FF: --texto 13,9:1 · --texto-2 5,1:1 · --azul-texto 8,4:1. */
.indice--movil.indice--indice .indice__item:nth-child(3n + 1)::before { color: var(--azul-texto); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 1) .indice__titulo { color: var(--texto); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 1) .indice__detalle-in > p { color: var(--texto-2); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 1) .indice__detalle-in > p strong { color: var(--texto); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 1) .indice__chips li { background: var(--superficie); color: var(--azul-texto); }
/* Sobre CLARO */
.indice--movil.indice--indice .indice__item:nth-child(3n + 2)::before { color: var(--azul-texto); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 2) .indice__titulo { color: var(--texto); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 2) .indice__detalle-in > p { color: var(--texto-2); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 2) .indice__detalle-in > p strong { color: var(--texto); }
.indice--movil.indice--indice .indice__item:nth-child(3n + 2) .indice__chips li { background: var(--tinte); color: var(--azul-texto); }
/* Sobre GRAFITO. El azul de marca ahí da 1,65:1 y no se ve: va el hermano claro. */
.indice--movil.indice--indice .indice__item:nth-child(3n)::before { color: var(--hermano-claro); }
.indice--movil.indice--indice .indice__item:nth-child(3n) .indice__titulo { color: var(--sobre-grafito); }
.indice--movil.indice--indice .indice__item:nth-child(3n) .indice__detalle-in > p { color: var(--sobre-grafito-2); }
.indice--movil.indice--indice .indice__item:nth-child(3n) .indice__detalle-in > p strong { color: #FFFFFF; }
.indice--movil.indice--indice .indice__item:nth-child(3n) .indice__chips li { background: var(--grafito-activo); color: var(--hermano-claro); }
/* El par, adentro del slide. El font-size va en px y NO en cqh/cqw: a ≤820 el lienzo queda
container-type: normal y esas unidades caen al viewport chico — 2,95cqw a 390 px son
11,5, que es como se llegó a las burbujas de 10,5 px de septiembre. */
/* 20 % más chicas (pedido de Emanuel, 20/9): las cards ocupaban todo el
vertical. Baja el par de 15 a 12 px (todo lo de adentro va en em y escala
junto), el título y el texto un escalón, y los paddings acompañan. */
.indice--movil.indice--indice .indice__titulo { font-size: 0.9375rem; }
.indice--movil.indice--indice .indice__detalle-in > p { font-size: 0.84375rem; }
.indice--movil.indice--indice .indice__media { display: flex; width: 100%; margin: 12px 0 0; }
.indice--movil.indice--indice .indice__lienzo { width: 100%; }
.indice--movil.indice--indice .par { width: 100%; font-size: 12px; }
/* Alto AUTOMÁTICO. Los 17,4 y 14,1 em fijos están calibrados a 33 em de ancho: en un
teléfono de 360 el slide deja 265 px y se desbordan cuatro de las siete. Lo que iguala a
las siete es el SLIDE, no el par —flex las estira al alto de la más alta— y el sobrante
queda ABAJO, donde no se ve porque el slide no tiene borde. Al revés (el par apoyado
abajo con margin-top auto) los 80 px de sobrante de la capacidad 1 quedaban entre el
párrafo y la tarjeta, y eso sí se lee como un agujero. */
.indice--movil.indice--indice .par__dicho,
.indice--movil.indice--indice .par__hecho { height: auto; }
/* La nota de WhatsApp vive adentro de la tarjeta, al pie de los mensajes (la muda app.js).
Los dos selectores llevan las dos clases pegadas y NO es adorno: la regla de arriba para
la nota sobre el azul tiene menos peso, y la nota se ponía BLANCA sobre la tarjeta clara
justo al estar activa, o sea justo cuando la estás leyendo. Medido: 1,04:1. */
.indice--movil.indice--indice .par .indice__nota {
display: flex; align-items: flex-start; gap: 0.5em; margin: 0;
font-size: 0.86em; line-height: 1.35; color: var(--texto-2);
}
.indice--movil.indice--indice .par .indice__nota .ic {
flex-shrink: 0; width: 1em; height: 1em; margin-top: 0.12em; color: var(--azul-texto);
}
/* El riel vuelve a existir, como PUNTOS: cuántas son y en cuál vas. Son los mismos siete
botones de la variante de pestañas, así que el carrusel queda alcanzable por teclado y
cada punto tiene su nombre accesible (Horarios, Departamentos, …) sin markup nuevo. */
.indice--movil.indice--indice .indice__riel {
display: flex; gap: 7px; justify-content: center; padding: 2px 0 0;
}
.indice--movil.indice--indice .indice__riel button {
width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, 0.34);
transition: background-color 240ms ease-out;
}
.indice--movil.indice--indice .indice__riel button i { display: none; }
/* El rótulo se esconde con display: none, y el nombre accesible lo da el aria-label del
botón. Probé antes con text-indent y con clip-path de 1 px: en los dos casos el texto
SIGUE teniendo caja y el arnés lo medía contra el fondo del punto — 1,53:1 en seis de
los siete, una falla real. Sin caja no hay qué medir, y el botón no se queda mudo. */
.indice--movil.indice--indice .indice__riel .riel__txt { display: none; }
.indice--movil.indice--indice .indice__riel button.is-on { background: var(--tinte); }
.indice--movil.indice--indice .indice__riel button:focus-visible { outline: 2px solid var(--sobre-azul); outline-offset: 4px; }
/* El título, pegado a la información: entre el margen del h2 y el aire de la escena
quedaban 33 px, que en desktop son poco y en un teléfono se leen como un corte. Va sin
condición porque el h2 es HERMANO de .indice y no descendiente: no se lo puede alcanzar
desde .indice--movil, y son 21 px de aire que tampoco le hacen falta a los otros
caminos. */
.skills__title { margin-bottom: 12px; }
.indice--movil.indice--indice .indice__escena { padding-top: 0; }
/* ── B · PESTAÑAS (?agente=pestanas) ──
Alto FIJO: la tira de siete rótulos arriba y un panel que cambia debajo. La sección ocupa
siempre lo mismo (el panel más alto, medido en app.js) y nada salta al cambiar de capacidad.
Cada rótulo es UNA palabra sacada del título de su capacidad, no copy nuevo.
Todo esto desarma la maqueta del índice de arriba: sin JS no hay pestañas y se ve el índice. */
.indice--pestanas .indice__cuenta { display: block; margin-bottom: 12px; }
.indice--pestanas .indice__lista { display: flex; flex-direction: column; }
.indice--pestanas .indice__items { border-bottom: 0; }
.indice--pestanas .indice__item { padding: 0; border-top: 0; }
.indice--pestanas .indice__item::before { content: none; }
.indice--pestanas .indice__item .indice__mas { display: inline-flex; }
.indice--pestanas .indice__mas--movil { display: none; }
.indice--pestanas .indice__riel {
display: flex; order: -1; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
margin: 0 calc(-1 * var(--pad-x)) 20px; padding: 2px var(--pad-x) 10px;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.indice--pestanas .indice__riel::-webkit-scrollbar { display: none; }
.indice--pestanas .indice__riel button {
flex: none; scroll-snap-align: center;
display: inline-flex; align-items: center; gap: 7px;
height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.82);
font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; line-height: 1;
transition: background-color 220ms cubic-bezier(0, 0, 0.2, 1), color 220ms cubic-bezier(0, 0, 0.2, 1);
}
.indice--pestanas .indice__riel button i {
font-family: var(--font-mono); font-style: normal; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
}
.indice--pestanas .indice__riel button.is-on { background: var(--tinte); color: var(--azul-texto); }
.indice--pestanas .indice__riel button:focus-visible { outline: 2px solid var(--sobre-azul); outline-offset: 3px; }
.indice--pestanas .indice__ventana { touch-action: pan-y; }
/* --panel lo mide app.js (el más alto de los siete) con .indice--midiendo: así el panel no
cambia de alto y la sección no salta al cambiar de pestaña. */
.indice--pestanas .indice__items { position: relative; display: block; height: var(--panel, 15rem); }
.indice--pestanas .indice__item {
position: absolute; inset: 0 0 auto; opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity 240ms linear, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 240ms;
}
.indice--pestanas .indice__item.is-activo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.indice--pestanas .indice__titulo { font-size: 1.3125rem; line-height: 1.16; color: var(--sobre-azul); }
.indice--pestanas .indice__detalle-in { padding-top: 12px; gap: 14px; }
.indice--pestanas .indice__detalle-in > p { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.9); }
.indice--pestanas .indice__detalle-in > p strong { color: var(--sobre-azul); }
.indice--pestanas .indice__chips li { background: var(--tinte); color: var(--azul-texto); }
.indice--pestanas .indice__nota { color: var(--sobre-azul); }
.indice--pestanas .indice__nota .ic { color: var(--tinte); }
/* Para medir el alto natural de cada panel hay que sacarlos del apilado absoluto */
.indice--pestanas.indice--midiendo .indice__items { height: auto; }
.indice--pestanas.indice--midiendo .indice__item {
position: static; opacity: 1; visibility: visible; transform: none;
}
.cotizador { grid-template-columns: 1fr; grid-template-areas: "cabeza" "ctrl" "res"; }
.cotizador__cabeza { padding: 20px 20px 16px; }
.cotizador__ctrl, .cotizador__res { padding: 20px; }
.cotizador__par { grid-template-columns: 1fr; }
.incluye__cabeza { padding: 18px 20px; }
.incluye__lista { margin: 0 20px; padding: 16px 0 20px; }
/* en celular las cifras van en filas: número y rótulo en la misma línea */
.cifras { grid-template-columns: 1fr; gap: 6px; }
.cifra { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; }
.cifra b { min-width: 3.2em; }
.cifra span { font-size: 0.8125rem; }
.cotizador__res { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.section-head--row { flex-direction: column; align-items: flex-start; }
.footer__cols { justify-content: flex-start; }
/* La demo: sin enganche el título se ve acá, y los botones van uno debajo del otro */
.demo { padding-top: clamp(64px, 10vh, 96px); }
.demo__ctas { grid-template-columns: 1fr; }
}
/* ═══ RED DE SEGURIDAD ═══
Si un CDN falla, index.html marca el documento con .no-js-fx: aca se muestra
todo lo que GSAP deja escondido, asi la pagina se lee igual sin animacion. */
.no-js-fx .hero__line > span { transform: none !important; }
.no-js-fx [data-intro], .no-js-fx [data-reveal] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.no-js-fx .preloader { display: none !important; }
/* Sin JS no hay zoom: la tarjeta inmersiva deja de ser pegajosa y el setup va debajo */
/* Sin JS no hay enganche: el título de la demo se ve en su sección */
.no-js-fx .demo { padding-top: clamp(84px, 12vh, 150px); }
.no-js-fx .demo__head { position: static; width: auto; height: auto; margin: 0 auto clamp(40px, 6vh, 64px); overflow: visible; clip: auto; white-space: normal; }
/* Sin JS el switch no hace nada: queda el precio mensual escrito en el HTML */
.no-js-fx .plans__cobro, .no-js-fx .cotizador { display: none; }
/* ═══ El nav en pantallas angostas ═══
El nav ya estaba EXACTAMENTE lleno a 375: logo + «Planes» + el CTA sumaban
374 px de 375 (por eso el bloque de ≤820 acorta el botón a «WhatsApp»).
Con la hamburguesa (18/9) el reparto cambió: el panel se lleva los cuatro
links Y «Entrar», y en la barra quedan el logo, el CTA y el botón. Medido a
375: logo 133 + CTA 111 + botón 44, más 40 de padding y 8 de hueco = 336 de
375. Antes eran 351 con «Entrar» adentro, y una hamburguesa de 44 no entraba.
Acá solo queda apretar lo que sigue sin entrar en los teléfonos más angostos:
a 332 el nav YA se desbordaba 11 px antes de todo esto. */
@media (max-width: 470px) {
.nav:not(.nav--js) .nav__links { display: none; }
.nav { gap: 8px; }
}
@media (max-width: 345px) {
.nav { padding-left: 14px; padding-right: 14px; }
.nav__logo { height: 19px; }
.nav__burger { width: 40px; }
}
/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.rotator__cursor { animation: none !important; }
.aichat__chip i { animation: none !important; }
}
html.reduced .preloader { display: none; }
html.reduced .gallery__pin { min-height: 0; }
html.reduced .gallery__track {
width: auto; overflow-x: auto; scroll-snap-type: x mandatory;
}
/* Tampoco hay zoom en la tarjeta inmersiva: el setup va debajo, como en celular */
/* Sin zoom tampoco hay enganche: el título de la demo se ve en su sección */
html.reduced .demo { padding-top: clamp(84px, 12vh, 150px); }
html.reduced .demo__head { position: static; width: auto; height: auto; margin: 0 auto clamp(40px, 6vh, 64px); overflow: visible; clip: auto; white-space: normal; }
/* El switch cambia el precio al instante: sin rodar ni papel picado (eso lo decide app.js) */
html.reduced .dig, html.reduced .dig__tira, html.reduced .switch, html.reduced .switch__perilla { transition: none; }