@font-face{font-family:'Space Grotesk';src:url(../assets/fonts/SpaceGrotesk-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../assets/fonts/SpaceGrotesk-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../assets/fonts/SpaceGrotesk-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
--sky:#160D22; --plum:#1F122E; --plum-2:#2A1A3D; --plum-3:#160D22;
--amber:#F5A733; --amber-lt:#F9B233; --amber-dp:#E5851B; --ember:#E07A3E;
--ivory:#F4EDE4; --ivory-1:rgba(244,237,228,.9); --ivory-2:rgba(244,237,228,.64); --ivory-3:rgba(244,237,228,.42);
--paper:#FAF7F2; --line-d:rgba(244,237,228,.1);
--ink:#241528; --ink-2:#5b5064; --ink-3:#7d7387; --card:#FFFFFF; --line:#ECE4EE;
--disp:'Space Grotesk',system-ui,sans-serif; --body:Manrope,system-ui,sans-serif;
--e-out:cubic-bezier(.22,1,.36,1); --e-io:cubic-bezier(.76,0,.24,1); --e-exp:cubic-bezier(.16,1,.3,1);
--wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--sky);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.06;margin:0}
p{margin:0}a{color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(22px,5vw,44px)}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:#fff;color:var(--plum);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.eyebrow{font-family:var(--body);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--amber);display:inline-flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--amber);border-radius:2px;opacity:.9}
.eyebrow.dark{color:var(--amber-dp)}
/* grano de amanecer */
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* luz del sol que sigue al astro (la página reacciona a su propia luz) */
#sunlight{position:fixed;left:0;top:0;width:760px;height:760px;border-radius:50%;z-index:1;pointer-events:none;
background:radial-gradient(circle,rgba(245,167,51,.14),rgba(224,122,62,.05) 40%,transparent 66%);
mix-blend-mode:screen;will-change:transform;transform:translate(-50%,-50%)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}.reveal[data-d="4"]{transition-delay:.36s}
/* ===== HEADER ===== */
/* El wordmark iba pegado al borde: se le da aire arriba. A esta MISMA altura se
alinea el sol en el héroe (ver [data-sun-anchor] · --sun-top). */
.hdr{position:fixed;inset:0 0 auto 0;z-index:80;height:98px;display:flex;align-items:center;
padding-top:16px}
.hdr::before{content:"";position:absolute;inset:0;background:rgba(18,9,28,.6);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);opacity:0;transition:opacity .5s var(--e-out);pointer-events:none}
.hdr.docked::before{opacity:1;box-shadow:0 1px 0 var(--line-d)}
.hdr .wrap{display:flex;align-items:center;gap:22px;width:100%;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ivory)}
.brand .slot{width:40px;height:40px;flex:none}
.brand .wm{height:16px;color:var(--ivory);opacity:1;transform-origin:left center;transition:opacity .5s var(--e-out)} /* SOLMIL visible desde el inicio; sol.js lo escala 2×→1× en el home */
.hdr.docked .brand .wm{opacity:1}
.brand .wm svg{height:16px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;opacity:0;transform:translateY(-5px);transition:opacity .5s var(--e-out) .1s,transform .5s var(--e-out) .1s}
.hdr.docked .nav{opacity:1;transform:none}
.nav a{font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--ivory-2);text-decoration:none;padding:9px 15px;border-radius:100px;transition:color .2s,background .2s}
.nav a:hover{color:var(--ivory);background:rgba(244,237,228,.07)}
.nav .cta{color:var(--plum);background:linear-gradient(135deg,var(--amber-lt),var(--amber-dp));font-weight:700;margin-left:10px}
.nav .cta:hover{color:var(--plum)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:700;font-size:15.5px;text-decoration:none;padding:15px 27px;border-radius:100px;min-height:46px;transition:transform .16s var(--e-out),box-shadow .26s var(--e-out),background .2s}
.btn:active,.nav .cta:active{transform:scale(.97)}
.btn-amber{background:linear-gradient(135deg,var(--amber-lt),var(--amber-dp));color:var(--plum)}
.btn-amber:hover{box-shadow:0 16px 40px -12px rgba(229,133,27,.6);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(244,237,228,.2);color:var(--ivory)}
.btn-ghost:hover{border-color:rgba(244,237,228,.5);background:rgba(244,237,228,.05)}
.arrow{transition:transform .24s var(--e-out)}.btn:hover .arrow{transform:translateX(4px)}
/* ===== SOL FIJO + rayo ===== */
#sun{position:fixed;left:0;top:0;z-index:90;width:128px;height:128px;pointer-events:none;transform-origin:center;will-change:transform}
#sun img{width:100%;height:100%;display:block}
#sun.rise{animation:sunrise 1.1s var(--e-exp) both}
@keyframes sunrise{from{opacity:0;transform:translate(var(--hx),var(--hy)) translate(-50%,-50%) scale(.32) rotate(-95deg)}}
#sun.kick img{animation:sunkick .55s var(--e-out)}
@keyframes sunkick{34%{transform:scale(.9) rotate(-15deg)}70%{transform:scale(1.02) rotate(3deg)}}
#leaf{position:fixed;left:0;top:0;z-index:89;width:64px;pointer-events:none;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 0 11px rgba(252,186,96,.6)) drop-shadow(0 3px 6px rgba(224,122,62,.35))}
/* luz que SALE de la punta del rayo (¼ del aura del sol) y baña los títulos — se orienta hacia el título en la fase guía */
#raylight{position:fixed;left:0;top:0;width:340px;height:340px;border-radius:50%;z-index:88;pointer-events:none;opacity:0;
background:radial-gradient(circle,rgba(252,190,102,.30),rgba(240,142,58,.10) 40%,transparent 66%);
mix-blend-mode:screen;will-change:transform,opacity;transform:translate(-50%,-50%)}
#leaf svg{width:100%;height:auto;overflow:visible;display:block}
#leaf.spark{animation:spark .7s var(--e-out)}
@keyframes spark{40%{filter:drop-shadow(0 0 30px rgba(249,178,51,.95))}}
/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:var(--ivory);overflow:hidden;
background:radial-gradient(120% 85% at 74% 26%,#3a2450 0%,var(--plum) 42%,var(--sky) 100%);padding:104px 0 76px}
.hero .wrap{display:grid;grid-template-columns:.95fr 1.3fr;gap:36px;align-items:center;position:relative;z-index:3}
/* El copy se cuela ENTRE las capas: por delante de los que están al fondo
(z 10 y 20) y por detrás del protagonista (z 30). Así los traseros pasan
DETRÁS del texto —que es donde deben estar, al fondo— y el del frente puede
invadir por delante sin que el texto lo tape. */
.hero-copy{max-width:600px;position:relative;z-index:25}
/* `text-wrap:balance` reparte las palabras para que las líneas queden de largo
parecido, en vez de dejar una línea corta suelta ("negocio," sola). El
navegador lo calcula; a mano habría que meter
y se rompería en cuanto
cambie el ancho o el texto. Donde no exista, cae al corte normal. */
.hero h1{font-size:clamp(40px,6.4vw,80px);font-weight:500;margin:24px 0 0;color:var(--ivory);letter-spacing:-.025em;
text-wrap:balance}
.hero .lead,.caps .head h2,.how .head h2,.social h2,.mision h2{text-wrap:pretty}
.hero .lead{font-size:clamp(17px,1.5vw,20px);color:var(--ivory-2);max-width:46ch;margin:28px 0 0;font-weight:500;line-height:1.6}
.hero .clarify{font-size:15px;color:var(--ivory-2);max-width:42ch;margin:16px 0 0;font-weight:600}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hero-copy>*{opacity:0;transform:translateY(20px);animation:rise .9s var(--e-out) forwards}
.hero .eyebrow{animation-delay:.55s}.hero h1{animation-delay:.66s}.hero .lead{animation-delay:.82s}.hero .clarify{animation-delay:.9s}.hero .actions{animation-delay:1s}
@keyframes rise{to{opacity:1;transform:none}}
/* ═══ FORMACIÓN DE 3 DISPOSITIVOS (iPhone · iPad · Mac) ═══
Sustituye al mockup estático de un iPhone. Cada 15 s rota quién está al frente.
Cuatro capas, cada una con UN trabajo — no es anidado decorativo:
.rig-frame entrada (opacity+translateY). Fuera de la cámara: un transform
sobre el dueño de `perspective` reencuadra y cizalla la escena.
.rig la cámara (perspective + perspective-origin). ⛔ nada de
overflow / filter / opacity / transform aquí.
.rig-stage único dueño de preserve-3d. ⛔ overflow, filter, opacity<1,
clip-path, mask o mix-blend-mode AQUÍ lo aplanan EN SILENCIO.
.dev el SLOT (transform + opacity + z-index). `flat` a propósito.
.dev-fit escala el frame de devices.css al tamaño del slot.
.device… el frame en sí, de devices.css (MIT) — no se toca aquí. */
.hero-visual{position:relative;height:min(82vh,680px);display:flex;align-items:center;justify-content:center}
/* Ancla del sol: caja invisible y ESTÁTICA. El sol nace sobre ella y viaja al
header. Si siguiera al dispositivo del frente, saltaría cada 15 s (el frontal
cambia de tamaño al rotar). `visibility:hidden` conserva la caja de layout;
`display:none` daría rect cero. ⛔ hermano del rig, jamás dentro del
subárbol preserve-3d (ahí getBoundingClientRect da el AABB ya proyectado). */
/* Ancla del sol: caja invisible y ESTÁTICA. El sol nace sobre ella y viaja al
header. Si siguiera al dispositivo del frente saltaría cada 15 s, porque el
frontal cambia de tamaño al rotar.
`--sun-top` FIJA su altura en el viewport: alineado con el wordmark SOLMIL,
para que el sol deje de robarle alto a los mockups (pedido de Sergio).
`visibility:hidden` conserva la caja de layout — `display:none` daría rect cero.
⛔ Hermano del rig, jamás dentro del subárbol preserve-3d. */
[data-sun-anchor]{position:absolute;left:50%;top:50%;width:196px;height:425px;
transform:translate(-50%,-50%);visibility:hidden;pointer-events:none;
--sun-rise:93px;--sun-top:57px}
.rig-frame{position:absolute;inset:0;opacity:0;transform:translateY(22px);
animation:rig-in .9s var(--e-out) .5s forwards}
@keyframes rig-in{to{opacity:1;transform:none}}
/* UN SOLO RELOJ para todo el movimiento. Antes cada propiedad iba por su lado
(transform 1000 ms simétrica · opacidad 760 ms desacelerada · blur 700 ms):
con el transform teletransportando no se notaba, pero en cuanto el
dispositivo VIAJA de verdad, llegaba a opacidad plena y a foco 240-300 ms
antes de llegar a su sitio — es decir, terminaba de "aparecer" a media
trayectoria. Misma duración y misma curva para las cuatro. */
/* ══════════════════════════════════════════════════════════════════════════
LA TORNAMESA
Antes cada posición se escribía a mano (--x/--z por slot) y el navegador
interpolaba en LÍNEA RECTA entre ellas: los tres se cruzaban amontonados por
el centro. Ahora los tres viven clavados en el borde de una circunferencia,
a 120° uno de otro, y lo que gira es EL ESCENARIO. Cada uno describe su arco
solo, sin que nadie le calcule la trayectoria — que es literalmente cómo
funciona un carrusel.
La geometría se deriva de dos números y nada más:
--u semi-ancho aparente de la formación (lo que ya se ajustaba por
tamaño de pantalla)
--zf profundidad del que está al frente
El radio sale de que el de atrás se ve a ±u: u = R·sin(120°) → R = u/0.866.
Y el centro del círculo se corre a --zc para que el frontal caiga justo en
--zf, o sea que el protagonista queda EXACTAMENTE donde estaba antes.
══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ EL RADIO ES EXACTAMENTE `--u`, y esto NO es una aproximación cómoda.
Con tres puestos a 120°, el punto MÁS ANCHO del vuelo está a |x| = r, pero en
reposo los de atrás se quedan a r·sen(120°) = 0.866·r. Es decir: el barrido
siempre se abre un 15 % más que donde descansan. Con r = u/0.866 (que sería
"conservar la formación igual que antes") el bulto se comía el borde y los
aparatos se cortaban contra `.hero{overflow:hidden}` — medido: −60 px a
1280, −31 px a 960, −26 px a 390.
Haciendo r = u, el punto más ancho del arco cae JUSTO donde los aparatos
descansaban antes: el carrusel no ocupa ni un píxel más de ancho que la
versión que ya estaba aprobada, y deja de recortarse en todos los anchos.
El precio es que en reposo la formación queda un 13 % más junta.
`--kz` estira la órbita SOLO en profundidad, sin tocar el ancho: es lo que
permite que en móvil los de atrás sigan bien recesados con un radio chico. */
.rig{--persp:1500px;--u:clamp(150px,15vw,238px);--zf:150px;
--r:var(--u);
--kz:1;
--cz:calc(var(--zf) - var(--kz) * var(--r)); /* centro del círculo */
--spin:0deg; /* lo mueve rig.js: −120° por paso */
--dur:1000ms;--dur-fade:var(--dur);--dur-blur:var(--dur);
position:absolute;inset:0;perspective:var(--persp);
perspective-origin:50% 40%} /* el knob del "visto desde arriba", gratis */
.rig-stage{position:absolute;inset:0;display:grid;place-items:center;
transform-style:preserve-3d}
/* ⚠️ TODA la mecánica del arco vive en ESTA lista, y el que sea UNA sola lista
es justo lo que la hace correcta. Se lee de izquierda a derecha:
translate3d(0,y,cz) planta el origen en el CENTRO del círculo
rotateY(ang) apunta hacia el puesto que le toca
translateZ(r) sale al borde — AQUÍ nace el arco: al interpolar `ang`
el punto recorre la circunferencia, no la cuerda.
Es geometría, no easing.
rotateY(-ang) BILLBOARD: lo devuelve paralelo al horizonte, como
Sergio pidió (nada de "caídos hacia el centro").
scale(s) dirección de arte, ya en el marco del propio aparato.
⛔ NO separar la rotación en el escenario y la contra-rotación en el hijo:
serían DOS transiciones independientes y basta un cuadro de desfase para
que los aparatos se inclinen 4° (medido; 5 cuadros → 20°). Dentro de una
sola lista es el MISMO número interpolado con el signo cambiado, así que
la cancelación es exacta por construcción.
⛔ Tampoco partirlo en dos elementos anidados para "curvar con dos easings":
`--o:.22` hace que el subárbol se aplane y el translateZ del hijo deja de
existir en 3D.
⛔ Sin z-index a propósito: dentro de un preserve-3d Chrome ordena por
profundidad real (medido). El aparato que había aquí —--zi y dos keyframes
de relevo— estaba inerte, y encima le faltaba el tercer tramo del ciclo. */
.dev{grid-area:1/1;
--ang:calc(var(--a0) + var(--spin,0deg));
transform:
translate3d(0px,var(--y,0px),var(--cz))
scaleZ(var(--kz))
rotateY(var(--ang)) translateZ(var(--r)) rotateY(calc(-1 * var(--ang)))
scaleZ(calc(1 / var(--kz)))
scale(var(--s,1));
opacity:var(--o);
transition:transform var(--dur) var(--e-io),opacity var(--dur-fade) var(--e-io);
will-change:transform,opacity;transform-style:flat}
/* Puesto BASE de cada aparato en la circunferencia. 0° es el frente.
⛔ Deben corresponder al data-slot INICIAL del index.html (mac=back-left,
phone=front, pad=back-right): si se reordenan los , hay que
reordenar esto o la formación arranca revuelta. */
.dev[data-ang="0"] {--a0:0deg}
.dev[data-ang="120"]{--a0:120deg}
.dev[data-ang="240"]{--a0:240deg}
/* El SLOT ya solo dice QUIÉN manda —tamaño, velo y foco—, no dónde está.
La posición la da el ángulo; esto es dirección de arte. */
.dev[data-slot="front"] {--y:0px;--s:1; --o:1; --b:0px; --shadow:.50;--shadow-w:.80}
.dev[data-slot="back-left"] {--y:0px;--s:.94;--o:.22;--b:1.1px;--shadow:.18;--shadow-w:.62}
.dev[data-slot="back-right"]{--y:0px;--s:.94;--o:.22;--b:1.1px;--shadow:.18;--shadow-w:.62}
/* Chasis: los tres heredan la misma terna del mockup original — gradiente
ciruela→noche, filo marfil de 1px y bisel interior. Es lo que los hace familia. */
/* Recesión atmosférica de los traseros. El blur va en el CHASIS del frame, no
en un contenedor: `filter` aplana cualquier preserve-3d del subárbol, y el
MacBook necesita el suyo intacto para la bisagra. */
.dev--phone .device,.dev--pad .device{filter:blur(var(--b));
transition:filter var(--dur-blur) var(--e-io)}
.dev--mac .device-frame,.dev--mac .device-power{filter:blur(var(--b));
transition:filter var(--dur-blur) var(--e-io)}
/* ══ AJUSTE DE LOS FRAMES DE devices.css (MIT) ══
devices.css trae tamaños FIJOS en px (iPhone 428×868, iPad 560×778,
MacBook 740×434). Aquí solo se ESCALAN al tamaño del slot — devices.css queda
intacto y reemplazable por una versión nueva del upstream.
⚠️ El factor de escala es un NÚMERO PURO, no una longitud: `scale()` rechaza
`calc(194px/428)` porque eso da `0.45px`. Por eso los tamaños viven como
números (`--kp`) y el ancho se deriva con `calc(N * 1px)`, no al revés.
⚠️ `transform` no colapsa el espacio que ocupa el elemento → `.dev` fija la
caja real y `.dev-fit` hace el escalado dentro. */
.rig{--kp:.62; --kt:.56; --km:.64} /* iPhone · iPad · Mac */
.dev-fit{position:absolute;top:50%;left:50%;transform-origin:50% 50%}
.dev .device{margin:0}
.dev .device-screen{background:#0b0510}
.dev video.device-screen{object-fit:cover;display:block}
/* iPhone — 428×868 nativo. ⛔ Se OCULTA la Dynamic Island del frame: el video
graba el framebuffer completo del device y YA la trae; dos islas superpuestas
fue el primer error que cazó Sergio. */
.dev--phone{width:calc(428px * var(--kp));height:calc(868px * var(--kp))}
.dev--phone .dev-fit{transform:translate(-50%,-50%) scale(var(--kp))}
.dev--phone .device-header,.dev--phone .device-sensors{display:none}
/* iPad — 560×778 nativo y SOLO vertical en devices.css. Se gira el chasis a
horizontal (por eso ancho y alto se cruzan) y se contra-gira el video, que
está grabado en horizontal. */
.dev--pad{width:calc(778px * var(--kt));height:calc(560px * var(--kt))}
.dev--pad .dev-fit{transform:translate(-50%,-50%) rotate(-90deg) scale(var(--kt))}
.dev--pad .device-frame{overflow:hidden}
/* Centrado por transform, no por left/top calculados a mano: el bloque
contenedor de un absolute es el PADDING box, y hacer la cuenta a mano dejaba
el video descuadrado dentro del cuerpo (lo cazó Sergio). */
.dev--pad .device-screen{position:absolute;top:50%;left:50%;
width:724px;height:506px;transform:translate(-50%,-50%) rotate(90deg)}
.dev--pad .device-header,.dev--pad .device-sensors{display:none}
/* MacBook — 740×434 nativo. `.device-frame` es la TAPA y `.device-power` la
BASE: hermanos, así que la tapa gira sobre su bisagra y SE ABRE al pasar al
frente. Todo colgado del mismo cambio de data-slot que dispara el carrusel
— cero JS nuevo. */
.dev--mac{width:calc(740px * var(--km));height:calc(434px * var(--km))}
.dev--mac .dev-fit{transform:translate(-50%,-50%) scale(var(--km))}
/* La Mac va SIEMPRE ABIERTA y encendida — atrás y al frente — igual que el iPad:
así de un vistazo se entiende que el sistema corre en cualquier dispositivo
(decisión de Sergio, 2026-07-28). La bisagra animada se retiró. */
/* La PANTALLA del Mac replica el escritorio real: el notch vive en la BARRA DE
MENÚS, no sobre la ventana. Sin esta barra el notch corta las pestañas de la
app — exactamente lo que Sergio detectó comparando con su propio Mac. */
.dev--mac .mac-escritorio{position:relative;width:600px;height:375px;overflow:hidden;
border:2px solid #121212;border-radius:10px 10px 0 0;background:#0b0510;
display:flex;flex-direction:column}
.dev--mac .mac-menubar{flex:0 0 17px;background:#0b0a0d;
box-shadow:inset 0 -1px 0 rgba(244,237,228,.07)}
.dev--mac .mac-video{flex:1 1 auto;width:100%;min-height:0;object-fit:cover;
object-position:top center;display:block;background:#0b0510}
/* ══ EL VELO ══ Una lámina del color del fondo entre el protagonista y los que
esperan detrás. Se intuye que hay más dispositivos —basta para entender de un
vistazo que el sistema corre en cualquiera— sin que compitan con el del
frente. Pedido de Sergio (2026-07-28): "que se vean pero muy poco".
Va como capa del propio `.dev`, no como un plano en el escenario: un plano
con opacidad dentro de un preserve-3d se aplana y deja de ordenarse por
profundidad. */
/* El velo NO puede ser una lámina rectangular encima: el fondo del héroe es un
degradado, así que un rectángulo de color plano se recorta contra él y deja un
RECUADRO visible alrededor del dispositivo (lo cazó Sergio).
La misma sensación —"tras un cristal del color del fondo"— se consigue bajando
la opacidad del propio dispositivo: el fondo se transparenta a través de él,
con su forma exacta y sin bordes. Matemáticamente equivale a un velo del 85 %.
⛔ Aquí NO va ninguna `transition`: esta regla tiene la misma especificidad que
la de arriba y le pisaba la del `transform`, dejando el carrusel sin animación
de posición (se leía como "aparece y desaparece"). La opacidad ya viaja en la
transición única de `.dev`. */
/* El reflejo del marco ya lo trae devices.css (box-shadow inset); el nuestro se retiró. */
/* Sombra de contacto: elipse PINTADA, no un blur (un radial-gradient cuesta ~0,
un filter:blur por dispositivo no). Se anima `scale`, nunca `width`. */
.dev-shadow{position:absolute;left:50%;bottom:-9%;width:100%;height:13%;
translate:-50% 0;scale:var(--shadow-w) 1;
background:radial-gradient(ellipse at center,#000,rgba(0,0,0,0) 70%);
opacity:var(--shadow);pointer-events:none;
transition:scale var(--dur) var(--e-io),opacity var(--dur-fade) var(--e-io)}
/* Sin [data-ready] no hay transiciones: evita que el primer reparto de slots
se anime desde un estado sin definir. */
.rig:not([data-ready]) .dev,
.rig:not([data-ready]) .dev-shadow,.rig:not([data-ready]) .device,
.rig:not([data-ready]) .device-frame{transition:none!important}
/* ══ CONTROLES ══ El carrusel gira solo, pero quien quiera puede traer al frente
el dispositivo que le interese: flechas, puntos, clic en el propio aparato o
arrastre. Al tocar, el temporizador se reinicia (no se corta la reproducción).
WCAG 2.2.2: movimiento automático >5 s exige además un control de pausa. */
.rig-ctrl{position:absolute;right:0;bottom:-6px;z-index:60;
display:flex;align-items:center;gap:8px}
.rig-puntos{display:flex;align-items:center;gap:6px}
.rig-punto{width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
background:rgba(244,237,228,.26);border:0;
transition:background .22s var(--e-out),transform .22s var(--e-out)}
.rig-punto[aria-current="true"]{background:var(--amber);transform:scale(1.32)}
@media (hover:hover) and (pointer:fine){
.rig-punto:hover{background:rgba(244,237,228,.55)}
}
/* El arrastre se anuncia con el cursor, no con flechas: la mano abierta invita
a agarrar y la cerrada confirma que estás girando. */
.rig{cursor:grab}
.rig[data-arrastrando]{cursor:grabbing}
.rig[data-arrastrando] .dev{transition:none}
.dev[data-slot="back-left"],.dev[data-slot="back-right"]{cursor:grab}
/* mientras se arrastra, la escena acompaña al dedo — sin eso el gesto no se
siente conectado y parece que la página se trabó */
/* ⚠️ Esta regla y la de arriba tienen la MISMA especificidad, así que ésta gana
y define el transform del escenario ENTERO. El arrastre es lo único que va
aquí — la órbita vive en `.dev`. Si algún día hiciera falta añadirle algo al
escenario, va EN ESTA regla, no en la otra. */
.rig-stage{transform:translate3d(var(--drag,0px),0,0);
transition:transform .42s var(--e-out)}
.rig[data-arrastrando] .rig-stage{transition:none}
.dev:focus-visible{outline:3px solid var(--amber);outline-offset:6px;border-radius:12px}
.rig{touch-action:pan-y} /* el arrastre horizontal es nuestro; el vertical, del scroll */
.rig-toggle{position:relative;z-index:60;
font-family:var(--body);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--ivory-3);background:rgba(22,13,34,.4);border:1px solid rgba(244,237,228,.1);
border-radius:99px;padding:6px 11px;cursor:pointer;
transition:transform .14s var(--e-out),color .14s ease,border-color .14s ease}
.rig-toggle:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.rig-toggle:hover{color:var(--ivory);border-color:rgba(244,237,228,.3)}}
.cue{position:absolute;left:50%;bottom:24px;translate:-50%;z-index:4;color:var(--ivory-3);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-family:var(--body);font-weight:600;display:flex;flex-direction:column;align-items:center;gap:9px;opacity:0;animation:rise .8s var(--e-out) 1.2s forwards}
.cue .rail{width:1px;height:34px;background:linear-gradient(var(--amber),transparent);position:relative;overflow:hidden}
.cue .rail::after{content:"";position:absolute;inset:0;background:var(--amber);animation:railrun 1.9s var(--e-out) infinite}
@keyframes railrun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
/* ===== MANIFIESTO ===== */
.manifesto{background:var(--plum);color:var(--ivory);padding:clamp(88px,16vh,168px) 0;position:relative;overflow:hidden}
.manifesto::after{content:"";position:absolute;right:-6%;top:52%;translate:0 -50%;width:46vw;aspect-ratio:1;background:radial-gradient(circle,rgba(245,167,51,.09),transparent 62%);pointer-events:none}
.manifesto .wrap{position:relative;z-index:2;max-width:760px}
.manifesto h2{font-size:clamp(29px,4.8vw,50px);font-weight:600;max-width:20ch;letter-spacing:-.02em}
.manifesto p{font-size:clamp(17px,1.5vw,20px);color:var(--ivory-2);margin-top:26px;font-weight:500;line-height:1.68}
.manifesto .kick{color:var(--ivory);font-weight:600}
/* ===== CAPACIDADES ===== */
.caps{background:var(--paper);color:var(--ink);padding:clamp(80px,13vh,148px) 0;position:relative}
.caps .head{max-width:720px;margin-bottom:clamp(50px,8vh,88px)}
.caps .head h2{font-size:clamp(30px,4.4vw,50px);font-weight:600;margin-top:18px;max-width:16ch}
.caps .head p{color:var(--ink-2);font-size:19px;margin-top:18px;max-width:50ch}
.caplist{display:flex;flex-direction:column}
.cap{display:grid;grid-template-columns:56px 1fr;gap:clamp(18px,3vw,40px);padding:clamp(34px,5.5vh,56px) 0;border-top:1px solid var(--line);align-items:start}
.cap:first-child{border-top:0}
/* Sección clara SIN sombras (pedido de Sergio, 2026-07-28): los íconos van
planos, la jerarquía la dan el color y el tamaño. */
.cap .mk{width:46px;height:46px;border-radius:14px;background:#f3edf5;display:grid;place-items:center;transition:transform .55s var(--e-out),background .55s var(--e-out)}
.cap .mk svg{width:23px;height:23px;display:block;color:var(--amber-dp);transition:color .5s}
.cap.lit .mk{background:linear-gradient(140deg,var(--amber-lt),var(--amber-dp));transform:rotate(-7deg) scale(1.05)}
.cap.lit .mk svg{color:#fff}
.cap h3{font-size:clamp(23px,3.2vw,33px);font-weight:600;color:#6E6479;transition:color .6s var(--e-out)}
/* Al pasar el rayo, el título solo se PINTA de tinta. Sin sombra proyectada
(pedido de Sergio, 2026-07-28: la sección clara va sin sombras, ninguna). */
.cap.lit h3{color:var(--ink);text-shadow:none}
.cap p{font-size:clamp(16px,1.7vw,18px);color:var(--ink-2);max-width:54ch;margin-top:16px;font-weight:500;line-height:1.62}
/* ===== CÓMO ===== */
.how{background:var(--plum);color:var(--ivory);padding:clamp(80px,13vh,148px) 0;position:relative;overflow:hidden}
.how .head{max-width:660px}
.how .head h2{font-size:clamp(28px,4.2vw,46px);font-weight:600;margin-top:16px;max-width:17ch}
.how .trust{margin-top:30px;color:var(--ivory-2);font-size:14.5px;font-weight:600;display:inline-flex;align-items:baseline;gap:9px;max-width:780px;line-height:1.55}
.how .trust::before{content:'';width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--amber);transform:translateY(-2px)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(42px,6vh,66px)}
.step{background:rgba(244,237,228,.035);border-radius:20px;padding:26px 22px;position:relative;box-shadow:inset 0 1px 0 rgba(244,237,228,.08);transition:transform .34s var(--e-out),background .34s}
.step:hover{transform:translateY(-6px);background:rgba(244,237,228,.06)}
.step .n{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--amber);letter-spacing:.06em}
.step h3{font-size:19px;font-weight:600;margin:13px 0 8px;color:var(--ivory)}
.step p{font-size:14.5px;color:var(--ivory-2);line-height:1.55}
.step .bar{height:3px;width:32px;background:linear-gradient(90deg,var(--amber-lt),var(--amber-dp));border-radius:3px;margin-top:16px;transform-origin:left;transform:scaleX(.35);transition:transform .5s var(--e-out)}
.step:hover .bar{transform:scaleX(1)}
/* ===== MISIÓN ===== */
.mission{background:radial-gradient(120% 130% at 50% 120%,#3a2450,var(--plum) 55%,var(--sky));color:var(--ivory);text-align:center;padding:clamp(88px,16vh,168px) 0}
.mission h2{font-size:clamp(28px,4.8vw,52px);font-weight:600;max-width:20ch;margin-inline:auto;letter-spacing:-.02em}
.mission h2 em{font-style:normal;color:var(--amber)}
.mission p{color:var(--ivory-2);font-size:clamp(17px,1.5vw,20px);max-width:50ch;margin:24px auto 0;font-weight:500}
/* ===== CTA ===== */
.cta{background:linear-gradient(180deg,var(--sky),#241528);color:var(--ivory);text-align:center;padding:clamp(90px,16vh,172px) 0;position:relative;overflow:hidden}
.cta .sunrise{display:none} /* glow amarillo del CTA retirado (feedback socios 2026-07-22) — solo el color de fondo */
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:clamp(31px,5.2vw,60px);font-weight:600;max-width:15ch;margin:0 auto 18px;letter-spacing:-.02em}
.cta p{color:var(--ivory-2);font-size:clamp(17px,1.5vw,20px);max-width:44ch;margin:0 auto 34px}
.cta .micro{display:block;margin-top:20px;color:var(--ivory-3);font-family:var(--body);font-size:14px}
.cta .micro a{color:var(--amber);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(245,167,51,.4)}
footer{background:#100819;color:var(--ivory-3);padding:46px 0;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
footer .fm{display:flex;align-items:center;gap:11px;color:var(--ivory-2)}
footer .fm img{width:28px;height:28px;opacity:.95}
footer .fm .wm{height:15px}footer .fm .wm svg{height:15px;width:auto;display:block;color:var(--ivory-2)}
footer .tg{color:var(--amber-dp);font-weight:600}
@media (max-width:900px){
.hero .wrap{grid-template-columns:1fr;gap:6px}
.hero-visual{order:-1;height:min(54vh,430px);align-items:flex-end;padding-bottom:6px}
.steps{grid-template-columns:repeat(2,1fr)}
/* El triángulo colapsa a BARAJA: encogerlo dejaría los traseros a ~110px de
ancho (video ilegible) y se comería todo el viewport. En vez de eso, se
meten DETRÁS del protagonista y asoman. Mismo ciclo, otra tabla de datos. */
/* En móvil el wordmark y la formación comparten el centro, así que fijar el
sol a la altura de SOLMIL lo montaba ENCIMA de las letras. Aquí vuelve a
nacer sobre los dispositivos: `none` no es número → el JS lo ignora. */
/* `--sun-rise` bajó de 73 a 18: el header creció a 98px al despegar el
wordmark, y con 73 el sol se metía encima de las letras (medido: se pisaban
entre x 157–191). Con 18 nace a y≈138, justo debajo. */
[data-sun-anchor]{width:150px;height:326px;--sun-rise:18px;--sun-top:none}
.rig{--persp:1150px;--u:clamp(50px,12vw,108px);perspective-origin:50% 46%}
.rig{--kp:.39;--kt:.33;--km:.34}
/* En móvil el frente se acerca menos (--zf) y la formación es más estrecha
(--u): el radio del carrusel se deriva solo de esos dos. Los de atrás van
OPACOS aquí a propósito — a este tamaño el velo del 22 % los borraba. */
.rig{--zf:80px;--kz:2.1}
.dev[data-slot="front"]{--y:20px;--s:1}
.dev[data-slot="back-left"],
.dev[data-slot="back-right"]{--y:-26px;--s:.9;--o:1;--b:1.4px}
/* el rig llega hasta donde arranca el copy: el botón se anclaba encima del eyebrow */
.rig-ctrl{right:6px;bottom:12px}
.rig-toggle{font-size:9.5px;padding:5px 10px}
}
/* Entre 900 y 1280 la columna de la visual se estrecha y la formación se comía
el borde derecho contra `.hero{overflow:hidden}` (visto en QA a 1024×768).
Se encoge el triángulo y los dispositivos, no se recorta. */
@media (min-width:901px) and (max-width:1439px){
.rig{--u:clamp(96px,10.6vw,168px);--kz:1.7}
.rig{--kp:.50;--kt:.45;--km:.52}
.dev[data-slot="back-left"],.dev[data-slot="back-right"]{--y:-84px;--s:.8}
.dev[data-slot="front"]{--y:20px}
}
/* Móvil chico: fuera el blur — es lo más caro que existe en una GPU móvil
sobre video. La recesión la cargan la opacidad y la sombra de contacto. */
@media (max-width:560px){
.rig{--dur:900ms}
.rig-ctrl{right:6px;bottom:10px;gap:6px}
.rig-toggle{font-size:9px;padding:5px 9px}
.dev[data-slot="back-left"],.dev[data-slot="back-right"]{--b:0px}
}
@media (max-width:700px){ .nav a:not(.cta){display:none} #leaf{display:none} }
@media (max-width:520px){ .cap{grid-template-columns:1fr}.cap .mk{display:none} }
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
#leaf,#sunlight{display:none}#sun.rise{animation:none}
/* ⚠️ `.rig-frame` DEBE estar aquí: nace con opacity:0 y su animación de entrada
no corre bajo reduced-motion → sin esta línea el HÉROE QUEDA VACÍO.
⛔ `.dev` NO puede entrar: `transform:none!important` le borraría la
colocación 3D y la formación colapsaría a tres tarjetas apiladas. */
.reveal,.hero-copy>*,.cue,.phone,.rig-frame{opacity:1!important;transform:none!important;animation:none!important}
.dev,.dev-shadow,.device,.device-frame{transition:none!important}
.cap h3{color:var(--ink)}.cap .mk{background:linear-gradient(140deg,var(--amber-lt),var(--amber-dp))}.cap .mk svg{color:#fff}
}
/* ===== CLIENTES (#clientes) =====
Los logos van en círculos de fondo marfil para que convivan marcas de colores
muy distintos sin que ninguna desentone. El de Riverside es blanco sobre
transparente, así que ese círculo va oscuro (`--oscuro`). */
.social{background:var(--plum);color:var(--ivory);padding:clamp(56px,9vh,96px) 0;position:relative;overflow:hidden}
.social .wrap{position:relative;z-index:2;text-align:center}
.social h2{font-size:clamp(28px,4.2vw,46px);font-weight:600;margin:18px 0 0;color:var(--ivory);letter-spacing:-.02em}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
gap:clamp(26px,4.4vw,56px);margin-top:clamp(34px,5vh,52px)}
.cliente{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;width:clamp(118px,13.5vw,164px)}
/* Un ESPACIO circular, no un círculo pintado: los logos van en blanco directo
sobre el ciruela y ocupan todo el hueco. Con un disco blanco de fondo cada
marca quedaba encajonada; así se integran (pedido de Sergio, 2026-07-28).
⚠️ La imagen ocupa el cuadro COMPLETO (width y height al 100% + contain): con
`width:auto` cada logo tomaba una altura distinta según su proporción y las
cuatro marcas quedaban a alturas diferentes. */
/* ⚠️ La imagen va ABSOLUTA dentro del hueco, y eso no es capricho: el SVG de
Riverside es el único con proporción intrínseca VERTICAL, y como ítem de
grid su tamaño mínimo automático estiraba la caja a 164×204 en vez de
164×164 — el logo colgaba fuera de la línea de los otros dos.
Medido: ni `min-height:0` ni `contain:size` lo evitan (el primero no vence al
mínimo automático del ítem; el segundo cuadra el contenedor pero deja que la
imagen se desborde igual). Sacarla del flujo con `inset:0` sí lo fija: su
bloque contenedor pasa a ser el hueco cuadrado, exacto. */
.cl-circulo{width:100%;aspect-ratio:1;position:relative;
transition:transform .5s var(--e-out)}
/* EQUILIBRIO ÓPTICO, marca por marca.
Igualar la CAJA no sirve: los tres logos son de naturalezas distintas —
HATVER es un emblema ancho con dos líneas, eula es una palabra suelta
recortada al borde de las letras, y Riverside es una marca vertical de línea
fina sobre un wordmark espaciado. Con la caja igualada, eula pintaba el
cuádruple de tinta que Riverside y se comía la fila (lo cazó Sergio).
⛔ Tampoco sirve igualar el ÁREA DE TINTA: probado y descartado, porque
infla los logos de trazo fino — Riverside acababa siendo el más grande de
los tres. Lo que sí funciona es igualar el TAMAÑO APARENTE, que para formas
de proporciones distintas es la media geométrica de su caja de tinta.
Los factores salieron de comparar cuatro variantes en pantalla y elegir. */
.cl-circulo img{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;display:block;
transform:scale(var(--k,1));transform-origin:50% 50%}
.cliente[data-marca="hatver"] {--k:.87}
.cliente[data-marca="eula"] {--k:.75}
.cliente[data-marca="riverside"]{--k:.99}
/* Se probaron tres alturas para Riverside (−3 %, 0, +4 %) y gana el 0: con la
caja ya cuadrada, los tres bajantes —"S.A. de C.V.", "RECETAS QUE REÚNEN" y
"CHACHALACAS"— caen solos a la misma altura. Cualquier empujón los desalinea. */
.cliente figcaption{font-family:var(--body);font-size:clamp(13px,1.4vw,15px);font-weight:700;
letter-spacing:.02em;color:var(--ivory-1)}
@media (hover:hover) and (pointer:fine){.cliente:hover .cl-circulo{transform:translateY(-4px) scale(1.04)}}
/* Testimonios. Sin tarjeta ni sombra: solo la frase y quién la dijo — la
sección clara ya no lleva sombras y estas siguen el mismo criterio. */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:clamp(24px,3.4vw,44px);margin:clamp(38px,5.5vh,60px) auto 0;max-width:1000px;text-align:left}
.quote{margin:0;padding-left:18px;border-left:2px solid rgba(245,167,51,.42)}
.quote p{font-family:var(--disp);font-size:clamp(16px,1.75vw,19px);font-weight:500;line-height:1.42;
color:var(--ivory);letter-spacing:-.01em}
.quote cite{display:block;margin-top:14px;font-style:normal;font-family:var(--body);font-size:13px;color:var(--ivory-2)}
.quote cite b{display:block;color:var(--ivory);font-weight:700;font-size:14px}
@media (max-width:640px){.quotes{text-align:left}}
.social .seed{font-size:clamp(16px,1.9vw,19px);color:var(--ivory-2);font-weight:500;max-width:46ch;
margin:clamp(34px,5vh,50px) auto 0}
.social .seed b{color:var(--ivory);font-weight:600}
.social .seed a{color:var(--amber);text-decoration:none;font-weight:700;white-space:nowrap;
border-bottom:1px solid rgba(245,167,51,.35)}
/* ⚠️ Aquí vivía el muro de logos ANTERIOR (modo semilla). Sus reglas
`.social .logos img` ganaban por especificidad a las nuevas y forzaban
height:44px + brightness(0) invert(1) — por eso los logos salían en blanco
dentro de círculos vacíos. Retiradas por completo. */
/* ================= PÁGINAS INTERNAS (Soluciones · Clientes) ================= */
.nav a{position:relative}
.nav a[aria-current="page"]{color:var(--ivory)}
.nav a[aria-current="page"]:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--amber);border-radius:2px}
/* héroe de página interna */
.phero{position:relative;background:radial-gradient(130% 100% at 50% -10%,#2a1840,var(--plum) 55%,var(--sky));color:var(--ivory);padding:clamp(132px,21vh,210px) 0 clamp(64px,10vh,116px);overflow:hidden}
.phero .glow{position:absolute;left:50%;top:-26%;translate:-50%;width:86%;aspect-ratio:2/1;background:radial-gradient(closest-side,rgba(245,167,51,.15),transparent 70%);pointer-events:none}
.phero .wrap{position:relative;z-index:2;max-width:900px}
.phero h1{font-size:clamp(38px,6vw,74px);font-weight:500;letter-spacing:-.025em;margin:22px 0 0;max-width:17ch;color:var(--ivory)}
.phero .lead{font-size:clamp(17px,1.55vw,21px);color:var(--ivory-2);max-width:58ch;margin:28px 0 0;font-weight:500;line-height:1.62}
.phero .micro{font-size:14.5px;color:var(--ivory-3);margin:20px 0 0;font-weight:600}
/* sección genérica */
.sec{padding:clamp(76px,12vh,146px) 0;position:relative;overflow:hidden}
.sec.light{background:var(--paper);color:var(--ink)}
.sec.dark{background:var(--plum);color:var(--ivory)}
.sec .head{max-width:730px;margin-bottom:clamp(42px,7vh,78px)}
.sec .head h2{font-size:clamp(28px,4.3vw,48px);font-weight:600;margin-top:16px;max-width:19ch;letter-spacing:-.02em}
.sec .head p{font-size:18.5px;margin-top:18px;max-width:56ch;line-height:1.6;font-weight:500}
.sec.light .head p{color:var(--ink-2)} .sec.dark .head p{color:var(--ivory-2)}
/* grid de industrias */
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.icard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 26px;transition:transform .32s var(--e-out),box-shadow .32s var(--e-out),border-color .32s}
.icard:hover{transform:translateY(-4px);box-shadow:0 26px 54px -26px rgba(31,18,46,.26);border-color:rgba(229,133,27,.42)}
.icard .ic{display:block;margin-bottom:15px}
.icard .ic svg{width:27px;height:27px;stroke:var(--amber-dp);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icard h3{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.icard p{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin-top:9px}
.fnote{text-align:center;margin-top:42px;font-size:17.5px;color:var(--ink-2);font-weight:500;max-width:52ch;margin-inline:auto;line-height:1.55}
.fnote b{color:var(--ink);font-weight:600}
/* principios (oscuro, 4) */
.prin{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 52px}
.prin .num{font-family:var(--disp);font-size:14px;font-weight:700;color:var(--amber);letter-spacing:.06em;display:block;margin-bottom:13px}
.prin h3{font-size:20px;font-weight:600;color:var(--ivory);letter-spacing:-.01em;max-width:22ch}
.prin p{color:var(--ivory-2);font-size:15.5px;line-height:1.62;margin-top:11px;max-width:46ch;font-weight:500}
/* capacidades (claro, 10 · menú, sin numerar) */
.capgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cap2{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;gap:15px;align-items:flex-start;transition:border-color .3s,transform .3s var(--e-out),box-shadow .3s}
.cap2:hover{border-color:rgba(229,133,27,.42);transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(31,18,46,.2)}
.cap2 .mk{flex:none;margin-top:2px}
.cap2 .mk svg{width:17px;height:17px;stroke:var(--amber-dp);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cap2 h3{font-size:16.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.cap2 p{color:var(--ink-2);font-size:14.5px;line-height:1.5;margin-top:6px}
/* banda puente entre páginas */
.bridge{background:var(--plum-2);color:var(--ivory);text-align:center;padding:clamp(50px,9vh,86px) 0}
.bridge a{color:var(--ivory);font-family:var(--disp);font-size:clamp(21px,2.7vw,32px);font-weight:600;text-decoration:none;letter-spacing:-.015em;display:inline-flex;align-items:center;gap:14px;transition:gap .26s var(--e-out)}
.bridge a:hover{gap:20px} .bridge .arrow{color:var(--amber)}
/* invitación (Clientes modo semilla) */
.invite{background:var(--paper);color:var(--ink);text-align:center;padding:clamp(80px,15vh,158px) 0}
.invite .wrap{max-width:660px}
.invite .eyebrow{justify-content:center}
.invite h2{font-size:clamp(29px,4.4vw,50px);font-weight:600;letter-spacing:-.02em;max-width:17ch;margin:18px auto 0}
.invite p{color:var(--ink-2);font-size:19px;margin:22px auto 0;max-width:48ch;line-height:1.62;font-weight:500}
.invite .actions{margin-top:36px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.invite .btn-ghost{border-color:rgba(31,18,46,.2);color:var(--ink)}
.invite .btn-ghost:hover{border-color:rgba(31,18,46,.42);background:rgba(31,18,46,.04)}
/* casos / reseñas (esqueleto real, oculto en modo semilla) */
[data-cases="off"] .caseblk{display:none}
.caseblk{max-width:820px;margin:0 auto}
@media(max-width:820px){.igrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.prin{grid-template-columns:1fr;gap:32px}}
@media(max-width:640px){.igrid,.capgrid{grid-template-columns:1fr}}
/* ===== MENÚ MÓVIL (hamburguesa) ===== */
.menu-btn{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;margin-left:2px}
.menu-btn span{display:block;height:2px;width:22px;background:var(--ivory);border-radius:2px;transition:transform .3s var(--e-out),opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.mmenu{display:none}
@media(max-width:700px){
.menu-btn{display:flex}
.mmenu{display:block;position:fixed;top:74px;left:0;right:0;z-index:79;background:rgba(18,9,28,.97);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--line-d);padding:6px 0;transform:translateY(-14px);opacity:0;pointer-events:none;transition:transform .32s var(--e-out),opacity .3s}
.mmenu.open{transform:none;opacity:1;pointer-events:auto}
.mmenu a{display:block;padding:15px 26px;color:var(--ivory-2);text-decoration:none;font-family:var(--body);font-weight:600;font-size:17px}
.mmenu a[aria-current="page"]{color:var(--amber)}
.mmenu a:active{background:rgba(244,237,228,.06)}
}
/* ===== FORMULARIO DE CONTACTO (#contacto) =====
Campos grandes y de una sola columna en móvil: quien escribe aquí es un dueño
de negocio con prisa, no un formulario de banco. Sin sombras, coherente con
el resto. */
.form{max-width:640px;margin:clamp(30px,4.5vh,44px) auto 0;text-align:left;display:grid;gap:16px}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:grid;gap:7px}
.campo>span{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ivory-2)}
.campo input,.campo textarea{
font-family:var(--body);font-size:15.5px;color:var(--ivory);
background:rgba(244,237,228,.05);border:1.5px solid rgba(244,237,228,.16);
border-radius:14px;padding:14px 16px;width:100%;
transition:border-color .2s var(--e-out),background .2s var(--e-out)}
.campo textarea{resize:vertical;min-height:112px;line-height:1.55}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(244,237,228,.34)}
.campo input:hover,.campo textarea:hover{border-color:rgba(244,237,228,.3)}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--amber);
background:rgba(244,237,228,.08)}
.form button[type=submit]{justify-self:start;margin-top:4px;border:0;cursor:pointer;font-family:var(--body)}
.aviso{font-family:var(--body);font-size:12.5px;line-height:1.6;color:var(--ivory-3);margin-top:2px}
.aviso b{color:var(--ivory-2);font-weight:700}
.aviso a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(245,167,51,.3)}
@media (max-width:640px){.form-fila{grid-template-columns:1fr}}
/* Aviso del formulario. Lo inyecta js/form.js — no vive en el HTML para que,
si el JS no corre, no quede un hueco vacío bajo el botón. */
.form-aviso{grid-column:1/-1;margin:14px 0 0;font-size:14.5px;line-height:1.55;
padding:12px 15px;border-radius:12px;font-weight:600}
.form-aviso a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.form-aviso--error{background:rgba(224,122,62,.12);border:1px solid rgba(224,122,62,.4);color:var(--ivory)}
.form-aviso--ok{background:rgba(122,190,120,.12);border:1px solid rgba(122,190,120,.4);color:var(--ivory)}