/* ─────── base.css ─────── */
/* ============================================================================
EL RETO — Sistema de estilos de la web pública (estilfitness.es/el-reto)
----------------------------------------------------------------------------
DOCUMENTO CENTRAL DE ESTILOS. Todo el aspecto de la landing se decide aquí:
color, tipografía, ritmo de espacios, tarjetas, botones, imágenes, campos.
El HTML solo coloca clases; no lleva medidas ni colores sueltos.
Replica el lenguaje visual de la app El Reto v2 (app/globals.css y
app/landing/page.tsx): negro, verde #92bc1f y tarjetas muy redondeadas
sobre zinc-950. Tipografía: Inter para TODO, siempre en caja normal —
nada de versalitas, mayúsculas sostenidas ni letra espaciada.
Índice
1. Tokens (color, tipografía, espacio, forma)
2. Base y reset
3. Escala tipográfica
4. Ritmo de secciones y contenedores
5. Fondos: orbes y rejilla
6. Componentes: botones, chips, tarjetas, listas, pasos, stats
7. Imágenes y medios (ratios fijos, tratamiento, mockup de móvil)
8. Precio, FAQ, formulario
9. Navegación y CTA fijo
10. Animación de entrada
========================================================================== */
/* ─── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root {
/* Marca */
--primary: #92bc1f;
--primary-bright: #a9d92a;
--primary-soft: rgba(146, 188, 31, 0.12);
--primary-line: rgba(146, 188, 31, 0.3);
--primary-fg: #0b0f02;
/* Superficies (escala zinc de la app) */
--bg: #000000;
--bg-raise: #09090b;
--surface: rgba(9, 9, 11, 0.6);
--surface-2: rgba(255, 255, 255, 0.03);
--surface-3: rgba(255, 255, 255, 0.06);
--border: rgba(255, 255, 255, 0.07);
--border-strong: rgba(255, 255, 255, 0.14);
/* Texto */
--fg: #ffffff;
--fg-soft: #d4d4d8;
--fg-muted: #a1a1aa;
--fg-faint: #71717a;
--danger: #f87171;
/* Tipografía */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: var(--font-sans);
/* Ritmo de espacio (una sola escala; nada de márgenes a ojo) */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
/* Aire vertical de cada sección y separación cabecera→contenido.
Estos dos números mandan sobre el ritmo de TODA la web: subirlos o
bajarlos separa o junta las secciones de golpe. */
--section-y: clamp(2.5rem, 5vw, 4.5rem);
--section-gap: clamp(1.75rem, 3.5vw, 3rem);
/* Forma */
--radius-xl: 2.5rem;
--radius-lg: 2rem;
--radius: 1.225rem;
--radius-sm: 0.85rem;
--radius-pill: 999px;
/* Sombra */
--shadow-card: 0 24px 60px -32px rgba(0, 0, 0, 0.9);
--shadow-cta: 0 12px 34px -10px rgba(146, 188, 31, 0.45);
--shadow-media: 0 40px 80px -32px rgba(0, 0, 0, 0.95);
/* Layout */
--wrap: 74rem;
--wrap-narrow: 44rem;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
}
/* ─── 2. BASE ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 6rem;
-webkit-text-size-adjust: 100%;
/* Controles nativos (barras de scroll, calendarios, listas) en oscuro. */
color-scheme: dark;
/* El negro base vive aquí para que la capa de profundidad (body::before)
quede por encima y se vea. */
background: var(--bg);
}
body {
margin: 0;
/* Ancla del fondo único: la capa de rejilla (body::before) se estira a toda
la altura de la página, no solo a la pantalla visible. */
position: relative;
background: transparent;
color: var(--fg);
font-family: var(--font-sans);
font-weight: 300;
letter-spacing: -0.02em;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.035em;
}
::selection { background: var(--primary); color: var(--primary-fg); }
/* Profundidad del fondo. El negro plano se ve opaco y muerto: esta capa fija
pone dos focos muy suaves (uno verde arriba a la izquierda, uno frío a la
derecha) y un degradado hacia el centro, para que la página tenga aire.
Va detrás de todo y no se mueve con el scroll. */
body::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
/* Cuadrícula finísima, como papel milimetrado, de arriba abajo de la web */
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
/* Manchas de verde difuminadas, repartidas a lo largo de la página */
radial-gradient(66rem 46rem at 8% 2%, rgba(146, 188, 31, 0.2), transparent 64%),
radial-gradient(60rem 44rem at 92% 15%, rgba(146, 188, 31, 0.15), transparent 64%),
radial-gradient(58rem 42rem at 45% 28%, rgba(146, 188, 31, 0.1), transparent 64%),
radial-gradient(64rem 46rem at 4% 41%, rgba(146, 188, 31, 0.15), transparent 64%),
radial-gradient(60rem 44rem at 96% 54%, rgba(146, 188, 31, 0.14), transparent 64%),
radial-gradient(58rem 42rem at 50% 68%, rgba(146, 188, 31, 0.1), transparent 64%),
radial-gradient(66rem 46rem at 12% 80%, rgba(146, 188, 31, 0.15), transparent 64%),
radial-gradient(60rem 44rem at 90% 94%, rgba(146, 188, 31, 0.13), transparent 64%),
/* Un velo verde muy flojo por debajo de todo, para que el negro no se
quede plano en las zonas donde no cae ninguna mancha. */
linear-gradient(180deg, rgba(146, 188, 31, 0.045), rgba(146, 188, 31, 0.025)),
#000;
background-size:
4rem 4rem, 4rem 4rem,
auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
/* Los laterales se apagan para que la rejilla no choque contra el borde. */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Grano finísimo sobre toda la página. En negro puro la pantalla se ve muerta;
el ruido le da cuerpo sin ensuciar el color. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml;utf8,");
}
/* ─── 3. ESCALA TIPOGRÁFICA ──────────────────────────────────────────────── */
/* Rótulo de sección: "Tecnología" */
.txt-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--primary);
}
.txt-eyebrow::before {
content: "";
width: 1.75rem;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor);
flex: 0 0 auto;
}
.section-head .txt-eyebrow::after {
content: "";
width: 1.75rem;
height: 1px;
background: linear-gradient(90deg, currentColor, transparent);
flex: 0 0 auto;
}
.txt-eyebrow--muted { color: var(--fg-muted); }
.txt-display {
font-size: clamp(2.75rem, 8.5vw, 6rem);
line-height: 0.98;
letter-spacing: -0.045em;
/* Los titulares grandes van con un degradado muy leve: da profundidad y
evita el blanco plano de plantilla. */
background: linear-gradient(180deg, #ffffff 30%, #c9c9d1 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.txt-display .accent {
background: linear-gradient(180deg, var(--primary-bright), var(--primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.txt-h2 { font-size: clamp(1.9rem, 4.4vw, 3.25rem); line-height: 1.05; }
.txt-h3 { font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.15; }
.txt-h4 {
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.015em;
color: var(--fg);
}
/* Título de tarjeta */
.txt-cardtitle {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--fg);
}
.txt-lead {
font-size: clamp(1rem, 1.5vw, 1.125rem);
font-weight: 300;
line-height: 1.65;
color: var(--fg-muted);
}
.txt-body {
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.75;
color: var(--fg-muted);
}
.txt-small {
font-size: 0.8125rem;
font-weight: 300;
line-height: 1.65;
color: var(--fg-muted);
}
.accent { color: var(--primary); }
.strong { color: var(--fg); font-weight: 600; }
.center { text-align: center; }
.balance { text-wrap: balance; }
.measure { max-width: 46ch; }
.measure-narrow { max-width: 34ch; }
/* ─── 4. RITMO DE SECCIONES ──────────────────────────────────────────────── */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
position: relative;
z-index: 1;
}
.wrap--narrow { max-width: var(--wrap-narrow); }
/* Un poco más ancho de lo normal: para la sección de la app, donde los tres
móviles y las tarjetas necesitan sitio. */
.wrap--wide { max-width: 84rem; }
.section {
position: relative;
padding-block: var(--section-y);
/* Solo se recorta a lo ancho (para que nada saque barra horizontal). A lo
alto NO: si se recorta, los resplandores difuminados se cortan en seco
justo en el borde y se ve una raya recta de sección a sección. */
overflow-x: clip;
overflow-y: visible;
}
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
/* El fondo es UNO para toda la página (body::before). Aquí no se pinta nada:
ninguna sección lleva color propio ni filete de separación, para que no se
vea la web como una pila de bloques pegados. Lo que separa una sección de
otra es el aire, no una línea. */
/* Cabecera de sección: rótulo + titular + entradilla, siempre igual */
.section-head {
max-width: 46rem;
margin-inline: auto;
margin-bottom: var(--section-gap);
text-align: center;
display: grid;
gap: var(--s-4);
justify-items: center;
}
/* Cabecera metida dentro de una columna: ni centrada ni con margen propio,
porque el hueco lo pone ya la pila que la contiene. */
.section-head--stack {
max-width: none;
margin: 0;
text-align: left;
justify-items: start;
gap: var(--s-3);
}
/* Alineada a la izquierda, la rayita va delante, igual que en el rótulo de la
foto de al lado. */
.section-head--stack .txt-eyebrow::after { display: none; }
/* Pilas y rejillas con ritmo constante */
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.grid { display: grid; gap: var(--s-4); }
.grid--lg { gap: var(--s-5); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.row--between { justify-content: space-between; align-items: center; }
.row--center { justify-content: center; }
@media (min-width: 640px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2.5rem, 5vw, 5rem);
}
.grid-split--media {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
/* Las dos columnas empiezan arriba: cuando el texto lleva su propio título,
centrarlo lo dejaba flotando a media altura de la foto. */
.grid-split--top { align-items: start; }
.grid-split--wide-left {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
/* Un retrato vertical a todo el ancho de su columna se come la sección: con
proporción 3/4, 690 px de ancho salen 920 de alto, contra 486 del texto de
al lado, y queda un palmo de negro debajo del párrafo. Aquí la columna de
la foto cede sitio y además la foto tiene tope de ancho, para que las dos
columnas midan parecido. */
.grid-split--retrato {
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
}
.grid-split--retrato .media { max-width: 26rem; }
/* Pantallas de la app a la izquierda, lo que hace a la derecha. Los tres
móviles necesitan sitio, así que su columna manda. */
.grid-split--showcase {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
align-items: center;
gap: clamp(2rem, 3.5vw, 3.5rem);
}
.order-first-lg { order: -1; }
}
.rule {
height: 1px;
width: 100%;
border: 0;
margin: 0;
background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
/* ─── 5. FONDOS ──────────────────────────────────────────────────────────── */
/* Ya no hay fondos por sección: todo el color y la rejilla salen de una sola
capa (body::before, arriba del todo del fichero). Si quieres cambiar el
fondo de la web, se toca AHÍ y en ningún otro sitio. */
/* ─── 6. COMPONENTES ─────────────────────────────────────────────────────── */
/* Iconos: SVG incrustados en el propio HTML (sprite ), sin CDN.
Heredan el color del texto; el tamaño lo fija cada componente. */
.ico {
width: 1.05em;
height: 1.05em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex: 0 0 auto;
}
/* Chip */
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 0.45rem 0.9rem;
border: 1px solid var(--border);
background: var(--surface-2);
border-radius: var(--radius-pill);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--fg-muted);
backdrop-filter: blur(10px);
}
.chip--primary { border-color: var(--primary-line); color: var(--primary); background: var(--primary-soft); }
.chip svg { width: 13px; height: 13px; }
.chip .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 0 4px var(--primary-soft);
}
/* Botones: píldora con chip de icono, como en la app */
.btn {
display: inline-flex;
align-items: center;
gap: var(--s-3);
padding: 0.4rem 0.4rem 0.4rem 1.4rem;
border-radius: var(--radius-pill);
border: 1px solid transparent;
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: -0.02em;
cursor: pointer;
transition: transform 0.25s ease, filter 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
border-radius: var(--radius-pill);
flex: 0 0 auto;
}
.btn__icon svg { width: 15px; height: 15px; }
.btn:active { transform: scale(0.98); }
.btn--primary {
background: linear-gradient(180deg, var(--primary-bright), var(--primary));
color: var(--primary-fg);
box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--primary .btn__icon { background: var(--primary-fg); color: var(--primary); }
.btn--primary:hover { filter: brightness(1.07); transform: translateY(-2px); }
/* Botón secundario: blanco con letra negra. Mismo tamaño y forma que el
verde, para que los dos pesen igual en la portada. */
.btn--ghost {
background: #fff;
border-color: #fff;
color: #000;
}
.btn--ghost .btn__icon { background: #000; color: #fff; }
.btn--ghost:hover { background: #e9e9ec; border-color: #e9e9ec; }
.btn--block { width: 100%; justify-content: space-between; }
/* Tarjetas */
.card {
position: relative;
padding: clamp(1.5rem, 2.6vw, 2.25rem);
border: 1px solid var(--border);
/* Degradado sutil de arriba abajo: la tarjeta recibe luz cenital en vez de
ser un bloque de color plano. */
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 45%, rgba(255, 255, 255, 0.02)),
var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.07);
backdrop-filter: blur(14px);
overflow: hidden;
}
/* Filo de luz superior: el detalle que separa una tarjeta "de plantilla" de
una con acabado. Se intensifica al pasar por encima. */
.card::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
opacity: 0.6;
transition: opacity 0.4s ease, left 0.4s ease, right 0.4s ease;
pointer-events: none;
}
.card--hover:hover::before { opacity: 1; left: 4%; right: 4%; }
.card > * + * { margin-top: var(--s-4); }
.card--flat { background: var(--surface-2); box-shadow: none; backdrop-filter: none; }
.card--pad-lg { padding: clamp(2rem, 4vw, 3.25rem); }
/* Tarjeta pequeña: para columnas estrechas, donde caben varias seguidas. */
.card--compact { padding: clamp(1.1rem, 1.8vw, 1.4rem); }
.card--compact .txt-cardtitle { font-size: 1.0625rem; }
.card--compact .txt-body { font-size: 0.9375rem; line-height: 1.6; }
.card--compact .icon-badge { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; }
.card--compact .icon-badge .ico { width: 1.05rem; height: 1.05rem; }
.card--bare { padding: 0; }
.card--hover { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease; }
.card--hover:hover {
transform: translateY(-5px);
border-color: rgba(146, 188, 31, 0.35);
box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 40px -18px rgba(146, 188, 31, 0.55);
}
.card--feature::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(120% 80% at 50% 0%, var(--primary-soft), transparent 60%);
opacity: 0;
transition: opacity 0.4s ease;
}
.card--feature:hover::after { opacity: 1; }
/* Icono en cuadro */
.icon-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius);
background:
linear-gradient(180deg, rgba(146, 188, 31, 0.28), rgba(146, 188, 31, 0.06)),
rgba(9, 9, 11, 0.9);
border: 1px solid var(--primary-line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px -12px rgba(146, 188, 31, 0.7);
color: var(--primary-bright);
flex: 0 0 auto;
}
.icon-badge svg { width: 21px; height: 21px; }
.icon-badge--lg { width: 3.75rem; height: 3.75rem; border-radius: var(--radius); }
.icon-badge--lg svg { width: 26px; height: 26px; }
.icon-badge--plain { background: var(--surface-3); border-color: var(--border); color: var(--fg-soft); }
/* Lista de checks */
.check-list { display: grid; gap: var(--s-3); }
.check-item {
display: flex;
align-items: flex-start;
gap: var(--s-3);
font-size: 0.875rem;
font-weight: 300;
line-height: 1.6;
color: var(--fg-muted);
}
.check-item svg { width: 17px; height: 17px; color: var(--primary); flex: 0 0 auto; margin-top: 3px; }
.check-item b { color: var(--fg); font-weight: 600; }
/* Píldora de característica (mono, como los features de la app) */
.feature-pill {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 0.7rem 0.9rem;
border: 1px solid var(--border);
background: var(--bg-raise);
border-radius: var(--radius);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--fg-soft);
}
.feature-pill .tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary);
flex: 0 0 auto;
}
.feature-pill .tick svg { width: 12px; height: 12px; }
/* Paso numerado */
.step { display: flex; gap: var(--s-4); align-items: flex-start; }
.step-num {
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0;
color: var(--primary);
border: 1px solid var(--primary-line);
background: var(--primary-soft);
border-radius: var(--radius-pill);
padding: 0.45rem 0.75rem;
flex: 0 0 auto;
}
/* El número del paso, repetido en grande y muy tenue al fondo de la tarjeta:
marca el orden de un vistazo sin robar protagonismo al texto. */
.card--step { overflow: hidden; }
.card--step::after {
content: attr(data-step);
position: absolute;
right: -0.5rem;
bottom: -2.5rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 8rem;
line-height: 1;
letter-spacing: -0.06em;
color: rgba(255, 255, 255, 0.035);
pointer-events: none;
}
/* Banda de métricas */
.stat-value {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.75rem, 6.5vw, 4.5rem);
line-height: 1;
letter-spacing: -0.05em;
background: linear-gradient(180deg, #ffffff, #9a9aa3);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat-value.accent {
background: linear-gradient(180deg, var(--primary-bright), var(--primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Cita */
.quote {
border-left: 2px solid var(--primary);
padding-left: var(--s-5);
font-family: var(--font-display);
font-size: clamp(1rem, 1.8vw, 1.25rem);
font-weight: 600;
font-style: italic;
line-height: 1.5;
letter-spacing: -0.02em;
color: var(--fg-soft);
}
/* Aviso lateral */
.note {
display: flex;
gap: var(--s-3);
align-items: flex-start;
border: 1px solid var(--primary-line);
background: var(--primary-soft);
border-radius: var(--radius);
padding: var(--s-4);
font-size: 0.8125rem;
font-weight: 300;
line-height: 1.6;
color: var(--fg-soft);
text-align: left;
}
.note svg { width: 17px; height: 17px; color: var(--primary); flex: 0 0 auto; margin-top: 2px; }
/* Marquesina */
/* ─── 7. IMÁGENES Y MEDIOS ───────────────────────────────────────────────
Toda imagen va dentro de un .media con proporción fija: nunca se deforma,
nunca salta el layout al cargar y todas las tarjetas miden lo mismo. */
.media {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--bg-raise);
border: 1px solid var(--border);
}
.media > img,
.media > video,
.media > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--9x16 { aspect-ratio: 9 / 16; } /* vertical, como los reels */
.media--hero { aspect-ratio: 4 / 5; }
@media (min-width: 960px) { .media--hero { aspect-ratio: 3 / 4; } }
/* Tratamiento: las fotos de origen son heterogéneas (WhatsApp, gimnasio,
años distintos). Un leve desaturado + contraste las unifica y el velo
inferior deja legible cualquier texto encima. */
.media__img--treated { filter: grayscale(0.18) contrast(1.06) saturate(1.05); }
.media__veil {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 75%);
pointer-events: none;
}
.media__veil--side {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 100%);
}
.media__caption {
position: absolute;
left: var(--s-4);
right: var(--s-4);
bottom: var(--s-4);
z-index: 2;
}
/* Para collages antes/después: la imagen se ve entera, sin recortar cabezas.
El hueco lo rellena el fondo de la tarjeta, así todas siguen midiendo igual. */
.media--fit > img { object-fit: contain; background: var(--bg-raise); }
.media--zoom > img { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.media--zoom:hover > img { transform: scale(1.05); }
.media--glow { box-shadow: var(--shadow-media); }
/* Marco de móvil (mockup de la app, hecho solo con CSS) */
/* Marco del móvil. El borde no es gris plano: es un degradado tipo titanio,
más claro donde le daría la luz, para que parezca un aparato y no un
rectángulo redondeado. */
.phone {
position: relative;
width: min(24rem, 84vw);
margin-inline: auto;
border-radius: 3.25rem;
border: 10px solid transparent;
padding: 0;
background:
linear-gradient(#050505, #050505) padding-box,
linear-gradient(155deg, #55555e 0%, #1b1b20 22%, #0e0e11 48%, #34343c 72%, #101014 100%) border-box;
box-shadow:
var(--shadow-media),
0 2px 2px rgba(255, 255, 255, 0.06),
0 0 0 1px rgba(0, 0, 0, 0.9),
0 0 90px -30px rgba(146, 188, 31, 0.28);
}
/* Isla dinámica, con el punto de la cámara marcado a la derecha. */
.phone::before {
content: "";
position: absolute;
top: 0.7rem;
left: 50%;
transform: translateX(-50%);
width: 6.25rem;
height: 1.6rem;
border-radius: var(--radius-pill);
background: #000;
box-shadow:
inset -1.35rem 0 0 -0.52rem #0e0e12,
inset -1.35rem 0 0 -0.62rem rgba(80, 110, 160, 0.55);
z-index: 8;
}
/* Barra inferior de gestos */
.phone::after {
content: "";
position: absolute;
bottom: 0.6rem;
left: 50%;
transform: translateX(-50%);
width: 36%;
height: 0.3rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.28);
z-index: 8;
}
.phone__screen {
position: relative;
aspect-ratio: 9 / 19.5;
border-radius: 2.6rem;
background: #000;
padding: 3.1rem 1.15rem 1.1rem;
display: flex;
flex-direction: column;
gap: var(--s-4);
overflow: hidden;
}
/* Reflejo del cristal: una diagonal de luz muy floja sobre la pantalla.
Es lo que separa "pantalla encendida" de "recuadro con dibujos". */
.phone__screen::after {
content: "";
position: absolute;
inset: 0;
z-index: 7;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(150deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 38%);
}
/* Hora y estado, como en un móvil de verdad */
.phone__status {
position: absolute;
top: 1rem;
left: 1.5rem;
right: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8125rem;
font-weight: 600;
color: var(--fg);
z-index: 5;
}
.phone__status-icons { display: flex; gap: 0.35rem; align-items: center; }
.phone__status-icons .ico { width: 0.95rem; height: 0.95rem; }
/* Rótulo suelto: se usa también en las tarjetas flotantes del hero. */
.phone__kicker {
font-size: 0.8125rem;
font-weight: 400;
color: var(--fg-muted);
}
/* Composición del hero: texto a la izquierda, móvil a la derecha con una
tarjeta flotante encima (solo en pantallas grandes, donde hay sitio). */
.hero {
padding-top: clamp(3rem, 7vw, 5.5rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero__grid {
display: grid;
gap: clamp(3rem, 6vw, 5rem);
align-items: center;
}
@media (min-width: 960px) {
.hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.hero__visual { position: relative; }
.hero__glow {
position: absolute;
inset: 6% -14% -10% -14%;
background:
radial-gradient(55% 50% at 50% 42%, rgba(146, 188, 31, 0.3), transparent 70%),
radial-gradient(40% 35% at 70% 75%, rgba(255, 255, 255, 0.06), transparent 70%);
filter: blur(55px);
pointer-events: none;
}
/* El móvil y sus tarjetas flotantes comparten caja: así las tarjetas quedan
FUERA del teléfono (a los lados) y nunca tapan la pantalla. */
.hero__device {
position: relative;
width: min(24rem, 84vw);
margin-inline: auto;
/* La mitad de abajo del móvil está desvanecida: sin este tirón hacia arriba
quedaría un hueco muerto entre el hero y la sección siguiente. */
margin-bottom: clamp(-8rem, -9vw, -3rem);
}
/* En el hero el móvil no se ve entero: se deshace hacia la mitad, como si la
pantalla se disolviera en el fondo. Da sensación de que hay más app debajo y
deja el peso visual en el texto. Solo aquí: los tres móviles de la sección de
la app se ven completos. */
.hero__device .phone {
-webkit-mask-image: linear-gradient(
180deg,
#000 44%,
rgba(0, 0, 0, 0.82) 60%,
rgba(0, 0, 0, 0.32) 78%,
transparent 94%
);
mask-image: linear-gradient(
180deg,
#000 44%,
rgba(0, 0, 0, 0.82) 60%,
rgba(0, 0, 0, 0.32) 78%,
transparent 94%
);
}
.float-card {
display: none;
position: absolute;
z-index: 3;
width: 13.5rem;
padding: var(--s-4);
border: 1px solid var(--border);
background: rgba(9, 9, 11, 0.94);
border-radius: var(--radius);
box-shadow: var(--shadow-media);
backdrop-filter: blur(14px);
}
@media (min-width: 1100px) { .float-card { display: block; } }
/* Las dos tarjetas se quedan en la mitad de arriba: abajo el móvil ya se ha
desvanecido y flotarían sobre el vacío. */
.float-card--left { right: calc(100% - 1.75rem); top: 42%; }
.float-card--right { left: calc(100% - 1.75rem); top: 12%; }
/* Las dos tarjetas son avisos de la app, como los que saltan de verdad: un
icono, la buena noticia y el detalle debajo. */
.float-card__head {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--fg);
}
.float-card__icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
background: rgba(146, 188, 31, 0.14);
color: var(--primary);
}
.float-card__icon .ico { width: 0.9rem; height: 0.9rem; }
.float-card__text {
margin-top: 0.5rem;
font-size: 0.75rem;
font-weight: 300;
line-height: 1.5;
color: var(--fg-muted);
}
.float-card__text b { font-weight: 600; color: var(--fg); }
/* Baraja de páginas del informe */
.report-stack {
position: relative;
width: min(21rem, 80vw);
aspect-ratio: 3 / 4;
margin-inline: auto;
cursor: pointer;
perspective: 1200px;
}
.report-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-raise);
box-shadow: var(--shadow-media);
transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s ease;
will-change: transform, opacity;
}
.report-card.is-out {
transform: translateX(115%) rotate(16deg) scale(0.92) !important;
opacity: 0;
pointer-events: none;
}
/* Carrusel de casos: scroll horizontal nativo con anclaje (sin librerías, así
la sección no depende de ningún CDN para verse bien). */
.rail {
display: flex;
gap: var(--s-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: var(--s-3);
-ms-overflow-style: none;
scrollbar-width: none;
mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * {
flex: 0 0 min(78%, 20rem);
scroll-snap-align: center;
}
@media (min-width: 768px) { .rail > * { flex-basis: min(42%, 22rem); } }
@media (min-width: 1180px) { .rail > * { flex-basis: 22rem; } }
.rail-nav { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-5); }
.rail-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--fg-soft);
cursor: pointer;
transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.rail-btn:hover { border-color: var(--primary-line); color: var(--primary); background: var(--primary-soft); }
.rail-btn .ico { width: 1.1rem; height: 1.1rem; }
.rail-btn--prev .ico { transform: rotate(180deg); }
.rail-btn--next .ico { transform: none; }
/* ─── 8. PRECIO, FAQ, FORMULARIO ─────────────────────────────────────────── */
/* Interruptor mensual / anual */
.toggle {
position: relative;
display: inline-flex;
padding: 0.3rem;
border: 1px solid var(--border);
/* Negro liso, no el gris translúcido: así la pastilla verde destaca y el
conmutador no compite con la tarjeta de precio que hay debajo. */
background: #000;
border-radius: var(--radius-pill);
gap: 0.25rem;
}
/* La pastilla verde se desplaza entre las dos opciones en vez de aparecer y
desaparecer: el cambio de plan se sigue con la vista. */
.toggle__thumb {
position: absolute;
top: 0.3rem;
bottom: 0.3rem;
left: 0;
width: 0;
border-radius: var(--radius-pill);
background: var(--primary);
box-shadow: var(--shadow-cta);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.toggle button {
border: 0;
cursor: pointer;
background: transparent;
color: var(--fg-muted);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: -0.015em;
padding: 0.6rem 1.2rem;
border-radius: var(--radius-pill);
transition: background-color 0.25s ease, color 0.25s ease;
}
.toggle button { position: relative; z-index: 1; }
.toggle button[aria-selected="true"] { color: var(--primary-fg); }
/* Tarjeta de precio: borde y halo verdes para que sea el foco de la sección. */
.price-card {
position: relative;
isolation: isolate;
border-color: var(--primary-line);
}
/* Borde degradado: se pinta un marco de 1px con máscara, no un borde plano. */
.price-card::before,
.versus__col--good::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, rgba(146, 188, 31, 0.85), rgba(146, 188, 31, 0.05) 45%, rgba(255, 255, 255, 0.12));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: 1;
left: 0; right: 0; top: 0;
}
.price-card > *, .versus__col--good > * { position: relative; z-index: 1; }
/* De lado a lado no parecía una carta de precio, parecía una franja: el importe
centrado a 1.300 px del borde y seis líneas sueltas debajo. Se le pone ancho
de tarjeta y se centra. El halo ya es más estrecho que esto, así que sigue
cuadrando detrás. */
@media (min-width: 700px) {
.price-card { max-width: 34rem; margin-inline: auto; }
}
.price-halo {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -45%);
width: min(38rem, 90%);
height: 18rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(146, 188, 31, 0.22), transparent 65%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
.price-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--s-3);
}
.price-amount {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(3.25rem, 9vw, 4.75rem);
line-height: 1;
letter-spacing: -0.045em;
}
.price-period {
font-size: 1.125rem;
font-weight: 500;
color: var(--fg-soft);
}
.price-note {
font-size: 0.9375rem;
font-weight: 400;
color: var(--fg-muted);
}
.price-badge {
position: absolute;
top: var(--s-5);
right: var(--s-5);
z-index: 2;
}
/* FAQ */
/* Dudas frecuentes: sin caja ni fondo. Texto directo sobre la página,
separado solo por un filete. Así no compite con las secciones de tarjetas
que tiene encima y debajo. */
.faq-item {
border: 0;
border-bottom: 1px solid var(--border);
border-radius: 0;
background: none;
padding: var(--s-5) 0;
}
.faq-item:first-of-type { border-top: 1px solid var(--border); }
.faq-item summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--fg);
transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
.faq-item summary:hover { color: var(--primary); }
}
.faq-item summary::after {
content: "+";
font-size: 1.5rem;
line-height: 1;
color: var(--primary);
flex: 0 0 auto;
transition: transform 0.25s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
margin-top: var(--s-4);
max-width: 44rem;
font-size: 1rem;
line-height: 1.7;
color: var(--fg-muted);
}
/* ─── ACORDEÓN DE LA APP ─────────────────────────────────────────────────
Tres bloques plegados, uno abierto cada vez. La cabecera siempre visible:
se ve de un vistazo qué hace la app y el detalle solo si te interesa. */
.acc { display: grid; gap: var(--s-3); }
/* Fondo negro macizo, no translúcido: la tarjeta se recorta contra el fondo
de la web en vez de dejarlo pasar. */
.acc-item {
border: 1px solid var(--border);
border-radius: var(--radius);
background: #000;
padding: var(--s-4) var(--s-5);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.acc-item[open] {
border-color: var(--primary-line);
box-shadow: 0 0 40px -20px rgba(146, 188, 31, 0.6);
}
@media (hover: hover) {
.acc-item:not([open]):hover { border-color: var(--border-strong); }
}
.acc-item summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: var(--s-3);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item__title {
flex: 1;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--fg);
}
/* Signo de abrir y cerrar, al final de la fila */
.acc-item summary::after {
content: "+";
font-size: 1.35rem;
line-height: 1;
color: var(--primary);
flex: 0 0 auto;
}
.acc-item[open] summary::after { content: "−"; }
.acc-item .icon-badge { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; }
.acc-item .icon-badge .ico { width: 1.05rem; height: 1.05rem; }
.acc-item__text {
margin-top: var(--s-3);
padding-left: calc(2.25rem + var(--s-3));
font-size: 0.9375rem;
font-weight: 300;
line-height: 1.65;
color: var(--fg-muted);
}
.acc-item[open] .acc-item__text { animation: rv-acc 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes rv-acc {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* ─── VENTANA DEL FORMULARIO ─────────────────────────────────────────────
El formulario se abre encima de la página desde cualquier botón, en vez de
ocupar una sección al final. Usa