/* ═══════════════════════════════════════
SPINZ AGENCY — Shared stylesheet
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
:root {
--bg: #000;
--bg2: #080808;
--bg3: #0f0f0f;
--text: #f0f0f0;
--muted: #666;
--dim: #2a2a2a;
--line: rgba(255,255,255,0.07);
--line2: rgba(255,255,255,0.11);
--blue: #2B6FFF;
--cyan: #00BBFF;
--teal: #00FFCC;
--orange: #FF8000;
--red: #FF2800;
--accent: #2B6FFF;
--grad: linear-gradient(90deg, #2B6FFF 0%, #00BBFF 35%, #FF8000 70%, #FF2800 100%);
--font: 'Space Grotesk', sans-serif;
--body: 'DM Sans', sans-serif;
--ease: cubic-bezier(0.16,1,0.3,1);
--ease2: cubic-bezier(0.32,0.72,0,1);
--dot-grid: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
--line-grid: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
}
body { font-family: var(--body); background: var(--bg); color: var(--text); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
input, textarea, select { font-family: var(--body); }
/* ══ GRAIN ══ */
body::before {
content:''; position:fixed; inset:0; pointer-events:none; z-index:9990; opacity:.072;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* ══ SCROLL PROGRESS ══ */
#prog { position:fixed; top:0; left:0; height:1.5px; width:0; z-index:9997; background:var(--grad); }
/* ══ LOADER ══ */
#loader { position:fixed; inset:0; background:#000; z-index:9980; display:flex; align-items:center; justify-content:center; transition:opacity .8s var(--ease),visibility .8s; }
/* pointer-events:none de inmediato: durante los .8s del fade el loader seguia
siendo el elemento superior y se comia los taps. */
#loader.out { opacity:0; visibility:hidden; pointer-events:none; }
.ld-text { font-family:var(--font); font-size:.75rem; font-weight:700; letter-spacing:.25em; text-transform:uppercase;
background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* ══ NAV ══ */
nav {
position:fixed; top:0; left:0; right:0; z-index:800;
display:flex; align-items:center; justify-content:space-between;
padding:0 40px; height:60px;
border-bottom:1px solid var(--line);
background:rgba(0,0,0,.75);
backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
transition:border-color .4s, background .4s;
}
nav.scrolled { border-color:var(--line2); background:rgba(0,0,0,.92); }
.nav-brand { font-family:var(--font); font-size:.85rem; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.nav-dot { width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px rgba(43,111,255,.8); animation:dotPulse 2.5s ease infinite; }
/* ══ LOGO MARK ══
assets/logo.png is the official mark, already white on transparent —
no filter needed. Cropped from SPINZ LOGO NO BG.png; the full lockup
with wordmark and tagline lives at assets/logo-full.png.
Fades in on decode so a missing file never flashes a broken icon. */
.logo {
height:22px; width:auto; flex-shrink:0;
opacity:0; transition:opacity .4s var(--ease);
}
.logo.loaded { opacity:1; }
.logo-lg { height:30px; }
.ft-brand .logo { height:21px; }
@keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.8)} }
.nav-links { display:flex; gap:26px; align-items:center; }
.nav-links a { font-family:var(--font); font-size:.78rem; font-weight:500; color:var(--muted); letter-spacing:.01em; transition:color .25s; position:relative; }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-links a.active::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--grad); }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-cta { font-family:var(--font); font-size:.78rem; font-weight:600; color:var(--text); padding:7px 16px; border:1px solid var(--line2); border-radius:6px; letter-spacing:.01em; transition:border-color .25s,box-shadow .25s,background .25s; white-space:nowrap; }
.nav-cta:hover { border-color:rgba(43,111,255,.6); box-shadow:0 0 20px rgba(43,111,255,.2); background:rgba(43,111,255,.06); }
.nav-ham { display:none; flex-direction:column; gap:5px; padding:6px; }
.nav-ham span { display:block; width:18px; height:1px; background:var(--text); transition:all .35s var(--ease); }
.nav-ham.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-ham.open span:nth-child(2) { opacity:0; }
.nav-ham.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
/* ══ LANGUAGE TOGGLE ══ */
.lang-tog { display:flex; align-items:center; border:1px solid var(--line2); border-radius:6px; overflow:hidden; }
.lang-tog button {
font-family:var(--font); font-size:.68rem; font-weight:700; letter-spacing:.06em;
padding:6px 10px; color:var(--dim); transition:color .25s, background .25s;
}
.lang-tog button.on { color:#000; background:var(--text); }
.lang-tog button:not(.on):hover { color:var(--text); background:rgba(255,255,255,.05); }
/* ══ MOBILE NAV ══ */
/* z-index 850: el overlay TIENE que quedar por encima del nav (800). Si queda
debajo, la barra fija del nav intercepta los taps sobre "Cerrar" y el menu
no se puede cerrar en celular. */
.mob { display:none; position:fixed; inset:0; background:rgba(0,0,0,.96); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); z-index:850; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:48px 40px; gap:2px; overscroll-behavior:contain; }
.mob.open { display:flex; }
.mob a { font-family:var(--font); font-size:clamp(2.2rem,8vw,4rem); font-weight:800; letter-spacing:-.05em; color:var(--muted); transition:color .2s; line-height:1.12; }
.mob a:hover { color:var(--text); }
/* padding solo a la izquierda/vertical para agrandar el area tactil sin
mover el texto de su posicion original. */
.mob-close { position:absolute; top:max(10px, env(safe-area-inset-top)); right:40px; font-size:.95rem; color:var(--text); background:none; font-family:var(--font); padding:10px 0 10px 16px; line-height:1; cursor:pointer; }
.mob-foot { position:absolute; bottom:40px; right:40px; font-size:.7rem; color:var(--dim); font-family:var(--font); }
.mob-lang { position:absolute; top:max(14px, env(safe-area-inset-top)); left:40px; }
/* Bloquea el scroll del fondo mientras el menu esta abierto. */
body.mob-open { overflow:hidden; }
/* ══ SCROLL REVEAL ══ */
/* Sin filter:blur. Era lo mas caro de pintar de toda la pagina (se aplicaba a
decenas de elementos a la vez) y ademas enturbiaba el texto mientras entraba.
Solo opacidad y un desplazamiento corto: se lee mejor y va mas fluido. */
.r { opacity:0; transform:translateY(18px);
transition:opacity .7s var(--ease), transform .7s var(--ease);
will-change:transform,opacity; }
.r.in { opacity:1; transform:none; will-change:auto; }
.d1{transition-delay:.07s} .d2{transition-delay:.15s} .d3{transition-delay:.23s} .d4{transition-delay:.31s} .d5{transition-delay:.39s} .d6{transition-delay:.47s}
/* ── Stagger automatico ──
Los hijos de un contenedor .stagger entran en cascada. El retraso lo calcula
el JS y lo escribe como --i, asi no hay que mantener clases .d1….d6 a mano
en rejillas de 8, 12 o 26 elementos. */
/* Animation y no transition, a proposito. Los hijos (.wcard, .cap-tag,
.client-cell) ya declaran su propio `transition` para el hover, y como
`transition` es una sola propiedad la del hover ganaba y el escalonado no
ocurria. `animation` es un canal aparte y no se pelea con nada.
fill-mode backwards: sostiene el estado inicial durante el retraso y al
terminar devuelve el elemento a su estilo normal, para que el hover siga
mandando sobre transform. */
.stagger > * { opacity:0; }
.stagger.in > * { opacity:1;
animation:stagIn .55s var(--ease) backwards;
animation-delay:calc(var(--i, 0) * 45ms); }
@keyframes stagIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
/* ── Parallax de las fotos de proyecto ──
El JS solo escribe --py; la transformacion la sigue controlando el CSS, para
que el zoom del hover no se pelee con el desplazamiento del scroll. */
.wcard-img { transform:translate3d(0, var(--py, 0px), 0) scale(1.1); }
/* El hero se desvanece al salir. Lo escribe el JS en --hy / --ho. */
.hero-inner { transform:translate3d(0, var(--hy, 0px), 0); opacity:var(--ho, 1); }
/* ══ BUTTONS ══ */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:.8rem; font-weight:600; letter-spacing:.01em; padding:10px 20px; border-radius:6px; transition:all .3s var(--ease); }
.btn-solid { background:var(--text); color:#000; border:1px solid var(--text); }
.btn-solid:hover { background:#e2e2e2; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.btn-solid:active { transform:translateY(0); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--line2); }
.btn-outline:hover { border-color:rgba(43,111,255,.55); box-shadow:0 0 20px rgba(43,111,255,.18); background:rgba(43,111,255,.05); }
.btn-lg { font-size:.88rem; padding:14px 28px; border-radius:8px; }
.btn-wa { background:#25D366; color:#000; border:1px solid #25D366; }
.btn-wa:hover { background:#1eb356; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.25); }
/* ══ GRADIENT TEXT ══ */
.grad-text {
background:var(--grad);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
background-size:200% auto; animation:gradShift 5s linear infinite;
}
@keyframes gradShift { 0%{background-position:0% center} 100%{background-position:200% center} }
/* ══ GLOW HELPERS ══ */
.glow-blue { text-shadow: 0 0 50px rgba(43,111,255,.55), 0 0 100px rgba(0,187,255,.25); }
.glow-warm { text-shadow: 0 0 50px rgba(255,128,0,.45), 0 0 110px rgba(255,40,0,.22); }
.glow-teal { text-shadow: 0 0 50px rgba(0,255,204,.35), 0 0 100px rgba(0,187,255,.18); }
/* ══════════════════════════
HERO
══════════════════════════ */
.hero-wrap { position:relative; overflow:hidden; }
.hero-aurora {
position:absolute; right:-12%; top:-35%; width:80%; height:170%;
border-radius:38% 62% 44% 56% / 52% 42% 58% 48%;
background: conic-gradient(
from 215deg at 46% 52%,
#03008a 0deg, #0033dd 16deg, #0066ff 32deg,
#0099ff 48deg, #00bbff 63deg, #00ddee 76deg,
#00ffdd 88deg, #ccffee 98deg, #fffbdc 110deg,
#ffe066 120deg, #ffcc00 132deg, #ff9900 146deg,
#ff6600 158deg, #ff3300 172deg, #cc0022 192deg,
#660044 215deg, #03008a 360deg);
filter:blur(68px); opacity:.88; pointer-events:none; z-index:0;
animation:auroraS 18s ease-in-out infinite alternate;
}
@keyframes auroraS {
0% { transform:scale(1) rotate(0deg) translateY(0px); opacity:.82; }
40% { transform:scale(1.07) rotate(4deg) translateY(-15px); opacity:.92; }
100%{ transform:scale(1.12) rotate(-3deg) translateY(8px); opacity:.86; }
}
.hero-mask {
position:absolute; inset:0; pointer-events:none; z-index:1;
background:
linear-gradient(to right, #000 0%, #000 15%, rgba(0,0,0,.9) 34%, rgba(0,0,0,.3) 55%, transparent 72%),
linear-gradient(to bottom, #000 0%, transparent 5%, transparent 93%, #000 100%);
}
.hero { position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; padding:100px 40px 80px; max-width:1200px; margin:0 auto; }
.hero.hero-short { min-height:auto; padding:150px 40px 90px; }
.hero-inner { max-width:660px; }
.hero-tag {
display:inline-flex; align-items:center; gap:8px;
font-family:var(--font); font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); border:1px solid var(--line2); padding:5px 12px; border-radius:4px; margin-bottom:38px;
}
.hero-tag-dot { width:5px; height:5px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px rgba(43,111,255,.9); animation:dotPulse 2.5s ease infinite; }
.hero-h { font-family:var(--font); font-size:clamp(3.2rem,8.5vw,7rem); font-weight:800; letter-spacing:-.05em; line-height:1.0; margin-bottom:26px; }
.hero-h.hero-h-sm { font-size:clamp(2.6rem,6.5vw,5.2rem); }
.hero-h em { font-style:normal; }
.hero-sub { font-family:var(--body); font-size:clamp(.88rem,1.5vw,1rem); color:var(--muted); max-width:480px; line-height:1.8; margin-bottom:38px; font-weight:400; }
.hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:64px; }
.hero-stats { display:flex; align-items:center; gap:40px; flex-wrap:wrap; padding-top:38px; border-top:1px solid var(--line); }
.hstat-n { font-family:var(--font); font-size:1.8rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.hstat-l { font-family:var(--font); font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
/* ══ BREADCRUMB ══ */
.crumb { font-family:var(--font); font-size:.7rem; font-weight:600; letter-spacing:.06em; color:var(--dim); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.crumb a { color:var(--muted); transition:color .2s; }
.crumb a:hover { color:var(--text); }
/* ══════════════════════════
MARQUEE
══════════════════════════ */
.marquee-sec { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:13px 0; overflow:hidden; }
.marquee-track { display:flex; width:max-content; animation:tick 26s linear infinite; }
.marquee-item { display:flex; align-items:center; gap:22px; padding:0 22px; font-family:var(--font); font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.22); white-space:nowrap; }
.marquee-sep { width:3px; height:3px; border-radius:50%; background:var(--blue); opacity:.6; flex-shrink:0; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ══════════════════════════
MANIFESTO
══════════════════════════ */
.manifesto-sec { position:relative; border-bottom:1px solid var(--line); overflow:hidden; }
.manifesto-sec::before {
content:''; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(43,111,255,.07) 0%, transparent 65%),
radial-gradient(ellipse 40% 60% at 20% 80%, rgba(255,128,0,.05) 0%, transparent 60%);
}
.manifesto-inner { max-width:1200px; margin:0 auto; padding:88px 40px; position:relative; z-index:1; }
.manifesto-q { font-family:var(--font); font-size:clamp(1.6rem,3.8vw,3.2rem); font-weight:700;
letter-spacing:-.04em; line-height:1.2; max-width:820px;
text-shadow: 0 0 80px rgba(43,111,255,.2), 0 0 160px rgba(0,187,255,.08); }
.manifesto-q em { font-style:normal; }
.manifesto-attr { margin-top:28px; font-family:var(--font); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
/* ══════════════════════════
SECTION BASICS
══════════════════════════ */
.sec { padding:96px 0; border-top:1px solid var(--line); }
.sec-tight { padding:72px 0; }
.wrap { max-width:1200px; margin:0 auto; padding:0 40px; }
.wrap-narrow { max-width:860px; margin:0 auto; padding:0 40px; }
.sec-tag { font-family:var(--font); font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.sec-h { font-family:var(--font); font-size:clamp(1.9rem,4vw,3.1rem); font-weight:800; letter-spacing:-.04em; line-height:1.08; margin-bottom:12px; }
.sec-sub { font-family:var(--body); font-size:.88rem; color:var(--muted); max-width:460px; line-height:1.8; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:52px; flex-wrap:wrap; }
.sec-head-center { text-align:center; margin-bottom:52px; }
.sec-head-center .sec-sub { margin:0 auto; }
/* ══════════════════════════
FUNNEL STEP RAIL
══════════════════════════ */
.rail { position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:700; display:flex; flex-direction:column; gap:14px; }
.rail-item { display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.rail-lbl { font-family:var(--font); font-size:.6rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); opacity:0; transform:translateX(6px); transition:all .3s var(--ease); white-space:nowrap; }
.rail-dot { width:6px; height:6px; border-radius:50%; background:var(--dim); transition:all .35s var(--ease); flex-shrink:0; }
.rail-item:hover .rail-lbl, .rail-item.on .rail-lbl { opacity:1; transform:translateX(0); color:var(--muted); }
.rail-item.on .rail-dot { background:var(--blue); box-shadow:0 0 10px rgba(43,111,255,.8); transform:scale(1.35); }
/* ══════════════════════════
PROBLEM SECTION
══════════════════════════ */
.prob-sec { position:relative; overflow:hidden; }
.prob-sec::before {
content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 50% 60% at 30% 40%, rgba(255,40,0,.06) 0%, transparent 65%);
}
.prob-sec .sec-h { text-shadow:0 0 55px rgba(255,40,0,.35), 0 0 110px rgba(255,128,0,.15); }
.prob-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.prob-item { background:var(--bg); padding:30px 26px; position:relative; transition:background .3s; }
.prob-item:hover { background:rgba(255,40,0,.025); }
.prob-x { font-family:var(--font); font-size:1rem; font-weight:700; color:rgba(255,60,30,.7); margin-bottom:14px; display:block; }
.prob-title { font-family:var(--font); font-size:1.02rem; font-weight:700; letter-spacing:-.025em; margin-bottom:8px; }
.prob-text { font-family:var(--body); font-size:.82rem; color:var(--muted); line-height:1.75; }
/* ══════════════════════════
SOLUTION SECTION
══════════════════════════ */
.sol-sec { position:relative; overflow:hidden; }
.sol-sec::before {
content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 55% 65% at 70% 45%, rgba(0,187,255,.07) 0%, transparent 65%);
}
.sol-sec .sec-h { text-shadow:0 0 55px rgba(0,187,255,.4), 0 0 110px rgba(43,111,255,.2); }
.sol-split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.sol-copy p { font-family:var(--body); font-size:.92rem; color:var(--muted); line-height:1.9; margin-bottom:18px; }
.sol-copy p strong { color:var(--text); font-weight:600; }
.sol-visual {
aspect-ratio:1/1; border-radius:16px; border:1px solid var(--line2);
background-image:var(--dot-grid); background-size:26px 26px;
display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.sol-visual::after {
content:''; position:absolute; inset:0;
background:radial-gradient(circle at 50% 50%, rgba(43,111,255,.13), transparent 62%);
}
/* NFC tap animation graphic */
.nfc-graphic { position:relative; width:180px; height:180px; display:flex; align-items:center; justify-content:center; z-index:1; }
.nfc-wave { position:absolute; border:1.5px solid rgba(43,111,255,.4); border-radius:50%; animation:nfcPing 2.4s var(--ease) infinite; }
.nfc-wave:nth-child(1) { width:70px; height:70px; animation-delay:0s; }
.nfc-wave:nth-child(2) { width:70px; height:70px; animation-delay:.6s; }
.nfc-wave:nth-child(3) { width:70px; height:70px; animation-delay:1.2s; }
@keyframes nfcPing {
0% { transform:scale(1); opacity:.9; }
100% { transform:scale(2.6); opacity:0; }
}
.nfc-core {
width:58px; height:58px; border-radius:14px; position:relative; z-index:2;
background:linear-gradient(145deg, rgba(43,111,255,.95), rgba(0,187,255,.75));
box-shadow:0 0 34px rgba(43,111,255,.55);
display:flex; align-items:center; justify-content:center;
font-family:var(--font); font-size:.62rem; font-weight:800; letter-spacing:.08em; color:#fff;
}
/* ══════════════════════════
HOW IT WORKS — steps
══════════════════════════ */
.steps-sec-bg {
background-image:var(--line-grid); background-size:42px 42px;
border-radius:14px; border:1px solid var(--line2); overflow:hidden; position:relative;
}
.steps-glow { position:absolute; top:-25%; left:50%; transform:translateX(-50%); width:75%; height:140%;
background:radial-gradient(ellipse 70% 60% at 50% 35%, rgba(0,255,204,.05) 0%, transparent 65%); pointer-events:none; }
.steps-sec-bg .sec-h { text-shadow:0 0 50px rgba(0,255,204,.3), 0 0 100px rgba(0,187,255,.16); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2); }
.step-cell { background:var(--bg); padding:38px 28px; position:relative; overflow:hidden; transition:background .3s; }
.step-cell:hover { background:rgba(255,255,255,.022); }
.step-cell::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.step-cell:hover::after { transform:scaleX(1); }
.step-n {
font-family:var(--font); font-size:2.6rem; font-weight:800; letter-spacing:-.06em; line-height:1;
background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
background-size:200% auto; animation:gradShift 6s linear infinite; margin-bottom:20px;
}
.step-title { font-family:var(--font); font-size:1.05rem; font-weight:700; letter-spacing:-.025em; margin-bottom:9px; }
.step-text { font-family:var(--body); font-size:.83rem; color:var(--muted); line-height:1.78; }
/* ══════════════════════════
DESTINATION CHIPS
══════════════════════════ */
.dest-grid { display:flex; flex-wrap:wrap; gap:10px; }
.dest-chip {
font-family:var(--font); font-size:.8rem; font-weight:500; color:rgba(255,255,255,.6);
background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
padding:11px 18px; border-radius:8px; transition:all .28s var(--ease);
display:inline-flex; align-items:center; gap:9px;
}
.dest-chip::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--blue); opacity:.5; transition:all .28s; }
.dest-chip:hover { background:rgba(43,111,255,.09); border-color:rgba(43,111,255,.3); color:var(--text); transform:translateY(-2px); }
.dest-chip:hover::before { opacity:1; box-shadow:0 0 8px rgba(43,111,255,.8); }
/* ══════════════════════════
PRESENTACIONES — stand + placa cuadrada
══════════════════════════ */
.fmt-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.fmt-card { background:var(--bg); padding:34px 30px 30px; position:relative; overflow:hidden; transition:background .3s; }
.fmt-card:hover { background:rgba(255,255,255,.022); }
.fmt-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.fmt-card:hover::after { transform:scaleX(1); }
.fmt-stage {
height:300px; border-radius:10px; margin-bottom:26px;
background-image:var(--dot-grid); background-size:22px 22px;
border:1px solid var(--line);
display:flex; justify-content:center;
padding:26px 20px 0; position:relative; overflow:hidden;
}
.fmt-stage::before { content:''; position:absolute; inset:0;
background:radial-gradient(ellipse 65% 55% at 50% 45%, rgba(43,111,255,.1), transparent 68%); }
/* The printed face, shared by both formats. These are the actual
press-ready artworks (1488x1724 and 1252x1252 @300dpi) downscaled. */
/* height:auto es obligatorio. Los ![]()
traen width="560" height="649" para
reservar espacio y evitar saltos de layout, pero ese atributo se traduce en
un height:649px que le gana al aspect-ratio de abajo: la imagen quedaba de
116x649 y object-fit:cover recortaba una tira vertical del arte. */
.fmt-face {
position:relative; z-index:1; display:block;
height:auto;
box-shadow:0 18px 40px rgba(0,0,0,.55);
object-fit:cover;
}
/* Stand: slight backward tilt so it reads as standing upright on its base */
.fmt-face-stand {
width:168px; aspect-ratio:120/140; border-radius:8px 8px 2px 2px;
transform:perspective(620px) rotateX(7deg); transform-origin:bottom center;
}
/* Plate: leaning against a surface, so it casts downward and sits flat */
.fmt-face-plate {
width:200px; aspect-ratio:1/1; border-radius:12px;
margin-bottom:24px;
}
/* The stand's black base tray — needs its own edge light or it
disappears against the dark stage. */
.fmt-base {
position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
width:180px; height:15px; border-radius:2px 2px 5px 5px;
background:linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 22%, #0b0b0b 100%);
box-shadow:0 6px 18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14);
}
/* Contact shadow on the stage floor */
.fmt-stage::after {
content:''; position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
width:230px; height:18px; border-radius:50%;
background:radial-gradient(ellipse, rgba(0,0,0,.7), transparent 70%);
filter:blur(5px); pointer-events:none;
}
.fmt-stage { padding-bottom:40px; align-items:flex-end; }
.fmt-name { font-family:var(--font); font-size:1.15rem; font-weight:700; letter-spacing:-.03em; margin-bottom:6px; }
.fmt-dims { font-family:var(--font); font-size:.68rem; font-weight:600; letter-spacing:.06em; color:var(--blue); margin-bottom:14px; }
.fmt-text { font-family:var(--body); font-size:.82rem; color:var(--muted); line-height:1.75; margin-bottom:16px; }
.fmt-best { font-family:var(--body); font-size:.78rem; color:rgba(255,255,255,.62); line-height:1.6; display:flex; gap:9px; }
.fmt-best::before { content:'→'; color:var(--blue); flex-shrink:0; }
/* ══════════════════════════
VERSUS TABLE (NFC vs QR)
══════════════════════════ */
.vs-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line2); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.vs-col { background:var(--bg); padding:34px 30px; }
.vs-col.win { background:linear-gradient(180deg, rgba(43,111,255,.055), rgba(0,0,0,0) 60%); }
.vs-head { font-family:var(--font); font-size:1.3rem; font-weight:800; letter-spacing:-.035em; margin-bottom:6px; }
.vs-col.win .vs-head { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:200% auto; animation:gradShift 5s linear infinite; }
.vs-sub { font-family:var(--font); font-size:.64rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); margin-bottom:24px; }
.vs-list { display:flex; flex-direction:column; gap:14px; }
.vs-row { display:flex; gap:11px; align-items:flex-start; font-family:var(--body); font-size:.83rem; line-height:1.65; color:var(--muted); }
.vs-mark { font-family:var(--font); font-weight:700; font-size:.85rem; flex-shrink:0; line-height:1.6; }
.vs-mark.no { color:rgba(255,60,30,.75); }
.vs-mark.yes { color:var(--teal); }
.vs-col.win .vs-row { color:rgba(255,255,255,.78); }
/* ══════════════════════════
IMPACT / STAT BLOCK
══════════════════════════ */
.impact-wrap { position:relative; overflow:hidden; border-top:1px solid var(--line); }
.impact-aurora {
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:70vw; height:70vh; border-radius:50%;
background: conic-gradient(from 195deg at 50% 52%,
#03008a 0deg, #0044ee 22deg, #0088ff 44deg, #00bbff 66deg, #00ffee 84deg,
#aaffe8 98deg, #fffce0 112deg, #ffee55 126deg, #ff9900 144deg,
#ff5500 160deg, #ff2200 176deg, #cc0033 198deg, #03008a 360deg);
filter:blur(110px); opacity:.22; pointer-events:none;
animation:ctaAurora 20s ease-in-out infinite alternate;
}
.impact-inner { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:96px 40px; text-align:center; }
.impact-nums { display:flex; align-items:center; justify-content:center; gap:clamp(20px,5vw,64px); flex-wrap:wrap; margin:44px 0 20px; }
.impact-block { text-align:center; }
.impact-n { font-family:var(--font); font-size:clamp(2.6rem,7vw,4.8rem); font-weight:800; letter-spacing:-.05em; line-height:1; }
.impact-n.dim { color:var(--dim); }
.impact-n.hot { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:200% auto; animation:gradShift 5s linear infinite; }
.impact-l { font-family:var(--font); font-size:.63rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
.impact-arrow { font-family:var(--font); font-size:2rem; color:var(--dim); }
.impact-note { font-family:var(--body); font-size:.75rem; color:var(--dim); max-width:500px; margin:22px auto 0; line-height:1.7; font-style:italic; }
/* ══════════════════════════
PRICING
══════════════════════════ */
.price-sec-bg {
background-image:var(--dot-grid); background-size:30px 30px;
border-radius:14px; border:1px solid var(--line2); overflow:hidden; position:relative; padding:44px 0 0;
}
.price-glow { position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:80%; height:150%;
background:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(43,111,255,.07) 0%, transparent 65%); pointer-events:none; }
.price-sec-bg .sec-h { text-shadow:0 0 50px rgba(43,111,255,.45), 0 0 100px rgba(0,187,255,.2); }
.price-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line2); border-top:1px solid var(--line2); }
.pcard { background:var(--bg); padding:32px 24px 28px; position:relative; overflow:hidden; display:flex; flex-direction:column; transition:background .3s; }
.pcard:hover { background:rgba(255,255,255,.022); }
.pcard.feat { background:linear-gradient(180deg, rgba(43,111,255,.07), rgba(0,0,0,0) 55%); }
.pcard.feat::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); background-size:200% auto; animation:gradShift 5s linear infinite; }
.pcard-badge {
position:absolute; top:14px; right:16px;
font-family:var(--font); font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:#000; background:var(--grad); background-size:200% auto; animation:gradShift 5s linear infinite;
padding:4px 9px; border-radius:4px;
}
.pcard-name { font-family:var(--font); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.pcard-price { font-family:var(--font); font-size:2.4rem; font-weight:800; letter-spacing:-.05em; line-height:1; margin-bottom:4px; }
.pcard-price small { font-size:.85rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.pcard-price.quote { font-size:1.5rem; }
.pcard-units { font-family:var(--font); font-size:.75rem; font-weight:600; color:var(--blue); margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.pcard-feats { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1; }
.pcard-feats li { font-family:var(--body); font-size:.79rem; color:var(--muted); line-height:1.6; display:flex; gap:9px; align-items:flex-start; }
.pcard-feats li::before { content:'—'; color:var(--dim); flex-shrink:0; }
.pcard .btn { width:100%; justify-content:center; }
/* Enterprise full-width card */
.pcard-wide { background:var(--bg); padding:32px 28px; border-top:1px solid var(--line2); display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; position:relative; overflow:hidden; }
.pcard-wide::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 100% at 15% 50%, rgba(255,128,0,.05), transparent 60%); pointer-events:none; }
.pcard-wide-body { position:relative; z-index:1; }
.pcard-wide .pcard-feats { flex-direction:row; flex-wrap:wrap; gap:8px 22px; margin-bottom:0; }
/* ══════════════════════════
COMPARISON TABLE
══════════════════════════ */
.cmp-scroll { overflow-x:auto; border:1px solid var(--line2); border-radius:14px; }
.cmp-table { width:100%; border-collapse:collapse; min-width:760px; }
.cmp-table th, .cmp-table td {
font-family:var(--body); font-size:.79rem; text-align:center;
padding:15px 14px; border-bottom:1px solid var(--line); color:var(--muted);
}
.cmp-table thead th {
font-family:var(--font); font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--text); background:rgba(255,255,255,.028); border-bottom:1px solid var(--line2);
position:sticky; top:0;
}
.cmp-table thead th.hot { background:rgba(43,111,255,.1); color:var(--blue); }
.cmp-table tbody tr:hover td { background:rgba(255,255,255,.018); color:rgba(255,255,255,.8); }
.cmp-table tbody tr:last-child td { border-bottom:none; }
.cmp-table td:first-child, .cmp-table th:first-child {
text-align:left; font-family:var(--font); font-weight:600; color:var(--text); font-size:.76rem;
background:rgba(255,255,255,.015); position:sticky; left:0;
}
.cmp-table td.hot { background:rgba(43,111,255,.045); color:rgba(255,255,255,.85); }
.cmp-yes { color:var(--teal); font-weight:700; }
.cmp-no { color:var(--dim); }
/* ══════════════════════════
ADD-ONS
══════════════════════════ */
.addon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.addon-cell { background:var(--bg); padding:26px 22px; transition:background .3s; }
.addon-cell:hover { background:rgba(255,255,255,.025); }
.addon-name { font-family:var(--font); font-size:.85rem; font-weight:600; letter-spacing:-.015em; margin-bottom:10px; line-height:1.4; }
.addon-price { font-family:var(--font); font-size:1.5rem; font-weight:800; letter-spacing:-.04em; color:var(--blue); }
.addon-price small { font-size:.72rem; font-weight:500; color:var(--muted); letter-spacing:0; }
/* ══════════════════════════
GUARANTEE
══════════════════════════ */
.guar-box {
border:1px solid var(--line2); border-radius:14px; padding:44px 40px; position:relative; overflow:hidden;
background:linear-gradient(140deg, rgba(0,255,204,.035), rgba(0,0,0,0) 55%);
}
.guar-box::before { content:''; position:absolute; top:-40%; right:-10%; width:50%; height:180%;
background:radial-gradient(ellipse 60% 60% at 60% 50%, rgba(0,255,204,.07), transparent 65%); pointer-events:none; }
.guar-inner { position:relative; z-index:1; }
.guar-h { font-family:var(--font); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; letter-spacing:-.04em; margin-bottom:10px;
text-shadow:0 0 50px rgba(0,255,204,.3); }
.guar-list { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:32px; }
.guar-item { display:flex; gap:12px; align-items:flex-start; }
/* Variante en columna: titulo arriba y explicacion debajo, para listas donde
cada punto necesita mas que una linea (ej. que define la tarifa de talento). */
.guar-list.stack .guar-item { flex-direction:column; gap:7px; }
.guar-list.stack .guar-item b { font-family:var(--font); font-size:.9rem; font-weight:600;
letter-spacing:-.02em; color:var(--text); }
.guar-list.stack .guar-item span { font-family:var(--body); font-size:.81rem;
color:var(--muted); line-height:1.7; }
.guar-check { color:var(--teal); font-family:var(--font); font-weight:700; font-size:.95rem; flex-shrink:0; line-height:1.5; }
.guar-text { font-family:var(--body); font-size:.83rem; color:var(--muted); line-height:1.7; }
.guar-fine { font-family:var(--body); font-size:.8rem; color:rgba(255,255,255,.7); margin-top:28px; padding-top:24px; border-top:1px solid var(--line); line-height:1.75; }
/* ══════════════════════════
FAQ / OBJECTIONS
══════════════════════════ */
.faq-list { border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:last-child { border-bottom:none; }
.faq-q {
width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
padding:22px 26px; text-align:left; transition:background .25s;
font-family:var(--font); font-size:.95rem; font-weight:600; letter-spacing:-.02em; color:var(--text);
}
.faq-q:hover { background:rgba(255,255,255,.022); }
.faq-icon { font-size:1.1rem; color:var(--dim); transition:transform .35s var(--ease), color .3s; flex-shrink:0; line-height:1; }
.faq-item.open .faq-icon { transform:rotate(45deg); color:var(--blue); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-item.open .faq-a { max-height:340px; }
.faq-a-inner { padding:0 26px 24px; font-family:var(--body); font-size:.85rem; color:var(--muted); line-height:1.85; max-width:720px; }
/* ══════════════════════════
PRODUCT / SERVICE CARDS (home)
══════════════════════════ */
.prod-feature {
border:1px solid var(--line2); border-radius:16px; overflow:hidden; position:relative;
background-image:var(--dot-grid); background-size:28px 28px;
display:grid; grid-template-columns:1.15fr 1fr; gap:0;
}
.prod-feature::before { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 60% 90% at 78% 50%, rgba(43,111,255,.11), transparent 62%); }
.prod-feature-body { padding:48px 44px; position:relative; z-index:1; }
.prod-feature-tag {
display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
font-family:var(--font); font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:#000; background:var(--grad); background-size:200% auto; animation:gradShift 5s linear infinite;
padding:5px 11px; border-radius:4px;
}
.prod-feature-h { font-family:var(--font); font-size:clamp(1.7rem,3.4vw,2.7rem); font-weight:800; letter-spacing:-.045em; line-height:1.08; margin-bottom:14px;
text-shadow:0 0 55px rgba(43,111,255,.35); }
.prod-feature-sub { font-family:var(--body); font-size:.9rem; color:var(--muted); line-height:1.85; margin-bottom:26px; max-width:420px; }
.prod-feature-pts { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.prod-feature-pt { display:flex; gap:10px; font-family:var(--body); font-size:.82rem; color:rgba(255,255,255,.65); line-height:1.6; }
.prod-feature-pt::before { content:'→'; color:var(--blue); flex-shrink:0; }
.prod-feature-vis { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:40px; border-left:1px solid var(--line); }
/* Real stand artwork in the featured-product block */
.prod-nfc-shot { position:relative; display:flex; align-items:flex-end; justify-content:center; }
.prod-nfc-shot img {
width:172px; height:auto; display:block; border-radius:10px 10px 3px 3px;
box-shadow:0 22px 50px rgba(0,0,0,.6);
transform:perspective(760px) rotateX(6deg) rotateY(-7deg);
transform-origin:bottom center;
transition:transform .6s var(--ease);
}
.prod-feature:hover .prod-nfc-shot img { transform:perspective(760px) rotateX(4deg) rotateY(-3deg) translateY(-5px); }
.prod-nfc-shot::after {
content:''; position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
width:200px; height:20px; border-radius:50%;
background:radial-gradient(ellipse, rgba(0,0,0,.72), transparent 70%);
filter:blur(7px);
}
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.mini-card { background:var(--bg); padding:30px 26px; position:relative; overflow:hidden; transition:background .3s; display:flex; flex-direction:column; }
.mini-card:hover { background:rgba(255,255,255,.025); }
.mini-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.mini-card:hover::after { transform:scaleX(1); }
.mini-n { font-family:var(--font); font-size:.58rem; font-weight:700; letter-spacing:.11em; color:var(--dim); margin-bottom:18px; }
.mini-title { font-family:var(--font); font-size:1.08rem; font-weight:700; letter-spacing:-.03em; margin-bottom:8px; transition:color .25s; }
.mini-card:hover .mini-title { color:var(--blue); }
.mini-pain { font-family:var(--body); font-size:.78rem; color:rgba(255,80,50,.65); line-height:1.65; margin-bottom:10px; font-style:italic; }
.mini-text { font-family:var(--body); font-size:.81rem; color:var(--muted); line-height:1.75; margin-bottom:20px; flex:1; }
.mini-link { font-family:var(--font); font-size:.74rem; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
.mini-link span { display:inline-block; transition:transform .22s; }
.mini-card:hover .mini-link span { transform:translateX(4px); }
/* ══════════════════════════
SERVICES LIST (legacy)
══════════════════════════ */
.sv-sec-bg { background-image:var(--line-grid); background-size:42px 42px; border-radius:14px; border:1px solid var(--line2); overflow:hidden; position:relative; }
.sv-sec-glow { position:absolute; top:-40%; right:-10%; width:60%; height:180%;
background:radial-gradient(ellipse 60% 70% at 60% 40%, rgba(255,128,0,.06) 0%, transparent 65%); pointer-events:none; }
.sv-sec-bg .sec-h { text-shadow:0 0 50px rgba(255,128,0,.35), 0 0 100px rgba(255,40,0,.18); }
.sv-item { border-bottom:1px solid rgba(255,255,255,.06); position:relative; transition:background .3s; }
.sv-item:last-child { border-bottom:none; }
.sv-item:hover { background:rgba(255,255,255,.022); }
.sv-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--grad); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease); }
.sv-item:hover::before { transform:scaleY(1); }
.sv-inner { display:grid; grid-template-columns:52px 1fr 24px; gap:20px; align-items:center; padding:20px 24px; }
.sv-num { font-family:var(--font); font-size:.6rem; font-weight:700; letter-spacing:.1em; color:var(--dim); }
.sv-name { font-family:var(--font); font-size:clamp(1rem,2vw,1.4rem); font-weight:700; letter-spacing:-.03em; transition:color .25s; }
.sv-item:hover .sv-name { color:var(--blue); }
.sv-desc { font-family:var(--body); font-size:.79rem; color:var(--muted); line-height:1.7; max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease),opacity .3s,margin-top .3s; }
.sv-item:hover .sv-desc { max-height:80px; opacity:1; margin-top:5px; }
.sv-arr { font-size:.8rem; color:var(--dim); transition:transform .3s var(--ease),color .3s; }
.sv-item:hover .sv-arr { transform:rotate(-45deg); color:var(--blue); }
/* ══════════════════════════
WORK
══════════════════════════ */
.work-sec-bg { background-image:var(--dot-grid); background-size:30px 30px; border-radius:14px; border:1px solid var(--line2); overflow:hidden; position:relative; }
.work-sec-glow { position:absolute; top:-30%; left:-5%; width:55%; height:160%;
background:radial-gradient(ellipse 60% 70% at 40% 40%, rgba(43,111,255,.07) 0%, transparent 65%); pointer-events:none; }
.work-sec-bg .sec-h { text-shadow:0 0 50px rgba(43,111,255,.5), 0 0 100px rgba(0,187,255,.2); }
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); }
.wcard { background:var(--bg); padding:30px; transition:background .3s; position:relative; overflow:hidden; }
.wcard:hover { background:rgba(255,255,255,.022); }
.wcard::after { content:''; position:absolute; top:0; left:-120%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent); transition:left .6s var(--ease); pointer-events:none; }
.wcard:hover::after { left:120%; }
.wcard::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.wcard:hover::before { transform:scaleX(1); }
.wcard-num { font-family:var(--font); font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:22px; }
/* 16:10 frame. The CSS placeholder sits underneath; the real photo
layers on top and hides itself (JS onerror) when the file is absent,
so dropping a file into assets/proyectos/ is the only step needed. */
.wcard-vis { aspect-ratio:16/10; border-radius:8px; margin-bottom:18px; overflow:hidden; position:relative; background:var(--bg3); }
.wcard-vis-inner { width:100%; height:100%; transition:transform .55s var(--ease); }
/* Hidden until it actually decodes, so a missing file never flashes a
broken-image icon — the CSS placeholder underneath just stays put. */
.wcard-img {
position:absolute; inset:0; z-index:1;
width:100%; height:100%; object-fit:cover; object-position:top center;
display:block; opacity:0; transition:opacity .5s var(--ease), transform .55s var(--ease);
}
.wcard-img.loaded { opacity:1; }
/* Once the real photo is up, drop the placeholder entirely — some of its
labels are positioned at the same z-index and would show through. */
.wcard-img.loaded + .wcard-vis-inner { display:none; }
.wcard:hover .wcard-vis-inner { transform:scale(1.05); }
.wcard:hover .wcard-img { transform:translate3d(0, var(--py, 0px), 0) scale(1.16); }
/* Title + category ride on top of the artwork, lifted off it by a
scrim that fades to nothing before it reaches the top of the frame. */
.wcard-overlay {
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; justify-content:flex-end;
padding:22px 20px 18px;
background:linear-gradient(to top,
rgba(0,0,0,.93) 0%,
rgba(0,0,0,.78) 24%,
rgba(0,0,0,.42) 48%,
rgba(0,0,0,.12) 70%,
transparent 88%);
pointer-events:none;
}
.wcard-cat {
font-family:var(--font); font-size:.58rem; font-weight:700;
letter-spacing:.11em; text-transform:uppercase;
color:rgba(255,255,255,.62); margin-bottom:6px;
transition:color .3s var(--ease);
}
.wcard:hover .wcard-cat { color:rgba(255,255,255,.85); }
.wcard-title {
font-family:var(--font); font-size:1.32rem; font-weight:700;
letter-spacing:-.035em; line-height:1.1; color:#fff;
text-shadow:0 2px 20px rgba(0,0,0,.6);
transform:translateY(0); transition:transform .45s var(--ease);
}
.wcard:hover .wcard-title { transform:translateY(-2px); }
/* Accent hairline that grows in under the title on hover */
.wcard-title::after {
content:''; display:block; height:2px; width:34px; margin-top:10px;
background:var(--grad); background-size:200% auto;
transform:scaleX(0); transform-origin:left;
transition:transform .5s var(--ease);
}
.wcard:hover .wcard-title::after { transform:scaleX(1); }
.wcard-desc { font-family:var(--body); font-size:.79rem; color:var(--muted); line-height:1.72; margin-bottom:0; }
.wcard-link { font-family:var(--font); font-size:.72rem; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:5px; }
.wcard-link span { display:inline-block; transition:transform .22s; }
.wcard:hover .wcard-link span { transform:translateX(4px); }
/* ══ Project card visuals ══ */
@keyframes glowPulse { 0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)} }
.v-prym { background:linear-gradient(145deg,#001508,#002d12,#00481c); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.v-prym-ring { position:absolute; width:90px; height:90px; border-radius:50%; border:1.5px solid rgba(0,230,80,.25); }
.v-prym-ring2 { position:absolute; width:130px; height:130px; border-radius:50%; border:1px solid rgba(0,230,80,.1); }
.v-prym .lbl { font-family:var(--font); font-size:1.6rem; font-weight:700; letter-spacing:-.04em; color:#fff; line-height:1; position:relative; z-index:1; }
.v-prym-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(0,230,80,.6); box-shadow:0 0 12px rgba(0,230,80,.5); }
.v-terra { background:linear-gradient(145deg,#040d1c,#081c38,#0c2a50); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:18px; }
.v-terra-bar { height:2px; border-radius:1px; background:rgba(255,255,255,.08); width:100%; }
.v-terra-bar.hi { background:rgba(43,111,255,.45); width:65%; }
.v-terra-name { font-family:var(--font); font-size:1.3rem; font-weight:700; letter-spacing:-.03em; color:rgba(255,255,255,.9); margin-bottom:6px; }
.v-cielo { background:linear-gradient(145deg,#080012,#140028,#200040); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.v-cielo-glow { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); width:100px; height:100px; background:radial-gradient(circle,rgba(140,60,255,.5),transparent); filter:blur(28px); animation:glowPulse 3s ease infinite; }
.v-cielo .lbl { font-family:var(--font); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; color:#fff; text-align:center; line-height:1.1; position:relative; z-index:1; }
.v-cielo-tag { font-family:var(--font); font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-top:8px; position:relative; z-index:1; }
.v-primavera { background:linear-gradient(145deg,#0a0e06,#141e08,#1e2e10); display:flex; align-items:center; justify-content:center; gap:12px; }
.v-primavera-mark { width:40px; height:40px; border-radius:8px; background:linear-gradient(135deg,rgba(120,200,60,.5),rgba(60,160,30,.3)); border:1px solid rgba(120,200,60,.2); }
.v-primavera-lines { display:flex; flex-direction:column; gap:6px; }
.v-primavera-ln { height:2px; border-radius:1px; background:rgba(255,255,255,.08); }
.v-primavera-ln.hi { background:rgba(120,200,60,.4); }
.v-glow { background:linear-gradient(145deg,#12040a,#250810,#381018); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.v-glow-orb { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; background:radial-gradient(circle,rgba(255,80,120,.35),transparent); filter:blur(20px); animation:glowPulse 2.8s ease infinite; }
.v-glow .lbl { font-family:var(--font); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; color:#fff; position:relative; z-index:1; }
.v-jogo { background:linear-gradient(145deg,#020e12,#041c22,#062a34); display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; padding:16px; position:relative; overflow:hidden; }
.v-jogo-glow { position:absolute; top:-10%; right:-5%; width:100px; height:100px; background:radial-gradient(circle,rgba(0,200,200,.2),transparent); filter:blur(18px); animation:glowPulse 3.5s ease infinite; }
.v-jogo-bars { display:flex; align-items:flex-end; gap:4px; height:60px; position:relative; z-index:1; }
.v-jogo-bar { flex:1; border-radius:2px 2px 0 0; background:rgba(255,255,255,.06); }
.v-jogo-bar.hi { background:rgba(0,200,200,.45); }
.v-jogo-stat { font-family:var(--font); font-size:1.2rem; font-weight:700; letter-spacing:-.04em; color:#fff; margin-top:6px; position:relative; z-index:1; }
.v-no8am { background:linear-gradient(145deg,#0e0600,#1e0c00,#2e1400); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.v-no8am-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; height:120px; background:radial-gradient(circle,rgba(255,120,0,.35),transparent); filter:blur(25px); animation:glowPulse 3s ease infinite; }
.v-no8am .lbl { font-family:var(--font); font-size:1.8rem; font-weight:800; letter-spacing:-.05em; color:#fff; position:relative; z-index:1; }
.v-no8am .ev-sub { font-family:var(--font); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-top:6px; position:relative; z-index:1; }
/* Wonder Panamá — fundación, verde lima sobre azul profundo */
.v-wonder { background:linear-gradient(145deg,#03182e,#062a4a,#0a3c66); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.v-wonder-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; height:120px; background:radial-gradient(circle,rgba(140,220,60,.32),transparent); filter:blur(24px); animation:glowPulse 3.2s ease infinite; }
.v-wonder-rings { display:flex; gap:5px; position:relative; z-index:1; }
.v-wonder-rings i { display:block; width:17px; height:17px; border:2px solid rgba(150,230,70,.75); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.v-wonder .lbl { font-family:var(--font); font-size:1.15rem; font-weight:800; letter-spacing:-.03em; color:#fff; margin-top:12px; position:relative; z-index:1; }
.v-wonder .ev-sub { font-family:var(--font); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(150,230,70,.8); margin-top:5px; position:relative; z-index:1; }
/* ══ Clients strip ══ */
.clients-sec { border-top:1px solid var(--line); padding:72px 0; }
.clients-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); }
.client-cell { background:var(--bg); padding:24px 16px; display:flex; align-items:center; justify-content:center; transition:background .3s; }
.client-cell:hover { background:rgba(255,255,255,.025); }
.client-name { font-family:var(--font); font-size:.78rem; font-weight:600; letter-spacing:-.01em; color:var(--muted); text-align:center; transition:color .25s; }
.client-cell:hover .client-name { color:var(--text); }
/* ══ Capability tags ══ */
.caps-sec { border-top:1px solid var(--line); padding:80px 0; }
.caps-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.caps-col-title { font-family:var(--font); font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.caps-tags { display:flex; flex-wrap:wrap; gap:8px; }
.cap-tag { font-family:var(--body); font-size:.76rem; color:rgba(255,255,255,.55); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); padding:6px 13px; border-radius:4px; transition:all .25s; }
.cap-tag:hover { background:rgba(43,111,255,.08); border-color:rgba(43,111,255,.25); color:rgba(255,255,255,.85); }
/* ══ WHY ══ */
.why-sec-bg { background-image:var(--line-grid); background-size:44px 44px; border-radius:14px; border:1px solid var(--line2); overflow:hidden; position:relative; }
.why-sec-glow { position:absolute; bottom:-30%; right:-5%; width:60%; height:150%;
background:radial-gradient(ellipse 60% 70% at 60% 60%, rgba(255,128,0,.07) 0%, transparent 65%); pointer-events:none; }
.why-sec-bg .sec-h { text-shadow:0 0 55px rgba(255,128,0,.4), 0 0 110px rgba(255,40,0,.2); }
.why-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2); }
.why-item { background:var(--bg); padding:26px 22px; transition:background .3s; position:relative; overflow:hidden; }
.why-item:hover { background:rgba(255,255,255,.02); }
.why-item::after { content:''; position:absolute; top:-50%; left:-50%; width:100%; height:100%; background:radial-gradient(circle,rgba(43,111,255,.08),transparent); opacity:0; transition:opacity .4s; }
.why-item:hover::after { opacity:1; }
.why-n { font-family:var(--font); font-size:.58rem; font-weight:700; letter-spacing:.1em; color:var(--blue); margin-bottom:14px; }
.why-title { font-family:var(--font); font-size:.92rem; font-weight:700; letter-spacing:-.02em; margin-bottom:7px; }
.why-text { font-family:var(--body); font-size:.78rem; color:var(--muted); line-height:1.75; }
/* ══ PROCESS ══ */
.proc-sec-bg { background-image:var(--dot-grid); background-size:26px 26px; border-radius:14px; border:1px solid var(--line2); overflow:hidden; position:relative; }
.proc-sec-glow { position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:80%; height:120%;
background:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,187,255,.06) 0%, transparent 65%); pointer-events:none; }
.proc-sec-bg .sec-h { text-shadow:0 0 50px rgba(0,187,255,.38), 0 0 100px rgba(43,111,255,.18); }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line2); }
.pstep { background:var(--bg); padding:26px 22px; position:relative; overflow:hidden; transition:background .3s; }
.pstep:hover { background:rgba(255,255,255,.02); }
.pstep::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); background-size:200% auto; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.pstep:hover::after { transform:scaleX(1); }
.pstep::before { content:''; position:absolute; bottom:-30px; right:-30px; width:80px; height:80px; background:radial-gradient(circle,rgba(43,111,255,.07),transparent); border-radius:50%; opacity:0; transition:opacity .4s; }
.pstep:hover::before { opacity:1; }
.pstep-n { font-family:var(--font); font-size:.58rem; font-weight:700; letter-spacing:.1em; color:var(--blue); margin-bottom:18px; }
.pstep-title { font-family:var(--font); font-size:.92rem; font-weight:700; letter-spacing:-.02em; margin-bottom:7px; }
.pstep-text { font-family:var(--body); font-size:.77rem; color:var(--muted); line-height:1.75; }
/* ══════════════════════════
DEMO / CONTACT FORM
══════════════════════════ */
.demo-wrap { position:relative; border-top:1px solid var(--line); overflow:hidden; }
.demo-aurora {
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:85vw; height:85vh; border-radius:50%;
background: conic-gradient(from 195deg at 50% 52%,
#03008a 0deg, #0044ee 22deg, #0088ff 44deg, #00bbff 66deg, #00ffee 84deg,
#aaffe8 98deg, #fffce0 112deg, #ffee55 126deg, #ff9900 144deg,
#ff5500 160deg, #ff2200 176deg, #cc0033 198deg, #03008a 360deg);
filter:blur(100px); opacity:.34; animation:ctaAurora 16s ease-in-out infinite alternate;
}
@keyframes ctaAurora {
0% { transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:.28; }
100%{ transform:translate(-50%,-50%) scale(1.18) rotate(14deg); opacity:.44; }
}
.demo-inner { position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:110px 40px; }
.demo-split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.demo-h { font-family:var(--font); font-size:clamp(2.2rem,5.2vw,3.8rem); font-weight:800; letter-spacing:-.05em; line-height:1.02; margin-bottom:18px; }
.demo-sub { font-family:var(--body); font-size:.92rem; color:rgba(255,255,255,.65); line-height:1.85; margin-bottom:30px; max-width:400px; }
.demo-perks { display:flex; flex-direction:column; gap:12px; }
.demo-perk { display:flex; gap:11px; font-family:var(--body); font-size:.84rem; color:rgba(255,255,255,.7); line-height:1.6; }
.demo-perk::before { content:'✓'; color:var(--teal); font-weight:700; flex-shrink:0; }
.demo-form {
background:rgba(0,0,0,.55); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
border:1px solid var(--line2); border-radius:16px; padding:32px 30px;
}
.form-row { margin-bottom:16px; }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-lbl { display:block; font-family:var(--font); font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.form-in, .form-sel, .form-ta {
width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:7px;
padding:11px 13px; font-size:.85rem; color:var(--text); transition:border-color .25s, background .25s;
-webkit-appearance:none; appearance:none;
}
.form-in::placeholder, .form-ta::placeholder { color:var(--dim); }
.form-in:focus, .form-sel:focus, .form-ta:focus { outline:none; border-color:rgba(43,111,255,.5); background:rgba(43,111,255,.05); }
.form-sel { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center; padding-right:32px; }
.form-sel option { background:#0a0a0a; color:var(--text); }
.form-ta { resize:vertical; min-height:86px; line-height:1.6; }
.form-actions { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.form-actions .btn { width:100%; justify-content:center; }
.form-or { text-align:center; font-family:var(--font); font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:2px 0; }
.form-fine { font-family:var(--body); font-size:.7rem; color:var(--dim); text-align:center; margin-top:16px; line-height:1.6; }
/* ══ CTA ══ */
.cta-wrap { position:relative; border-top:1px solid var(--line); overflow:hidden; }
.cta-aurora {
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:85vw; height:80vh; border-radius:50%;
background: conic-gradient(from 195deg at 50% 52%,
#03008a 0deg, #0044ee 22deg, #0088ff 44deg, #00bbff 66deg, #00ffee 84deg,
#aaffe8 98deg, #fffce0 112deg, #ffee55 126deg, #ff9900 144deg,
#ff5500 160deg, #ff2200 176deg, #cc0033 198deg, #03008a 360deg);
filter:blur(100px); opacity:.38; animation:ctaAurora 16s ease-in-out infinite alternate;
}
.cta-sec { position:relative; z-index:2; }
.cta-inner { max-width:1200px; margin:0 auto; padding:120px 40px; text-align:center; }
.cta-tag { font-family:var(--font); font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.cta-h { font-family:var(--font); font-size:clamp(2.8rem,7.5vw,6.5rem); font-weight:800; letter-spacing:-.055em; line-height:.98; margin-bottom:20px; }
.cta-h em { font-style:normal; }
.cta-sub { font-family:var(--body); font-size:.93rem; color:var(--muted); max-width:400px; margin:0 auto 38px; line-height:1.8; }
.cta-btns { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
/* ══ FOOTER ══ */
footer { border-top:1px solid var(--line); padding:34px 40px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.ft-brand { font-family:var(--font); font-size:.82rem; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.ft-links { display:flex; gap:2px; flex-wrap:wrap; }
.ft-links a { font-family:var(--font); padding:5px 11px; font-size:.72rem; color:var(--muted); border-radius:4px; transition:color .2s,background .2s; }
.ft-links a:hover { color:var(--text); background:rgba(255,255,255,.04); }
.ft-copy { font-family:var(--font); font-size:.67rem; color:var(--dim); }
/* ══════════════════════════
WHATSAPP — always-on contact
══════════════════════════ */
.wa-float {
position:fixed; right:24px; bottom:24px; z-index:780;
display:flex; align-items:center; gap:0;
height:54px; padding:0; border-radius:27px;
background:#25D366; color:#04240f;
box-shadow:0 8px 28px rgba(0,0,0,.5), 0 0 0 0 rgba(37,211,102,.45);
overflow:hidden;
transition:padding .45s var(--ease), gap .45s var(--ease),
box-shadow .35s var(--ease), transform .35s var(--ease);
}
.wa-float:hover {
padding:0 22px 0 0; gap:11px; transform:translateY(-2px);
box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.wa-float svg { width:27px; height:27px; margin:0 13.5px; flex-shrink:0; fill:currentColor; }
.wa-float .wa-label {
font-family:var(--font); font-size:.83rem; font-weight:700; letter-spacing:-.01em;
white-space:nowrap; max-width:0; opacity:0;
transition:max-width .45s var(--ease), opacity .3s var(--ease);
}
.wa-float:hover .wa-label { max-width:180px; opacity:1; }
/* Footer / inline WhatsApp link */
.ft-links a.wa-link { color:#25D366; font-weight:600; }
.ft-links a.wa-link:hover { color:#4ff08c; background:rgba(37,211,102,.08); }
@media(max-width:960px) {
.wa-float { right:16px; bottom:16px; height:50px; }
.wa-float svg { width:25px; height:25px; margin:0 12.5px; }
/* On touch there is no hover, so keep the label out of the way entirely */
.wa-float:hover { padding:0; gap:0; }
.wa-float:hover .wa-label { max-width:0; opacity:0; }
}
/* ══ SCROLLBAR ══ */
::-webkit-scrollbar { width:2px; height:2px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(43,111,255,.45); border-radius:2px; }
/* ══ SPEC LIST ══ */
.spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.spec-cell { background:var(--bg); padding:26px 24px; }
.spec-title { font-family:var(--font); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.spec-line { font-family:var(--body); font-size:.8rem; color:var(--muted); line-height:1.9; }
.spec-line strong { color:rgba(255,255,255,.82); font-weight:500; }
/* ══════════════════════════
RESPONSIVE
══════════════════════════ */
@media(max-width:1100px) {
.price-grid { grid-template-columns:repeat(2,1fr); }
.addon-grid { grid-template-columns:repeat(2,1fr); }
.rail { display:none; }
}
@media(max-width:960px) {
nav { padding:0 22px; }
.nav-links, .nav-cta { display:none; }
.nav-ham { display:flex; }
/* Single-column hero: text spans the full width, so the scrim has to
work harder on the left while the aurora still breathes on the right. */
.hero-mask {
background:
linear-gradient(to right, #000 0%, rgba(0,0,0,.9) 48%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.2) 100%),
linear-gradient(to bottom, #000 0%, transparent 6%, transparent 90%, #000 100%);
}
.hero-sub { text-shadow:0 1px 14px rgba(0,0,0,.85); }
.hero { padding:88px 22px 56px; }
.hero.hero-short { padding:120px 22px 64px; }
.wrap, .wrap-narrow { padding:0 22px; }
.work-grid { grid-template-columns:1fr; }
.why-list { grid-template-columns:1fr 1fr; }
.process-grid { grid-template-columns:repeat(2,1fr); }
.sec-head { flex-direction:column; align-items:flex-start; }
footer { flex-direction:column; align-items:flex-start; padding:26px 22px; }
.manifesto-inner, .cta-inner, .impact-inner { padding:60px 22px; }
.demo-inner { padding:70px 22px; }
.clients-grid { grid-template-columns:repeat(4,1fr); }
.caps-grid { grid-template-columns:1fr; gap:28px; }
.prob-grid { grid-template-columns:1fr; }
.sol-split { grid-template-columns:1fr; gap:38px; }
.sol-visual { aspect-ratio:16/10; }
.steps-grid { grid-template-columns:1fr; }
.vs-grid { grid-template-columns:1fr; }
/* Una sola columna en celular: hay ancho de sobra, asi que el arte crece
y el texto impreso ("TOCA AQUI", la URL) por fin se lee. */
.fmt-grid { grid-template-columns:1fr; }
/* Los min() contra vw evitan que el arte se desborde del stage (que tiene
overflow:hidden) en telefonos de 320px. */
.fmt-stage { height:340px; padding-left:14px; padding-right:14px; }
.fmt-face-stand { width:min(200px, 50vw); }
.fmt-face-plate { width:min(236px, 58vw); }
.fmt-base { width:min(212px, 53vw); }
.fmt-stage::after { width:min(240px, 62vw); }
.guar-list { grid-template-columns:1fr; gap:18px; }
.guar-box { padding:32px 24px; }
.demo-split { grid-template-columns:1fr; gap:34px; }
.prod-feature { grid-template-columns:1fr; }
.prod-feature-body { padding:34px 26px; }
.prod-feature-vis { border-left:none; border-top:1px solid var(--line); padding:34px; }
.mini-grid { grid-template-columns:1fr 1fr; }
.pcard-wide { grid-template-columns:1fr; gap:22px; }
.spec-grid { grid-template-columns:1fr; }
.mob-lang { left:22px; }
.mob-close, .mob-foot { right:22px; }
.mob { padding:48px 22px; }
.sec { padding:72px 0; }
}
@media(max-width:600px) {
.price-grid { grid-template-columns:1fr; }
.addon-grid { grid-template-columns:1fr; }
}
@media(max-width:540px) {
.hero-h { font-size:2.8rem; }
.hero-h.hero-h-sm { font-size:2.4rem; }
.sv-inner { grid-template-columns:40px 1fr 18px; gap:10px; }
.why-list { grid-template-columns:1fr; }
.process-grid { grid-template-columns:1fr 1fr; }
.hero-aurora { opacity:.78; }
.clients-grid { grid-template-columns:repeat(2,1fr); }
.mini-grid { grid-template-columns:1fr; }
.form-row-2 { grid-template-columns:1fr; }
.impact-arrow { transform:rotate(90deg); }
}
/* ══ REDUCED MOTION ══ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.r, .stagger > *, .stagger.in > * { opacity:1; transform:none; filter:none; animation:none; }
.wcard-img { transform:scale(1.1); }
.hero-inner { transform:none; opacity:1; }
}
/* ══════════════════════════════════════
PRODUCTOS — tarjetas + carrito
══════════════════════════════════════ */
.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line2);
border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.pcell { background:var(--bg); padding:30px 26px 26px; display:flex; flex-direction:column;
position:relative; overflow:hidden; transition:background .3s; }
.pcell:hover { background:rgba(255,255,255,.022); }
.pcell::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad);
transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.pcell:hover::after, .pcell.in-cart::after { transform:scaleX(1); }
.pcell.in-cart { background:rgba(43,111,255,.055); }
.pcell-tag { font-family:var(--font); font-size:.55rem; font-weight:700; letter-spacing:.13em;
text-transform:uppercase; color:#000; background:var(--grad); background-size:200% auto;
animation:gradShift 5s linear infinite; padding:4px 9px; border-radius:4px;
align-self:flex-start; margin-bottom:16px; }
.pcell-tag.ghost { background:none; color:var(--muted); border:1px solid var(--line2); animation:none; }
.pcell-name { font-family:var(--font); font-size:1.15rem; font-weight:700; letter-spacing:-.03em; margin-bottom:8px; }
.pcell-desc { font-family:var(--body); font-size:.81rem; color:var(--muted); line-height:1.72; margin-bottom:20px; }
/* El mensual grande, el total chico — la jerarquía que cierra */
.pcell-price { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.pcell-mo { font-family:var(--font); font-size:2.1rem; font-weight:800; letter-spacing:-.05em; line-height:1;
background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
background-clip:text; background-size:200% auto; animation:gradShift 5s linear infinite; }
.pcell-mo small { font-size:.8rem; font-weight:600; letter-spacing:0; -webkit-text-fill-color:var(--muted); }
.pcell-total { font-family:var(--body); font-size:.72rem; color:var(--dim); margin-top:7px; line-height:1.5; }
.pcell-quote { font-family:var(--font); font-size:1.25rem; font-weight:700; letter-spacing:-.03em; color:var(--text); }
.pcell-feats { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:24px; flex:1; }
.pcell-feats li { font-family:var(--body); font-size:.78rem; color:var(--muted); line-height:1.6;
display:flex; gap:9px; align-items:flex-start; }
.pcell-feats li::before { content:'—'; color:var(--dim); flex-shrink:0; }
.btn-add { width:100%; justify-content:center; }
.pcell.in-cart .btn-add { background:rgba(43,111,255,.14); border-color:rgba(43,111,255,.5); color:var(--text); }
/* ══ CARRITO FLOTANTE ══ */
.cart-bar {
position:fixed; left:50%; bottom:24px; transform:translate(-50%, 140%);
z-index:790; display:flex; align-items:center; gap:18px;
background:rgba(10,10,10,.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
border:1px solid var(--line2); border-radius:14px; padding:14px 16px 14px 20px;
box-shadow:0 18px 50px rgba(0,0,0,.6);
transition:transform .5s var(--ease), opacity .4s; opacity:0;
max-width:min(560px, calc(100vw - 32px));
}
.cart-bar.show { transform:translate(-50%, 0); opacity:1; }
.cart-count { font-family:var(--font); font-size:.8rem; font-weight:700; color:var(--text); white-space:nowrap; }
.cart-count span { color:var(--blue); }
.cart-items { font-family:var(--body); font-size:.73rem; color:var(--muted); flex:1;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-bar .btn { white-space:nowrap; }
.cart-clear { font-family:var(--font); font-size:.7rem; color:var(--dim); background:none; padding:6px; }
.cart-clear:hover { color:var(--text); }
/* ══ MODAL DE COTIZACIÓN ══ */
.q-back { position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.82);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
display:none; align-items:center; justify-content:center; padding:20px; }
.q-back.open { display:flex; }
.q-modal { background:#0a0a0a; border:1px solid var(--line2); border-radius:16px;
width:100%; max-width:520px; max-height:90vh; position:relative; }
.q-scroll { padding:32px 30px; }
/* Ni .q-modal ni .d-modal pueden ser el elemento que scrollea. Si lo son, el
boton de cerrar —que es position:absolute— se va con el scroll: en celular
no hay tecla Escape y el fondo queda reducido a un borde, asi que el modal
se vuelve una trampa sin salida. El scroll vive en un hijo (.q-scroll /
.d-scroll) y la caja se queda quieta con la ✕ siempre encima. */
.q-modal, .d-modal { display:flex; flex-direction:column; overflow:hidden; }
.q-scroll, .d-scroll { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
-webkit-overflow-scrolling:touch; }
.q-close { position:absolute; top:8px; right:8px; z-index:6;
width:42px; height:42px; border-radius:50%; padding:0;
display:flex; align-items:center; justify-content:center;
font-size:1rem; line-height:1; color:var(--muted); cursor:pointer;
background:rgba(10,10,10,.75); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
border:1px solid transparent; transition:color .2s, border-color .2s; }
.q-close:hover { color:var(--text); border-color:var(--line2); }
.q-h { font-family:var(--font); font-size:1.5rem; font-weight:800; letter-spacing:-.04em; margin-bottom:6px; }
.q-sub { font-family:var(--body); font-size:.83rem; color:var(--muted); line-height:1.7; margin-bottom:22px; }
.q-list { border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:22px; }
.q-row { display:flex; justify-content:space-between; gap:14px; align-items:center;
padding:11px 14px; border-bottom:1px solid var(--line); font-family:var(--body); font-size:.8rem; }
.q-row:last-child { border-bottom:none; }
.q-row-name { color:rgba(255,255,255,.8); }
.q-row-price { color:var(--muted); font-family:var(--font); font-size:.75rem; white-space:nowrap; }
.q-row-del { background:none; color:var(--dim); font-size:.9rem; padding:0 4px; }
.q-row-del:hover { color:#ff5a3c; }
.q-total { display:flex; justify-content:space-between; padding:13px 14px; background:rgba(43,111,255,.07);
font-family:var(--font); font-size:.85rem; font-weight:700; }
@media(max-width:960px) {
.prod-grid { grid-template-columns:1fr 1fr; }
.cart-bar { left:16px; right:16px; transform:translateY(140%); max-width:none; flex-wrap:wrap; gap:10px; }
.cart-bar.show { transform:translateY(0); }
.cart-items { display:none; }
}
@media(max-width:600px) { .prod-grid { grid-template-columns:1fr; } }
/* ══ COMBOS ══ */
.combo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line2);
border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
.combo { background:var(--bg); padding:30px 28px 26px; display:flex; flex-direction:column;
position:relative; overflow:hidden; transition:background .3s; }
.combo:hover { background:rgba(255,255,255,.022); }
.combo.in-cart { background:rgba(43,111,255,.055); }
.combo::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad);
background-size:200% auto; animation:gradShift 5s linear infinite;
transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.combo:hover::after, .combo.in-cart::after { transform:scaleX(1); }
.combo-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.combo-name { font-family:var(--font); font-size:1.3rem; font-weight:800; letter-spacing:-.035em; }
.combo-save { font-family:var(--font); font-size:.6rem; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--teal); border:1px solid rgba(0,255,204,.3);
background:rgba(0,255,204,.07); padding:4px 9px; border-radius:4px; white-space:nowrap; }
.combo-for { font-family:var(--body); font-size:.81rem; color:var(--muted); line-height:1.72; margin-bottom:18px; }
.combo-parts { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.combo-part { font-family:var(--font); font-size:.68rem; font-weight:500; color:rgba(255,255,255,.62);
background:rgba(255,255,255,.045); border:1px solid var(--line2); padding:5px 11px; border-radius:5px; }
.combo-price { margin-bottom:20px; padding-top:18px; border-top:1px solid var(--line); }
.combo-mo { font-family:var(--font); font-size:1.7rem; font-weight:800; letter-spacing:-.045em; line-height:1.15;
background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
background-clip:text; background-size:200% auto; animation:gradShift 5s linear infinite; }
.combo-mo small { font-size:.75rem; font-weight:600; -webkit-text-fill-color:var(--muted); letter-spacing:0; }
.combo-note { font-family:var(--body); font-size:.72rem; color:var(--dim); margin-top:7px; line-height:1.55; }
.combo .btn { width:100%; justify-content:center; margin-top:auto; }
@media(max-width:960px) { .combo-grid { grid-template-columns:1fr; } }
/* ══ Descuento por combinar ══ */
.combo-deal { margin-top:20px; padding:14px 18px; border-radius:10px;
border:1px solid rgba(0,255,204,.22); background:rgba(0,255,204,.05);
font-family:var(--body); font-size:.84rem; color:rgba(255,255,255,.75); line-height:1.65; max-width:620px; }
.combo-deal strong { color:var(--teal); font-weight:600; }
.cart-desc { font-family:var(--font); font-size:.75rem; font-weight:800; letter-spacing:-.01em;
color:#04240f; background:var(--teal); padding:5px 9px; border-radius:5px; align-items:center; }
/* ══════════════════════════════════════
CHAT — ventana flotante
══════════════════════════════════════ */
/* Boton plano y quieto. Antes era el gradiente de marca corriendo en bucle
infinito en la esquina: llamaba mas la atencion que el contenido. */
.chat-fab {
position:fixed; right:24px; bottom:92px; z-index:781;
width:52px; height:52px; border-radius:26px;
background:#f2f2f2;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 22px rgba(0,0,0,.45);
transition:opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.chat-fab:hover { background:#fff; transform:translateY(-1px); }
.chat-fab svg { width:23px; height:23px; fill:#000; }
.chat-fab.hide { opacity:0; pointer-events:none; transform:translateY(6px); }
.chat-panel {
position:fixed; right:24px; bottom:92px; z-index:800;
width:min(390px, calc(100vw - 32px)); height:min(560px, calc(100vh - 140px));
background:#0a0a0a; border:1px solid var(--line2); border-radius:16px;
display:flex; flex-direction:column; overflow:hidden;
box-shadow:0 24px 70px rgba(0,0,0,.7);
opacity:0; transform:translateY(10px); pointer-events:none;
transition:opacity .22s ease-out, transform .22s ease-out;
}
.chat-panel.open { opacity:1; transform:none; pointer-events:auto; }
.chat-top { display:flex; align-items:center; gap:11px; padding:15px 16px;
border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.chat-top img { height:19px; width:auto; }
.chat-who { flex:1; }
.chat-who b { display:block; font-family:var(--font); font-size:.83rem; font-weight:700; letter-spacing:-.02em; }
.chat-who span { font-family:var(--body); font-size:.68rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.chat-who span::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--teal); opacity:.75; }
.chat-x { background:none; color:var(--muted); font-size:1rem; padding:5px; }
.chat-x:hover { color:var(--text); }
.chat-body { flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:11px; }
.msg { max-width:82%; padding:11px 14px; border-radius:13px; font-family:var(--body);
font-size:.83rem; line-height:1.6; animation:msgIn .22s ease-out; white-space:pre-wrap; }
@keyframes msgIn { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
.msg.bot { background:rgba(255,255,255,.055); color:rgba(255,255,255,.9); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.me { background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg.sys { background:none; color:var(--dim); font-size:.72rem; text-align:center; align-self:center; max-width:100%; }
/* Spinz escribiendo… */
.typing { display:flex; gap:5px; align-items:center; align-self:flex-start; padding:13px 15px;
background:rgba(255,255,255,.055); border-radius:13px; border-bottom-left-radius:4px;
animation:msgIn .22s ease-out; }
/* Sin rebote vertical: los puntos solo suben y bajan de opacidad. El salto
de 3px obligaba al ojo a seguirlos mientras se leia el resto del chat. */
.typing i { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55);
animation:blink 1.6s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.22s } .typing i:nth-child(3){ animation-delay:.44s }
@keyframes blink { 0%,70%,100%{opacity:.22} 35%{opacity:.85} }
/* Preguntas sugeridas — se van con animación tras la primera */
.chat-chips { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px;
transition:opacity .4s var(--ease), max-height .5s var(--ease), padding .4s var(--ease);
max-height:220px; overflow:hidden; }
.chat-chips.gone { opacity:0; max-height:0; padding-top:0; padding-bottom:0; pointer-events:none; }
.chip { font-family:var(--font); font-size:.73rem; font-weight:500; color:rgba(255,255,255,.72);
background:rgba(255,255,255,.05); border:1px solid var(--line2); padding:7px 12px; border-radius:16px;
transition:all .25s var(--ease); text-align:left; }
.chip:hover { background:rgba(43,111,255,.14); border-color:rgba(43,111,255,.45); color:#fff; }
.chat-foot { border-top:1px solid var(--line); padding:12px 14px; }
.chat-in-row { display:flex; gap:8px; align-items:flex-end; }
.chat-in { flex:1; background:rgba(255,255,255,.05); border:1px solid var(--line2); border-radius:10px;
padding:10px 12px; font-size:.83rem; color:var(--text); resize:none; max-height:88px; line-height:1.5; }
.chat-in:focus { outline:none; border-color:rgba(43,111,255,.5); }
.chat-send { background:var(--text); color:#000; border-radius:9px; width:38px; height:38px;
display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.chat-send:disabled { opacity:.35; }
.chat-wa { display:block; text-align:center; font-family:var(--font); font-size:.72rem;
color:#25D366; margin-top:9px; }
.chat-wa:hover { text-decoration:underline; }
/* Gate de datos */
.chat-gate { padding:18px 16px; display:flex; flex-direction:column; gap:11px; }
.chat-gate p { font-family:var(--body); font-size:.8rem; color:var(--muted); line-height:1.65; }
.chat-gate .form-in { font-size:.82rem; }
@media(max-width:600px) {
.chat-panel { right:12px; left:12px; width:auto; bottom:84px; height:min(520px, calc(100vh - 120px)); }
.chat-fab { right:16px; bottom:78px; width:50px; height:50px; }
}
/* El atributo [hidden] debe ganarle a cualquier display declarado arriba.
Sin esto, .chat-gate{display:flex} lo anula y se ve todo encimado. */
[hidden] { display: none !important; }
/* Etiqueta que deja claro que es un bot, no una persona */
/* inline-block: sin esto el span hereda el ancho del en bloque
y el gradiente se estira por toda la cabecera. */
/* El color va con !important: .chat-who span declara color:var(--teal)
y ganaba por especificidad, dejando texto verde sobre fondo verde. */
/* Contorno en vez de bloque teal fluorescente: sigue diciendo BOT sin ser
lo primero que ves al abrir la ventana. */
.ai-tag { display:inline-block; font-size:.5rem; font-weight:600; letter-spacing:.12em;
line-height:1.5; vertical-align:middle; color:rgba(255,255,255,.5) !important;
background:none; border:1px solid rgba(255,255,255,.18);
padding:1px 5px; border-radius:3px; margin-left:7px; }
.chat-who b { display:flex; align-items:center; }
/* Opciones dentro del hilo de conversación */
.chat-chips.inline { padding:2px 0 4px; max-height:200px; }
/* ══════════════════════════
VER DETALLE — modal por producto
Reutiliza la mecanica del modal de cotizacion (.q-back) pero con
layout propio: es una ficha larga, no un formulario corto.
══════════════════════════ */
.pcell-acts { display:flex; flex-direction:column; gap:9px; margin-top:auto; }
.pcell-more, .combo-more {
width:100%; background:none; border:none; cursor:pointer;
font-family:var(--font); font-size:.72rem; font-weight:600; letter-spacing:.02em;
color:var(--muted); padding:4px 0; text-align:center;
display:flex; align-items:center; justify-content:center; gap:6px;
transition:color .25s var(--ease);
}
.pcell-more:hover, .combo-more:hover { color:var(--cyan); }
.pcell-more span, .combo-more span { transition:transform .3s var(--ease); }
.pcell-more:hover span, .combo-more:hover span { transform:translateX(3px); }
/* Dentro de .pcell-acts el boton ya no necesita empujarse solo: el que se
pega al fondo de la tarjeta es el contenedor. */
.combo .pcell-acts .btn, .pcell .pcell-acts .btn { margin-top:0; }
.d-modal {
background:#0a0a0a; border:1px solid var(--line2); border-radius:16px;
width:100%; max-width:760px; max-height:88vh; position:relative;
}
.d-hero { padding:34px 36px 26px; border-bottom:1px solid var(--line); position:relative; }
.d-hero::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); }
.d-kicker { font-family:var(--font); font-size:.58rem; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--cyan); margin-bottom:12px; }
.d-name { font-family:var(--font); font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800;
letter-spacing:-.045em; line-height:1.08; margin-bottom:12px; }
.d-intro { font-family:var(--body); font-size:.92rem; color:var(--muted); line-height:1.78; max-width:56ch; }
.d-price { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:20px;
padding-top:18px; border-top:1px solid var(--line); }
.d-price-mo { font-family:var(--font); font-size:1.9rem; font-weight:800; letter-spacing:-.05em; line-height:1;
background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* Los precios en texto ("Cotizacion por produccion") no aguantan 1.9rem:
se parten en dos lineas y pesan mas que el nombre del producto. */
.d-price-mo.txt { font-size:1.2rem; letter-spacing:-.03em; }
.d-price-note { font-family:var(--body); font-size:.75rem; color:var(--dim); line-height:1.5; flex:1; min-width:180px; }
.d-body { padding:30px 36px 34px; }
.d-block { margin-bottom:32px; }
.d-block:last-child { margin-bottom:0; }
.d-h { font-family:var(--font); font-size:.64rem; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--dim); margin-bottom:16px;
padding-bottom:10px; border-bottom:1px solid var(--line); }
.d-inc { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; }
.d-inc li { font-family:var(--body); font-size:.82rem; line-height:1.65; }
.d-inc b { display:block; font-family:var(--font); font-size:.86rem; font-weight:600;
letter-spacing:-.01em; color:var(--text); margin-bottom:4px; }
.d-inc span { color:var(--muted); }
.d-steps { list-style:none; counter-reset:dstep; display:flex; flex-direction:column; gap:14px; }
.d-steps li { counter-increment:dstep; display:flex; gap:14px;
font-family:var(--body); font-size:.84rem; color:var(--muted); line-height:1.7; }
.d-steps li::before { content:counter(dstep); flex-shrink:0;
width:22px; height:22px; border-radius:50%; margin-top:2px;
border:1px solid var(--line2); display:flex; align-items:center; justify-content:center;
font-family:var(--font); font-size:.63rem; font-weight:700; color:var(--cyan); }
.d-tags { display:flex; flex-wrap:wrap; gap:8px; }
.d-tag { font-family:var(--font); font-size:.7rem; font-weight:500; color:rgba(255,255,255,.66);
border:1px solid var(--line2); border-radius:999px; padding:6px 13px; }
.d-meta { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line2);
border:1px solid var(--line2); border-radius:11px; overflow:hidden; }
.d-meta div { background:#0a0a0a; padding:16px 18px; }
.d-meta dt { font-family:var(--font); font-size:.58rem; font-weight:700; letter-spacing:.13em;
text-transform:uppercase; color:var(--dim); margin-bottom:7px; }
.d-meta dd { font-family:var(--body); font-size:.82rem; color:rgba(255,255,255,.82); line-height:1.6; }
.d-foot { flex:0 0 auto; background:rgba(10,10,10,.96);
border-top:1px solid var(--line2); padding:16px 36px;
display:flex; gap:12px; align-items:center; }
.d-foot .btn { flex:1; justify-content:center; }
.d-foot-wa { flex:0 0 auto; }
@media(max-width:700px) {
.d-hero { padding:30px 22px 22px; }
.d-body { padding:26px 22px 30px; }
.d-foot { padding:14px 22px; flex-direction:column; }
.d-foot .btn { width:100%; }
.d-inc, .d-meta { grid-template-columns:1fr; }
.d-meta { gap:1px; }
}