/* =====================================================================
Toga · Capa de acabado
=====================================================================
Va DESPUES de home.css. No lo reemplaza: lo afina.
Se hizo asi a proposito. home.css son 58 KB que funcionan y estan
probados en produccion; reescribirlos enteros para cambiar el acabado
seria arriesgar el layout de 19 paginas por un cambio de estilo. Esta
capa toca solo lo que hay que tocar, y si algo sale mal se quita el
y el sitio vuelve exactamente a como estaba.
Tres cosas cambian aqui:
1. La tipografia deja de tener un interlineado fijo.
2. Las superficies se comportan como materiales, no como cajas.
3. El movimiento sale del CSS y pasa a los muelles (muelle.js).
===================================================================== */
/* ══════════════════════════════════════════════════════════════════
1 · TIPOGRAFIA
══════════════════════════════════════════════════════════════════
La regla: el interlineado y el espaciado entre letras cambian CON el
tamano, en direcciones opuestas.
Un titular grande necesita las lineas juntas (1.05) y las letras algo
apretadas (-.035em): a ese tamano el ojo ya ve la palabra entera y el
aire sobra. Un parrafo necesita lo contrario, lineas sueltas (1.6) y
letras a su anchura natural, porque ahi el ojo va saltando de linea y
necesita el carril.
Antes todo heredaba el mismo line-height del body. Por eso los
titulares grandes se veian desparramados: tecnicamente correctos,
pero sin la densidad que hace que un titular parezca un titular. */
:root {
/* Escala de movimiento, para que CSS y JS hablen de lo mismo.
Los muelles de verdad viven en muelle.js; esto es para las
transiciones simples que no merecen fisica (un hover). */
--sal-rapida: 180ms;
--sal-normal: 260ms;
/* Curva parecida a la de un muelle bien amortiguado: arranca decidido
y se asienta sin rebotar. */
--sal-curva: cubic-bezier(0.32, 0.72, 0, 1);
}
html { -webkit-text-size-adjust: 100%; }
body {
font-optical-sizing: auto;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, .h1 {
line-height: 1.045;
letter-spacing: -0.035em;
font-optical-sizing: auto;
}
h2, .h2 {
line-height: 1.11;
letter-spacing: -0.028em;
}
h3, .h3 {
line-height: 1.28;
letter-spacing: -0.017em;
}
h4, h5 {
line-height: 1.35;
letter-spacing: -0.011em;
}
/* El parrafo de entrada va mas suelto que el cuerpo: es lo primero que
se lee y conviene que respire. */
.lede {
line-height: 1.66;
letter-spacing: -0.006em;
}
p, li, .ans {
letter-spacing: -0.002em;
}
/* Por debajo de 14 px las letras empiezan a chocar entre si. Se les da
aire: es el otro extremo de la misma regla. */
.muted, small, .nota, .pie-nota, figcaption {
letter-spacing: 0.004em;
line-height: 1.55;
}
/* Las etiquetitas en mayusculas necesitan MUCHO aire o se leen como un
bloque solido. */
.kicker, .eyebrow, .tag-up {
letter-spacing: 0.11em;
}
/* Los numeros de las cifras: tabulares para que no bailen al contar.
Sin esto, un contador que sube cambia de anchura en cada fotograma y
el bloque entero tiembla. */
[data-cuenta], .stat-num, .price-num {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
/* ══════════════════════════════════════════════════════════════════
2 · MATERIALES
══════════════════════════════════════════════════════════════════
Una superficie translucida dice "hay algo detras" sin enseñarlo. Es
lo que hace que una barra fija se sienta como un cristal por encima
del contenido y no como una franja pegada.
El saturate() importa tanto como el blur: al desenfocar, los colores
de debajo se apagan, y subir la saturacion los devuelve. Sin el, el
cristal se ve gris y sucio. */
.nameplate {
background: rgba(246, 248, 252, 0.72);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
/* La linea de abajo se va: la sustituye el degradado de mas abajo. */
border-bottom: 0;
transition: background var(--sal-normal) var(--sal-curva);
}
/* ── El borde de scroll ────────────────────────────────────────────
Una linea dura de 1 px anuncia "aqui acaba la barra". Un degradado
que se desvanece deja que el contenido se pierda debajo del cristal,
que es lo que de verdad esta pasando.
Va en ::after y no en un div para no ensuciar el HTML. */
.nameplate::after {
content: '';
position: absolute;
left: 0; right: 0; top: 100%;
height: 22px;
pointer-events: none;
opacity: 0;
background: linear-gradient(
to bottom,
rgba(246, 248, 252, 0.85),
rgba(246, 248, 252, 0)
);
transition: opacity var(--sal-normal) var(--sal-curva);
}
.nameplate.is-scrolled {
background: rgba(246, 248, 252, 0.86);
box-shadow: none;
border-bottom: 0;
}
.nameplate.is-scrolled::after { opacity: 1; }
/* ── Sombras que saben donde estan ─────────────────────────────────
Una sombra sola es una mancha. Dos capas —una difusa y amplia que
simula la luz del ambiente, otra corta y cerrada que ancla el borde—
dan la sensacion de que el objeto esta APOYADO en algo.
La mas cerrada lleva menos opacidad de la que uno pondria a ojo: en
una superficie clara, una sombra fuerte se ve sucia. */
.card, .plan-card, .cap-card, .paso, .faq details, .demo-panel, .quote {
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 8px 24px -12px rgba(15, 23, 42, 0.10);
}
/* Al levantar un elemento la sombra se alarga y se aclara, como pasaria
de verdad al separarlo de la mesa. */
.plan-card:hover, .cap-card:hover, .quote:hover {
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 18px 44px -16px rgba(15, 23, 42, 0.16);
}
/* El boton principal lleva la sombra teñida de su propio color. Una
sombra gris debajo de un boton morado se ve como suciedad; teñida se
ve como luz. */
.btn-ox {
box-shadow:
0 1px 2px rgba(79, 70, 229, 0.20),
0 10px 26px -10px rgba(79, 70, 229, 0.45);
}
.btn-ox:hover {
box-shadow:
0 1px 2px rgba(79, 70, 229, 0.22),
0 18px 40px -12px rgba(79, 70, 229, 0.50);
}
/* ══════════════════════════════════════════════════════════════════
3 · MOVIMIENTO
══════════════════════════════════════════════════════════════════
Lo que se mueve por gesto lo mueven los muelles de muelle.js, no el
CSS. Aqui solo se apagan las transiciones que estorbarian, porque una
transicion CSS peleando con un muelle produce un arrastre que va con
retraso respecto al dedo. */
/* Solo transform y opacity: son las dos unicas propiedades que el
navegador puede animar sin volver a calcular el layout. Animar height
o top obliga a rehacer la pagina en cada fotograma. */
.nav-mobile,
html.js-anim .reveal,
.demo-panel,
.faq .ans-wrap {
transition: none !important;
will-change: transform, opacity;
}
/* ── El menu de movil, ahora una hoja que se agarra ──────────────── */
.nav-mobile {
display: flex !important; /* siempre en el arbol: se oculta con transform */
position: fixed;
left: 0; right: 0; top: var(--nav-h, 64px);
z-index: 899;
max-height: calc(100dvh - var(--nav-h, 64px));
overflow-y: auto;
overscroll-behavior: contain;
/* MATERIAL GRUESO, no fino. El peso del material dice que tipo de
capa es: una barra flotante puede ser un cristal delgado porque el
contenido de debajo sigue siendo el protagonista, pero un menu de
navegacion es una capa ESTRUCTURAL — mientras esta abierto, es lo
unico que importa. Con 0.86 de opacidad se leia el titular de la
portada a traves de los enlaces del menu, y eso no es elegante, es
ilegible. */
background: rgba(255, 255, 255, 0.97);
backdrop-filter: saturate(180%) blur(30px);
-webkit-backdrop-filter: saturate(180%) blur(30px);
border-top: 1px solid rgba(233, 236, 243, 0.9);
box-shadow: 0 22px 48px -20px rgba(15, 23, 42, 0.22);
/* Nace fuera de la pantalla. El JS lo trae con un muelle. */
transform: translate3d(0, -101%, 0);
/* touch-action none para que el navegador no se lleve el gesto
vertical antes de que lo veamos nosotros. */
touch-action: none;
}
/* Sin backdrop-filter, "translucido" es solo "transparente": no hay
desenfoque que separe una capa de otra, asi que se pasa a opaco. Mas
vale perder el efecto que perder la legibilidad. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-mobile { background: #ffffff; }
.nameplate { background: rgba(246, 248, 252, 0.98); }
}
/* El velo de detras. Se pinta aunque el menu este cerrado —con opacidad
cero— para que el navegador ya lo tenga compuesto y no de un tiron el
primer fotograma. */
.nav-velo {
position: fixed; inset: 0;
z-index: 898;
background: rgba(15, 23, 42, 0.38);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
will-change: opacity;
}
.nav-velo.is-on { pointer-events: auto; }
/* En pantalla ancha el menu de movil no existe. */
@media (min-width: 901px) {
.nav-mobile, .nav-velo { display: none !important; }
}
/* La manija: dice "esto se arrastra" sin escribirlo. */
.nav-mobile::before {
content: '';
display: block;
width: 38px; height: 4px;
margin: 2px auto 10px;
border-radius: 99px;
background: rgba(15, 23, 42, 0.18);
flex-shrink: 0;
}
/* ── El desplegable de preguntas ─────────────────────────────────── */
/* La altura la anima el JS sobre un envoltorio, no sobre el :
animar la altura del details hace que el navegador recalcule toda la
pagina en cada fotograma. */
.faq .ans-wrap {
overflow: hidden;
will-change: height;
}
/* La flecha gira con muelle. Se le quita la transicion de home.css y el
angulo lo pone el JS en --giro, fotograma a fotograma. */
.faq summary::after {
transition: none !important;
will-change: transform;
transform: rotate(var(--giro, 0deg));
}
.faq details[open] summary::after { transform: rotate(var(--giro, 0deg)); }
/* ── Aparicion al desplazar ──────────────────────────────────────── */
/* Ya no la mueve el CSS. Se deja el estado inicial y el JS hace el
resto; si el JS no llega, la red de seguridad de siempre las enciende
todas y no se pierde nada. */
html.js-anim .reveal {
opacity: 0;
transform: translate3d(0, 22px, 0);
}
html.js-anim .reveal.is-in {
opacity: 1;
transform: none;
}
/* Los retrasos escalonados los reparte el JS, no el CSS. */
.reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { transition-delay: 0s !important; }
/* ── El toque ────────────────────────────────────────────────────── */
/* El aviso sale al APRETAR, no al soltar. Es la diferencia entre una
interfaz que contesta y una que espera a ver si de verdad querias.
Son 100 ms de percepcion, pero se notan todos. */
.btn, .demo-tab, .faq summary, .nav-mobile a, .plan-card .btn {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation; /* mata el retraso de 300 ms del doble toque */
}
.btn:active { transform: scale(0.975); }
.demo-tab:active { transform: scale(0.99); }
.btn, .demo-tab {
transition: transform var(--sal-rapida) var(--sal-curva),
box-shadow var(--sal-normal) var(--sal-curva),
background-color var(--sal-rapida) var(--sal-curva),
border-color var(--sal-rapida) var(--sal-curva),
color var(--sal-rapida) var(--sal-curva);
}
/* El hover no debe pisar al :active. Un boton que se levanta mientras lo
aprietas se siente al reves. */
.btn-ox:hover, .btn-line:hover, .btn-ink:hover { transform: translateY(-1.5px); }
.btn-ox:active, .btn-line:active, .btn-ink:active { transform: scale(0.975); }
/* El foco de teclado se ve, y se ve igual en todo el sitio. */
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--ox, #4f46e5);
outline-offset: 2px;
border-radius: 6px;
}
/* ── Rejillas que no se salen ──────────────────────────────────────
`1fr` es `minmax(auto, 1fr)`, y ese `auto` se niega a bajar del ancho
minimo del contenido. Basta un texto largo sin espacios o un boton
ancho para que la columna empuje la pagina entera hacia la derecha.
Medido en recuperar.php a 375 px: la rejilla pedia 364 px dentro de
una ventana util de 360 y aparecian 4 px de scroll lateral. Poco,
pero en un movil se nota: la pagina se mueve al tocarla.
La version de escritorio de esa misma regla ya usaba minmax(0, …).
Solo se olvido en la de movil. */
.auth { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
@media (max-width: 940px) {
.auth { grid-template-columns: minmax(0, 1fr); }
}
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* ══════════════════════════════════════════════════════════════════
4 · CUANDO EL SISTEMA PIDE MENOS
══════════════════════════════════════════════════════════════════ */
/* Menos movimiento: se cambia el deslizamiento por una aparicion, y se
quitan los rebotes. No se quita la funcion, solo el viaje.
(muelle.js lee la misma preferencia y salta al valor final.) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
html.js-anim .reveal { opacity: 1; transform: none; }
.nav-mobile { transition: opacity 200ms ease !important; }
.btn:active, .demo-tab:active { transform: none; }
}
/* Menos transparencia: el cristal pasa a ser una superficie solida.
Quien activa esto suele hacerlo porque el desenfoque le dificulta
leer, asi que aqui la respuesta correcta es opacidad total. */
@media (prefers-reduced-transparency: reduce) {
.nameplate,
.nav-mobile {
background: #ffffff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.nameplate.is-scrolled { border-bottom: 1px solid var(--rule) !important; }
.nav-velo { backdrop-filter: none !important; background: rgba(15, 23, 42, 0.45); }
}
/* Mas contraste: se refuerzan los bordes que el cristal difumina. */
@media (prefers-contrast: more) {
.nameplate { background: #ffffff; backdrop-filter: none; border-bottom: 1px solid var(--rule-3); }
.card, .plan-card, .cap-card, .faq details { border-color: var(--rule-3); }
}