/* ============================================================
NFE — No Fear English
PRESUPUESTO DE RENDIMIENTO
Durante el scroll el navegador solo debe COMPONER, nunca rasterizar ni
repintar. De ahí las reglas de esta hoja:
· Ningún filter animado sobre texto. Rasterizar tipografía display con
sombras grandes cuesta decenas de milisegundos. El desenfoque de
movimiento solo toca las tres imágenes de personajes.
· Ningún `scale` animado. Escalar una capa obliga a rerasterizarla para
que no salga pixelada. Solo se traslada.
· Sombras de texto de una sola capa y radio contenido.
· Capas translúcidas a pantalla completa: tres en total (el campo y dos
manchas). El grano va incrustado en el fondo del campo, no como
elemento propio: una capa menos que componer en cada frame.
· backdrop-filter solo en el header y los dos paneles.
· Sin mix-blend-mode: obliga al compositor a releer el fondo.
· Las animaciones de ambiente son de `transform`/`opacity` puras, así
que corren en el hilo del compositor y no compiten con el scroll.
============================================================ */
/* `block` en vez de `swap`.
Con `swap` el navegador pinta primero con la tipografía de reserva y
cambia a la definitiva al terminar de descargarla. Como las métricas no
coinciden ni de lejos —Impact frente a Rubik Spray Paint—, el titular se
recomponía entero al segundo de cargar: ese era el «salto raro».
Con `block` el texto espera brevemente y aparece ya con la tipografía
correcta. Ambas van precargadas en el y son locales, así que la
espera es de milisegundos. */
@font-face {
font-family: "Rubik Spray Paint";
src: url("assets/rubik-spray-paint.woff2") format("woff2");
font-style: normal; font-weight: 400; font-display: block;
}
@font-face {
font-family: "Patrick Hand";
/* subset latino primero (25 K); el .ttf completo queda de reserva */
src: url("assets/patrick-hand.woff") format("woff"),
url("assets/patrick-hand.ttf") format("truetype");
font-style: normal; font-weight: 400; font-display: block;
}
/* ───────────────────────── TOKENS ───────────────────────── */
:root {
--font-display: "Rubik Spray Paint", "Impact", sans-serif;
--font-body: "Patrick Hand", "Comic Sans MS", cursive;
--deep-0: #05021a;
--deep-1: #0b0733;
--blue: #3518b8;
--blue-lit: #5b32ff;
--lime: #d9ff45;
--white: #fff;
--txt-1: rgba(255, 255, 255, .97);
--txt-2: rgba(255, 255, 255, .8);
--txt-3: rgba(255, 255, 255, .58);
/* cristal simulado: capas de degradado, sin coste de composición */
--glass-bg:
linear-gradient(152deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045) 46%, rgba(255, 255, 255, .015)),
rgba(18, 9, 66, .34);
--glass-shadow:
0 10px 26px -12px rgba(2, 0, 22, .55),
0 34px 70px -28px rgba(2, 0, 22, .7),
0 80px 130px -60px rgba(2, 0, 22, .88);
--r-lg: 34px;
--r-md: 26px;
--r-sm: 16px;
--page: min(1180px, calc(100% - 48px));
--ease: cubic-bezier(.22, .68, 0, 1);
}
/* ───────────────────────── BASE ───────────────────────── */
* { box-sizing: border-box; font-synthesis: none; }
/* `overscroll-behavior-y: none` corta el rebote elástico al llegar arriba
o abajo. Con un header y un fondo fijos, ese tirón despega la cápsula del
contenido y deja ver el hueco: la composición se rompe justo en el punto
donde debería verse entera. */
html {
scroll-behavior: smooth;
scroll-padding-top: 112px;
-webkit-text-size-adjust: 100%;
/* también en X: sin esto, en móvil el gesto lateral arrastraba la página
y dejaba ver la franja de fondo a los lados */
overscroll-behavior: none;
overflow-x: clip;
}
body { overscroll-behavior: none; }
/* con JS el desplazamiento lo interpola el bucle, en el mismo frame que
las animaciones; el nativo emitía eventos a destiempo y saltaba */
html.js { scroll-behavior: auto; }
body {
margin: 0;
overflow-x: clip;
background: var(--deep-1);
color: var(--txt-1);
font-family: var(--font-body);
font-size: 1.075rem;
line-height: 1.7;
letter-spacing: .008em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; font-family: var(--font-body); }
/* ── Sin selección de texto ──────────────────────────────────────────
El sitio se comporta como una pieza, no como un documento: no se
pueden arrastrar selecciones ni sacar las imágenes con el ratón. */
body {
-webkit-user-select: none;
user-select: none;
}
img {
-webkit-user-drag: none;
user-drag: none;
pointer-events: none;
}
:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; border-radius: 8px; }
/* ───────────── INVERSIÓN AL PASAR EL RATÓN ─────────────
El relleno entra deslizándose con `transform` (lo ejecuta la GPU), no
con un cambio de background-color, que repinta. */
.inv { position: relative; z-index: 0; overflow: hidden; isolation: isolate; }
/* círculo que se expande desde el centro; 155% garantiza cubrir la
diagonal de cualquier proporción. Solo transform: lo hace la GPU. */
.inv::before {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 155%;
aspect-ratio: 1;
z-index: -1;
border-radius: 50%;
background: var(--lime);
transform: translate(-50%, -50%) scale(0);
transition: transform 620ms var(--ease);
}
.inv:hover::before,
.inv:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
/* variante inversa: lo que ya es lima se llena de violeta */
.inv-deep::before { background: var(--blue-lit); }
/* ───────────── MOTION BLUR ─────────────
AQUÍ ESTABA EL PROBLEMA DE FLUIDEZ.
El desenfoque se aplicaba a contenedores de sección enteros. Cada vez
que se activaba, el navegador tenía que RASTERIZAR de nuevo esa capa
—tipografía display con sombras de 110 px incluida— y eso son decenas
de milisegundos justo al empezar cada gesto de scroll: un tirón, aunque
el resto fuera a 60 fps.
El estirado vertical era todavía peor: al cambiar `scaleY` de forma
continua, Chrome rerasteriza la capa en cada valor nuevo para
mantenerla nítida. Era un repintado por frame de cuatro capas enormes.
Ahora el desenfoque solo toca las tres imágenes de personajes: son
texturas ya decodificadas y difuminarlas es una operación de GPU sobre
unos pocos cientos de píxeles. El estirado ha desaparecido. */
.fx-motion { will-change: filter; }
/* ───────────────── CAMPO AMBIENTAL ─────────────────
Degradados radiales puros: suaves sin necesitar filter: blur(). */
/* El grano y la tercera mancha van AQUÍ, como capas de `background`, no
como elementos aparte. Cada capa translúcida a pantalla completa gasta
relleno de GPU en cada frame; en una pantalla Retina, cinco de ellas se
notan aunque el JS no esté haciendo nada. Ahora son tres en total, y el
campo ya no se desplaza con el scroll: era recomponer toda la pantalla
en cada frame a cambio de un efecto casi imperceptible. */
.field {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
background:
url("data:image/svg+xml;utf8,"),
radial-gradient(58% 42% at 34% 80%, rgba(53, 24, 184, .5) 0%, transparent 72%),
radial-gradient(110% 85% at 76% -6%, rgba(91, 50, 255, .5) 0%, transparent 60%),
radial-gradient(95% 75% at 6% 10%, rgba(53, 24, 184, .52) 0%, transparent 62%),
linear-gradient(178deg, #0b0733 0%, #100846 32%, #0d0638 62%, #06031f 100%);
contain: strict;
pointer-events: none;
}
.field-blob { position: absolute; border-radius: 50%; }
.blob-a {
top: -18vh; left: 48vw; width: 70vw; height: 70vw;
background: radial-gradient(circle closest-side, rgba(91, 50, 255, .55), rgba(91, 50, 255, .16) 46%, transparent 72%);
animation: drift-a 30s ease-in-out infinite alternate;
}
.blob-b {
top: 40vh; left: -24vw; width: 64vw; height: 64vw;
background: radial-gradient(circle closest-side, rgba(217, 255, 69, .2), rgba(217, 255, 69, .06) 44%, transparent 70%);
animation: drift-b 36s ease-in-out infinite alternate;
}
/* solo traslación: mover una capa cacheada es gratis; escalarla no */
@keyframes drift-a { to { transform: translate3d(-9vw, 8vh, 0); } }
@keyframes drift-b { to { transform: translate3d(11vw, -7vh, 0); } }
/* ───────────── RESPLANDORES (degradado, sin filtro) ───────────── */
.aura {
position: absolute;
border-radius: 50%;
pointer-events: none;
animation: breathe 10s ease-in-out infinite;
}
/* solo opacidad: el compositor lo hace sin repintar */
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
/* ───────────────────── CRISTAL ───────────────────── */
.glass {
position: relative;
/* el navegador no propaga recálculos fuera de la tarjeta */
contain: layout style;
border-radius: var(--r-lg);
background: var(--glass-bg);
box-shadow: var(--glass-shadow);
}
/* ───────────────────── SCRUB / REVEAL ───────────────────── */
/* Estado inicial. A partir de aquí el JS escribe `opacity` y `transform`
en línea: una custom property obliga a recalcular el estilo del
elemento y de todo lo que herede de él, y sale más caro. */
.js [data-reveal],
.js [data-reveal-lines] .rl-line > span { opacity: 0; }
.js [data-reveal].is-intro,
.js [data-reveal-lines] .rl-line > span.is-intro {
opacity: 0;
animation: nfe-intro 900ms var(--ease) both;
animation-delay: calc(var(--i, 0) * 65ms);
}
@keyframes nfe-intro {
from { opacity: 0; transform: translate3d(0, 40px, 0); }
to { opacity: 1; transform: none; }
}
[data-reveal-lines] .rl-line, [data-reveal-lines] .rl-line > span { display: block; }
.scroll-progress {
position: fixed;
overflow: hidden;
inset: 0 0 auto 0;
z-index: 1000;
height: 3px;
background: rgba(255, 255, 255, .07);
pointer-events: none;
}
/* se traslada en vez de escalarse: escalar rerasteriza la barra */
.scroll-progress i {
display: block;
height: 100%;
width: 100%;
transform: translate3d(-100%, 0, 0);
background: linear-gradient(90deg, var(--blue-lit), var(--lime));
}
.skip-link {
position: fixed;
top: 12px; left: 12px;
z-index: 1100;
transform: translateY(-200%);
padding: 12px 20px;
border-radius: 999px;
background: var(--lime);
color: var(--deep-0);
font-size: .95rem;
letter-spacing: .04em;
}
.skip-link:focus { transform: translateY(0); }
/* ───────────────────── LAYOUT ───────────────────── */
.page-shell { width: var(--page); margin-inline: auto; }
.section { position: relative; padding: clamp(104px, 12vw, 178px) 0; }
.section + .section::after {
content: "";
position: absolute;
top: 0; left: 50%;
width: var(--page);
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 24%, rgba(217, 255, 69, .5) 50%, rgba(255, 255, 255, .14) 76%, transparent);
pointer-events: none;
}
/* ───────────────────── TIPOGRAFÍA ───────────────────── */
.brand-statement,
.section-heading h2, .audience-copy h2, .cta-main h2,
.method-card h3, .idea-copy strong, .brand-copy strong,
.brand-ticker, .footer-claim {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
padding: 7px 16px 7px 12px;
border-radius: 999px;
background: rgba(217, 255, 69, .1);
color: var(--lime);
font-size: clamp(.94rem, 1.05vw, 1.02rem);
line-height: 1.2;
letter-spacing: .13em;
text-transform: uppercase;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px rgba(217, 255, 69, .7); }
.sec-num {
padding-right: 10px;
margin-right: -2px;
border-right: 1px solid rgba(217, 255, 69, .34);
color: rgba(217, 255, 69, .72);
}
.section-heading h2, .audience-copy h2, .cta-main h2 {
margin: 0;
font-size: clamp(2.5rem, 5.2vw, 5.1rem);
line-height: .96;
letter-spacing: -.022em;
color: var(--white);
text-shadow: 0 14px 34px rgba(3, 0, 32, .5);
}
/* ───────────────────── HEADER · GLASSMORPHISM ───────────────────── */
.site-header {
position: fixed;
inset: 14px 0 auto;
z-index: 100;
width: min(1200px, calc(100% - 32px));
margin-inline: auto;
}
.header-shell {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 72px;
padding: 8px 8px 8px 14px;
border-radius: 999px;
/* Tinte oscuro SIEMPRE. Antes el relleno era casi blanco puro, así que
arriba del todo dejaba pasar el azul del hero a plena saturación (ese
violeta chillón) y al scrollear saltaba de golpe a un fondo oscuro. */
background: linear-gradient(180deg, rgba(14, 6, 56, .5), rgba(6, 2, 30, .62));
box-shadow:
0 10px 24px -10px rgba(2, 0, 22, .5),
0 26px 54px -18px rgba(2, 0, 22, .6),
0 60px 100px -50px rgba(2, 0, 22, .88);
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
transition: min-height 800ms var(--ease), background 800ms var(--ease);
}
.site-header.is-stuck .header-shell {
/* al fijarse solo cambia de altura y un punto de opacidad: sin salto */
min-height: 62px;
background: linear-gradient(180deg, rgba(11, 4, 46, .66), rgba(4, 1, 24, .76));
}
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
/* sin marco, sin fondo, sin filtros: el PNG ya es transparente y se
recorta a la carita. Cualquier drop-shadow aquí se cortaría en
rectángulo contra el overflow y parecería una imagen pegada. */
.brand-mark { position: relative; width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; }
.brand-mark img {
position: absolute;
top: 50%; left: 50%;
width: 176%; height: auto;
max-width: none;
/* -36.1% sube el encuadre del centro del lienzo al centro de la carita */
transform: translate(-50%, -36.1%);
}
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-size: 1.36rem; letter-spacing: .015em; color: var(--white); }
.brand-copy small {
margin-top: 6px;
color: rgba(217, 255, 69, .86);
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
}
/* Hermano de la cápsula, no hijo suyo: colgando de una rejilla, su bloque
contenedor dependía del navegador y el desplegable salía descentrado.
Va anclado a la derecha: al retirar el panel de accesibilidad, dejarlo
centrado habría dejado todo el lado derecho vacío. */
.main-nav {
position: absolute;
right: 8px;
top: 50%;
z-index: 105;
display: flex;
align-items: center;
gap: 2px;
transform: translateY(-50%);
}
.main-nav a {
padding: 11px 17px;
border-radius: 999px;
font-size: .98rem;
letter-spacing: .02em;
color: rgba(255, 255, 255, .76);
transition: color 380ms var(--ease);
}
.main-nav .nav-cta {
margin-left: 8px;
padding: 12px 22px;
background: linear-gradient(180deg, #eaff8f, var(--lime) 48%, #c6f024);
color: #16200a;
letter-spacing: .025em;
box-shadow: 0 6px 16px -6px rgba(60, 80, 0, .5);
}
.header-tools { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; justify-self: end; }
.icon-button {
display: grid;
place-items: center;
width: 44px; height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
color: rgba(255, 255, 255, .9);
cursor: pointer;
transition: color 380ms var(--ease);
}
.menu-toggle { display: none; }
.burger { display: grid; gap: 6px; }
.burger i {
display: block;
width: 21px; height: 2px;
border-radius: 999px;
background: currentColor;
transition: transform 420ms var(--ease);
}
.menu-toggle[aria-expanded="true"] .burger i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
/* ───────────────────── BOTONES ───────────────────── */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
min-height: 56px;
padding: 15px 26px;
border-radius: 999px;
font-size: 1.08rem;
letter-spacing: .015em;
line-height: 1.15;
transform: translate3d(var(--magx, 0), var(--magy, 0), 0);
transition: transform 500ms var(--ease), color 380ms var(--ease);
}
/* Flechas como SVG, no como carácter: iOS convierte ↗ y ↓ en emoji de
color y quedaban como una pegatina azul dentro del botón. */
.arrow { flex: 0 0 auto; overflow: visible; }
.button .arrow { transition: transform 480ms var(--ease); }
.button:hover .arrow { transform: translate(3px, -3px); }
.button-primary, .button-lime {
background: linear-gradient(180deg, #f4ffa8, var(--lime) 50%, #c2ec1c);
color: #141c08;
box-shadow: 0 10px 26px -10px rgba(60, 80, 0, .5), 0 0 34px rgba(217, 255, 69, .16);
}
.text-link {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 12px 8px;
border-radius: 12px 12px 0 0;
font-size: 1.06rem;
color: var(--txt-2);
border-bottom: 1px solid rgba(255, 255, 255, .24);
transition: color 380ms var(--ease), border-color 380ms var(--ease);
}
.text-link .arrow { transition: transform 500ms var(--ease); }
.text-link:hover { border-color: var(--lime); }
.text-link:hover .arrow { transform: translateY(4px); }
.chip {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, .12);
box-shadow: 0 14px 30px -14px rgba(2, 0, 22, .85);
color: var(--white);
font-size: .96rem;
letter-spacing: .05em;
text-transform: uppercase;
white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(217, 255, 69, .65); }
.chip:hover .dot { background: var(--deep-0); box-shadow: none; }
/* ───────────────────── HERO ───────────────────── */
.hero { position: relative; min-height: 190svh; }
.hero-stage {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
min-height: 100svh;
overflow: clip;
}
/* sin `opacity` animada: el hero se aleja pero nunca se apaga */
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr);
align-items: center;
gap: clamp(30px, 4.5vw, 72px);
flex: 1;
padding-top: 132px;
padding-bottom: 78px;
transform: translate3d(0, 0, 0);
will-change: transform;
}
.hero-copy { position: relative; z-index: 2; }
.brand-statement { margin: 0; font-size: clamp(4.1rem, 8.4vw, 8rem); line-height: .8; letter-spacing: -.05em; }
.brand-statement .line { display: block; }
.speak-loud { display: block; color: var(--lime); text-shadow: 0 0 26px rgba(217, 255, 69, .42); }
.speak-real { display: block; color: var(--white); text-shadow: 0 0 28px rgba(160, 140, 255, .4); }
.hero-promise {
max-width: 660px;
margin: 30px 0 0;
color: var(--white);
font-size: clamp(1.42rem, 2vw, 1.85rem);
line-height: 1.28;
}
/* subrayado de rotulador: el remate de la promesa va resaltado en lima */
.hero-promise mark {
padding: .06em .18em .1em;
background: var(--lime);
color: var(--deep-0);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* Es lo primero que se lee: va más contrastado que el texto secundario
del resto de la página. */
.hero-intro { max-width: 600px; margin: 16px 0 0; color: rgba(255, 255, 255, .93); font-size: 1.14rem; line-height: 1.75; }
.hero-actions .text-link { color: rgba(255, 255, 255, .92); border-bottom-color: rgba(255, 255, 255, .4); }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.hero-points {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 0;
margin: 32px 0 0;
padding: 0;
list-style: none;
color: var(--txt-3);
font-size: 1rem;
letter-spacing: .05em;
text-transform: uppercase;
}
.hero-points li + li::before {
content: "";
display: inline-block;
width: 5px; height: 5px;
margin: 0 14px 3px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 7px rgba(217, 255, 69, .6);
}
.hero-visual { position: relative; align-self: center; justify-self: end; width: min(100%, 520px); min-height: 540px; }
.hero-glow {
inset: 0;
background: radial-gradient(circle closest-side, rgba(217, 255, 69, .17), rgba(91, 50, 255, .17) 44%, transparent 72%);
}
.visual-frame { position: absolute; inset: 34px 8px 26px; display: grid; place-items: center; }
/* sin filtros: escalar algo filtrado lo re-renderiza en cada frame */
.community-image {
width: min(100%, 500px);
max-height: 480px;
object-fit: contain;
will-change: transform;
}
.visual-orbit { position: absolute; z-index: 3; }
/* los tres distintivos comparten el mismo acento lima */
.orbit-one,
.orbit-two,
.confidence-badge {
background: linear-gradient(180deg, #f2ff9c, var(--lime));
color: #16200a;
box-shadow: 0 0 24px rgba(217, 255, 69, .22), 0 14px 30px -14px rgba(2, 0, 22, .9);
}
.orbit-one .dot,
.orbit-two .dot { background: #16200a; box-shadow: none; }
.confidence-badge span { color: #16200a; }
/* al pasar el ratón se llenan de violeta y la tinta pasa a lima */
.orbit-one:hover, .orbit-two:hover, .confidence-badge:hover { color: var(--lime); }
.orbit-one:hover .dot, .orbit-two:hover .dot { background: var(--lime); }
.confidence-badge:hover span { color: var(--lime); }
.orbit-one { top: 14px; left: -6px; }
.orbit-two { top: 92px; right: -4px; }
.confidence-badge { position: absolute; z-index: 3; right: 0; bottom: 10px; }
.confidence-badge:hover span { color: var(--deep-0); }
.brand-ticker {
position: relative;
flex: 0 0 auto;
overflow: hidden;
padding: 15px 0;
background: linear-gradient(90deg, rgba(217, 255, 69, .06), rgba(217, 255, 69, .16) 50%, rgba(217, 255, 69, .06));
mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* marquesina 100% compositor: animación CSS pura, cero JS */
.ticker-track {
display: flex;
align-items: center;
gap: 30px;
width: max-content;
animation: marquee 30s linear infinite;
will-change: transform;
}
@keyframes marquee { to { transform: translate3d(-33.333%, 0, 0); } }
.brand-ticker span {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.3vw, 2.2rem);
line-height: .9;
color: var(--lime);
white-space: nowrap;
text-transform: uppercase;
}
.brand-ticker i { font-size: .9rem; font-style: normal; color: rgba(217, 255, 69, .5); }
/* ───────────────────── QUÉ ES ───────────────────── */
.about-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 58px 84px; align-items: start; }
.about-copy { position: relative; padding-top: 30px; }
.about-copy::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, var(--lime), rgba(217, 255, 69, .04));
}
.about-copy p { margin: 0; color: var(--txt-2); font-size: 1.14rem; }
.about-copy p + p { margin-top: 20px; }
.about-copy .lead { color: var(--white); font-size: clamp(1.36rem, 1.9vw, 1.72rem); line-height: 1.42; }
.idea-card {
grid-column: 1 / -1;
display: grid;
grid-template-columns: .76fr 1.24fr;
min-height: 380px;
overflow: hidden;
}
.idea-visual { position: relative; display: grid; place-items: center; padding: 22px; }
.idea-glow { inset: 4%; background: radial-gradient(circle closest-side, rgba(217, 255, 69, .15), transparent 72%); }
.idea-visual img { position: relative; width: min(94%, 380px); height: 340px; object-fit: contain; }
.idea-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5.4vw, 74px); }
.idea-copy strong {
font-size: clamp(1.85rem, 3.2vw, 3.3rem);
line-height: 1;
letter-spacing: -.02em;
color: var(--white);
text-shadow: 0 0 34px rgba(180, 160, 255, .24);
}
.idea-copy p { max-width: 580px; margin: 24px 0 0; color: var(--txt-2); font-size: 1.16rem; }
/* ───────────────────── MÉTODO ───────────────────── */
.method::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(70% 55% at 50% 0%, rgba(217, 255, 69, .08), transparent 72%);
pointer-events: none;
}
.heading-row { display: grid; grid-template-columns: 1.12fr .88fr; gap: 68px; align-items: end; }
.heading-note {
max-width: 470px;
margin: 0 0 6px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .16);
color: var(--txt-2);
font-size: 1.14rem;
}
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 70px; }
.method-card {
display: grid;
grid-template-rows: 52px 1fr auto;
gap: 20px;
min-height: 340px;
padding: 28px;
cursor: pointer;
}
.method-card > * { position: relative; z-index: 1; }
/* la tarjeta entera se invierte a lima y todo su contenido pasa a oscuro */
.method-card:hover h3,
.method-card:hover p,
.method-card:hover .card-number,
.method-card:hover .card-arrow,
.method-card:focus-visible h3,
.method-card:focus-visible p,
.method-card:focus-visible .card-number,
.method-card:focus-visible .card-arrow { color: var(--deep-0); text-shadow: none; }
.method-card:hover .card-number { background: rgba(5, 2, 26, .12); }
.card-number {
display: grid;
place-items: center;
width: 52px; height: 52px;
border-radius: var(--r-sm);
background: rgba(217, 255, 69, .16);
color: var(--lime);
font-size: .95rem;
letter-spacing: .06em;
transition: color 380ms var(--ease), background 380ms var(--ease);
}
.method-card h3 {
display: flex;
align-items: flex-end;
margin: 0;
font-size: clamp(1.5rem, 2vw, 2.05rem);
line-height: 1.02;
letter-spacing: -.018em;
color: var(--white);
text-shadow: 0 0 30px rgba(190, 175, 255, .22);
transition: color 380ms var(--ease);
}
.method-card p { margin: 0; color: var(--txt-2); font-size: 1.08rem; line-height: 1.65; transition: color 380ms var(--ease); }
.card-arrow {
position: absolute;
top: 28px; right: 28px;
z-index: 2;
color: var(--lime);
opacity: .55;
transition: transform 500ms var(--ease), opacity 420ms var(--ease), color 380ms var(--ease);
}
.method-card:hover .card-arrow { opacity: 1; transform: translate(4px, -4px); }
/* ───────────────────── PARA QUIÉN ───────────────────── */
.audience-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(50px, 7vw, 96px); align-items: center; }
.audience-visual { position: relative; display: grid; min-height: 560px; place-items: center; }
.image-halo {
inset: 0;
background: radial-gradient(circle closest-side, rgba(91, 50, 255, .34), rgba(217, 255, 69, .1) 46%, transparent 72%);
}
.audience-visual img { position: relative; z-index: 2; width: 96%; max-height: 520px; object-fit: contain; }
.audience-copy h2 { font-size: clamp(2.4rem, 4.4vw, 4.6rem); }
.audience-copy ul { margin: 38px 0 34px; padding: 0; list-style: none; }
.audience-copy li {
display: grid;
grid-template-columns: 38px 1fr;
align-items: center;
gap: 14px;
padding: 15px 12px;
border-radius: 14px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
color: var(--txt-1);
font-size: 1.1rem;
transition: color 380ms var(--ease);
}
.audience-copy li span {
display: grid;
place-items: center;
width: 36px; height: 36px;
border-radius: 12px;
background: linear-gradient(180deg, #f2ff9c, var(--lime));
color: #16200a;
font-size: .95rem;
transition: background 380ms var(--ease), color 380ms var(--ease);
}
.audience-copy li:hover span { background: rgba(5, 2, 26, .16); color: var(--deep-0); }
/* ───────────────────── CTA FINAL ───────────────────── */
/* `align-items: center`, no `end`: el titular de la izquierda es mucho más
alto que la columna derecha, y alinearlas por la base dejaba un socavón
de lima sobre el texto en pantallas anchas. */
.cta-panel {
position: relative;
display: grid;
grid-template-columns: 1.12fr .88fr;
gap: clamp(38px, 5vw, 74px);
align-items: center;
padding: clamp(40px, 5.6vw, 76px);
overflow: hidden;
}
.cta-glow { inset: 20% -14% -50% 24%; background: radial-gradient(circle closest-side, rgba(217, 255, 69, .17), transparent 72%); }
.cta-main, .cta-side { position: relative; z-index: 2; }
.cta-main h2 { font-size: clamp(2.3rem, 4vw, 4.1rem); }
.cta-side p { margin: 0 0 28px; color: var(--txt-2); font-size: 1.2rem; }
.cta-side .button { width: 100%; }
/* ───────────────────── FOOTER ───────────────────── */
.site-footer { position: relative; background: linear-gradient(180deg, rgba(5, 2, 26, .2), rgba(5, 2, 26, .8)); }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; min-height: 150px; }
.footer-claim { margin: 0; color: var(--lime); font-size: 1.5rem; letter-spacing: .01em; text-align: center; text-shadow: 0 0 26px rgba(217, 255, 69, .28); }
.footer-link {
justify-self: end;
padding: 8px 14px;
border-radius: 999px;
color: var(--txt-2);
font-size: 1.04rem;
transition: color 380ms var(--ease);
}
/* ───────────────────── WHATSAPP ───────────────────── */
.whatsapp-float {
position: fixed;
right: 24px; bottom: 24px;
z-index: 90;
display: grid;
width: 62px; height: 62px;
place-items: center;
border-radius: 22px;
background: linear-gradient(180deg, rgba(90, 60, 220, .82), rgba(40, 18, 130, .88));
box-shadow: 0 14px 30px -12px rgba(2, 0, 22, .8), 0 34px 60px -26px rgba(2, 0, 22, .95);
transform: translate3d(var(--magx, 0), var(--magy, 0), 0);
transition: transform 500ms var(--ease);
}
.whatsapp-float img { position: relative; z-index: 1; width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); }
.whatsapp-float:hover img { filter: none; }
/* ── Vibración: llamada de atención periódica ──────────────────────────
Dos detalles que la hacen convivir con el resto:
· Los fotogramas conservan dentro el desplazamiento magnético
(--magx/--magy). Una animación reemplaza el `transform` entero, así
que sin esto el botón dejaría de seguir al cursor.
· El halo va como `box-shadow` del propio botón, no como pseudo-
elemento: el botón lleva `overflow: hidden` —lo necesita el relleno
circular del hover— y habría recortado el anillo.
Reposa el 70 % del ciclo y sacude el resto: una vibración literalmente
continua acabaría cansando y restándole autoridad al botón. */
.whatsapp-float {
transform-origin: 50% 62%;
animation: wa-buzz 4.6s var(--ease) infinite, wa-ring 4.6s var(--ease) infinite;
}
/* al acercar el cursor manda el magnetismo, no la sacudida */
.whatsapp-float:hover,
.whatsapp-float:focus-visible { animation: none; }
@keyframes wa-buzz {
0%, 70%, 100% { transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0) rotate(0deg) scale(1); }
73% { transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0) rotate(-11deg) scale(1.06); }
76% { transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0) rotate(9deg) scale(1.05); }
79% { transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0) rotate(-7deg) scale(1.04); }
82% { transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0) rotate(5deg) scale(1.03); }
85% { transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0) rotate(-3deg) scale(1.02); }
88% { transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0) rotate(0deg) scale(1); }
}
@keyframes wa-ring {
0%, 68%, 100% { box-shadow: 0 14px 30px -12px rgba(2, 0, 22, .8), 0 34px 60px -26px rgba(2, 0, 22, .95), 0 0 0 0 rgba(217, 255, 69, 0); }
72% { box-shadow: 0 14px 30px -12px rgba(2, 0, 22, .8), 0 34px 60px -26px rgba(2, 0, 22, .95), 0 0 0 0 rgba(217, 255, 69, .55); }
94% { box-shadow: 0 14px 30px -12px rgba(2, 0, 22, .8), 0 34px 60px -26px rgba(2, 0, 22, .95), 0 0 0 20px rgba(217, 255, 69, 0); }
}
/* ───────────────────── ALTO CONTRASTE ───────────────────── */
/* ───────────────────── ALTO CONTRASTE ───────────────────── */
/* ───────────────────── RESPONSIVE ───────────────────── */
@media (max-width: 1080px) {
.main-nav a { padding-inline: 12px; font-size: .94rem; }
.hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 26px; }
.hero-visual { min-height: 470px; }
.idea-card { grid-template-columns: .82fr 1.18fr; }
}
@media (max-width: 900px) {
:root { --page: min(100% - 36px, 720px); --r-lg: 30px; }
.menu-toggle { display: grid; }
/* `static` para que el menú se posicione contra , no contra la
cápsula. Antes era hijo posicionado de una rejilla y salía torcido
desde el centro. */
/* el menú ya cuelga de : la cápsula no necesita tocarse */
/* Desplegable idéntico al de accesibilidad: mismo fondo, mismo
desenfoque, misma sombra. Y nace del botón hamburguesa. */
.main-nav {
top: calc(100% + 12px);
left: auto;
right: 0;
z-index: 110;
display: grid;
gap: 6px;
width: min(300px, calc(100vw - 32px));
padding: 12px;
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(24, 12, 78, .88), rgba(7, 3, 32, .92));
box-shadow: 0 12px 30px -12px rgba(2, 0, 22, .7), 0 40px 80px -30px rgba(2, 0, 22, .95);
backdrop-filter: blur(26px) saturate(150%);
-webkit-backdrop-filter: blur(26px) saturate(150%);
opacity: 0;
visibility: hidden;
transform-origin: calc(100% - 30px) top;
transform: scale(.55) translateY(-6px);
transition: opacity 300ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms;
}
.main-nav.is-open {
opacity: 1; visibility: visible;
transform: scale(1) translateY(0);
transition: opacity 240ms var(--ease), transform 420ms var(--ease), visibility 0s;
}
/* con la hamburguesa visible, «A» pasa a ser el segundo por la derecha */
.main-nav a { padding: 15px; border-radius: var(--r-sm); font-size: 1.06rem; }
.main-nav .nav-cta { margin: 4px 0 0; justify-content: center; text-align: center; }
.hero { min-height: auto; }
.hero-stage { position: relative; min-height: auto; }
.hero-grid, .about-grid, .heading-row, .audience-grid, .cta-panel { grid-template-columns: 1fr; }
.hero-grid { gap: 42px; padding-top: 136px; padding-bottom: 52px; }
.hero-visual { width: min(100%, 580px); min-height: 480px; justify-self: center; }
.about-grid { gap: 36px; }
.idea-card { grid-template-columns: 1fr; }
.idea-visual { min-height: 320px; }
.heading-row { gap: 32px; }
.heading-note { margin-bottom: 0; }
.method-grid { grid-template-columns: 1fr; margin-top: 48px; }
.method-card { min-height: 0; }
.audience-grid { gap: 48px; }
.audience-visual { width: min(100%, 560px); min-height: 440px; justify-self: center; }
.cta-panel { align-items: start; gap: 34px; }
.footer-inner { grid-template-columns: 1fr; justify-items: start; padding-block: 40px 46px; }
.footer-claim { text-align: left; }
.footer-link { justify-self: start; }
}
@media (max-width: 560px) {
:root { --page: calc(100% - 28px); --r-lg: 28px; --r-md: 22px; }
html { scroll-padding-top: 92px; }
.site-header { inset: 9px 0 auto; width: calc(100% - 18px); }
.header-shell { min-height: 62px; padding: 7px 7px 7px 11px; gap: 10px; }
.brand { min-width: 0; gap: 10px; }
.brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
.brand-copy small { display: none; }
.icon-button { width: 42px; height: 42px; }
.main-nav { transform-origin: calc(100% - 28px) top; }
.hero-grid { padding-top: 118px; }
.brand-statement { font-size: clamp(3.4rem, 19vw, 5.2rem); line-height: .82; }
.hero-promise { margin-top: 26px; }
.hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
.button { width: 100%; }
.text-link { align-self: flex-start; }
.hero-visual { min-height: 380px; }
.visual-frame { inset: 30px 0 16px; }
.community-image { max-height: 340px; }
.chip { font-size: .84rem; padding: 8px 13px; }
.orbit-one { top: 6px; left: -4px; }
.orbit-two { top: 74px; right: -4px; }
.confidence-badge { right: 0; bottom: 0; }
.brand-ticker { padding: 12px 0; }
.section { padding-block: 84px; }
.idea-visual { min-height: 270px; padding: 14px; }
.idea-visual img { height: 250px; }
.idea-copy { padding: 28px 24px 34px; }
.method-card { padding: 24px; gap: 16px; }
.card-arrow { top: 24px; right: 24px; }
.audience-visual { min-height: 360px; }
.audience-visual img { max-height: 340px; }
.cta-panel { padding: 32px 24px 34px; }
.whatsapp-float { right: 15px; bottom: 15px; width: 56px; height: 56px; border-radius: 19px; }
.whatsapp-float img { width: 31px; height: 31px; }
}
/* El esmerilado se mantiene en TODAS las resoluciones: es la firma del
diseño. Solo baja el radio, que es donde está el coste real — y sobre
una cápsula de 350×62 px un blur de 10 px cuesta prácticamente nada. */
@media (max-width: 640px) {
.header-shell,
.main-nav {
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
}
}
/* AQUÍ ESTABA EL RELLENO NEGRO EN MÓVIL.
Esta regla escondía el círculo de relleno en pantallas táctiles, pero
las reglas de color del hover seguían aplicándose: iOS activa `:hover`
al tocar y se queda pegado. Resultado: la tinta pasaba a oscuro sobre
una tarjeta que seguía siendo oscura, y quedaba negro sobre negro.
Ahora el relleno también funciona al tocar: la tarjeta se llena de lima
y el texto oscuro se lee. Se comporta como un estado de «pulsado». */
/* el pseudoelemento no se pinta mientras está en scale(0), así que
mantenerlo activo en táctil no cuesta nada */
/* ───────────────── MOVIMIENTO REDUCIDO ───────────────── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.fx-motion { filter: none !important; }
[data-reveal], .rl-line > span { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* ═══════════════ CALIDAD ADAPTATIVA ═══════════════
El motor mide sus propios fotogramas y ajusta `data-fx` solo. En un
equipo modesto se ven las mismas animaciones; lo que se retira son las
capas que cuestan rasterización o relleno de GPU, no el movimiento. */
/* pausa lo que se sale de pantalla: una animación CSS invisible sigue
ocupando al compositor */
.is-off { animation-play-state: paused !important; }
/* ── nivel 2: fuera el desenfoque de movimiento (lo único que rasteriza) */
[data-fx="2"] .fx-motion { filter: none !important; will-change: auto; }
/* ── nivel 1: sin capas caras. Quedan revelados, hero fijado y hover. */
[data-fx="1"] .fx-motion { filter: none !important; will-change: auto; }
[data-fx="1"] .field-blob,
[data-fx="1"] .aura,
[data-fx="1"] .ticker-track { animation: none; }
/* al botón se le deja la sacudida —es transform puro— pero se le quita el
halo, que es lo único ahí que repinta */
[data-fx="1"] .whatsapp-float { animation: wa-buzz 4.6s var(--ease) infinite; }
[data-fx="1"] .header-shell,
[data-fx="1"] .main-nav {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-fx="1"] .field { background-image: none; background: linear-gradient(178deg, #0b0733 0%, #100846 38%, #06031f 100%); }
[data-fx="1"] .header-shell { background: linear-gradient(180deg, rgba(19, 9, 68, .95), rgba(9, 4, 38, .97)); }
/* sombras de una sola capa: pintar tres desenfoques por caja es caro */
[data-fx="1"] .glass { box-shadow: 0 24px 50px -24px rgba(2, 0, 22, .85); }
[data-fx="1"] .header-shell { box-shadow: 0 20px 44px -20px rgba(2, 0, 22, .8); }
/* resplandores de texto: el radio grande encarece cada repintado */
[data-fx="1"] .speak-loud,
[data-fx="1"] .speak-real,
[data-fx="1"] h2,
[data-fx="1"] .footer-claim,
[data-fx="1"] .idea-copy strong,
[data-fx="1"] .method-card h3 { text-shadow: none; }
/* ═══════════════════════════════════════════════════════════════
INVERSIÓN AL PASAR EL RATÓN · colores
ESTE BLOQUE VA EL ÚLTIMO A PROPÓSITO. Los componentes
(.main-nav a, .button-lime, las reglas del tema claro…) declaran su
color con la misma especificidad que estas reglas, así que la única
forma limpia de ganar la cascada es llegar después. Cuando el bloque
del tema claro quedó por debajo, el relleno se expandía pero el texto
no cambiaba de color.
═══════════════════════════════════════════════════════════════ */
/* — oscuro: se rellena de lima, la tinta se oscurece — */
.inv:hover, .inv:focus-visible,
.main-nav .nav-cta.inv:hover,
.main-nav a.inv:hover { color: var(--deep-0); }
.inv-deep:hover, .inv-deep:focus-visible,
.main-nav .nav-cta.inv-deep:hover,
.button.inv-deep:hover { color: var(--lime); }
.orbit-one.inv-deep:hover { color: var(--lime); }
.orbit-one.inv-deep:hover .dot { background: var(--lime); }
/* ═══════════════ PANELES EN ACENTO LIMA ═══════════════
La tarjeta de la idea y el bloque final dejan el cristal y pasan a
lima macizo: dos paradas de color dentro del recorrido oscuro. Dentro
se invierte todo —tinta negra, personaje azul, botón azul— porque
sobre lima el lima desaparece. */
.idea-card,
.cta-panel {
background: linear-gradient(158deg, #e6ff85 0%, var(--lime) 48%, #c6f024 100%);
box-shadow:
0 12px 30px -14px rgba(70, 90, 0, .5),
0 40px 80px -32px rgba(2, 0, 22, .7),
0 90px 140px -70px rgba(2, 0, 22, .9);
color: #141a04;
}
/* El monito azul es un PNG propio, no un filtro.
Antes se recoloreaba con una cadena larga de `filter`. Chrome la
resolvía en el azul exacto, pero Safari aplica esos filtros en otro
espacio de color y la cadena se le iba a magenta. Con una imagen
recoloreada al pixel el resultado es idéntico en todos los navegadores
y además no cuesta nada en tiempo de ejecución. */
/* ── tinta ── */
.idea-copy strong,
.cta-main h2 { color: #141a04; text-shadow: none; }
.idea-copy p,
.cta-side p { color: rgba(20, 26, 4, .78); }
/* ── la píldora y el botón se invierten a azul ── */
.cta-panel .eyebrow {
background: var(--blue);
color: var(--lime);
box-shadow: 0 6px 16px -8px rgba(45, 19, 160, .5);
}
.cta-panel .eyebrow .dot { background: var(--lime); box-shadow: none; }
.cta-side .button {
background: linear-gradient(180deg, #5b32ff, var(--blue) 55%, #260f96);
color: var(--lime);
box-shadow: 0 10px 26px -10px rgba(45, 19, 160, .6);
}
/* al pasar el ratón se llena de lima y la tinta vuelve al azul */
.cta-side .button.inv-deep::before { background: var(--lime); }
.cta-side .button.inv-deep:hover { color: var(--blue); }
/* ── los resplandores internos: blancos, no verdes sobre verde ── */
.idea-glow { background: radial-gradient(circle closest-side, rgba(255, 255, 255, .55), transparent 72%); }
.cta-glow { background: radial-gradient(circle closest-side, rgba(255, 255, 255, .5), transparent 72%); }
/* en alto contraste vuelve a mandar el negro y amarillo */