/* ═══════════════════════════════════════════════════════════════════════════
Tiko — landing del sistema de gestión.
Dialecto propio de la superficie de marketing (D-79). NO es Broadsheet y
`apps/web` no hereda nada de acá: adentro de la app siguen valiendo enteras
las reglas de CLAUDE.md §3.
El concepto es EL CENTRO DE MANDO: una sola consola donde entra la consulta
y sale el evento. La página la muestra andando —vistas que cambian, un riel
de flujo que avanza, números que suben— y recorre el ciclo de una venta:
de día se opera (luz, papel con tinte lima) y de noche pasa el evento (tinta).
Reglas de la hoja:
· Nada de hex sueltos abajo del :root.
· Nada de ángulos rectos: todo radio viene de los tokens --r*.
· Todo movimiento se apaga con prefers-reduced-motion (bloque final).
· Ningún contenido depende del JS: el script agrega movimiento, no texto.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Día ──────────────────────────────────────────────────────────────── */
--hueso: #faf8f5; /* lienzo */
--nube: #ffffff; /* las tarjetas, que son objetos */
--niebla: #f3f7e8; /* superficie tenue con tinte de marca */
--niebla-2: #e7efd4;
--borde: #e6e8dc;
--tinta: #14121c; /* 17.5:1 sobre hueso */
--tinta-2: #4a4658; /* 8.6:1 */
--tinta-3: #6f6a80; /* 4.9:1 — el paso más claro que todavía es texto */
/* ── La marca ─────────────────────────────────────────────────────────────
La lima es el ÚNICO color accionable de la página, de día y de noche: si
algo se puede apretar, es lima. Plena no se lee sobre papel —1,3:1—, así
que sobre papel es SUPERFICIE con texto en --tinta, y cuando tiene que
ser texto va el paso --lima-txt. Sobre noche la plena sí es texto. */
--lima: #b8f32e; /* la marca · 8,6:1 sobre noche · texto en tinta encima */
--lima-2: #a3d92a; /* el hover de las superficies lima */
--lima-fuerte: #6f9c00; /* bordes y trazos sobre papel · 3,1:1 */
--lima-txt: #4c6b00; /* la única que es texto sobre papel · 5,8:1 */
--lima-luz: #c8d9a0; /* lo secundario sobre noche · 7,5:1 */
--lima-media: #89ad33; /* la serie de barras sobre noche · 4,4:1 */
--lima-tenue: #f2fde0; /* superficie pálida · admite --lima-txt encima (5,8:1) */
/* ── Las cuatro señales del sistema ───────────────────────────────────────
Cada una dice un estado, igual que en la app. Sobre color pleno el texto
va en tinta (todos dan más de 5:1); los pasos *-txt son para cuerpo. */
--aqua: #22b8e6; /* está libre */
--aqua-txt: #0b7295; /* 5.1:1 sobre hueso */
--aqua-luz: #9ae8fa; /* 8,2:1 sobre noche */
--aqua-tenue: #d9f4fd;
--coral: #ff4d7d; /* te está por vencer */
--coral-txt: #c4114e; /* 5.6:1 */
--coral-luz: #ffcfdd; /* 8,2:1 sobre noche · 7,3:1 sobre las tarjetas */
--coral-tenue:#ffe4ec;
--mint: #00c08b; /* cerrado y cobrado */
--mint-txt: #0a7a5c; /* 5.0:1 */
--mint-luz: #79efc8; /* 8,1:1 sobre noche */
--mint-tenue: #d6f8ee;
--ambar: #ffb020; /* el día del evento */
--ambar-txt: #8a5a00; /* 5.6:1 */
--ambar-luz: #ffd47f; /* 8,1:1 sobre noche */
--ambar-tenue:#fff0d6;
/* ── Noche ────────────────────────────────────────────────────────────────
No es negro: es un azul petróleo. Fue una pizarra violeta hasta el
31/08/2026 —competía con la lima, que es la marca— y después un verde
petróleo casi negro, que resolvió el color pero seguía leyendo pesado al
entrar. Éste está un escalón más arriba: sigue siendo noche y sigue siendo
formal, pero el azul abierto le da aire a la primera pantalla en vez de
cerrarla. Todo lo que va encima pasa el piso de 7:1 (texto 10,5:1,
secundario 9,3:1, lima 8,6:1).
El piso de 7:1 se mide contra --noche, que es el fondo de la página. Sobre
el vidrio del hero —que es --noche-3, el paso más claro— los mismos pares
dan entre 5,8 y 8,1; ahí adentro sólo va texto en --noche-txt y --noche-2do
(8,1 y 7,2), que son los dos que se verificaron para esa superficie. */
--noche: #123f52;
--noche-2: #17475a;
--noche-3: #1d5164;
--noche-txt: #f1f7fa; /* 10,5:1 */
--noche-2do: #dfebf0; /* 9,3:1 · 7,2:1 sobre el vidrio del hero */
--noche-borde:#35708a;
/* Los dos escalones del atardecer: el puente del papel a la noche. No dicen
ningún estado — son fondo, y sólo viven en la franja .anochece. Con el
azul petróleo abajo el puente es gris azulado, y la luminancia baja
parejo: 0,94 · 0,73 · 0,36 · 0,11 · 0,04. */
--anochecer-1:#dbdee0;
--anochecer-2:#95a5ae;
--anochecer-3:#456070;
/* ── Ramp del embudo ────────────────────────────────────────────────────
El embudo mide MAGNITUD, no identidad: un solo tono en pasos, nunca
cuatro colores distintos. Subió un escalón con el fondo: contra el azul
petróleo el ramp viejo dejaba el último paso en 2,8:1 y se perdía. Ahora
los cuatro superan 3:1 (10,0 · 7,3 · 5,6 · 4,0) y la luminosidad baja
monótona. El cierre sale
en mint porque *es* «cerrado», que es lo que el mint significa en toda
la página. */
--emb-1: #e6f8bb;
--emb-2: #bcdc57;
--emb-3: #9dc42f;
--emb-4: #82a52f;
/* El mismo embudo, sobre papel. Desde que la isla de luz (.dia) se llevó las
métricas, el ramp de noche ya no valida ahí: éste sí, con luminosidad
monótona y los cuatro pasos arriba de 3:1 sobre hueso (3,1 · 4,3 · 5,8 ·
8,3). Un solo tono, igual que el otro: mide magnitud, no identidad. */
--emb-dia-1: #6f9c00;
--emb-dia-2: #5c8100;
--emb-dia-3: #4c6b00;
--emb-dia-4: #3a5200;
/* ── Tipografía ─────────────────────────────────────────────────────────
Display con carácter para los titulares, grotesca neutra para todo lo
que se lee y para los números (con cifras tabulares). */
/* Miller Display es comercial (Font Bureau) y no se puede servir acá:
Playfair Display es el mismo Scotch de alto contraste, libre y en Google
Fonts. Si algún día se compra Miller, se cambia sólo esta línea y el
de las cinco páginas. */
--display: "Playfair Display", "Georgia", "Times New Roman", serif;
--texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
/* ── Formas ───────────────────────────────────────────────────────────── */
--r-xs: 8px;
--r-sm: 14px;
--r-md: 20px;
--r-lg: 28px;
--r-xl: 36px;
--r-2xl: 48px;
--r-full: 999px;
/* ── Sombras: siempre con color, nunca gris puro ──────────────────────── */
--sombra-sm: 0 2px 8px rgba(20, 18, 28, .05), 0 1px 2px rgba(20, 18, 28, .05);
--sombra: 0 12px 32px -12px rgba(20, 18, 28, .14), 0 2px 8px rgba(20, 18, 28, .07);
--sombra-lg: 0 40px 80px -32px rgba(20, 18, 28, .3), 0 12px 28px -12px rgba(20, 18, 28, .12);
--sombra-noche: 0 40px 90px -30px rgba(0, 0, 0, .7);
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
--medida: 1200px;
--curva: cubic-bezier(.22, .8, .28, 1);
--resorte: cubic-bezier(.34, 1.4, .5, 1);
}
* { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 110px;
}
body {
margin: 0;
/* El papel no es blanco puro: lleva un lavado de marca fijo, muy tenue, para
que la página tenga aire y profundidad sin distraer al leer. Va en el
fondo del body, así que las secciones de noche —que traen el suyo— lo
tapan enteras. */
background: var(--noche);
color: var(--noche-txt);
font-family: var(--texto);
font-size: clamp(16px, .4vw + 15px, 17.5px);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
font-feature-settings: "cv11", "ss01";
/* Sin rebote: con overscroll, abajo del pie asomaba una banda del color del
papel —el pie es de noche— y parecía una sección vacía. */
overscroll-behavior-y: none;
}
/* El lavado de marca de la noche. Era `background-attachment: fixed` del body y
eso obliga al navegador a repintar el degradé entero en cada scroll: se
trababa justo en el pase de color, que es donde más pixeles cambian. Acá es
una capa fija propia —se compone aparte y no repinta— abajo de todo el
contenido; la isla de luz (.dia) trae su fondo y la tapa entera. */
body::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(70vw 52vw at 8% -6%, rgba(184, 243, 46, .09), transparent 62%),
radial-gradient(62vw 46vw at 100% 14%, rgba(34, 184, 230, .15), transparent 62%),
radial-gradient(58vw 44vw at 50% 52%, rgba(0, 192, 139, .06), transparent 64%),
radial-gradient(66vw 50vw at 4% 88%, rgba(255, 176, 32, .07), transparent 62%);
}
/* ── Un texto para cada ancho ──────────────────────────────────────────────
Algunas frases se leen bien en escritorio y son un párrafo en mano. Donde
pasa, el HTML trae las dos y acá se muestra una. No es contenido escondido:
dicen lo mismo, una más corta. */
.solo-mano { display: none; }
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 600;
letter-spacing: -.01em; /* la serif ya viene angosta: apretarla la ensucia */
line-height: 1.08;
text-wrap: balance;
margin: 0;
}
p { margin: 0; text-wrap: pretty; }
i { font-style: normal; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--lima-tenue); color: var(--lima-txt); }
:focus-visible {
outline: 2px solid var(--lima);
outline-offset: 3px;
border-radius: var(--r-xs);
}
/* Sobre la isla de luz la lima plena no se ve: va el paso que sí es texto. */
.dia :focus-visible, .pantalla :focus-visible { outline-color: var(--lima-txt); }
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--tinta); color: var(--hueso);
padding: var(--s3) var(--s5); border-radius: var(--r-full);
text-decoration: none; font-weight: 600;
}
.skip:focus { left: var(--s4); top: var(--s4); }
.medida {
width: 100%; max-width: var(--medida);
margin-inline: auto;
padding-inline: var(--s5);
}
/* ── Tipos de texto reutilizables ───────────────────────────────────────── */
.chip {
display: inline-flex; align-items: center; gap: var(--s2);
padding: 7px 16px 7px 12px;
border-radius: var(--r-full);
background: rgba(255, 255, 255, .06);
border: 1px solid var(--noche-borde);
box-shadow: none;
backdrop-filter: blur(8px);
font-size: .82rem; font-weight: 600;
letter-spacing: -.01em; color: var(--noche-txt);
}
.chip-punto {
width: 8px; height: 8px; border-radius: var(--r-full);
background: var(--mint); flex: none;
box-shadow: 0 0 0 4px rgba(46, 230, 168, .18);
}
/* Sobre papel el mismo chip, con la piel de día. */
.dia .chip, .pantalla .chip {
background: var(--nube);
border-color: var(--borde);
color: var(--tinta-2);
box-shadow: var(--sombra-sm);
backdrop-filter: none;
}
.dia .chip-punto, .pantalla .chip-punto { box-shadow: 0 0 0 4px var(--mint-tenue); }
.rotulo {
font-size: .78rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--lima-luz);
}
.dia .rotulo { color: var(--lima-txt); }
.titulo { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.display { font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 500; letter-spacing: -.015em; }
.entrada { font-size: clamp(1.05rem, 1.2vw, 1.2rem); color: var(--noche-2do); max-width: 62ch; }
.dia .entrada { color: var(--tinta-2); }
/* ═══════════ Botones ═══════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
min-height: 48px; padding: 0 24px;
border: 1px solid transparent; border-radius: var(--r-full);
font-family: var(--texto); font-size: .95rem; font-weight: 600;
letter-spacing: -.01em; text-decoration: none; cursor: pointer;
transition: transform .3s var(--resorte), box-shadow .3s var(--curva),
background-color .2s var(--curva), color .2s var(--curva);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primario {
background: var(--lima); color: var(--noche);
box-shadow: 0 10px 24px -10px rgba(184, 243, 46, .55);
}
.btn-primario:hover { background: var(--lima-2); box-shadow: 0 16px 34px -12px rgba(184, 243, 46, .55); }
/* Sólo sobre papel: de noche el que va es .btn-noche. */
.btn-fantasma { background: transparent; color: var(--tinta); border-color: var(--borde); }
.btn-fantasma:hover { background: var(--nube); border-color: var(--lima-fuerte); box-shadow: var(--sombra); }
.btn-noche { background: transparent; color: var(--noche-txt); border-color: var(--noche-borde); }
.btn-noche:hover { background: rgba(255, 255, 255, .07); border-color: var(--lima-luz); }
.btn-grande { min-height: 56px; padding: 0 30px; font-size: 1.02rem; }
/* ═══════════ Cinta de navegación (flota, no se apoya) ═══════════ */
.cinta {
position: fixed; inset: 14px 0 auto; z-index: 60;
display: flex; justify-content: center;
padding-inline: var(--s4);
pointer-events: none;
}
/* La cinta es una pastilla de vidrio desde el arranque: se despega del papel
con un velo con tinte de marca, el desenfoque de atrás y un filo de luz
arriba. Al scrollear no cambia de piel, sólo se angosta y se apoya más. */
.cinta-caja {
pointer-events: auto;
width: 100%; max-width: var(--medida);
display: flex; align-items: center; gap: var(--s5);
padding: 9px 9px 9px 22px;
border-radius: var(--r-full);
background:
linear-gradient(rgba(241, 247, 250, .07), rgba(241, 247, 250, .02)),
rgba(18, 63, 82, .8);
border: 1px solid var(--noche-borde);
box-shadow: var(--sombra), inset 0 1px 0 rgba(241, 247, 250, .1);
backdrop-filter: blur(20px) saturate(1.9);
-webkit-backdrop-filter: blur(20px) saturate(1.9);
transition: box-shadow .4s var(--curva), background-color .4s var(--curva),
border-color .4s var(--curva), max-width .5s var(--curva);
}
.cinta-pegada .cinta-caja {
max-width: 940px;
background:
linear-gradient(rgba(241, 247, 250, .07), rgba(241, 247, 250, .02)),
rgba(18, 63, 82, .92);
box-shadow: var(--sombra-noche), inset 0 1px 0 rgba(241, 247, 250, .1);
}
/* Sobre la isla de luz el mismo vidrio, al revés: velo claro y el filo de luz
marcado. El script saca la clase `cinta-noche` cuando la cinta deja de
pisar una sección oscura; sin JS la cinta se queda de noche, que es lo que
corresponde en casi toda la página. */
.cinta:not(.cinta-noche) .cinta-caja {
background:
linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .34)),
linear-gradient(135deg, rgba(243, 247, 232, .92), rgba(231, 239, 212, .78));
border-color: rgba(255, 255, 255, .75);
box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.cinta:not(.cinta-noche).cinta-pegada .cinta-caja {
box-shadow: var(--sombra-lg), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* El logotipo entra como máscara y no como : la máscara mira sólo el canal
alfa, así que la tinta la sigue poniendo `color` y un mismo archivo sirve para
las dos que necesita la página. El `url()` se resuelve contra esta hoja, no
contra el HTML, así que la misma regla vale para el blog, que cuelga un nivel
más abajo.
El punto suelto que había al lado de la palabra se fue: el logotipo trae el
suyo sobre la i y dos puntos se pisan. */
.marca {
display: block; height: 22px; aspect-ratio: 2.375;
background: currentColor;
-webkit-mask: url(marca/tiko-logotipo.svg) no-repeat center / contain;
mask: url(marca/tiko-logotipo.svg) no-repeat center / contain;
color: var(--lima); text-decoration: none;
transition: color .3s var(--curva), opacity .3s var(--curva);
}
.marca:hover { opacity: .82; }
/* La cinta se aclara sólo sobre la isla de luz, y ahí la lima plena no se lee
—1,3:1 sobre papel—: el logotipo pasa a tinta, no a un paso más oscuro. */
.cinta:not(.cinta-noche) .marca { color: var(--tinta); }
/* Los enlaces arrancan pegados a la marca, desde la izquierda; el CTA es lo
único que se va al otro extremo. */
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; margin-left: var(--s5); }
.nav-ln {
padding: 9px 15px; border-radius: var(--r-full);
font-size: .92rem; font-weight: 500; color: var(--noche-2do);
text-decoration: none; white-space: nowrap;
transition: color .2s var(--curva), background-color .2s var(--curva);
}
.nav-ln:hover, .nav-ln.activo { color: var(--noche-txt); background: rgba(255, 255, 255, .09); }
.cinta:not(.cinta-noche) .nav-ln { color: var(--tinta-2); }
.cinta:not(.cinta-noche) .nav-ln:hover, .cinta:not(.cinta-noche) .nav-ln.activo {
color: var(--tinta); background: var(--niebla);
}
.nav-sep { width: 1px; height: 22px; background: var(--noche-borde); margin-inline: var(--s2); margin-left: auto; }
.cinta:not(.cinta-noche) .nav-sep { background: var(--borde); }
.nav-btn { min-height: 42px; padding: 0 20px; font-size: .92rem; }
.nav-toggle {
/* En columna: en fila los trazos salían uno al lado del otro y el botón no
se leía como un menú. Era el motivo de que se viera raro. */
display: none; flex-direction: column; align-items: center; justify-content: center;
width: 44px; height: 44px; margin-left: auto;
border: 1px solid var(--noche-borde); border-radius: var(--r-full);
background: rgba(255, 255, 255, .08); cursor: pointer;
}
.nav-toggle span {
display: block; width: 17px; height: 2px; border-radius: 2px;
background: var(--noche-txt);
transition: transform .35s var(--curva), opacity .2s var(--curva);
}
/* Tres trazos, no dos: con dos el botón no se leía como un menú y la X salía
torcida. El del medio se apaga y los de afuera se cruzan sobre el centro. */
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle span:nth-child(2) { width: 13px; margin-left: -4px; }
.cinta:not(.cinta-noche) .nav-toggle { background: var(--nube); border-color: var(--borde); }
.cinta:not(.cinta-noche) .nav-toggle span { background: var(--tinta); }
.nav-abierto .nav-toggle { background: var(--lima); border-color: var(--lima-fuerte); }
.nav-abierto .nav-toggle span { background: var(--tinta); }
.nav-abierto .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-abierto .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-abierto .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* El velo: con el menú abierto la página de atrás se apaga, y tocarlo cierra.
Sin JS no se abre nunca, así que nunca se muestra. */
.nav-velo {
position: fixed; inset: 0; z-index: 58;
background: rgba(20, 18, 28, .42);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0; visibility: hidden;
transition: opacity .3s var(--curva), visibility .3s;
}
.nav-abierto .nav-velo { opacity: 1; visibility: visible; }
html:not(.js) .nav-velo { display: none; }
@media (min-width: 901px) { .nav-velo { display: none; } }
@media (max-width: 900px) {
.nav-toggle { display: flex; }
/* El panel baja de la cinta y ocupa el ancho útil: una tarjeta sola, con los
ítems bien altos para el dedo y el CTA cerrando abajo. */
.nav-links {
position: fixed; inset: 78px 12px auto; z-index: 59;
flex-direction: column; align-items: stretch; gap: 0;
padding: var(--s2); border-radius: var(--r-lg);
background: var(--nube); border: 1px solid var(--borde);
box-shadow: var(--sombra-lg);
opacity: 0; visibility: hidden;
transform: translateY(-10px) scale(.98);
transform-origin: top center;
transition: opacity .3s var(--curva), transform .35s var(--resorte), visibility .3s;
}
.nav-links { flex: none; margin-left: 0; }
.nav-abierto .nav-links { opacity: 1; visibility: visible; transform: none; }
/* Cada ítem es una fila de 52px con su flecha al final; el separador es un
filo entre filas, no un margen. */
.nav-ln {
position: relative;
display: flex; align-items: center;
min-height: 52px; padding: 0 var(--s4);
border-radius: var(--r-md); font-size: 1.02rem; font-weight: 600;
color: var(--tinta);
}
/* La flecha es un trazo, no una superficie: sin radio, si no el codo se
redondea y sale un paréntesis. */
.nav-ln::after {
content: ""; margin-left: auto;
width: 8px; height: 8px;
border-top: 2px solid var(--tinta-3); border-right: 2px solid var(--tinta-3);
transform: rotate(45deg);
transition: transform .25s var(--curva), border-color .25s var(--curva);
}
/* El filo entre ítems va dibujado adentro y con aire a los costados: como
sombra seguía el radio del ítem y dibujaba un arco. */
.nav-ln + .nav-ln::before {
content: ""; position: absolute; left: var(--s4); right: var(--s4); top: 0;
height: 1px; background: var(--borde);
}
.nav-ln:hover, .nav-ln.activo { background: var(--niebla); }
.nav-ln:hover::after, .nav-ln.activo::after { border-color: var(--lima-fuerte); transform: translateX(3px) rotate(45deg); }
/* La cinta cambia de piel, pero el panel sigue siendo una tarjeta de papel
en los dos estados: los links no se aclaran con ella. */
.cinta .nav-ln, .cinta:not(.cinta-noche) .nav-ln { color: var(--tinta); }
.cinta .nav-ln:hover, .cinta .nav-ln.activo,
.cinta:not(.cinta-noche) .nav-ln:hover, .cinta:not(.cinta-noche) .nav-ln.activo {
color: var(--tinta); background: var(--niebla);
}
.nav-sep, .cinta:not(.cinta-noche) .nav-sep { width: auto; height: 1px; margin: var(--s2) var(--s3); background: var(--borde); }
.nav-btn { margin: var(--s1) var(--s1) var(--s1); min-height: 52px; font-size: 1rem; }
/* Con el menú abierto la página de atrás no se mueve. */
body.nav-abierto { overflow: hidden; }
html:not(.js) .nav-links { position: static; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .nav-ln::after { display: none; }
}
/* ═══════════ Fondo: auroras de marca, muy tenues ═══════════ */
.aurora {
position: absolute; inset: 0; overflow: hidden;
pointer-events: none; z-index: 0;
}
.aurora span {
position: absolute; display: block;
border-radius: var(--r-full);
filter: blur(70px); opacity: .5;
}
.aurora-1 { width: 46vw; height: 46vw; left: -14vw; top: -12vw; background: rgba(184, 243, 46, .22); }
.aurora-2 { width: 38vw; height: 38vw; right: -10vw; top: 8vw; background: rgba(34, 184, 230, .20); opacity: .45; }
.aurora-3 { width: 30vw; height: 30vw; left: 32vw; bottom: -14vw; background: rgba(0, 192, 139, .16); opacity: .38; }
/* ═══════════ 1 · Hero: la vitrina ═══════════
Una lámina de vidrio apoyada sobre el papel: bordes redondeados, la luz de
marca adentro, un filo claro arriba y sombra abajo. Ocupa la primera
pantalla entera y se va con el scroll —el script sólo le baja la opacidad,
así que sin JS queda puesta y no se pierde nada. */
.hero {
position: relative;
padding: 8px 8px var(--s8);
--hero-alto-cinta: clamp(104px, 13vh, 168px);
}
.vitrina {
position: relative; overflow: hidden;
border-radius: var(--r-2xl);
padding: var(--hero-alto-cinta) 0 var(--s7);
background:
linear-gradient(160deg, rgba(241, 247, 250, .07), rgba(241, 247, 250, .01) 46%, rgba(241, 247, 250, .05)),
linear-gradient(135deg, var(--noche-2), var(--noche-3) 58%, var(--noche-2));
border: 1px solid var(--noche-borde);
box-shadow: var(--sombra-noche), inset 0 1px 0 rgba(241, 247, 250, .12);
opacity: var(--vitrina-op, 1);
transform: scale(var(--vitrina-esc, 1));
transform-origin: top center;
will-change: opacity, transform;
}
/* El filo espejado: una luz que cruza el vidrio de punta a punta. */
.vitrina::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(104deg, transparent 34%, rgba(241, 247, 250, .12) 47%, transparent 60%);
mix-blend-mode: screen;
}
/* La primera pantalla cierra sin scroll: el bloque de texto ocupa el alto de
la ventana menos la cinta y menos el aire de abajo del vidrio. */
.hero-caja {
position: relative; z-index: 1; text-align: center;
min-height: calc(100svh - var(--hero-alto-cinta) - 132px);
display: flex; flex-direction: column; justify-content: center;
}
/* Dos renglones y no tres: la promesa se lee de un saque. El ancho manda —a
30ch la frase parte sola en «…y cobrá tus / eventos desde…»— y el cuerpo
baja lo justo para que esos 30ch entren en la medida sin desbordar. */
.hero h1 {
margin: var(--s5) auto;
max-width: 30ch;
font-size: clamp(2.2rem, min(4.9vw, 7.4vh), 4.1rem);
text-wrap: balance;
}
/* El énfasis lo hacen la itálica y la lima, sin trazo abajo: el subrayado
sumaba una segunda marca a lo que ya decían la letra y el color. Acá
estamos de noche, y sobre noche la lima plena sí es texto (8,6:1). */
.hero h1 em {
font-style: italic; color: var(--lima);
}
.hero-baja { margin-inline: auto; font-size: clamp(1.08rem, 1.3vw, 1.28rem); color: var(--noche-2do); max-width: 60ch; }
.hero-acciones {
display: flex; flex-wrap: wrap; gap: var(--s3);
justify-content: center; margin-top: var(--s6);
}
.hero-baja b { color: var(--noche-txt); font-weight: 600; }
.hero-nota { margin-top: var(--s4); font-size: .9rem; color: var(--noche-2do); }
.hero-nota b { color: var(--noche-txt); font-weight: 600; }
/* ═══════════ La consola: el centro de mando ═══════════ */
.consola {
position: relative; z-index: 1;
margin-top: var(--s7);
display: grid; grid-template-columns: 248px minmax(0, 1fr);
gap: var(--s6); align-items: center;
}
/* ── El anillo: el menú que vuela en círculo ── */
.orbita {
position: relative;
width: 248px; height: 286px;
margin-inline: auto;
}
.orbita-aro {
position: absolute; left: 24px; right: 24px; top: 16px; height: 200px;
border-radius: var(--r-full);
border: 1px dashed var(--niebla-2);
}
.orbita-giro {
position: absolute; left: 0; right: 0; top: 0; height: 232px;
transition: transform .8s var(--resorte);
transform: rotate(var(--giro, 0deg));
}
.orbita-item {
position: absolute; left: 50%; top: 50%;
width: 48px; height: 48px; margin: -24px 0 0 -24px;
display: grid; place-items: center;
border: 1px solid var(--borde); border-radius: var(--r-full);
background: var(--nube); color: var(--tinta-3);
box-shadow: var(--sombra-sm); cursor: pointer;
transform: rotate(var(--a)) translateY(-100px) rotate(calc(-1 * var(--a) - var(--giro, 0deg)));
transition: transform .8s var(--resorte), color .3s var(--curva),
border-color .3s var(--curva), box-shadow .3s var(--curva),
background-color .3s var(--curva);
}
.orbita-item svg { width: 21px; height: 21px; }
.orbita-txt { display: none; }
/* El pie del hero es una pieza de mano: en escritorio la vitrina ya se corta
a la vista y no hace falta decir que abajo sigue. */
.hero-baja-mas { display: none; }
.orbita-item:hover { color: var(--lima-txt); border-color: var(--lima-fuerte); }
.orbita-item[aria-selected="true"] {
background: var(--lima); color: var(--noche); border-color: var(--lima-fuerte);
box-shadow: 0 12px 26px -10px rgba(184, 243, 46, .6);
transform: rotate(var(--a)) translateY(-100px) rotate(calc(-1 * var(--a) - var(--giro, 0deg))) scale(1.12);
}
/* ── El dial ─────────────────────────────────────────────────────────────
Un instrumento, no un adorno: un disco de vidrio sobre el papel, con la
pista del aro y el avance de lima que se llena mientras corre el módulo
puesto. La marca de arriba apunta al módulo activo del anillo. Cuando la
rotación se frena —mouse encima, botón, o fuera de pantalla— el aro se
frena con ella. */
.dial {
position: absolute; left: 50%; top: 116px;
width: 126px; height: 126px; margin: -63px 0 0 -63px;
display: grid; place-items: center;
border-radius: var(--r-full);
background:
radial-gradient(circle at 50% 8%, var(--nube), var(--hueso) 62%),
var(--nube);
box-shadow:
0 18px 38px -16px rgba(20, 18, 28, .22),
0 2px 6px rgba(20, 18, 28, .05),
inset 0 0 0 1px rgba(255, 255, 255, .9);
}
/* El anillo fino de adentro: le da el filo de instrumento. */
.dial::after {
content: ""; position: absolute; inset: 13px;
border-radius: var(--r-full);
border: 1px solid var(--borde);
}
.dial-aro { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-pista, .dial-avance {
fill: none; stroke-width: 3; stroke-linecap: round;
}
.dial-pista { stroke: var(--niebla-2); }
.dial-avance {
stroke: var(--lima-fuerte);
stroke-dasharray: 371; /* 2πr con r = 59 */
stroke-dashoffset: 371;
}
/* Sólo corre cuando la rotación corre: el script pone y saca la clase. */
.dial.dial-corre .dial-avance {
animation: dial-avanza var(--dial-tiempo, 3.6s) linear forwards;
}
@keyframes dial-avanza { to { stroke-dashoffset: 0; } }
.dial-centro { display: grid; gap: 3px; text-align: center; }
.orbita-n {
font-family: var(--display); font-size: 2rem; font-weight: 500;
line-height: 1; color: var(--tinta); font-variant-numeric: lining-nums;
}
.orbita-lbl {
font-size: .66rem; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--lima-txt);
}
.orbita-pausa {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
min-height: 32px; padding: 0 14px; font-size: .74rem;
background: var(--nube); color: var(--tinta-3);
border: 1px solid var(--borde); border-radius: var(--r-full);
cursor: pointer; font-family: var(--texto); font-weight: 600;
}
.orbita-pausa:hover { color: var(--lima-txt); border-color: var(--lima-fuerte); }
/* Sin JS no hay bola que girar: las seis tarjetas se leen una abajo de la
otra y la consola pasa a una sola columna (si no, la tarjeta se metía en la
columna angosta de la bola). */
html:not(.js) .orbita, html:not(.js) .orbita-pausa { display: none; }
html:not(.js) .consola { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .vista + .vista { border-top: 1px solid var(--borde); margin-top: var(--s5); padding-top: var(--s5); }
/* ── La pantalla ── */
/* La pantalla es una captura del producto, y el producto es de papel: adentro
de esta caja vuelve a mandar la tinta, aunque la página esté de noche. */
.pantalla {
position: relative; color: var(--tinta);
border-radius: var(--r-2xl);
background: var(--nube);
border: 1px solid var(--borde);
box-shadow: var(--sombra-lg);
overflow: hidden;
}
.pantalla-cromo {
display: flex; align-items: center; gap: var(--s3);
padding: 10px var(--s5);
border-bottom: 1px solid var(--borde);
background: linear-gradient(var(--nube), var(--hueso));
}
.cromo-puntos { display: flex; gap: 6px; }
.cromo-puntos i { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--niebla-2); }
.cromo-ruta {
font-size: .78rem; font-weight: 600; color: var(--tinta-3);
padding: 5px 12px; border-radius: var(--r-full); background: var(--niebla);
}
.cromo-ruta b { color: var(--lima-txt); font-weight: 700; }
.cromo-vivo {
margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
font-size: .74rem; font-weight: 600; color: var(--mint-txt);
}
.cromo-vivo i {
width: 7px; height: 7px; border-radius: var(--r-full); background: var(--mint);
animation: latido 2.4s var(--curva) infinite;
}
@keyframes latido {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 192, 139, .5); }
50% { box-shadow: 0 0 0 7px rgba(0, 192, 139, 0); }
}
/* La consola está centrada verticalmente, así que si cada vista midiera lo que
ocupa su contenido el anillo saltaría de lugar al cambiar de módulo. Las seis
comparten alto: la pantalla no cambia de tamaño y el círculo queda fijo. */
.vistas { position: relative; min-height: var(--alto-vista, auto); }
.vista { padding: var(--s5); }
.js .vista.activa { min-height: var(--alto-vista, auto); }
.js .vista { display: none; }
.js .vista.activa { display: flex; flex-direction: column; animation: entra-vista .55s var(--curva) both; }
@keyframes entra-vista {
from { opacity: 0; transform: translateY(10px) scale(.995); }
to { opacity: 1; transform: none; }
}
/* La tarjeta dice el módulo entero: rótulo, qué hace y cómo se ve. Antes esto
estaba partido —el texto afuera y el mockup adentro de otra tarjeta— y la
página repetía dos veces lo mismo. */
.vista-rot {
display: inline-flex; align-items: center; gap: var(--s2);
font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--lima-txt); margin-bottom: var(--s3);
}
.vista-rot i {
width: 24px; height: 24px; border-radius: var(--r-full);
background: var(--lima-tenue); color: var(--lima-txt);
display: grid; place-items: center; font-size: .72rem;
}
.vista h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
.vista-txt { margin-top: var(--s2); color: var(--tinta-2); font-size: .95rem; max-width: 62ch; }
.vista-fig { margin-top: var(--s4); }
.vista-pie { margin-top: var(--s4); font-size: .76rem; color: var(--tinta-3); }
.js .vista.activa > .vista-pie { margin-top: auto; padding-top: var(--s4); }
/* Las vistas cortas estiran su mockup en vez de dejar un hueco. */
.js .vista.activa > .vista-fig { flex: 1 1 auto; display: flex; flex-direction: column; }
/* El contrato es el mockup más corto de los seis: estira la hoja en vez de
dejar el hueco abajo. */
.js .vista.activa > .vista-fig > .contrato { flex: 1 1 auto; }
/* Adentro de la consola las piezas van más apretadas que en "El sistema": la
pantalla tiene que entrar en la primera pantalla sin comerse el hero. El
contenido es el mismo, cambia el aire. */
.vista { padding: var(--s4) var(--s5); }
.vista .vista-cabeza { margin-bottom: var(--s3); }
.vista .fila { padding: 10px var(--s4); }
.vista .chat { gap: 8px; max-width: 760px; } /* la tarjeta es ancha: el chat estirado no parece un chat */
.vista .burbuja { padding: 9px var(--s4); }
.vista .resumen { margin-top: var(--s3); padding: var(--s3) var(--s4); }
.vista .cotiz > div { padding: 9px var(--s4); }
.vista .mini-kpi { padding: 10px var(--s3); }
.vista .mini-kpis, .vista .etapas { margin-bottom: var(--s3); }
.vista .etapa { padding: 8px 12px; }
.vista .fila + .fila { margin-top: 6px; }
.vista .crono li { padding: 9px var(--s4); }
.js .vista.activa > .vista-pie { padding-top: var(--s3); }
/* Los valores salen de medir las seis vistas: el alto fijo es el de la más
alta (la de IA) más un dedo de aire. Si agregás o cambiás una vista, medí de
nuevo — si una se pasa, el anillo vuelve a saltar. */
@media (min-width: 961px) { .vistas { --alto-vista: 520px; } }
@media (max-width: 960px) {
.consola { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
/* Apilado el anillo va arriba de la pantalla y no se mueve con el contenido:
acá el alto fijo solo agregaría aire muerto. */
.vistas { --alto-vista: auto; }
}
/* ── Piezas compartidas de los mockups ── */
.fila {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3);
padding: 13px var(--s4);
border-radius: var(--r-md);
background: var(--hueso);
border: 1px solid transparent;
transition: transform .4s var(--curva), border-color .3s var(--curva), background-color .3s var(--curva);
}
.fila + .fila { margin-top: 7px; }
.fila:hover { transform: translateX(4px); border-color: var(--borde); background: var(--nube); }
.fila-quien { font-weight: 600; font-size: .95rem; }
.fila-dato { font-size: .85rem; color: var(--tinta-3); }
.fila-fin { margin-left: auto; text-align: right; }
.punto { width: 9px; height: 9px; border-radius: var(--r-full); flex: none; }
.p-libre { background: var(--aqua); box-shadow: 0 0 0 4px var(--aqua-tenue); }
.p-vence { background: var(--coral); box-shadow: 0 0 0 4px var(--coral-tenue); }
.p-cerrado{ background: var(--mint); box-shadow: 0 0 0 4px var(--mint-tenue); }
.p-evento { background: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-tenue); }
.tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 11px; border-radius: var(--r-full);
font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.tag-libre { background: var(--aqua-tenue); color: var(--aqua-txt); }
.tag-vence { background: var(--coral-tenue); color: var(--coral-txt); }
.tag-cerrado{ background: var(--mint-tenue); color: var(--mint-txt); }
.tag-evento { background: var(--ambar-tenue); color: var(--ambar-txt); }
.tag-ia { background: var(--lima-tenue); color: var(--lima-txt); }
/* ── Vista: conversaciones con IA ── */
.chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.burbuja {
max-width: 78%; padding: 11px var(--s4);
border-radius: var(--r-md); font-size: .92rem; line-height: 1.5;
}
.burbuja-ellos {
background: var(--hueso); border: 1px solid var(--borde);
border-bottom-left-radius: var(--r-xs); justify-self: start;
}
.burbuja-tiko {
background: var(--lima); color: var(--noche);
border-bottom-right-radius: var(--r-xs); justify-self: end;
box-shadow: 0 10px 22px -12px rgba(184, 243, 46, .6);
}
.burbuja-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
font-size: .74rem; color: var(--tinta-3);
}
.escribiendo { display: inline-flex; gap: 4px; align-items: center; }
.escribiendo i {
width: 5px; height: 5px; border-radius: var(--r-full); background: var(--lima-fuerte);
animation: pulso-punto 1.2s var(--curva) infinite;
}
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes pulso-punto { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.resumen {
margin-top: var(--s4); padding: var(--s4);
border-radius: var(--r-md);
background: linear-gradient(135deg, var(--lima-tenue), var(--aqua-tenue));
border: 1px solid var(--niebla-2);
}
.resumen-tit {
display: flex; align-items: center; gap: var(--s2);
font-size: .8rem; font-weight: 700; color: var(--lima-txt);
letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px;
}
.resumen ol { display: grid; gap: 7px; }
.resumen li {
position: relative; padding-left: 30px;
font-size: .9rem; color: var(--tinta-2); counter-increment: rsm;
}
.resumen li::before {
content: counter(rsm); position: absolute; left: 0; top: .1em;
width: 20px; height: 20px; border-radius: var(--r-full);
background: var(--nube); color: var(--lima-txt);
font-size: .72rem; font-weight: 700;
display: grid; place-items: center;
}
.resumen ol { counter-reset: rsm; }
/* ── Vista: CRM y métricas ── */
.mini-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--s4); }
.mini-kpi { padding: 12px var(--s3); border-radius: var(--r-md); background: var(--hueso); }
.mini-kpi b { display: block; font-family: var(--texto); font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mini-kpi span { font-size: .74rem; color: var(--tinta-3); }
.mini-kpi-mint b { color: var(--mint-txt); }
.mini-kpi-marca b { color: var(--lima-txt); }
@media (max-width: 620px) { .mini-kpis { grid-template-columns: repeat(2, 1fr); } }
.etapas { display: flex; gap: 6px; margin-bottom: var(--s4); flex-wrap: wrap; }
.etapa {
flex: 1 1 0; min-width: 86px; padding: 9px 12px;
border-radius: var(--r-sm); background: var(--hueso);
font-size: .78rem; font-weight: 600; color: var(--tinta-3);
border-bottom: 3px solid var(--niebla-2);
transition: color .4s var(--curva), border-color .4s var(--curva), background-color .4s var(--curva);
}
.etapa b { display: block; font-family: var(--texto); font-weight: 700; font-size: 1.05rem; color: var(--tinta); }
.etapa.viva { color: var(--lima-txt); background: var(--lima-tenue); border-bottom-color: var(--lima-fuerte); }
/* ── Vista: cotizador ── */
.cotiz { display: grid; gap: 2px; }
.cotiz > div {
display: flex; justify-content: space-between; gap: var(--s4);
padding: 11px var(--s4); border-radius: var(--r-sm);
font-size: .92rem;
}
.cotiz > div:nth-child(odd) { background: var(--hueso); }
.cotiz dt { color: var(--tinta-2); }
.cotiz dd { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cotiz-incl dd { color: var(--mint-txt); font-weight: 600; }
.cotiz-total { margin-top: 6px; background: var(--tinta) !important; border-radius: var(--r-md) !important; color: var(--hueso); }
.cotiz-total dt { color: var(--hueso); font-weight: 600; }
.cotiz-total dd { font-family: var(--texto); font-weight: 700; font-size: 1.15rem; }
.cotiz-sena { background: var(--mint-tenue) !important; border-radius: var(--r-md) !important; }
.cotiz-sena dt, .cotiz-sena dd { color: var(--mint-txt); font-weight: 700; }
/* ── Vista: calendario ── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
/* Los días son cuadrados, así que el calendario crece con el ancho y en la
consola —que es ancha— se comía la pantalla entera. Adentro de la consola las
celdas son rectangulares, como en un calendario de verdad: ocupa todo el
ancho y mide parecido a las otras cinco vistas. */
.vista .cal-dia { aspect-ratio: auto; min-height: 42px; padding: 5px 0; }
.cal-dia {
aspect-ratio: 1; border-radius: var(--r-sm);
background: var(--hueso); display: grid; place-content: center; gap: 3px;
font-size: .78rem; color: var(--tinta-3); position: relative;
transition: transform .35s var(--resorte), background-color .3s var(--curva);
}
.cal-dia:hover { transform: scale(1.08); }
.cal-tira { display: flex; gap: 2px; justify-content: center; }
.cal-tira i { width: 12px; height: 3px; border-radius: 2px; display: block; }
.t-libre { background: var(--aqua); }
.t-visita { background: var(--ambar); }
.t-tomado { background: var(--mint); }
.cal-dia-hoy { background: var(--lima-tenue); color: var(--lima-txt); font-weight: 700; }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); font-size: .78rem; color: var(--tinta-3); }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leyenda i { width: 14px; height: 4px; border-radius: 2px; }
/* ── Vista: contrato y seña ── */
.contrato { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s4); align-items: stretch; }
@media (max-width: 620px) { .contrato { grid-template-columns: minmax(0, 1fr); } }
.contrato-hoja {
padding: var(--s4); border-radius: var(--r-md);
background: var(--hueso); border: 1px solid var(--borde);
}
.contrato-lineas { display: grid; gap: 7px; margin-bottom: var(--s4); }
.contrato-lineas i { display: block; height: 7px; border-radius: var(--r-full); background: var(--niebla-2); }
.contrato-lineas i:nth-child(2) { width: 88%; }
.contrato-lineas i:nth-child(3) { width: 64%; }
.firma { width: 100%; height: auto; }
.firma-trazo { stroke: var(--lima-fuerte); stroke-dasharray: 620; stroke-dashoffset: 620; }
.activa .firma-trazo { animation: firmar 2.2s var(--curva) .35s forwards; }
@keyframes firmar { to { stroke-dashoffset: 0; } }
.contrato-pie { font-size: .76rem; color: var(--tinta-3); margin-top: 6px; }
.cobro {
display: grid; align-content: center; gap: 6px; text-align: center;
padding: var(--s5); border-radius: var(--r-lg);
background: linear-gradient(150deg, var(--mint-tenue), var(--nube));
border: 1px solid var(--mint-tenue);
}
.cobro-n { font-family: var(--texto); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--mint-txt); font-variant-numeric: tabular-nums; }
.cobro-txt { font-size: .85rem; color: var(--tinta-2); }
/* ── Vista: panel del evento ── */
.crono { display: grid; gap: 4px; }
.crono li {
display: flex; align-items: center; gap: var(--s4);
padding: 10px var(--s4); border-radius: var(--r-sm);
font-size: .9rem; position: relative;
}
.crono li:nth-child(odd) { background: var(--hueso); }
.crono-h { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lima-txt); min-width: 52px; }
.crono-hito { background: var(--ambar-tenue) !important; }
.crono-hito .crono-h { color: var(--ambar-txt); }
.invitados {
display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4);
padding: var(--s4); border-radius: var(--r-md); background: var(--hueso);
}
.inv-n { font-family: var(--texto); font-weight: 700; font-size: 1.25rem; }
.inv-n span { font-size: .8rem; font-family: var(--texto); color: var(--tinta-3); font-weight: 500; }
/* ═══════════ 2 · El riel del flujo ═══════════
La espina del concepto: una consulta entra por la izquierda y sale evento
por la derecha. Cada parada es un módulo, y la línea se dibuja al entrar. */
.flujo { padding: var(--s9) 0 var(--s8); }
.flujo-cabeza { text-align: center; margin-bottom: var(--s7); }
.flujo-cabeza .titulo { margin: var(--s3) 0 var(--s4); }
.flujo-cabeza .entrada { margin-inline: auto; }
.riel { position: relative; }
.riel-linea {
position: absolute; left: 0; right: 0; top: 27px; height: 2px;
border-radius: var(--r-full);
background: var(--noche-borde);
overflow: hidden;
}
.riel-linea::after {
content: ""; position: absolute; inset: 0;
transform-origin: left;
transform: scaleX(var(--avance, 0));
background: linear-gradient(90deg, var(--aqua), var(--lima) 45%, var(--mint) 78%, var(--ambar));
transition: transform 1.6s var(--curva);
}
.paradas {
position: relative;
display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s3);
}
.parada { text-align: center; }
.parada-bola {
width: 56px; height: 56px; margin: 0 auto var(--s3);
display: grid; place-items: center;
border-radius: var(--r-full);
background: var(--nube); border: 1px solid var(--borde);
box-shadow: var(--sombra-sm); color: var(--tinta-3);
transition: transform .5s var(--resorte), color .4s var(--curva),
border-color .4s var(--curva), box-shadow .4s var(--curva);
}
.parada-bola svg { width: 22px; height: 22px; }
.parada.viva .parada-bola {
color: var(--lima-txt); border-color: var(--lima-fuerte);
transform: scale(1.1); box-shadow: 0 14px 30px -12px rgba(184, 243, 46, .45);
}
.parada b { display: block; font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
/* Ojo: la bola también es un . La bajada se selecciona por su lugar
(va después del ) para no pisarle el centrado del ícono. */
.parada b + span { display: block; font-size: .8rem; color: var(--noche-2do); margin-top: 2px; }
@media (max-width: 860px) {
.paradas { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s3); }
.riel-linea { display: none; }
}
/* ═══════════ 2 · Qué hacemos: las tres capas ═══════════
Se lee de arriba hacia abajo —entra, se ordena, sale— y los hilos punteados
son el enganche entre capas. Es HTML con tokens, no una imagen: se apila
solo en mano y no depende del JS. */
.hacemos { padding: var(--s8) 0 var(--s7); }
/* Las tres estaciones de «Qué hacemos»: entra, se ordena, sale. En mano se
apilan. */
.embudo-que { margin-top: var(--s7); }
.embudo-pasos {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s4);
}
.ep {
min-width: 0;
padding: var(--s5);
border-radius: var(--r-xl);
background: rgba(255, 255, 255, .05);
border: 1px solid var(--noche-borde);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ep-centro { border-color: var(--lima-luz); background: rgba(184, 243, 46, .08); }
.ep-rot {
display: inline-block; margin-bottom: var(--s3);
padding: 4px 12px; border-radius: var(--r-full);
background: var(--lima); color: var(--tinta);
font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ep-tit { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.01em; }
.ep-txt { margin-top: 6px; font-size: .92rem; color: var(--noche-2do); }
@media (max-width: 820px) {
.embudo-pasos { grid-template-columns: minmax(0, 1fr); }
}
/* ═══════════ 3 · El sistema ═══════════
La cabecera de la sección; abajo va la consola (la bola + la tarjeta del
módulo), que comparte estilos con el resto de la página. */
.sistema { padding: var(--s8) 0 var(--s9); }
.modulos-cabeza { max-width: 760px; margin-bottom: var(--s7); }
.modulos-cabeza .titulo { margin: var(--s3) 0 var(--s4); }
.tarjeta {
border-radius: var(--r-xl);
background: var(--nube); border: 1px solid var(--borde);
box-shadow: var(--sombra); padding: var(--s5);
transition: transform .6s var(--curva), box-shadow .6s var(--curva);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.tarjeta-tit {
display: flex; align-items: center; gap: var(--s3);
font-size: .82rem; font-weight: 700; color: var(--tinta-3);
letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--s4);
}
.tarjeta-tit .tag { text-transform: none; letter-spacing: 0; margin-left: auto; }
/* ═══════════ El pase de color ═══════════
La página es de noche y la isla de luz —métricas y planes— es la excepción.
El pase sigue siendo una franja fina: no vuelve a ser media pantalla de
atardecer. Pero 72px eran pocos para bajar 73 puntos de L*, y el reparto
viejo dejaba dos costuras: una banda gris parada arriba y una línea dura
abajo, donde el ramp caía de golpe al azul petróleo.
Dos cosas lo arreglan y las dos importan:
1 · El REPARTO es una smoothstep, no un reparto parejo. Los cuatro escalones
se ubican donde su L* cae en la curva 3t²−2t³ (97,7 · 88,3 · 66,8 · 39,2
· 24,6 → 0 % · 22 % · 45 % · 71 % · 100 %). Así la pendiente arranca y
termina casi plana: el pase se funde con el papel y con la noche en vez
de chocar contra ellos, que es lo que el ojo lee como una raya.
2 · La INTERPOLACIÓN va en oklab. De hueso a azul petróleo, sRGB pasa por
gris embarrado; en oklab el pase se mantiene azulado todo el camino.
El degradado de arriba es el respaldo para el navegador que no entienda
`in oklab` — mismo reparto, sólo que interpola como antes.
Si tocás un escalón del atardecer, recalculá las posiciones: son L*, no
porcentajes elegidos a ojo. */
.amanece, .anochece { height: clamp(120px, 15vh, 200px); }
.amanece {
background: linear-gradient(var(--noche) 0%, var(--anochecer-3) 29%, var(--anochecer-2) 55%, var(--anochecer-1) 78%, var(--hueso) 100%);
background: linear-gradient(in oklab, var(--noche) 0%, var(--anochecer-3) 29%, var(--anochecer-2) 55%, var(--anochecer-1) 78%, var(--hueso) 100%);
}
.anochece {
background: linear-gradient(var(--hueso) 0%, var(--anochecer-1) 22%, var(--anochecer-2) 45%, var(--anochecer-3) 71%, var(--noche) 100%);
background: linear-gradient(in oklab, var(--hueso) 0%, var(--anochecer-1) 22%, var(--anochecer-2) 45%, var(--anochecer-3) 71%, var(--noche) 100%);
}
/* ═══════════ La noche: la piel de la página ═══════════
Es el default —el body ya es de noche—, así que el bloque sólo abre el
contexto de apilado para lo que va encima. */
.noche { position: relative; }
.noche > * { position: relative; }
/* ═══════════ La isla de luz: métricas y planes ═══════════
Lo único que va sobre papel. Todo lo que vive acá adentro se pinta con los
pasos de día —los `-txt`, que sobre hueso pasan AA— y no con los `-luz`. */
.dia {
position: relative;
background: var(--hueso); color: var(--tinta);
}
.dia::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(60vw 40vw at 12% 16%, rgba(184, 243, 46, .10), transparent 70%),
radial-gradient(50vw 36vw at 92% 60%, rgba(34, 184, 230, .07), transparent 70%);
}
.dia > * { position: relative; }
.dia .titulo, .dia h3 { color: var(--tinta); }
/* ── Lo que la isla de luz tiene que devolver al papel ──────────────────────
Estos componentes se dibujaron cuando métricas y planes eran la parte
oscura de la página. Al darla vuelta, cada uno vuelve a su versión de día:
la caja pasa de vidrio a papel y el texto, de los pasos `-luz` a los
`-txt`. Si agregás una pieza al tablero o a los planes, acordate de que
necesita su renglón acá. */
/* Los KPI */
.dia .kpi {
background: rgba(20, 18, 28, .025);
border-color: var(--borde);
box-shadow: var(--sombra-sm);
}
.dia .kpi:hover { border-color: var(--lima-fuerte); background: var(--lima-tenue); }
.dia .kpi-nota { color: var(--tinta-3); }
.dia .kpi-sube { color: var(--mint-txt); }
.dia .kpi-ojo { color: var(--ambar-txt); }
/* Los dos gráficos */
.dia .grafico { background: var(--nube); border-color: var(--borde); box-shadow: var(--sombra-sm); }
.dia .grafico figcaption span { color: var(--tinta-3); }
.dia .emb-et { color: var(--tinta-2); }
.dia .emb-fila { background: rgba(20, 18, 28, .06); }
/* El ramp de noche no valida sobre papel: acá va el de día. */
.dia .emb-barra { background: var(--emb-dia-1); }
.dia .emb-p2 { background: var(--emb-dia-2); }
.dia .emb-p3 { background: var(--emb-dia-3); }
.dia .emb-p4 { background: var(--emb-dia-4); }
.dia .emb-cierra { background: var(--mint-txt); }
/* Una sola serie, un color: el mes en curso es la misma tinta, más oscura. */
.dia .barras li::before { background: var(--lima-fuerte); }
.dia .barras i { color: var(--tinta-3); }
.dia .barra-hoy::before { background: var(--lima-txt); }
.dia .barra-hoy i { color: var(--lima-txt); }
.dia .tablero-pie { color: var(--tinta-3); }
/* El ciclo de facturación */
.dia .ciclo-caja { background: var(--nube); border-color: var(--borde); box-shadow: var(--sombra-sm); }
.dia .ciclo-op { color: var(--tinta-2); }
.dia .ciclo-op:hover { color: var(--tinta); }
.dia .ciclo-activo, .dia .ciclo-activo:hover { background: var(--lima); color: var(--tinta); }
.dia .ciclo-off { background: var(--lima-tenue); color: var(--lima-txt); }
.dia .ciclo-activo .ciclo-off { background: rgba(20, 18, 28, .14); color: var(--tinta); }
.dia .ciclo-nota { color: var(--tinta-3); }
/* Las cuatro tarjetas de plan */
.dia .plan { background: var(--nube); border-color: var(--borde); box-shadow: var(--sombra-sm); }
.dia .plan-destacado {
background: linear-gradient(170deg, var(--lima-tenue), var(--nube) 62%);
border-color: var(--lima-fuerte);
box-shadow: var(--sombra);
}
.dia .plan-mes, .dia .plan-para, .dia .plan-despues, .dia .plan-ia { color: var(--tinta-2); }
/* Red de contención: el botón de noche tiene el texto casi blanco y sobre
papel desaparece —le pasó al «Hablemos» de Enterprise—. Acá adentro va el
fantasma, y si alguno se cuela igual, se lee. */
.dia .btn-noche {
color: var(--tinta); border-color: var(--borde);
}
.dia .btn-noche:hover {
background: var(--nube); border-color: var(--lima-fuerte); box-shadow: var(--sombra);
}
.dia .plan-despues b { color: var(--tinta); }
.dia .plan-off { color: var(--lima-txt); }
.dia .plan-incluye { border-top-color: var(--borde); }
.dia .plan-incluye svg { color: var(--lima-fuerte); }
/* Los dos cuadros plegados */
.dia .cuadro { background: var(--nube); border-color: var(--borde); box-shadow: var(--sombra-sm); }
.dia .cuadro[open] { border-color: var(--lima-fuerte); }
.dia .cuadro-tit { color: var(--lima-txt); }
.dia .cuadro-tit:hover { color: var(--tinta); }
.dia .cuadro-pista { color: var(--tinta-3); }
.dia .cuadro-flecha { color: var(--lima-fuerte); }
.dia .cuadro[open] .cuadro-tit { border-bottom-color: var(--borde); }
.dia .tabla-planes thead th { color: var(--tinta); border-bottom-color: var(--borde); }
.dia .tabla-planes .col-destacada { color: var(--lima-txt); }
.dia .tabla-planes tbody th { color: var(--tinta-2); }
.dia .tabla-planes tbody tr + tr { border-top-color: var(--borde); }
.dia .tabla-planes tbody td b { color: var(--tinta); }
.dia .tabla-planes .grupo th { color: var(--tinta); }
.dia .tick svg { color: var(--mint-txt); }
.dia .nada svg { color: var(--coral-txt); }
/* La lima plena sobre papel da 1,3:1: el remarcado del titular va con el
paso que sí es texto. */
.dia .precios-cabeza .titulo em { color: var(--lima-txt); }
.tablero { padding: var(--s8) 0 var(--s8); }
.tablero-cabeza { max-width: 720px; margin-bottom: var(--s7); }
.tablero-cabeza .titulo { margin: var(--s3) 0 var(--s4); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.kpi {
padding: var(--s5); border-radius: var(--r-lg);
background: rgba(255, 255, 255, .045);
border: 1px solid var(--noche-borde);
backdrop-filter: blur(6px);
transition: transform .5s var(--curva), border-color .4s var(--curva), background-color .4s var(--curva);
}
.kpi:hover { transform: translateY(-5px); border-color: var(--lima-luz); background: rgba(255, 255, 255, .07); }
.kpi-n {
font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.7rem);
letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1;
}
.kpi-lbl { margin-top: 10px; font-size: .92rem; font-weight: 600; }
.kpi-nota { margin-top: 4px; font-size: .82rem; color: var(--noche-2do); }
.kpi-sube { color: var(--mint-luz); }
.kpi-ojo { color: var(--ambar-luz); }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.graficos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); margin-top: var(--s5); }
@media (max-width: 900px) { .graficos { grid-template-columns: minmax(0, 1fr); } }
.grafico {
margin: 0; padding: var(--s6); border-radius: var(--r-xl);
background: var(--noche-2); border: 1px solid var(--noche-borde);
}
.grafico figcaption { margin-bottom: var(--s5); }
.grafico figcaption b { display: block; font-family: var(--texto); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.grafico figcaption span { font-size: .84rem; color: var(--noche-2do); }
/* Embudo: magnitud en un solo tono, con el número escrito en cada paso */
.embudo { display: grid; gap: var(--s3); }
.embudo li { display: grid; grid-template-columns: minmax(64px, 96px) minmax(0, 1fr) 46px; align-items: center; gap: var(--s3); }
.emb-et { font-size: .84rem; color: var(--noche-2do); }
.emb-fila { display: block; height: 34px; border-radius: var(--r-full); background: rgba(255, 255, 255, .05); overflow: hidden; }
.emb-barra {
display: block; height: 100%; border-radius: var(--r-full);
background: var(--emb-1);
/* La escala arranca en 22 % y no en cero: la última etapa es 11 de 100 y en
proporción pura quedaba un puntito que no se leía como una barra. El orden
y las distancias se mantienen, y el número va escrito al lado. */
width: calc(22% + var(--v) * .78);
transform: scaleX(0); transform-origin: left;
transition: transform 1s var(--curva) calc(var(--paso) * .1s);
}
.visible .emb-barra { transform: scaleX(1); }
.emb-p2 { background: var(--emb-2); }
.emb-p3 { background: var(--emb-3); }
.emb-p4 { background: var(--emb-4); }
.emb-cierra { background: var(--mint-luz); }
.emb-n { font-family: var(--texto); font-weight: 700; font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }
/* Facturado: una sola serie, un color; el mes en curso se distingue y se explica */
.barras { display: flex; align-items: flex-end; gap: var(--s2); height: 220px; }
.barras li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; height: 100%; text-align: center; }
.barras li::before {
content: ""; display: block; height: var(--v);
border-radius: var(--r-sm) var(--r-sm) var(--r-xs) var(--r-xs);
background: var(--lima-media);
transform: scaleY(0); transform-origin: bottom;
transition: transform .9s var(--curva) calc(var(--i, 0) * .07s);
}
.visible .barras li::before { transform: scaleY(1); }
.barras i { font-style: normal; font-size: .76rem; color: var(--noche-2do); }
.barras b { font-size: .74rem; font-variant-numeric: tabular-nums; }
.barra-hoy::before { background: var(--lima); }
.barra-hoy i { color: var(--lima); font-weight: 700; }
.tablero-pie { margin-top: var(--s5); font-size: .84rem; color: var(--noche-2do); }
/* ═══════════ 6 · Precios ═══════════ */
.precios { padding: var(--s8) 0 var(--s9); }
/* ── El ciclo: mensual o anual ── */
.ciclo {
display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
margin-bottom: var(--s6);
}
.ciclo-caja {
display: inline-flex; padding: 4px; gap: 2px;
border-radius: var(--r-full);
background: rgba(255, 255, 255, .06); border: 1px solid var(--noche-borde);
}
.ciclo-op {
display: inline-flex; align-items: center; gap: var(--s2);
min-height: 44px; padding: 0 22px; border: 0; cursor: pointer;
border-radius: var(--r-full); background: transparent;
font-family: var(--texto); font-size: .95rem; font-weight: 600;
color: var(--noche-2do);
transition: background-color .3s var(--curva), color .3s var(--curva);
}
.ciclo-op:hover { color: var(--noche-txt); }
.ciclo-activo, .ciclo-activo:hover { background: var(--lima); color: var(--noche); }
.ciclo-off {
padding: 3px 9px; border-radius: var(--r-full);
background: rgba(184, 243, 46, .18); color: var(--lima);
font-size: .76rem; font-weight: 700;
}
.ciclo-activo .ciclo-off { background: rgba(13, 11, 24, .16); color: var(--noche); }
.ciclo-nota { font-size: .9rem; color: var(--noche-2do); }
/* ── Los cuatro planes ──
La tarjeta dice precio y nada más: lo que incluye cada plan vive en los dos
cuadros de abajo. Las cuatro miden lo mismo por subgrid. */
.planes {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
/* Un renglón por pieza de la tarjeta: nombre, bajada, precio, descuento,
precio de lista, la nota del saldo de IA, botón y qué incluye. El subgrid
los empareja entre las cuatro. Si le agregás una pieza a la tarjeta,
SUBÍ ESTE NÚMERO y el `span` de .plan: con uno de menos, la pieza que
sobra cae en un renglón implícito y el botón se estira hasta deformarse. */
grid-template-rows: repeat(8, auto);
column-gap: var(--s4); row-gap: var(--s3);
align-items: stretch;
}
@media (max-width: 1000px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan {
position: relative; display: flex; flex-direction: column; min-width: 0;
padding: var(--s5); border-radius: var(--r-xl);
background: var(--noche-2); border: 1px solid var(--noche-borde);
transition: transform .5s var(--curva), border-color .4s var(--curva);
}
.plan:hover { transform: translateY(-5px); }
@supports (grid-template-rows: subgrid) {
.plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; }
}
/* En una sola columna la grilla deja de servir: los planes caían en filas
implícitas separadas por el `row-gap` de 12px —que es el aire ENTRE
renglones de una misma tarjeta, no entre tarjetas— y quedaban pegados, con
la chapa «Recomendado» montada sobre la tarjeta de arriba. Se apilan a mano
y el subgrid se apaga: con una sola columna no empareja nada.
Va DESPUÉS del @supports a propósito: si va antes, lo pisa. */
@media (max-width: 560px) {
.planes { display: flex; flex-direction: column; gap: var(--s7); }
.plan { display: flex; grid-row: auto; }
}
.plan-destacado {
background: linear-gradient(170deg, rgba(184, 243, 46, .16), var(--noche-2) 62%);
border-color: var(--lima-luz);
box-shadow: 0 40px 90px -40px rgba(184, 243, 46, .4);
}
.plan-marca {
position: absolute; top: -13px; left: var(--s5);
padding: 5px 14px; border-radius: var(--r-full);
background: var(--lima); color: var(--tinta);
font-size: .74rem; font-weight: 700;
}
.plan-n { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.02em; }
.plan-precio {
font-family: var(--texto); font-weight: 700;
font-size: clamp(1.8rem, 2.5vw, 2.2rem); letter-spacing: -.03em;
font-variant-numeric: tabular-nums; margin-top: var(--s3);
}
.plan-precio i { font-size: .52em; font-weight: 600; margin-right: 2px; vertical-align: .42em; }
.plan-mes { font-size: .42em; font-weight: 500; color: var(--noche-2do); letter-spacing: 0; }
.plan-precio-charla { font-family: var(--display); font-weight: 500; }
/* El abono no es todo lo que se paga: el saldo de IA va aparte (D-102) y eso
se dice dos veces a propósito —pegado al número grande, que es lo único que
mucha gente lee, y otra vez abajo—.
Va en su propio renglón y no atrás del «/mes»: en una tarjeta de un cuarto
de la medida, colgado del precio, se desbordaba y se leía «+ saldo de» con
el resto cortado contra el borde. Abajo entra entero en las cuatro.
Va en el gris del precio y no en lima: la lima de al lado es el descuento,
y dos renglones lima seguidos compiten en vez de ordenar. Éste es parte del
precio, no una promo. La grotesca es explícita porque en Enterprise el
contenedor es la serif de display y salía con otra letra que las otras tres. */
.plan-mas-ia {
display: block; white-space: nowrap;
margin-top: 4px; font-family: var(--texto); font-size: .92em; font-weight: 600;
letter-spacing: 0;
}
.plan-ia {
margin-top: var(--s4);
font-size: .8rem; line-height: 1.45; color: var(--noche-2do);
}
.plan-off { margin-top: 6px; font-size: .84rem; font-weight: 600; color: var(--lima); }
.plan-despues { margin-top: 4px; font-size: .84rem; color: var(--noche-2do); }
.plan-despues b { color: var(--noche-txt); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Los dos precios están escritos: el ciclo sólo decide cuál se ve. */
.plan-anualizado { display: none; }
.precios-anual .plan-mensual { display: none; }
.precios-anual .plan-anualizado { display: inline; }
.plan-cta { width: 100%; margin-top: var(--s5); }
/* La bajada: para quién es el plan, sin encasillar a nadie. */
.plan-para {
margin-top: var(--s3); font-size: .88rem; line-height: 1.5;
color: var(--noche-2do);
}
/* Lo que incluye, adentro de la tarjeta. El detalle fino está en los dos
cuadros de abajo; acá va lo que decide la compra. */
.plan-incluye {
display: grid; gap: 10px;
margin-top: var(--s5); padding-top: var(--s5);
border-top: 1px solid var(--noche-borde);
}
.plan-incluye li {
display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s2);
align-items: start; font-size: .9rem;
}
.plan-incluye svg { width: 16px; height: 16px; margin-top: .22em; color: var(--lima); }
/* ── Los dos cuadros: límites y funciones ── */
/* Son dos tablas largas y la mayoría entra a mirar el precio, no la letra
chica: van plegadas y se abren cuando alguien las busca. `` es
nativo, así que sin JS abre igual. */
.cuadro {
margin-top: var(--s4); padding: 0;
border-radius: var(--r-xl);
background: var(--noche-2); border: 1px solid var(--noche-borde);
transition: border-color .3s var(--curva);
}
.cuadro[open] { border-color: var(--lima-media); }
.cuadro-tit {
display: flex; align-items: center; gap: var(--s3);
min-height: 60px; padding: var(--s4) var(--s5);
font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--lima); cursor: pointer;
list-style: none;
}
.cuadro-tit::-webkit-details-marker { display: none; }
.cuadro-tit:hover { color: var(--noche-txt); }
.cuadro-pista {
margin-left: auto; text-align: right;
font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none;
color: var(--noche-2do);
}
.cuadro-flecha {
flex: none; width: 18px; height: 18px; color: var(--lima);
transition: transform .3s var(--curva);
}
.cuadro[open] .cuadro-flecha { transform: rotate(180deg); }
/* El cuerpo respira igual que antes: el padding se lo lleva el contenido, no
la caja, para que el renglón plegado quede prolijo. */
.cuadro-scroll { padding: 0 var(--s5) var(--s5); }
/* La tabla es ancha por naturaleza: scrollea adentro de su caja, nunca la
página. `position: relative` no es decorativo: el texto que sólo leen los
lectores de pantalla va en absolute, y sin un ancestro posicionado se
escapaba del contenedor y estiraba el documento en mobile. */
.cuadro-scroll { position: relative; overflow-x: auto; }
/* La tabla arranca pegada al renglón del título: un filo la separa. */
.cuadro[open] .cuadro-tit { border-bottom: 1px solid var(--noche-borde); margin-bottom: var(--s4); }
.tabla-planes {
width: 100%; min-width: 720px; border-collapse: collapse;
font-size: .9rem;
}
.tabla-planes th, .tabla-planes td { text-align: left; padding: 11px var(--s3); }
.tabla-planes thead th {
font-size: .8rem; font-weight: 700; color: var(--noche-txt);
text-align: center; white-space: nowrap;
border-bottom: 1px solid var(--noche-borde);
}
.tabla-planes thead th:first-child { text-align: left; }
.tabla-planes .col-destacada { color: var(--lima); }
.tabla-planes tbody th {
font-weight: 500; color: var(--noche-2do);
width: 42%; min-width: 260px;
}
.tabla-planes tbody td { text-align: center; }
.tabla-planes tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .06); }
.tabla-planes tbody td b { color: var(--noche-txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.tabla-planes .grupo th {
padding-top: var(--s5); color: var(--noche-txt);
font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
}
.tabla-planes .grupo + tr { border-top: 0; }
.tick, .nada { display: inline-flex; }
.tick svg { width: 17px; height: 17px; color: var(--mint-luz); }
/* El coral es la señal de «no se puede» en toda la página: acá dice qué no
trae el plan. */
.nada svg { width: 15px; height: 15px; color: var(--coral-luz); }
.tick i, .nada i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* En mano la tabla entra entera: se achica la tipografía, la columna de la
izquierda cede ancho y el encabezado pierde la marca —«Tiko Premium» pasa a
«Premium»—. Es preferible eso a obligar a scrollear de costado para ver si
un plan tiene o no una función. */
@media (max-width: 760px) {
.cuadro-tit { padding: var(--s3) var(--s4); }
.cuadro-scroll { padding: 0 var(--s3) var(--s4); }
/* La pista no entra al lado del título en mano: queda el título y la flecha. */
.cuadro-pista { display: none; }
.tabla-planes { min-width: 0; font-size: .78rem; }
.tabla-planes th, .tabla-planes td { padding: 10px 4px; }
.tabla-planes thead th { font-size: .7rem; }
.tabla-planes tbody th { width: auto; min-width: 0; }
.th-marca { display: none; }
.tick svg { width: 15px; height: 15px; }
.nada svg { width: 13px; height: 13px; }
}
@media (max-width: 430px) {
.tabla-planes { font-size: .72rem; }
.tabla-planes thead th { font-size: .62rem; letter-spacing: -.01em; }
.tabla-planes th, .tabla-planes td { padding: 9px 3px; }
}
/* Sin cap de ancho: los 60ch estaban para la bajada de la sección, que ya no
está. Con el cap puesto, el titular partía «Con un 20 % OFF los / primeros 3
meses» y la promesa quedaba en tres renglones en vez de dos. Ahora lo limita
la medida, y adentro el separa las dos frases. */
.precios-cabeza { margin-bottom: var(--s6); }
.precios-cabeza .titulo { margin: var(--s3) 0 var(--s3); }
.precios-cabeza .titulo em { font-style: italic; color: var(--lima); }
.precios-chip { margin-top: var(--s4); }
/* El pie de Planes: la letra chica que sí hace falta —moneda, cambio de plan,
prueba y comisión cero—, en un renglón y no en un cartel. */
.planes-pie {
margin-top: var(--s5);
font-size: .9rem; color: var(--tinta-2);
max-width: 90ch;
}
.planes-pie b { color: var(--tinta); font-weight: 600; }
/* ═══════════ 7 · Blog ═══════════ */
.blog { padding: var(--s8) 0 var(--s9); }
.blog-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6); }
.blog-cabeza .titulo { margin-top: var(--s3); }
.ln-noche { color: var(--lima-luz); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.ln-noche:hover { color: var(--lima); }
.notas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 900px) { .notas { grid-template-columns: minmax(0, 1fr); } }
.nota {
border-radius: var(--r-xl); background: var(--noche-2);
border: 1px solid var(--noche-borde); overflow: hidden;
transition: transform .5s var(--curva), border-color .4s var(--curva);
}
.nota:hover { transform: translateY(-5px); border-color: var(--lima-luz); }
.nota a { display: block; padding: var(--s6); text-decoration: none; }
.nota-tag {
display: inline-block; padding: 4px 12px; border-radius: var(--r-full);
background: rgba(255, 255, 255, .07); color: var(--lima-luz);
font-size: .74rem; font-weight: 700; margin-bottom: var(--s4);
}
.nota h3 { font-size: 1.25rem; margin-bottom: var(--s3); }
.nota-baja { font-size: .93rem; color: var(--noche-2do); }
.nota-meta { margin-top: var(--s4); font-size: .8rem; color: var(--noche-2do); }
/* ═══════════ 8 · Cierre ═══════════ */
.cierre {
position: relative; overflow: hidden;
padding: var(--s9) 0 var(--s10); text-align: center;
background: var(--noche); color: var(--noche-txt);
}
.cierre::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(46vw 40vw at 50% 0%, rgba(184, 243, 46, .2), transparent 68%),
radial-gradient(38vw 30vw at 78% 88%, rgba(184, 243, 46, .16), transparent 70%);
}
.cierre-caja { position: relative; }
.cierre .display { margin: var(--s5) auto var(--s5); max-width: 18ch; }
.cierre .display em {
font-style: normal;
background: linear-gradient(100deg, var(--lima), var(--mint-luz) 50%, var(--aqua-luz));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--lima);
}
.cierre-baja { margin-inline: auto; }
/* ── La lista de espera ── */
.lista {
margin: var(--s6) auto 0; max-width: 640px; text-align: left;
padding: var(--s6);
border-radius: var(--r-xl);
background: rgba(255, 255, 255, .05);
border: 1px solid var(--noche-borde);
box-shadow: var(--sombra-noche);
backdrop-filter: blur(10px);
}
.lista-ayuda { font-size: .88rem; color: var(--noche-2do); text-align: center; }
.campos {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s4); margin-top: var(--s5);
}
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font-size: .84rem; font-weight: 600; color: var(--noche-txt); }
.campo-opt { font-weight: 400; color: var(--noche-2do); }
/* El mensaje opcional ocupa el ancho de las dos columnas. */
.campo-ancho { grid-column: 1 / -1; }
.campo input, .campo textarea {
min-height: 46px; width: 100%;
padding: 0 var(--s4);
font-family: var(--texto); font-size: .96rem; color: var(--noche-txt);
background: rgba(255, 255, 255, .06);
border: 1px solid var(--noche-borde); border-radius: var(--r-sm);
transition: border-color .25s var(--curva), background-color .25s var(--curva);
}
.campo textarea {
padding: 12px var(--s4); line-height: 1.5; resize: vertical;
border-radius: var(--r-md);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--noche-2do); }
.campo input:hover, .campo textarea:hover { border-color: var(--lima-luz); }
.campo input:focus, .campo textarea:focus { background: rgba(255, 255, 255, .1); border-color: var(--lima-luz); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--coral-luz); }
.campo-error { font-size: .82rem; color: var(--coral-luz); }
/* La trampa para bots. Fuera de la vista, NO con `display: none`: un bot que
lee el DOM salta los campos ocultos así, y la trampa no atraparía a nadie.
Sacado del flujo, no ocupa lugar ni deja hueco entre los campos y el botón. */
.trampa {
position: absolute; left: -9999px;
width: 1px; height: 1px; overflow: hidden;
}
.lista-btn { width: 100%; margin-top: var(--s5); justify-content: center; }
.lista-aviso {
margin-top: var(--s4); padding: var(--s4);
border-radius: var(--r-sm); font-size: .92rem;
background: rgba(255, 255, 255, .06); color: var(--noche-txt);
border: 1px solid var(--noche-borde);
}
.lista-aviso b { color: var(--lima); }
.lista-aviso-mal { border-color: var(--coral-luz); }
.lista-aviso-mal b { color: var(--coral-luz); }
.lista-aviso a { color: var(--lima); }
.lista-hecho .campos, .lista-hecho .lista-btn, .lista-hecho .lista-ayuda { display: none; }
@media (max-width: 620px) {
.lista { padding: var(--s5); }
.campos { grid-template-columns: minmax(0, 1fr); }
}
.cierre-nota { margin-top: var(--s5); font-size: .9rem; color: var(--noche-2do); }
.cierre-nota a { color: var(--lima); }
/* ═══════════ Pie ═══════════ */
.pie { background: var(--noche); color: var(--noche-2do); padding: var(--s7) 0 var(--s8); border-top: 1px solid var(--noche-borde); }
.pie-caja { display: grid; gap: var(--s5); }
.pie-links { display: flex; flex-wrap: wrap; gap: var(--s5); }
.pie-links a { text-decoration: none; font-size: .93rem; }
.pie-links a:hover { color: var(--noche-txt); }
.pie-legal { font-size: .84rem; }
/* ═══════════ El dock: el mapa flotante de la página ═══════════ */
.dock {
position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
z-index: 55; display: grid; gap: 10px;
padding: 12px 9px; border-radius: var(--r-full);
background: rgba(22, 19, 42, .72);
border: 1px solid var(--noche-borde);
box-shadow: var(--sombra);
backdrop-filter: blur(14px);
opacity: 0; visibility: hidden;
transition: opacity .4s var(--curva), visibility .4s, background-color .4s var(--curva), border-color .4s var(--curva);
}
.dock-visible { opacity: 1; visibility: visible; }
.dock:not(.dock-noche) { background: rgba(255, 255, 255, .72); border-color: var(--borde); }
.dock a {
position: relative; display: block; width: 10px; height: 10px;
border-radius: var(--r-full); background: var(--niebla-2);
transition: background-color .3s var(--curva), transform .4s var(--resorte);
}
.dock.dock-noche a { background: var(--noche-3); }
.dock a:hover { transform: scale(1.4); }
.dock a.activo { background: var(--lima-fuerte); transform: scale(1.35); }
.dock.dock-noche a.activo { background: var(--lima); }
.dock a span {
position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(6px);
padding: 5px 12px; border-radius: var(--r-full);
background: var(--tinta); color: var(--hueso);
font-size: .74rem; font-weight: 600; white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .25s var(--curva), transform .3s var(--curva);
}
.dock a:hover span, .dock a:focus-visible span { opacity: 1; transform: translateY(-50%); }
@media (max-width: 1100px) { .dock { display: none; } }
html:not(.js) .dock { display: none; }
/* ═══════════ Entradas ═══════════ */
.js [data-r] {
opacity: 0; transform: translateY(18px);
transition: opacity .7s var(--curva), transform .8s var(--curva);
}
.js [data-r].visible { opacity: 1; transform: none; }
.js [data-r][data-d="1"] { transition-delay: .08s; }
.js [data-r][data-d="2"] { transition-delay: .16s; }
.js [data-r][data-d="3"] { transition-delay: .24s; }
.js [data-r][data-d="4"] { transition-delay: .32s; }
/* ═══════════ Papelitos del CTA ═══════════ */
.papel {
position: fixed; z-index: 80; width: 9px; height: 13px;
border-radius: 3px; pointer-events: none;
animation: caer var(--dur, 1.5s) var(--curva) forwards;
}
@keyframes caer {
to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
/* ═══════════ Reducción de movimiento ═══════════ */
/* ═══════════ Los reflectores ═══════════
Dos luces colgadas —una de cada costado— que giran siguiendo al mouse y se
cruzan arriba de él: el gesto de los reflectores que acompañan a quien entra
a la fiesta. Antes era una sola cuña de un ángulo plano contra el borde
izquierdo, y una cuña sola de un lado se lee como un triángulo pintado, no
como una luz.
Lo que hace que parezcan luz y no geometría:
· DOS FOCOS QUE SE CRUZAN. Con un cruce hay volumen; con un haz solo, no.
Van desparejos a propósito —el izquierdo cuelga más alto y pega un poco
más fuerte que el derecho—: dos luces iguales y espejadas leen como un
adorno simétrico, no como una parrilla de luces.
· PENUMBRA. Cada haz es un núcleo caliente y angosto adentro de un halo
ancho y tenue, con los bordes desvanecidos en varios pasos. Un cono de un
borde a otro sin degradado es una cuña; el que tiene penumbra es un haz.
· CAÍDA CON LA DISTANCIA, en dos tramos: fuerte cerca del foco y larga
después, que es como cae una luz de verdad.
· SCREEN. La luz suma, nunca resta: así se apoya sobre la noche y se borra
sola sobre la isla de papel, donde una luz verde encima sería suciedad.
Sigue siendo decoración y nada más, así que va bajísima de intensidad —si se
nota "el efecto", está de más— y sólo en escritorio, donde hay mouse. Sin JS
ni se prenden: los dos arrancan en opacity 0 y el script les pone
.reflector-prendido recién con el primer movimiento del mouse. Una luz que
sigue al cursor sin cursor no es nada que valga la pena mostrar. */
.reflector {
position: fixed; inset: 0; z-index: 54; pointer-events: none;
mix-blend-mode: screen;
opacity: 0; transition: opacity 1s var(--curva);
}
.reflector-prendido { opacity: 1; }
/* De dónde cuelga cada luz y hacia dónde apunta; el script sólo mueve --ang.
--int es cuánto pega, para poder desbalancear las dos con un solo número. */
.foco {
position: absolute; inset: 0;
--ang: 118deg; --abre: 7deg; --int: 1;
}
.foco-izq { --ox: -2vw; --oy: 17vh; --int: 1; }
.foco-der { --ox: 102vw; --oy: 33vh; --ang: 242deg; --int: .72; }
/* El halo ancho: la penumbra, lo que hace que el haz tenga borde blando. */
.foco::before,
.foco::after {
content: ""; position: absolute; inset: 0;
/* la caída con la distancia, en dos tramos */
-webkit-mask-image: radial-gradient(96vw 96vw at var(--ox) var(--oy),
rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .62) 30%, rgba(0, 0, 0, .24) 60%, transparent 88%);
mask-image: radial-gradient(96vw 96vw at var(--ox) var(--oy),
rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .62) 30%, rgba(0, 0, 0, .24) 60%, transparent 88%);
}
.foco::before {
background: conic-gradient(from calc(var(--ang) - var(--abre)) at var(--ox) var(--oy),
rgba(184, 243, 46, 0) 0deg,
rgba(184, 243, 46, calc(.012 * var(--int))) calc(var(--abre) * .45),
rgba(184, 243, 46, calc(.030 * var(--int))) var(--abre),
rgba(184, 243, 46, calc(.012 * var(--int))) calc(var(--abre) * 1.55),
rgba(184, 243, 46, 0) calc(var(--abre) * 2));
}
/* El núcleo caliente: la misma luz, más angosta y más fuerte. */
.foco::after {
background:
radial-gradient(180px 180px at var(--ox) var(--oy),
rgba(184, 243, 46, calc(.20 * var(--int))), transparent 72%),
conic-gradient(from calc(var(--ang) - var(--abre) * .34) at var(--ox) var(--oy),
rgba(184, 243, 46, 0) 0deg,
rgba(184, 243, 46, calc(.055 * var(--int))) calc(var(--abre) * .2),
rgba(184, 243, 46, calc(.075 * var(--int))) calc(var(--abre) * .34),
rgba(184, 243, 46, calc(.055 * var(--int))) calc(var(--abre) * .48),
rgba(184, 243, 46, 0) calc(var(--abre) * .68));
}
/* Donde los dos haces se juntan: el charco de luz, con núcleo y borde blando
como el redondel que dibuja un reflector en el piso. */
.foco-charco {
position: absolute;
left: var(--mx, 50%); top: var(--my, 50%);
width: 420px; height: 300px; margin: -150px 0 0 -210px;
border-radius: var(--r-full);
background:
radial-gradient(closest-side, rgba(184, 243, 46, .10), rgba(184, 243, 46, .04) 52%, transparent 78%),
radial-gradient(closest-side at 50% 50%, rgba(184, 243, 46, .07), transparent 34%);
}
/* Sin mouse no hay reflector que seguir. */
@media (max-width: 980px), (hover: none) {
.reflector { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MANO (≤ 700px) — la página pensada de nuevo, no encogida.
En el celular no alcanza con apilar: la bola no se puede girar con el dedo,
el riel de siete paradas se vuelve una lista muerta y el tablero pide más
scroll del que paga. Acá cada pieza cambia de forma, y ninguna de estas
reglas toca el escritorio.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
/* ── El aire ────────────────────────────────────────────────────────────
Los mismos saltos de escritorio dejaban medio celular en blanco entre
bloque y bloque. Se bajan ~35 %: la página avanza al scrollear. */
.hacemos { padding: var(--s6) 0 var(--s6); }
.sistema { padding: var(--s6) 0 var(--s7); }
.flujo { padding: var(--s7) 0 var(--s6); }
.tablero { padding: var(--s7) 0 var(--s6); }
.precios { padding: var(--s6) 0 var(--s7); }
.blog { padding: var(--s6) 0 var(--s7); }
.modulos-cabeza, .tablero-cabeza, .flujo-cabeza { margin-bottom: var(--s5); }
.precios-cabeza { margin-bottom: var(--s5); }
.modulos-cabeza .titulo, .tablero-cabeza .titulo, .flujo-cabeza .titulo { margin: var(--s2) 0 var(--s3); }
.embudo-que { margin-top: var(--s5); }
.consola { margin-top: var(--s5); gap: var(--s4); }
.cierre .display { margin-block: var(--s4); }
.titulo { font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
.entrada { font-size: 1rem; }
/* El pase de color ya es fino; en mano se afina un poco más. */
.amanece, .anochece { height: 56px; }
/* ── 1 · El hero ────────────────────────────────────────────────────────
Antes era texto sobre un vidrio vacío. Ahora cierra más arriba y abajo del
CTA asoma la bandeja: se ve producto sin scrollear. */
/* Arriba lo que se lee —chip, titular y bajada— y abajo, contra el pie del
vidrio, lo que se aprieta. El `margin-top: auto` de las acciones es lo que
abre el aire del medio: la primera pantalla respira en vez de amontonarse
al centro. */
.hero { padding: 6px 6px var(--s5); --hero-alto-cinta: 80px; }
.vitrina { border-radius: var(--r-xl); padding-bottom: var(--s5); }
.hero-caja {
min-height: calc(100svh - var(--hero-alto-cinta) - 84px);
justify-content: flex-start; text-align: left;
}
.hero-caja > .r:first-child .chip { font-size: .7rem; padding: 5px 11px; }
.hero h1 { margin: var(--s4) 0 var(--s3); font-size: clamp(1.8rem, 7.6vw, 2.5rem); max-width: 16ch; }
.hero-baja { margin-inline: 0; font-size: .9rem; max-width: 38ch; }
/* Apilados y a todo el ancho: al par lado a lado se les partía el rótulo en
dos renglones, y un botón cortado no se lee como un botón. */
.hero-acciones { margin-top: auto; padding-top: var(--s6); gap: var(--s2); flex-direction: column; }
.hero-acciones .btn { width: 100%; min-height: 52px; font-size: .96rem; }
.hero-nota { margin-top: var(--s3); font-size: .78rem; text-align: center; }
/* El pie: el mismo gesto que la referencia —un renglón chico con una flecha
abajo— para que se vea que la página sigue. */
.hero-baja-mas {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: var(--s4); min-height: 44px;
font-size: .85rem; font-weight: 600; color: var(--lima);
text-decoration: none;
}
.hero-baja-mas svg { width: 16px; height: 16px; }
/* ── 3 · El sistema: la bola se abre en fila ────────────────────────────
Girar un anillo con el dedo no se puede. Los mismos seis botones —mismo
orden, misma numeración, mismo tablist— se estiran en una fila que se
desliza, y el aro del dial se acuesta como barrita de avance abajo. */
/* La fila de chips arriba, y abajo la barrita de avance y el botón de
pausa compartiendo renglón: en columna el "Pausar" se comía un renglón
entero para nada. */
.orbita {
width: auto; height: auto; margin-inline: 0;
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; gap: var(--s3) var(--s4);
}
.orbita-giro { grid-column: 1 / -1; }
.orbita-aro { display: none; }
.orbita-giro {
/* relativo, no estático: el script centra el chip puesto con offsetLeft y
necesita que el ancestro posicionado sea esta fila. */
position: relative; height: auto; transform: none;
display: flex; gap: var(--s2);
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding: 2px var(--s1) var(--s2);
margin-inline: calc(var(--s5) * -1);
padding-inline: var(--s5);
}
.orbita-giro::-webkit-scrollbar { display: none; }
.orbita-item {
position: static; margin: 0; flex: none;
width: auto; height: 44px; padding: 0 var(--s4);
display: inline-flex; align-items: center; gap: var(--s2);
transform: none; scroll-snap-align: center;
}
.orbita-item[aria-selected="true"] { transform: none; }
.orbita-item svg { width: 18px; height: 18px; }
.orbita-txt {
display: block; font-family: var(--texto);
font-size: .82rem; font-weight: 600; white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* El dial se acuesta: el disco pasa a ser la pista de una barrita que se
llena mientras el módulo corre. Es el mismo instrumento, de perfil. */
.dial {
position: static; grid-column: 1; width: 100%; height: 3px; margin: 0;
display: block; overflow: hidden;
border-radius: var(--r-full);
background: var(--niebla-2); box-shadow: none;
}
.dial::after { display: none; }
.dial-aro, .dial-centro { display: none; }
.dial::before {
content: ""; display: block; height: 100%; width: 100%;
border-radius: var(--r-full); background: var(--lima-fuerte);
transform: scaleX(0); transform-origin: left;
}
.dial.dial-corre::before { animation: barra-avanza var(--dial-tiempo, 3.6s) linear forwards; }
.orbita-pausa { position: static; transform: none; grid-column: 2; }
/* ── 4 · El recorrido: un mazo que se arma ──────────────────────────────
Siete paradas en dos columnas eran una grilla sin recorrido. Acá cada
parada es una tarjeta que se frena arriba y deja asomar la anterior: se
ve el camino armándose con el pulgar.
La cabecera se clava arriba y se queda toda la sección: mientras el mazo
se apila abajo, siempre se lee de qué recorrido estamos hablando. El
`--riel-tope` es dónde empieza a apilarse el mazo —abajo de la cabecera—;
el valor de acá es el piso y el script lo ajusta al alto real. */
.flujo { --riel-tope: 320px; }
.flujo-cabeza {
position: sticky; top: 78px; z-index: 10;
margin-bottom: var(--s4);
padding: var(--s3) var(--s4) var(--s4);
border-radius: var(--r-lg);
background: rgba(18, 63, 82, .92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.flujo-cabeza .entrada { font-size: .92rem; }
.paradas { display: block; grid-template-columns: none; gap: 0; }
.parada {
position: sticky;
text-align: left;
display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3);
align-items: center;
/* Más aire arriba que abajo a propósito: lo que asoma de la tarjeta de
atrás es esa banda, y tiene que estar en blanco. Con el padding parejo
se veía el título cortado al medio. */
padding: var(--s5) var(--s4) var(--s4);
border-radius: var(--r-lg);
background: var(--noche-2); border: 1px solid var(--noche-borde);
box-shadow: var(--sombra-noche);
}
.parada + .parada { margin-top: var(--s3); }
.parada:nth-child(1) { top: var(--riel-tope); z-index: 1; }
.parada:nth-child(2) { top: calc(var(--riel-tope) + 12px); z-index: 2; }
.parada:nth-child(3) { top: calc(var(--riel-tope) + 24px); z-index: 3; }
.parada:nth-child(4) { top: calc(var(--riel-tope) + 36px); z-index: 4; }
.parada:nth-child(5) { top: calc(var(--riel-tope) + 48px); z-index: 5; }
.parada:nth-child(6) { top: calc(var(--riel-tope) + 60px); z-index: 6; }
.parada:nth-child(7) { top: calc(var(--riel-tope) + 72px); z-index: 7; }
.parada-bola { width: 44px; height: 44px; margin: 0; grid-row: span 2; }
.parada-bola svg { width: 20px; height: 20px; }
.parada b { align-self: end; font-size: 1rem; }
.parada b + span { font-size: .85rem; margin-top: 1px; }
/* La última cierra el mazo: es la que queda a la vista al final. */
.parada:last-child { border-color: var(--lima-luz); }
/* ── 5 · Métricas: dos números y el embudo ──────────────────────────────
Cuatro KPIs y dos gráficos era un tablero de escritorio metido en una
mano. Quedan los dos números que se miran de verdad y el embudo, que es
el recorrido contado en magnitudes. Lo demás vive en escritorio. */
.kpis { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.kpi:nth-child(2), .kpi:nth-child(4) { display: none; }
.kpi { padding: var(--s4) var(--s5); }
.kpi-n { font-size: 2.6rem; }
.graficos { gap: var(--s4); }
.grafico { padding: var(--s5) var(--s4); }
/* El facturado por mes son ocho barras de 30px: ilegible en mano. */
.grafico:nth-of-type(2) { display: none; }
.embudo li { grid-template-columns: minmax(58px, 76px) minmax(0, 1fr) 34px; gap: var(--s2); }
.emb-et { font-size: .78rem; }
.emb-fila { height: 28px; }
.emb-n { font-size: .9rem; }
/* ── Los textos: la versión corta ───────────────────────────────────────
En mano el párrafo largo se lee como un muro y se saltea entero. Donde el
HTML trae las dos, acá manda la corta. */
.solo-ancho { display: none; }
.solo-mano { display: inline; }
/* El chip del hero: corto y centrado adentro de su cápsula. */
.hero-caja > .r:first-child { text-align: center; }
.hero-caja > .r:first-child .chip { text-align: center; }
/* ── Las tarjetas de los módulos, más chicas ────────────────────────────
Con el texto corto la tarjeta no necesita el mismo cuerpo: baja el aire y
la escala, y entra más mockup —que es lo que se mira— en la pantalla. */
.vista { padding: var(--s4); }
.vista-rot { font-size: .68rem; margin-bottom: var(--s2); }
.vista-rot i { width: 21px; height: 21px; font-size: .66rem; }
.vista h3 { font-size: 1.08rem; }
.vista-txt { margin-top: 6px; font-size: .86rem; }
.vista-fig { margin-top: var(--s3); }
.vista-pie { margin-top: var(--s3); font-size: .72rem; }
}
@keyframes barra-avanza { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.js [data-r] { opacity: 1; transform: none; }
.emb-barra { transform: scaleX(1); }
.barras li::before { transform: scaleY(1); }
.riel-linea::after { transform: scaleX(1); }
.parada, .flujo-cabeza { position: static; }
.dial::before { transform: scaleX(1); }
.firma-trazo { stroke-dashoffset: 0; }
.papel { display: none; }
/* Una luz que persigue al mouse es movimiento y nada más: se apaga. */
.reflector { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Las notas del blog (páginas de blog/) — mismo dialecto, sobre papel.
═══════════════════════════════════════════════════════════════════════════ */
.blog-hero { padding-block: clamp(130px, 16vh, 170px) var(--s7); }
.blog-hero .display { margin: var(--s4) 0 var(--s4); }
.bajada { font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: var(--tinta-2); max-width: 62ch; }
.migas { font-size: .82rem; font-weight: 600; color: var(--tinta-3); }
.migas a { color: var(--lima-txt); text-decoration: none; }
.migas a:hover { text-decoration: underline; }
/* Índice de notas sobre papel */
.notas-dia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notas-dia .nota { background: var(--nube); border-color: var(--borde); box-shadow: var(--sombra-sm); }
.notas-dia .nota:hover { border-color: var(--lima-fuerte); box-shadow: var(--sombra); }
.notas-dia .nota-tag { background: var(--lima-tenue); color: var(--lima-txt); }
.notas-dia .nota-baja, .notas-dia .nota-meta { color: var(--tinta-3); }
@media (max-width: 900px) { .notas-dia { grid-template-columns: 1fr; } }
.indice { padding-bottom: var(--s9); }
.indice-meta { margin-top: var(--s6); font-size: .9rem; color: var(--tinta-3); }
/* La nota */
.nota-pag { padding-block: clamp(130px, 16vh, 170px) var(--s9); max-width: 780px; }
.nota-cabeza { margin: var(--s5) 0 var(--s7); }
.nota-titulo { font-family: var(--display); font-size: clamp(2.1rem, 5.2vw, 3.4rem); letter-spacing: -.04em; }
.nota-bajada { margin-top: var(--s4); font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--tinta-2); }
.cuerpo { font-size: 1.06rem; line-height: 1.72; color: var(--tinta-2); }
.cuerpo > * + * { margin-top: var(--s5); }
.cuerpo h2 {
font-size: clamp(1.5rem, 3vw, 2rem); color: var(--tinta);
margin-top: var(--s8) !important; padding-top: var(--s5);
border-top: 1px solid var(--borde);
}
.cuerpo h3 { font-size: 1.2rem; color: var(--tinta); margin-top: var(--s6) !important; }
.cuerpo strong, .cuerpo b { color: var(--tinta); font-weight: 600; }
.cuerpo a { color: var(--lima-txt); text-underline-offset: 3px; }
.cuerpo ul, .cuerpo ol { display: grid; gap: 10px; padding-left: 0; }
.cuerpo li { position: relative; padding-left: 26px; }
.cuerpo ul > li::before {
content: ""; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px;
border-radius: var(--r-full); background: var(--lima-fuerte);
}
.cuerpo ol { counter-reset: cnt; }
.cuerpo ol > li { counter-increment: cnt; }
.cuerpo ol > li { padding-left: 34px; }
.cuerpo ol > li::before {
content: counter(cnt); position: absolute; left: 0; top: .18em;
width: 24px; height: 24px; border-radius: var(--r-full);
background: var(--lima-tenue); color: var(--lima-txt);
font-size: .78rem; font-weight: 700; display: grid; place-items: center;
}
.cuerpo blockquote {
margin: 0; padding: var(--s5) var(--s6);
border-radius: var(--r-lg); background: var(--niebla);
font-size: 1.1rem; color: var(--tinta);
}
.tabla-envoltorio {
overflow-x: auto; border-radius: var(--r-lg);
border: 1px solid var(--borde); background: var(--nube);
}
.tabla-envoltorio table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla-envoltorio th, .tabla-envoltorio td { padding: 13px var(--s4); text-align: left; }
.tabla-envoltorio th { font-weight: 600; color: var(--tinta); background: var(--hueso); white-space: nowrap; }
.tabla-envoltorio tbody tr + tr td { border-top: 1px solid var(--borde); }
.tabla-envoltorio td { font-variant-numeric: tabular-nums; }
.aparte {
padding: var(--s6); border-radius: var(--r-xl);
background: var(--nube); border: 1px solid var(--borde);
box-shadow: var(--sombra-sm);
}
.aparte-titulo {
font-family: var(--display); font-size: 1.15rem; color: var(--tinta);
letter-spacing: -.02em; margin-bottom: var(--s3);
}
.nota-cierre {
margin-top: var(--s8); padding: var(--s7);
border-radius: var(--r-2xl);
background: linear-gradient(150deg, var(--lima-tenue), var(--aqua-tenue));
border: 1px solid var(--niebla-2);
text-align: center;
}
.nota-cierre h2 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: var(--s3); }
.nota-cierre p { color: var(--tinta-2); max-width: 54ch; margin-inline: auto; }
.nota-cierre .btn { margin-top: var(--s5); }
.nota-firma { margin-top: var(--s6); font-size: .88rem; color: var(--tinta-3); }
/* Índice del blog: cada nota es una tarjeta */
.indice { display: grid; gap: var(--s4); }
.indice > li { border-radius: var(--r-xl); }
.indice a {
display: flex; align-items: center; gap: var(--s5);
padding: var(--s6); border-radius: var(--r-xl);
background: var(--nube); border: 1px solid var(--borde);
box-shadow: var(--sombra-sm); text-decoration: none;
transition: transform .5s var(--curva), box-shadow .5s var(--curva), border-color .4s var(--curva);
}
.indice a:hover { transform: translateY(-4px); border-color: var(--lima-fuerte); box-shadow: var(--sombra); }
.indice h2 { font-size: clamp(1.25rem, 2.4vw, 1.65rem); margin: 0 0 var(--s2); }
.indice p { color: var(--tinta-2); font-size: .96rem; max-width: 68ch; }
.indice .nota-tag { background: var(--lima-tenue); color: var(--lima-txt); }
.indice-meta {
margin-left: auto; flex: none;
padding: 8px 16px; border-radius: var(--r-full);
background: var(--niebla); color: var(--tinta-3);
font-size: .82rem; font-weight: 600; white-space: nowrap;
}
@media (max-width: 700px) {
.indice a { flex-direction: column; align-items: flex-start; gap: var(--s4); }
.indice-meta { margin-left: 0; }
}