/* ── FUENTES AUTO-ALOJADAS (sin CDN) ─────── */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/cormorant-garamond-300-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/cormorant-garamond-300-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 500;font-display:swap;src:url(../fonts/cormorant-garamond-300-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 500;font-display:swap;src:url(../fonts/cormorant-garamond-300-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:200 500;font-display:swap;src:url(../fonts/dm-sans-200-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:200 500;font-display:swap;src:url(../fonts/dm-sans-200-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ── TOKENS ──────────────────────────────── */
:root{
--black:#080808;
--deep:#0c0c0c;
--carbon:#141414;
--card:#181818;
--gold:#C9A84C;
--gold-l:#E8C46A;
--gold-d:#A8882C;
--warm:#F8F7F4;
--grey:#A8A8A8; /* v10 · antes #888: 3.9:1 sobre --black, no llegaba a AA */
--grey-d:#444;
--spring:cubic-bezier(0.32,0.72,0,1);
--ease-out:cubic-bezier(0.16,1,0.3,1);
--ease-back:cubic-bezier(0.34,1.28,0.64,1);
}
/* ── RESET ───────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
background:var(--black);color:var(--warm);
font-family:'DM Sans',sans-serif;font-weight:400;
overflow-x:clip;cursor:none;
}
a{color:inherit;text-decoration:none}
/* ── FOCUS (keyboard nav, gold ring) ─────── */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{
outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;
}
:focus:not(:focus-visible){outline:none}
/* ── GRAIN OVERLAY ───────────────────────── */
body::before{
content:'';position:fixed;inset:0;z-index:700;
pointer-events:none;opacity:.028;
background:url("data:image/svg+xml,");
background-size:200px 200px;
}
/* ── PROGRESS ────────────────────────────── */
.progress{
position:fixed;top:0;left:0;width:100%;height:2px;
background:var(--gold);transform-origin:left;transform:scaleX(0);
z-index:600;pointer-events:none;
}
/* ── CURSOR (GPU: transform-only, hidden until first move) ── */
#cur{
position:fixed;left:0;top:0;width:8px;height:8px;
background:var(--gold);border-radius:50%;
pointer-events:none;z-index:9000;opacity:0;
transform:translate(-50%,-50%);
mix-blend-mode:difference;
transition:width .2s var(--ease-out),height .2s var(--ease-out);
}
#ring{
position:fixed;left:0;top:0;width:34px;height:34px;
border:1px solid rgba(201,168,76,.28);border-radius:50%;
pointer-events:none;z-index:8999;opacity:0;
transform:translate(-50%,-50%);
transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .35s var(--ease-out);
}
#ring.h{width:54px;height:54px;border-color:var(--gold)}
@media(hover:none){#cur,#ring{display:none}}
/* ── NAV (floating pill) ─────────────────── */
nav{
position:fixed;top:20px;left:50%;
transform:translateX(-50%);z-index:500;
display:flex;justify-content:space-between;align-items:center;
width:calc(100% - 80px);max-width:1160px;
padding:13px 28px;
background:rgba(8,8,8,.55);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:1px solid rgba(201,168,76,.12);
border-radius:100px;
will-change:transform;
transition:background .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out),padding .45s var(--ease-out);
}
nav.s{
background:rgba(8,8,8,.92);
box-shadow:0 8px 40px rgba(0,0,0,.55),0 0 0 1px rgba(201,168,76,.06),0 0 32px rgba(201,168,76,.1);
border-color:rgba(201,168,76,.38);
padding:9px 22px;
}
nav.s .logo{color:var(--gold)}
.logo{
display:flex;align-items:center;gap:10px;
font-family:'Cormorant Garamond',serif;
font-size:12.5px;font-weight:400;letter-spacing:.52em;
color:var(--warm);cursor:none;
transition:color .5s var(--ease-out);
}
.nav-r{display:flex;gap:40px;list-style:none;align-items:center}
.nav-r a{
color:rgba(248,247,244,.52);font-size:10px;letter-spacing:.18em;
transition:color .3s var(--ease-out);cursor:none;
}
.nav-r a:hover{color:var(--warm)}
.lang-toggle{display:flex;gap:1px;align-items:center}
.lang-btn{
background:none;border:none;font-size:9.5px;letter-spacing:.2em;
color:rgba(248,247,244,.4);cursor:none;padding:4px 5px;
transition:color .3s var(--ease-out);font-family:'DM Sans',sans-serif;
}
.lang-btn.active{color:var(--gold)}
.lang-sep{color:rgba(248,247,244,.1);font-size:8px;pointer-events:none}
.nav-cta{
padding:9px 22px;border:1px solid rgba(248,247,244,.18);border-radius:100px;
font-size:9.5px;letter-spacing:.16em;color:var(--warm)!important;
transition:background .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out)!important;
}
.nav-cta:hover{background:var(--warm)!important;color:var(--black)!important;border-color:var(--warm)!important}
/* Mobile nav */
.mob-toggle{
display:none;background:none;border:none;cursor:none;
width:44px;height:44px;position:relative;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.mob-bar{
display:block;width:20px;height:1px;background:var(--warm);
transition:transform .4s var(--spring),opacity .3s var(--ease-out);
transform-origin:center;
}
.mob-toggle.open .mob-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mob-toggle.open .mob-bar:nth-child(2){opacity:0;transform:scaleX(0)}
.mob-toggle.open .mob-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* Mobile full-screen menu */
.mob-menu{
position:fixed;inset:0;z-index:450;
background:rgba(8,8,8,.96);
backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
padding:96px 24px 40px;overflow-y:auto;
opacity:0;pointer-events:none;
transition:opacity .4s var(--ease-out);
}
.mob-menu.open{opacity:1;pointer-events:all}
.mob-link{
font-family:'Cormorant Garamond',serif;
font-size:clamp(26px,6.4vw,38px);font-weight:300;
color:var(--warm);letter-spacing:.02em;
padding:14px 0;cursor:none;
opacity:0;transform:translateY(18px);
transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .3s;
display:block;text-align:center;
}
/* V6 · stagger generico: el menu ya no tiene solo 4 enlaces */
.mob-eyebrow,.mob-rule,.mob-cur{
opacity:0;transform:translateY(18px);
transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.mob-menu.open>*{opacity:1;transform:translateY(0)}
.mob-menu.open>*:nth-child(1){transition-delay:.05s}
.mob-menu.open>*:nth-child(2){transition-delay:.09s}
.mob-menu.open>*:nth-child(3){transition-delay:.13s}
.mob-menu.open>*:nth-child(4){transition-delay:.17s}
.mob-menu.open>*:nth-child(5){transition-delay:.21s}
.mob-menu.open>*:nth-child(6){transition-delay:.24s}
.mob-menu.open>*:nth-child(7){transition-delay:.27s}
.mob-menu.open>*:nth-child(8){transition-delay:.30s}
.mob-menu.open>*:nth-child(9){transition-delay:.33s}
.mob-menu.open>*:nth-child(10){transition-delay:.36s}
.mob-menu.open>*:nth-child(11){transition-delay:.39s}
.mob-eyebrow{
font-size:9px;letter-spacing:.36em;text-transform:uppercase;
color:var(--gold);margin-bottom:14px;
}
.mob-link.sub{font-size:clamp(19px,4.6vw,26px);padding:8px 0}
.mob-rule{width:52px;height:1px;background:rgba(201,168,76,.22);margin:24px 0}
.mob-cur{margin-top:26px}
.mob-cur .cur-btn{font-size:11px;padding:10px 14px;min-height:44px}
.mob-link:hover{color:var(--gold)}
.mob-wa{
margin-top:40px;opacity:0;transform:translateY(16px);
transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.mob-menu.open .mob-wa{opacity:1;transform:translateY(0);transition-delay:.36s}
/* Mobile sticky CTA */
.mob-bar-cta{
display:none;
position:fixed;bottom:20px;left:50%;
transform:translateX(-50%);z-index:300;
}
/* ── BUTTONS ─────────────────────────────── */
.btn-p{
display:inline-flex;align-items:center;gap:0;
background:var(--gold);color:var(--black);
padding:6px 6px 6px 26px;
border-radius:100px;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
border:none;cursor:none;
transition:background .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
will-change:transform;
box-shadow:0 4px 24px rgba(201,168,76,.25);
}
.btn-p:hover{
background:var(--gold-l);
transform:translateY(-2px);
box-shadow:0 8px 32px rgba(201,168,76,.35);
}
.btn-p:active{transform:scale(.98) translateY(0);transition-duration:.1s}
.btn-p-icon{
width:32px;height:32px;
background:rgba(0,0,0,.18);
border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:14px;margin-left:16px;
transition:transform .35s var(--spring);
}
.btn-p:hover .btn-p-icon{transform:translate(2px,-1px) scale(1.08)}
.btn-o{
display:inline-flex;align-items:center;gap:10px;
background:transparent;color:var(--warm);
padding:17px 32px;border-radius:100px;
font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
border:1px solid rgba(248,247,244,.16);
transition:border-color .3s var(--ease-out),transform .3s var(--ease-out);
cursor:none;will-change:transform;
}
.btn-o:hover{border-color:rgba(248,247,244,.42);transform:translateY(-2px)}
.btn-o:active{transform:scale(.98);transition-duration:.1s}
/* ── HERO ────────────────────────────────── */
/* El hero dura mas de una pantalla: la primera se ve la animacion sola y,
al bajar, entra el texto con la animacion todavia fija detras. */
.hero{height:155dvh;position:relative;background:var(--black)}
.hero-stage{
position:sticky;top:0;height:100dvh;overflow:hidden;
display:flex;align-items:flex-end;
}
/* Velo suave: la animacion tiene que verse, no quedar opaca. Solo se cierra
abajo, que es donde despues aparece el texto. */
.h-ov2{
position:absolute;inset:0;z-index:2;
background:linear-gradient(to bottom,rgba(6,6,6,.52) 0%,rgba(8,8,8,.12) 34%,rgba(8,8,8,.58) 76%,rgba(8,8,8,.9) 100%);
}
.h-scrim{
position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
transition:opacity .7s var(--ease-out);
background:linear-gradient(to bottom,rgba(8,8,8,.1) 0%,rgba(8,8,8,.3) 34%,rgba(8,8,8,.72) 72%,rgba(8,8,8,.93) 100%);
}
.hero-stage.text-on .h-scrim{opacity:1}
#hcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:.12}
#hero-video{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;object-position:center;z-index:1;
background:var(--black);
}
@media(max-width:1024px),(orientation:portrait){
#hero-video{object-fit:contain}
}
.h-inner{
position:relative;z-index:10;
max-width:1280px;margin:0 auto;
padding:0 80px 104px;width:100%;
opacity:0;transform:translateY(20px);pointer-events:none;
transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.h-inner.on{opacity:1;transform:none;pointer-events:auto}
/* Aviso de scroll: se va en cuanto el texto entra */
.h-cue{
position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
z-index:11;display:flex;flex-direction:column;align-items:center;gap:12px;
transition:opacity .45s var(--ease-out);
}
.h-cue.off{opacity:0;pointer-events:none}
.h-cue-t{font-size:8.5px;letter-spacing:.36em;color:rgba(201,168,76,.6)}
.h-cue-line{
display:block;width:1px;height:46px;background:var(--gold);
animation:cueDrop 2.4s var(--ease-out) infinite;
}
@keyframes cueDrop{
0%{transform:scaleY(0);transform-origin:top}
42%{transform:scaleY(1);transform-origin:top}
58%{transform:scaleY(1);transform-origin:bottom}
100%{transform:scaleY(0);transform-origin:bottom}
}
/* Scarcity badge */
.scarcity-badge{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:100px;
border:1px solid rgba(201,168,76,.2);
background:rgba(201,168,76,.06);
margin-bottom:36px;
opacity:0;transition:opacity .8s var(--ease-out);
}
.scarcity-badge.vis{opacity:1}
.s-dot{
width:6px;height:6px;border-radius:50%;
background:var(--gold);
animation:pulse 2s ease infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.scarcity-badge span{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
/* Hero title */
.h-title{
text-shadow:0 2px 28px rgba(0,0,0,.55);
font-family:'Cormorant Garamond',serif;
font-weight:400;line-height:.9;color:var(--warm);
font-size:clamp(31px,6.9vw,96px);
letter-spacing:-.02em;
}
.h-title em{font-style:italic;color:var(--gold)}
.h-lmask{display:block;overflow:hidden;padding-bottom:.08em}
.h-linner{
display:block;transform:translateY(108%);
transition:transform 1.2s var(--spring);
}
.h-linner.vis{transform:translateY(0)}
/* Hero sub + btns */
.h-sub{
margin-top:36px;max-width:400px;
font-size:15px;color:rgba(248,247,244,.78);line-height:1.9;
text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 24px rgba(0,0,0,.85);
opacity:0;transform:translateY(16px);filter:blur(4px);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);
}
.h-sub.vis{opacity:1;transform:translateY(0);filter:blur(0)}
.h-btns{
margin-top:48px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
opacity:0;transform:translateY(14px);filter:blur(4px);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);
}
.h-btns.vis{opacity:1;transform:translateY(0);filter:blur(0)}
/* V6 · garantia degradada a linea fina bajo los botones */
.h-guarantee{
margin-top:22px;font-size:11.5px;letter-spacing:.06em;
color:rgba(248,247,244,.42);
text-shadow:0 1px 2px rgba(0,0,0,.7);
opacity:0;transform:translateY(10px);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.h-guarantee.vis{opacity:1;transform:translateY(0)}
/* Price badge next to CTA (legacy) */
.h-price-note{
font-size:10px;letter-spacing:.14em;
color:rgba(248,247,244,.45);margin-left:4px;
}
/* ── MARQUEE ─────────────────────────────── */
.mq-wrap{padding:15px 0;background:var(--gold);overflow:hidden}
.mq-track{display:inline-flex;animation:mq 28s linear infinite}
.mq-item{
font-size:10px;letter-spacing:.28em;text-transform:uppercase;
color:var(--black);font-weight:500;padding:0 24px;white-space:nowrap;
}
.mq-sep{color:rgba(0,0,0,.3);font-size:8px;padding:0 2px}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ── SECTION BASE ────────────────────────── */
.sec-wrap{padding:140px 0}
.sec{max-width:1280px;margin:0 auto;padding:0 80px}
.sec-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(38px,4.6vw,68px);font-weight:300;
color:var(--warm);line-height:1.06;margin-bottom:18px;
}
.sec-title em{font-style:italic;color:var(--gold)}
.sec-sub{
font-size:15px;color:rgba(248,247,244,.4);
line-height:1.84;max-width:520px;margin-bottom:72px;
}
.gold-rule{width:100%;height:1px;background:rgba(201,168,76,.1)}
/* ── REVEAL ANIMATIONS (transform+opacity only, 60ms stagger) ── */
.rv{
opacity:0;transform:translateY(24px);
transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.rv.vis{opacity:1;transform:translateY(0)}
.rv2{
opacity:0;transform:translateY(24px);
transition:opacity .7s .06s var(--ease-out),transform .7s .06s var(--ease-out);
}
.rv2.vis{opacity:1;transform:translateY(0)}
.rv3{
opacity:0;transform:translateY(24px);
transition:opacity .7s .12s var(--ease-out),transform .7s .12s var(--ease-out);
}
.rv3.vis{opacity:1;transform:translateY(0)}
.rv4{
opacity:0;transform:translateY(20px);
transition:opacity .7s .18s var(--ease-out),transform .7s .18s var(--ease-out);
}
.rv4.vis{opacity:1;transform:translateY(0)}
/* ── PROBLEM SECTION ─────────────────────── */
.prob-wrap{
padding:140px 0;
border-top:1px solid rgba(201,168,76,.08);
}
.prob-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(44px,6vw,90px);font-weight:300;
line-height:.92;color:var(--warm);max-width:760px;margin-bottom:88px;
letter-spacing:-.02em;
}
.prob-title em{font-style:italic;color:var(--gold)}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.prob-col{
padding:0 52px 0 0;
border-right:1px solid rgba(201,168,76,.08);
}
.prob-col:first-child{padding-left:0}
.prob-col:nth-child(2){padding-left:52px}
.prob-col:last-child{border-right:none;padding-right:0;padding-left:52px}
.prob-n{
font-family:'Cormorant Garamond',serif;
font-size:80px;font-weight:300;line-height:1;
color:rgba(201,168,76,.38);margin-bottom:28px;
transition:color .4s var(--ease-out);
}
.prob-col:hover .prob-n{color:rgba(201,168,76,.6)}
.prob-h{
font-family:'Cormorant Garamond',serif;
font-size:22px;font-weight:400;color:var(--warm);
margin-bottom:16px;line-height:1.2;
}
.prob-t{font-size:13.5px;color:rgba(248,247,244,.5);line-height:1.9}
/* ── STEPS (Z-axis cascade) ──────────────── */
.steps-grid{
display:grid;grid-template-columns:repeat(4,1fr);
gap:2px;margin-top:64px;
align-items:start;
}
/* Outer bezel */
.step-outer{
background:rgba(201,168,76,.03);
border:1px solid rgba(201,168,76,.08);
border-radius:24px;padding:2px;
transition:border-color .4s var(--ease-out),transform .45s var(--spring),box-shadow .45s var(--ease-out);
cursor:none;
}
.step-outer:hover{
border-color:rgba(201,168,76,.18);
transform:translateY(-4px);
box-shadow:0 20px 40px -24px rgba(0,0,0,.6);
}
/* Inner core */
.step-inner{
background:var(--carbon);border-radius:22px;
padding:44px 32px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
transition:background .4s var(--ease-out);
border-top:1px solid transparent;
transition:background .4s var(--ease-out),border-top-color .4s var(--ease-out);
}
.step-outer:hover .step-inner{background:#161616;border-top-color:var(--gold)}
/* Z-axis rhythm - vertical offsets */
.step-outer:nth-child(2){margin-top:28px}
.step-outer:nth-child(4){margin-top:28px}
/* Pinned scrub state (desktop only, driven by scroll progress) */
#how.pinned{height:280vh;padding:0}
#how.pinned .sec{
position:sticky;top:0;min-height:100vh;
display:flex;flex-direction:column;justify-content:center;
}
#how.pinned .step-outer{transition:border-color .4s var(--ease-out),transform .45s var(--spring),box-shadow .45s var(--ease-out),opacity .5s var(--ease-out)}
#how.pinned .step-outer.vis:not(.lit){opacity:.35}
#how.pinned .step-outer.lit{opacity:1}
#how.pinned .step-outer.lit .step-inner{background:#161616;border-top-color:var(--gold)}
#how.pinned .step-outer.lit .step-n{color:rgba(201,168,76,.32)}
.step-n{
font-family:'Cormorant Garamond',serif;
font-size:56px;font-weight:300;
color:rgba(201,168,76,.14);line-height:1;margin-bottom:24px;
transition:color .4s var(--ease-out);
}
.step-outer:hover .step-n{color:rgba(201,168,76,.26)}
.step-title{
font-family:'Cormorant Garamond',serif;
font-size:20px;font-weight:400;color:var(--warm);
margin-bottom:12px;letter-spacing:.01em;
}
.step-desc{font-size:12.5px;color:rgba(248,247,244,.5);line-height:1.9}
/* ── STATS ───────────────────────────────── */
.stats-wrap{
padding:72px 0;
border-top:1px solid rgba(201,168,76,.08);
border-bottom:1px solid rgba(201,168,76,.08);
}
.stats{
display:grid;grid-template-columns:repeat(4,1fr);
max-width:1280px;margin:0 auto;padding:0 80px;
}
.stat{
padding:40px 36px;
border-right:1px solid rgba(255,255,255,.04);
position:relative;
}
.stat:last-child{border-right:none}
.stat::before{
content:'';display:block;width:44px;height:1px;
background:var(--gold);margin-bottom:20px;
}
.stat-n{
font-family:'Cormorant Garamond',serif;
font-size:50px;font-weight:300;color:var(--gold);
line-height:1;margin-bottom:10px;
font-variant-numeric:tabular-nums;
}
.stat-l{font-size:9px;letter-spacing:.3em;color:rgba(248,247,244,.5);text-transform:uppercase}
/* ── PRICING (double-bezel) ──────────────── */
.pricing-bg{background:var(--deep);padding:140px 0}
.pricing-sec{max-width:1280px;margin:0 auto;padding:0 80px}
.p-label{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.p-label-line{height:1px;width:28px;background:var(--gold);flex-shrink:0}
.p-label span{font-size:9px;letter-spacing:.36em;color:var(--gold);text-transform:uppercase}
/* Anchoring bar */
.anchor-bar{
margin-bottom:52px;
padding:18px 28px;
border:1px solid rgba(201,168,76,.14);
border-radius:16px;
display:flex;align-items:center;justify-content:space-between;gap:24px;
max-width:620px;
background:rgba(201,168,76,.03);
}
.anchor-text{font-size:13.5px;color:rgba(248,247,244,.5);line-height:1.65;flex:1}
.anchor-text strong{color:rgba(248,247,244,.75);font-weight:400}
.anchor-cross{
font-family:'Cormorant Garamond',serif;
font-size:28px;font-weight:300;
color:rgba(201,168,76,.55);
position:relative;top:2px;white-space:nowrap;flex-shrink:0;
line-height:1;align-self:center;
}
.anchor-cross::after{
content:'';position:absolute;
left:-3px;right:-3px;
top:50%;transform:translateY(-50%);
height:1.5px;background:rgba(201,168,76,.65);
}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:0}
.pricing-grid>*,.ai-plans>*{min-width:0}
/* double-bezel */
.p-card-out{
background:rgba(201,168,76,.025);
border:1px solid rgba(201,168,76,.1);
border-radius:28px;padding:2px;
transition:border-color .5s var(--ease-out),transform .5s var(--spring),box-shadow .5s var(--ease-out);
cursor:none;
}
.p-card-out:hover{
border-color:rgba(201,168,76,.22);
transform:translateY(-4px);
box-shadow:0 28px 56px -28px rgba(0,0,0,.65);
}
.p-card-in{
background:var(--carbon);border-radius:26px;
padding:64px 56px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
transition:background .5s var(--ease-out);
position:relative;overflow:hidden;
}
.p-card-out:hover .p-card-in{background:#181818}
.p-card-in::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:0;transition:opacity .4s var(--ease-out);
}
.p-card-out:hover .p-card-in::after{opacity:1}
.p-tag{display:flex;align-items:center;gap:10px;margin-bottom:32px}
.p-tag-line{height:1px;width:20px;background:var(--gold);flex-shrink:0}
.p-tag span{font-size:9px;letter-spacing:.36em;color:var(--gold);text-transform:uppercase}
.p-price{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.p-amount{
font-family:'Cormorant Garamond',serif;
font-size:clamp(38px,8.6vw,72px);font-weight:300;color:var(--warm);line-height:1;
overflow-wrap:anywhere;
}
.p-period{font-size:13px;color:rgba(248,247,244,.5);letter-spacing:.04em}
.p-desc{font-size:13.5px;color:rgba(248,247,244,.5);margin-bottom:40px;line-height:1.84}
.p-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.p-features li{
font-size:13px;color:rgba(248,247,244,.55);
padding-left:16px;position:relative;line-height:1.6;
}
.p-features li::before{
content:'·';position:absolute;left:0;
color:var(--gold);font-size:15px;top:-2px;
}
.p-cta-link{
display:inline-flex;align-items:center;gap:8px;
font-size:10px;letter-spacing:.26em;text-transform:uppercase;
color:var(--gold);cursor:none;
transition:transform .3s var(--ease-out),color .3s var(--ease-out);
}
.p-cta-link:hover{transform:translateX(4px);color:var(--gold-l)}
/* Not included */
.not-inc{
margin-top:48px;
padding:28px 36px;
border:1px solid rgba(201,168,76,.06);
border-radius:16px;
display:grid;grid-template-columns:auto 1fr;gap:20px 40px;
align-items:start;
}
.ni-lab{
font-size:9px;letter-spacing:.28em;text-transform:uppercase;
color:rgba(248,247,244,.38);white-space:nowrap;padding-top:1px;
}
.ni-items{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none}
.ni-items li{
font-size:11.5px;color:rgba(248,247,244,.42);
padding-left:12px;position:relative;
}
.ni-items li::before{content:'-';position:absolute;left:0;color:rgba(201,168,76,.25)}
.p-note{
margin-top:18px;text-align:center;
font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
color:rgba(248,247,244,.35);
}
/* ── PROCESS ─────────────────────────────── */
.proc-wrap{padding:140px 0}
.proc-sec{max-width:1280px;margin:0 auto;padding:0 80px}
.timeline{
margin-top:72px;
display:flex;flex-direction:column;
position:relative;padding-left:48px;
}
.timeline::before{
content:'';position:absolute;left:0;top:12px;bottom:0;width:1px;
background:linear-gradient(to bottom,rgba(201,168,76,.36),rgba(201,168,76,.03));
}
.tl-item{
padding-bottom:56px;position:relative;
opacity:0;transform:translateY(20px);
transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.tl-item.vis{opacity:1;transform:translateY(0)}
.tl-item::before{
content:'';position:absolute;left:-52px;top:12px;
width:9px;height:9px;border-radius:50%;
border:1px solid var(--gold);background:var(--black);
transition:background .5s var(--ease-out);
}
.tl-item.vis::before{background:var(--gold)}
.tl-time{font-size:9px;letter-spacing:.36em;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
.tl-title{
font-family:'Cormorant Garamond',serif;
font-size:32px;font-weight:300;color:var(--warm);margin-bottom:12px;
}
.tl-desc{font-size:13.5px;color:rgba(248,247,244,.52);line-height:1.84;max-width:540px}
/* ── SOCIAL PROOF ────────────────────────── */
.social-wrap{
padding:120px 0;
border-top:1px solid rgba(201,168,76,.08);
}
.social-sec{max-width:1280px;margin:0 auto;padding:0 80px}
.social-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(32px,3.8vw,54px);font-weight:300;
color:var(--warm);margin-bottom:12px;line-height:1.1;
}
.social-sub{
font-size:14px;color:rgba(248,247,244,.32);margin-bottom:56px;
}
.clients-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:2px;
}
.client-slot{
min-height:120px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
border:1px solid rgba(201,168,76,.1);
border-radius:0;
transition:border-color .4s var(--ease-out),background .4s var(--ease-out),transform .3s var(--ease-out);
position:relative;overflow:hidden;cursor:none;
background:rgba(255,255,255,.015);
}
.client-slot:hover{
border-color:rgba(201,168,76,.28);
background:rgba(201,168,76,.05);
transform:scale(1.015);
z-index:2;
}
.client-slot:active{transform:scale(.98);transition-duration:.1s}
.client-type{
font-size:10px;letter-spacing:.32em;
color:rgba(248,247,244,.5);text-transform:uppercase;
transition:color .3s var(--ease-out);
}
.client-slot:hover .client-type{color:rgba(248,247,244,.82)}
.client-cta{
font-size:9px;letter-spacing:.22em;
color:rgba(201,168,76,.6);text-transform:uppercase;
opacity:0;transform:translateY(6px);
transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
}
.client-slot:hover .client-cta{opacity:1;transform:translateY(0)}
/* ── CTA FINAL ───────────────────────────── */
.cta-wrap{overflow:hidden;
padding:160px 80px;text-align:center;
position:relative;overflow:hidden;
}
.cta-glow{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:600px;height:600px;
background:radial-gradient(circle,rgba(201,168,76,.048),transparent 66%);
pointer-events:none;
}
#ctacanvas{position:absolute;inset:0;pointer-events:none;z-index:0}
.cta-in{position:relative;z-index:2;max-width:840px;margin:0 auto}
.cta-eyebrow{
display:flex;align-items:center;justify-content:center;
gap:14px;margin-bottom:44px;
}
.cta-eyebrow-line{height:1px;width:28px;background:var(--gold);flex-shrink:0}
.cta-eyebrow span{font-size:9px;letter-spacing:.36em;color:var(--gold);text-transform:uppercase}
.cta-title{
font-family:'Cormorant Garamond',serif;
font-size:clamp(52px,7.8vw,108px);
font-weight:300;color:var(--warm);
line-height:1.01;margin-bottom:28px;letter-spacing:-.015em;
}
.cta-title em{font-style:italic;color:var(--gold)}
.cta-sub{
font-size:15px;color:rgba(248,247,244,.52);
margin-bottom:56px;line-height:1.84;
max-width:520px;margin-left:auto;margin-right:auto;
}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ── FOOTER ──────────────────────────────── */
footer{background:#070707;border-top:1px solid rgba(201,168,76,.1)}
.f-grid{
max-width:1280px;margin:0 auto;
padding:80px 80px 52px;
display:grid;grid-template-columns:1.6fr auto;gap:64px;
}
.f-logo{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.f-logo-text{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.48em;color:var(--warm)}
.f-logo-dot{color:var(--gold);font-size:7px}
.f-tagline{font-size:13px;color:rgba(248,247,244,.45);line-height:1.9;margin-bottom:20px;max-width:268px}
.f-domain{font-size:9px;letter-spacing:.36em;color:var(--gold);text-transform:uppercase}
.f-col-t{font-size:9px;letter-spacing:.36em;color:rgba(248,247,244,.4);text-transform:uppercase;margin-bottom:24px}
.f-links{list-style:none;display:flex;flex-direction:column;gap:12px}
.f-links a,.f-links li{font-size:13px;color:rgba(248,247,244,.5);letter-spacing:.02em;cursor:none;transition:color .3s var(--ease-out)}
.f-links a:hover{color:var(--warm)}
.f-bottom{
max-width:1280px;margin:0 auto;padding:20px 80px;
border-top:1px solid rgba(255,255,255,.03);
display:flex;justify-content:space-between;align-items:center;
}
.f-bottom p{font-size:10.5px;color:rgba(248,247,244,.35);letter-spacing:.06em}
/* ══════════════════════════════════════════
V6 · NAV DROPDOWN + TOGGLE DE MONEDA
══════════════════════════════════════════ */
.nav-drop{position:relative}
.nav-drop>a{display:inline-flex;align-items:center;gap:6px}
.nav-caret{
width:7px;height:7px;flex-shrink:0;
border-right:1px solid currentColor;border-bottom:1px solid currentColor;
transform:translateY(-2px) rotate(45deg);
transition:transform .35s var(--ease-out);
}
.nav-drop:hover .nav-caret,.nav-drop:focus-within .nav-caret{transform:translateY(1px) rotate(225deg)}
.nav-menu{
position:absolute;top:100%;left:50%;
transform:translateX(-50%) translateY(6px);
margin-top:16px;padding:10px;min-width:238px;
list-style:none;
background:rgba(8,8,8,.94);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:1px solid rgba(201,168,76,.16);border-radius:16px;
box-shadow:0 20px 48px rgba(0,0,0,.6);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .32s var(--ease-out),transform .32s var(--ease-out),visibility .32s;
}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{
opacity:1;visibility:visible;pointer-events:all;transform:translateX(-50%) translateY(0);
}
/* puente invisible: evita que el menu se cierre al bajar el raton */
.nav-drop::after{content:'';position:absolute;top:100%;left:0;right:0;height:18px}
.nav-menu li{margin:0}
.nav-menu a{
display:block;padding:11px 14px;border-radius:9px;
font-size:11.5px;letter-spacing:.06em;
color:rgba(248,247,244,.62)!important;
transition:background .28s var(--ease-out),color .28s var(--ease-out);
}
.nav-menu a:hover{background:rgba(201,168,76,.09);color:var(--warm)!important}
.cur-toggle{display:flex;gap:1px;align-items:center}
.cur-btn{
background:none;border:none;font-size:9.5px;letter-spacing:.2em;
color:rgba(248,247,244,.4);cursor:none;padding:4px 5px;
transition:color .3s var(--ease-out);font-family:'DM Sans',sans-serif;
}
.cur-btn.active{color:var(--gold)}
/* ══════════════════════════════════════════
V6 · CHIPS DEL HERO
══════════════════════════════════════════ */
.h-chips{
margin-top:30px;display:flex;gap:9px;flex-wrap:wrap;
opacity:0;transform:translateY(14px);filter:blur(4px);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);
}
.h-chips.vis{opacity:1;transform:translateY(0);filter:blur(0)}
.h-chip{
display:inline-flex;align-items:center;
padding:9px 17px;border-radius:999px;
border:1px solid rgba(201,168,76,.3);
background:rgba(8,8,8,.32);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:rgba(248,247,244,.82);cursor:none;
font-family:'DM Sans',sans-serif;font-weight:300;
transition:border-color .35s var(--ease-out),color .35s var(--ease-out),background .35s var(--ease-out),transform .35s var(--ease-out);
}
.h-chip:hover{border-color:var(--gold);color:var(--warm);background:rgba(201,168,76,.1);transform:translateY(-2px)}
.h-chip:active{transform:translateY(0) scale(.98)}
/* ══════════════════════════════════════════
V6 · VELARO AI
══════════════════════════════════════════ */
.ai-wrap{background:var(--deep);padding:150px 0;border-top:1px solid rgba(201,168,76,.07)}
.ai-sec{max-width:1280px;margin:0 auto;padding:0 80px}
.ai-grid{
display:grid;grid-template-columns:55fr 45fr;
gap:72px;align-items:center;margin-top:76px;
}
/* Video */
.ai-video-col{min-width:0}
.ai-video-shell{
position:relative;width:100%;max-width:800px;
aspect-ratio:816/480;
border-radius:4px;overflow:hidden;
border:1px solid rgba(201,168,76,.15);
background:var(--black);
}
.ai-video-shell video{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;display:block;
}
.ai-play{
position:absolute;inset:0;z-index:2;
display:flex;align-items:center;justify-content:center;
background:transparent;border:none;cursor:none;
transition:opacity .4s var(--ease-out);
}
.ai-play.hide{opacity:0;pointer-events:none}
.ai-play-circle{
width:64px;height:64px;border-radius:50%;
border:1px solid var(--gold);
background:rgba(10,10,10,.4);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;
transition:transform .4s var(--spring),background .4s var(--ease-out);
}
.ai-play:hover .ai-play-circle{transform:scale(1.08);background:rgba(201,168,76,.16)}
.ai-play-tri{
width:0;height:0;margin-left:4px;
border-top:9px solid transparent;
border-bottom:9px solid transparent;
border-left:14px solid var(--gold);
}
.ai-caption{margin-top:16px;font-size:12px;color:var(--grey);line-height:1.7}
/* Capacidades */
.ai-caps{display:flex;flex-direction:column;gap:0;min-width:0}
.ai-cap{
display:flex;gap:20px;align-items:flex-start;
padding:30px 0;
border-bottom:1px solid rgba(201,168,76,.08);
}
.ai-cap:first-child{padding-top:0}
.ai-cap:last-child{border-bottom:none;padding-bottom:0}
.ai-cap-ico{
flex-shrink:0;width:24px;height:24px;
color:var(--gold);margin-top:2px;
}
.ai-cap-ico svg{width:100%;height:100%;display:block}
.ai-cap-h{
font-size:16px;font-weight:400;color:var(--warm);
margin-bottom:9px;letter-spacing:.01em;
font-family:'DM Sans',sans-serif;
}
.ai-cap-t{font-size:14px;color:var(--grey);line-height:1.75}
/* ══════════════════════════════════════════
V6 · PRECIOS · TOGGLES Y BLOQUES
══════════════════════════════════════════ */
.p-switches{
display:flex;align-items:center;justify-content:space-between;
gap:24px;flex-wrap:wrap;margin-bottom:56px;
}
.seg{
display:inline-flex;padding:4px;gap:2px;
border:1px solid rgba(201,168,76,.16);
border-radius:999px;background:rgba(201,168,76,.03);
}
.seg-btn{
padding:11px 26px;border-radius:999px;border:none;background:none;
font-family:'DM Sans',sans-serif;font-weight:400;
font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:rgba(248,247,244,.45);cursor:none;
transition:background .38s var(--ease-out),color .38s var(--ease-out);
min-height:44px;
}
.seg-btn:hover{color:rgba(248,247,244,.78)}
.seg-btn.active{background:var(--gold);color:var(--black);font-weight:500}
.cur-seg .seg-btn{padding:9px 18px;font-size:9.5px;min-height:40px}
.p-block{display:none}
.p-block.on{display:block;animation:pfade .5s var(--ease-out)}
@keyframes pfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Grid de 4 planes */
.ai-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-items:stretch}
.plan-out{
background:rgba(201,168,76,.025);
border:1px solid rgba(201,168,76,.1);
border-radius:22px;padding:2px;cursor:none;
transition:border-color .5s var(--ease-out),transform .5s var(--spring),box-shadow .5s var(--ease-out);
display:flex;
}
.plan-out:hover{border-color:rgba(201,168,76,.24);transform:translateY(-4px);box-shadow:0 28px 56px -28px rgba(0,0,0,.65)}
.plan-out.rec{
border-color:var(--gold);
box-shadow:0 0 0 1px rgba(201,168,76,.28),0 0 44px -8px rgba(201,168,76,.28);
}
.plan-out.rec:hover{box-shadow:0 0 0 1px rgba(201,168,76,.4),0 0 56px -6px rgba(201,168,76,.36),0 28px 56px -28px rgba(0,0,0,.65)}
.plan-in{
background:var(--carbon);border-radius:20px;
padding:46px 30px 34px;
display:flex;flex-direction:column;width:100%;
position:relative;overflow:hidden;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.plan-out.rec .plan-in{background:#181818}
.plan-badge{
position:absolute;top:0;left:0;
background:var(--gold);color:var(--black);
font-size:8px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
padding:6px 13px;border-radius:0 0 10px 0;
}
.plan-name{
font-size:12px;letter-spacing:.28em;text-transform:uppercase;
color:var(--warm);margin-bottom:10px;font-weight:400;
}
.plan-out.rec .plan-name{color:var(--gold)}
.plan-line{font-size:13px;color:var(--grey);line-height:1.6;margin-bottom:26px;min-height:42px}
.plan-price{display:flex;align-items:baseline;gap:5px;margin-bottom:12px;flex-wrap:wrap;min-width:0}
.plan-amt{overflow-wrap:anywhere}
.plan-amt{
font-family:'Cormorant Garamond',serif;
font-size:clamp(30px,3.4vw,40px);font-weight:300;color:var(--warm);line-height:1;
font-variant-numeric:tabular-nums;
}
.plan-per{font-size:12px;color:rgba(248,247,244,.5)}
.plan-act{
display:inline-block;align-self:flex-start;
font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
color:rgba(201,168,76,.85);
border:1px solid rgba(201,168,76,.25);
background:rgba(201,168,76,.06);
padding:5px 10px;border-radius:5px;margin-bottom:26px;
}
.plan-div{height:1px;background:rgba(201,168,76,.12);margin-bottom:22px}
.plan-f{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:30px;flex:1}
.plan-f li{font-size:12.5px;color:rgba(248,247,244,.55);padding-left:15px;position:relative;line-height:1.6}
.plan-f li::before{content:'·';position:absolute;left:0;color:var(--gold);font-size:15px;top:-2px}
.plan-f li.inherit{color:rgba(248,247,244,.4)}
.plan-cta{
display:inline-flex;align-items:center;gap:7px;
font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold);cursor:none;margin-top:auto;
min-height:44px;align-items:center;
transition:transform .3s var(--ease-out),color .3s var(--ease-out);
}
.plan-cta:hover{transform:translateX(4px);color:var(--gold-l)}
/* ══════════════════════════════════════════
V6 · LA ESCALERA
══════════════════════════════════════════ */
.esc-wrap{background:var(--black);padding:150px 0;border-top:1px solid rgba(201,168,76,.07)}
.esc-sec{max-width:1280px;margin:0 auto;padding:0 80px}
.esc-rail{position:relative;margin-top:92px;padding:0 4px}
.esc-line{
position:absolute;top:34px;left:9%;right:9%;height:1px;
background:linear-gradient(90deg,rgba(201,168,76,.18),rgba(201,168,76,.55));
}
.esc-nodes{
position:relative;z-index:2;
display:grid;grid-template-columns:repeat(4,1fr);
}
.esc-node{display:flex;flex-direction:column;align-items:center;text-align:center}
.esc-dot{
width:68px;height:68px;border-radius:50%;
border:1px solid var(--gold);background:var(--black);
display:flex;align-items:center;justify-content:center;
font-family:'Cormorant Garamond',serif;
font-size:24px;font-weight:300;color:var(--gold);
transition:transform .5s var(--spring);
}
.esc-node:hover .esc-dot{transform:scale(1.06)}
.esc-node.fill .esc-dot{background:var(--gold);color:var(--black);border-color:var(--gold)}
.esc-name{
font-family:'Cormorant Garamond',serif;
font-size:21px;font-weight:400;color:var(--warm);
margin-top:24px;letter-spacing:.01em;
}
.esc-node.fill .esc-name{color:var(--gold)}
.esc-price{
font-size:12.5px;color:var(--grey);margin-top:8px;
font-variant-numeric:tabular-nums;
}
.esc-close{
max-width:760px;margin:86px auto 0;text-align:center;
font-size:14px;color:rgba(248,247,244,.5);line-height:1.95;
}
/* ══════════════════════════════════════════
V6 · FAQ
══════════════════════════════════════════ */
.faq-wrap{background:var(--deep);padding:150px 0;border-top:1px solid rgba(201,168,76,.07)}
.faq-sec{max-width:900px;margin:0 auto;padding:0 80px}
.faq-list{margin-top:64px;border-top:1px solid rgba(201,168,76,.1)}
.faq-item{border-bottom:1px solid rgba(201,168,76,.1)}
.faq-q{
width:100%;background:none;border:none;cursor:none;
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:28px 0;text-align:left;min-height:44px;
font-family:'Cormorant Garamond',serif;
font-size:21px;font-weight:400;color:var(--warm);
letter-spacing:.01em;line-height:1.4;
transition:color .3s var(--ease-out);
}
.faq-q:hover{color:var(--gold)}
.faq-arrow{
flex-shrink:0;width:11px;height:11px;
border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
transform:translateY(-3px) rotate(45deg);
transition:transform .42s var(--ease-out);
}
.faq-item.open .faq-arrow{transform:translateY(2px) rotate(225deg)}
.faq-a{
overflow:hidden;max-height:0;
transition:max-height .45s var(--ease-out),opacity .35s var(--ease-out);
opacity:0;
}
.faq-item.open .faq-a{max-height:320px;opacity:1}
.faq-a p{
font-size:14px;color:rgba(248,247,244,.55);
line-height:1.95;padding:0 44px 30px 0;
}
.faq-a p.pending{color:rgba(201,168,76,.5);font-style:italic}
/* ══════════════════════════════════════════
V6 · HERO EN MOVIL (imagen, no video)
══════════════════════════════════════════ */
/* ── MOBILE RESPONSIVE ───────────────────── */
.mob-bar-cta{display:none}
@media(max-width:1024px){
nav{width:calc(100% - 48px)}
.hero{height:146dvh}
.h-inner,.sec,.pricing-sec,.proc-sec,.social-sec,.ai-sec,.esc-sec,.faq-sec{padding-left:40px;padding-right:40px}
.stats{padding:0 40px}
.cta-wrap{padding:120px 40px}
.f-grid,.f-bottom{padding-left:40px;padding-right:40px}
}
@media(max-width:768px){
body::before{display:none} /* grain off: saves GPU on mobile */
nav{width:calc(100% - 32px);top:14px;padding:11px 20px}
.nav-r{display:none}
.mob-toggle{display:flex}
.mob-bar-cta{display:flex}
.hero{height:138dvh}
.h-inner{padding:0 24px 76px}
.sec,.pricing-sec,.proc-sec,.social-sec,.ai-sec,.esc-sec,.faq-sec{padding-left:24px;padding-right:24px}
.stats{padding:0 24px;grid-template-columns:1fr 1fr}
.stat{padding:28px 20px}
.steps-grid{grid-template-columns:1fr;gap:4px}
.step-outer:nth-child(2),.step-outer:nth-child(4){margin-top:0}
.prob-grid{grid-template-columns:1fr;gap:0}
.prob-col{
border-right:none;border-bottom:1px solid rgba(201,168,76,.08);
padding:36px 0 !important;
}
.prob-col:last-child{border-bottom:none}
.pricing-grid{grid-template-columns:1fr}
.p-card-in{padding:44px 32px}
.clients-grid{grid-template-columns:1fr 1fr}
.f-grid{grid-template-columns:1fr;gap:36px;padding:56px 24px 36px}
.f-bottom{padding:16px 24px;flex-direction:column;gap:8px}
.cta-wrap{padding:100px 24px}
.cta-btns{flex-direction:column;align-items:center}
.not-inc{grid-template-columns:1fr;gap:14px;padding:22px 24px}
.anchor-bar{flex-direction:column;align-items:flex-start;gap:8px}
.h-title{font-size:clamp(29px,8.2vw,58px)}
.sec-wrap{padding:100px 0}
.prob-wrap,.proc-wrap,.social-wrap,.pricing-bg,.ai-wrap,.esc-wrap,.faq-wrap{padding:100px 0}
}
@media(max-width:480px){
nav{width:calc(100% - 24px)}
.btn-p,.btn-o{font-size:9.5px;padding-top:14px;padding-bottom:14px}
.btn-p{padding-left:20px}
}
/* ══════════════════════════════════════════
V6 · RESPONSIVE (7 breakpoints verificados)
══════════════════════════════════════════ */
/* 1440px+ · el contenedor ya tiene max-width:1280px, no se estira */
/* 1024–1279px · los 4 planes pasan a 2x2 */
@media(max-width:1279px){
.ai-plans{grid-template-columns:1fr 1fr}
.plan-line{min-height:0}
}
/* ≤1023px · Velaro AI a una columna, video arriba. A 1024px vuelve a 2 columnas. */
@media(max-width:1023px){
.ai-grid{grid-template-columns:1fr;gap:56px;margin-top:56px}
.ai-video-shell{max-width:100%}
.ai-caps{max-width:640px}
.faq-sec{max-width:100%}
/* escalera vertical: linea a la izquierda, nodos apilados */
.esc-rail{margin-top:56px;padding:0}
.esc-line{
top:8px;bottom:8px;left:33px;right:auto;
width:1px;height:auto;
background:linear-gradient(180deg,rgba(201,168,76,.18),rgba(201,168,76,.55));
}
.esc-nodes{grid-template-columns:1fr;gap:32px}
.esc-node{flex-direction:row;align-items:center;text-align:left;gap:22px}
.esc-dot{width:60px;height:60px;font-size:21px;flex-shrink:0}
.esc-name{margin-top:0;font-size:20px}
.esc-price{margin-top:4px}
.esc-node-txt{display:flex;flex-direction:column}
.esc-close{margin-top:64px;text-align:left}
}
/* iPad vertical (768–1023px) · se mantiene 2x2, video a ancho completo */
@media(min-width:768px) and (max-width:1023px){
.ai-plans{grid-template-columns:1fr 1fr}
.p-switches{justify-content:flex-start}
}
/* ≤768px · movil */
@media(max-width:768px){
.h-chips{margin-top:26px;gap:8px}
.h-chip{padding:9px 14px;font-size:10px;letter-spacing:.1em}
/* Velaro AI */
.ai-grid{gap:44px;margin-top:44px}
.ai-cap{gap:16px;padding:26px 0}
.ai-cap-h{font-size:15px}
.ai-cap-t{font-size:13.5px}
.ai-play-circle{width:56px;height:56px}
/* Precios: una columna, Premium primero */
.p-switches{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:40px}
.seg{width:100%;justify-content:center}
.seg-btn{flex:1;padding:12px 14px}
.plan-out{order:2}
.plan-out.rec{order:1}
.plan-in{padding:44px 26px 30px}
.plan-line{min-height:0;margin-bottom:22px}
.plan-amt{font-size:38px}
/* Escalera (ya vertical desde 1023px): solo se ajustan tamaños */
.esc-dot{width:52px;height:52px;font-size:19px}
.esc-close{margin-top:56px;font-size:13.5px}
/* FAQ */
.faq-list{margin-top:44px}
.faq-q{font-size:18px;padding:24px 0;gap:16px}
.faq-a p{padding-right:20px;font-size:13.5px}
.faq-item.open .faq-a{max-height:460px}
}
/* <768px · una sola columna de planes, Premium primero */
@media(max-width:767px){
.ai-plans{grid-template-columns:1fr;gap:12px}
}
/* ≤480px · iPhone */
@media(max-width:480px){
.h-chip{padding:8px 13px;font-size:9.5px}
.plan-in{padding:42px 22px 26px}
.esc-dot{width:48px;height:48px;font-size:18px}
.esc-name{font-size:18px}
.faq-q{font-size:17px}
.ai-caption{font-size:11.5px}
}
/* Movimiento reducido · las secciones nuevas */
@media(prefers-reduced-motion:reduce){
.h-chips{transition:opacity .2s ease-out!important;opacity:1!important;transform:none!important;filter:none!important}
.p-block.on{animation:none}
.plan-out,.h-chip,.esc-dot,.faq-arrow,.ai-play-circle{transition:none!important}
.plan-out:hover,.h-chip:hover{transform:none!important}
.esc-node:hover .esc-dot,.ai-play:hover .ai-play-circle{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
.h-linner,.rv,.rv2,.rv3,.rv4,.tl-item,.scarcity-badge,.h-sub,.h-btns,.h-guarantee{
transition:opacity .2s ease-out!important;opacity:1!important;
transform:none!important;filter:none!important;
}
.h-linner{transform:translateY(0)!important}
.mq-track{animation:none}
.s-dot{animation:none}
/* Sin movimiento: en vez del video, su propio fotograma fijo,
y el texto visible desde el principio sin depender del scroll */
#hero-video{display:none}
.hero{height:100dvh}
.h-inner{opacity:1!important;transform:none!important;pointer-events:auto!important}
.h-scrim{opacity:1}
.h-cue{display:none}
.h-cue-line{animation:none}
.hero{background:var(--black) url(../video/velaro-logo-animado-poster.webp) center/cover no-repeat}
nav{transition:background .2s ease-out}
.btn-p,.btn-o,.step-outer,.p-card-out,.client-slot{transition:none!important}
.btn-p:hover,.btn-o:hover,.step-outer:hover,.p-card-out:hover{transform:none!important}
}
/* ══════════════════════════════════════════
V6.1 · PROBLEMA QUE SE ILUMINA AL BAJAR
══════════════════════════════════════════ */
.prob-col{
transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.prob-col .prob-n,.prob-col .prob-h,.prob-col .prob-t{
transition:color .8s var(--ease-out),opacity .8s var(--ease-out);
}
/* v10 · el estado apagado tambien debe leerse: antes 1.1:1 / 2.3:1 */
.prob-col:not(.lit) .prob-n{color:rgba(201,168,76,.62)}
.prob-col:not(.lit) .prob-h{color:rgba(248,247,244,.62)}
.prob-col:not(.lit) .prob-t{opacity:.72}
.prob-col.lit .prob-n{color:rgba(201,168,76,.62)}
.prob-col.lit .prob-h{color:var(--warm)}
.prob-col.lit .prob-t{opacity:1}
/* ══════════════════════════════════════════
V6.1 · ESCALERA CLICABLE
══════════════════════════════════════════ */
.esc-node[data-go]{cursor:none}
.esc-node[data-go] .esc-dot,
.esc-node[data-go] .esc-name{
transition:background .45s var(--ease-out),color .45s var(--ease-out),
border-color .45s var(--ease-out),transform .5s var(--spring);
}
.esc-node[data-go]:hover .esc-dot,
.esc-node[data-go]:focus-visible .esc-dot{
background:var(--gold);color:var(--black);border-color:var(--gold);
transform:scale(1.08);
box-shadow:0 0 28px -4px rgba(201,168,76,.5);
}
.esc-node[data-go]:hover .esc-name,
.esc-node[data-go]:focus-visible .esc-name{color:var(--gold)}
.esc-node[data-go]:focus-visible{outline:none}
.esc-go{
display:block;margin-top:7px;
font-size:9px;letter-spacing:.22em;text-transform:uppercase;
/* v10 · antes era transparente hasta el hover, asi que en tactil no
aparecia nunca y no tenia contraste medible */
color:rgba(201,168,76,.78);
transition:color .4s var(--ease-out);
}
.esc-node[data-go]:hover .esc-go,
.esc-node[data-go]:focus-visible .esc-go{color:rgba(201,168,76,.8)}
/* ══════════════════════════════════════════
V6.1 · BOTON FLOTANTE DE WHATSAPP
══════════════════════════════════════════ */
.wa-float{
position:fixed;right:26px;bottom:26px;z-index:400;
width:56px;height:56px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--gold);color:var(--black);
box-shadow:0 6px 28px rgba(201,168,76,.34),0 2px 10px rgba(0,0,0,.4);
cursor:none;
opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
transition:opacity .5s var(--ease-out),transform .5s var(--spring),background .3s var(--ease-out);
}
.wa-float.vis{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.wa-float:hover{background:var(--gold-l);transform:translateY(-3px) scale(1.06)}
.wa-float svg{width:28px;height:28px;display:block}
.wa-float::after{
content:'';position:absolute;inset:-4px;border-radius:50%;
border:1px solid rgba(201,168,76,.35);
animation:waPulse 2.8s ease-out infinite;
}
@keyframes waPulse{
0%{transform:scale(1);opacity:.7}
70%{transform:scale(1.35);opacity:0}
100%{opacity:0}
}
@media(max-width:768px){
/* en movil ya existe la barra pegajosa: el flotante sube para no chocar */
.wa-float{right:18px;bottom:84px;width:50px;height:50px}
.wa-float svg{width:25px;height:25px}
}
@media(prefers-reduced-motion:reduce){
.wa-float::after{animation:none}
.wa-float{transition:opacity .2s ease-out}
.wa-float:hover{transform:none}
.prob-col,.prob-col .prob-n,.prob-col .prob-h,.prob-col .prob-t{transition:none!important}
}
/* ══════════════════════════════════════════
V6.1 · VIDEO DE FONDO EN VELARO AI
══════════════════════════════════════════ */
.ai-wrap{position:relative;overflow:hidden}
#ai-bg-video,#ai-bg-img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;z-index:0;
opacity:.14;
filter:grayscale(.3) contrast(1.05);
pointer-events:none;
}
/* El mockup lleva texto en ingles: se desenfoca y se baja para que funcione
como textura y no compita con el copy en español que va encima. */
#ai-bg-img{opacity:.085;filter:grayscale(.45) blur(3px);transform:scale(1.05)}
.ai-bg-veil{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(ellipse at 30% 40%,rgba(12,12,12,.55) 0%,rgba(12,12,12,.9) 70%),
linear-gradient(to bottom,var(--deep) 0%,rgba(12,12,12,.4) 25%,rgba(12,12,12,.4) 75%,var(--deep) 100%);
}
.ai-sec{position:relative;z-index:2}
/* ══════════════════════════════════════════
V6.1 · BLOQUE WEB CON EL MISMO LENGUAJE
VISUAL QUE LAS TARJETAS DE PLAN
══════════════════════════════════════════ */
.web-cards{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-items:stretch}
.web-cards>*{min-width:0}
@media(max-width:767px){.web-cards{grid-template-columns:1fr;gap:12px}}
/* ══════════════════════════════════════════
V6.1 · BANDAS A SANGRE (ritmo Bagista)
Una idea por banda, borde a borde, sin caja
══════════════════════════════════════════ */
/* ── Panel partido 50/50 ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(201,168,76,.12)}
.split-panel{
position:relative;overflow:hidden;
min-height:620px;
display:flex;flex-direction:column;
background:var(--black);cursor:none;text-decoration:none;
}
/* Zona de imagen y zona de texto NO se solapan:
los mockups son capturas con texto propio y competian con el titular. */
.split-media{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;justify-content:center}
.split-media img{
position:absolute;display:block;max-width:none;
opacity:.9;
transition:transform 1.2s var(--ease-out);
}
.split-media.m-browser img{top:0;left:50%;width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:translateX(-50%)}
.split-panel:hover .split-media.m-browser img{transform:translateX(-50%) scale(1.035)}
.split-media.m-phone img{top:7%;left:50%;height:92%;width:auto;transform:translateX(-50%)}
.split-panel:hover .split-media.m-phone img{transform:translateX(-50%) scale(1.035)}
/* difuminado que funde la imagen con la banda de texto */
.split-veil{
position:absolute;left:0;right:0;bottom:0;height:46%;
pointer-events:none;
background:linear-gradient(to top,var(--black) 0%,rgba(8,8,8,.82) 42%,rgba(8,8,8,0) 100%);
}
.split-body{
position:relative;z-index:2;flex-shrink:0;
background:var(--black);
padding:6px 56px 54px;width:100%;
}
.split-kicker{
font-size:9px;letter-spacing:.36em;text-transform:uppercase;
color:var(--gold);margin-bottom:14px;display:block;
}
.split-title{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(30px,3.1vw,46px);color:var(--warm);
line-height:1.06;letter-spacing:-.01em;margin-bottom:14px;
}
.split-sub{font-size:13.5px;color:rgba(248,247,244,.6);line-height:1.75;max-width:330px;margin-bottom:22px}
.split-go{
display:inline-block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:var(--warm);padding-bottom:5px;
border-bottom:1px solid rgba(201,168,76,.5);
transition:color .35s var(--ease-out),border-color .35s var(--ease-out),letter-spacing .35s var(--ease-out);
}
.split-panel:hover .split-go{color:var(--gold);border-color:var(--gold);letter-spacing:.3em}
@media(max-width:900px){
.split{grid-template-columns:1fr}
.split-panel{min-height:520px}
.split-body{padding:6px 32px 44px}
.split-sub{max-width:100%}
}
/* ── Banda de imagen con texto encima (patron "Protected by Bagista") ── */
.band{position:relative;overflow:hidden;background:var(--black);min-height:600px;display:flex;align-items:center}
.band-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:60px 8% 60px 0}
.band-media img{max-height:520px;width:auto;display:block;filter:drop-shadow(0 40px 80px rgba(0,0,0,.7))}
/* Variante apaisada: el dashboard es ancho, no un telefono vertical, y el
velo se abre antes para que las cifras del panel se lean. */
.band-wide{min-height:640px}
.band-wide .band-media{padding:40px 5% 40px 0}
.band-wide .band-media img{
max-height:none;width:min(46%,560px);height:auto;
/* La foto no es negro puro: se difuminan los bordes para que no se vea
el rectangulo recortado contra el fondo de la banda. */
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%),linear-gradient(to bottom,transparent 0,#000 8%,#000 91%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 11%),linear-gradient(to bottom,transparent 0,#000 8%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;mask-composite:intersect;
}
.band-wide .band-veil{
background:linear-gradient(to right,var(--black) 0%,rgba(8,8,8,.88) 26%,rgba(8,8,8,.12) 48%,rgba(8,8,8,.3) 100%);
}
@media(max-width:900px){
.band-wide .band-media img{width:100%;max-width:640px}
.band-wide .band-veil{background:linear-gradient(to bottom,rgba(8,8,8,.25) 0%,rgba(8,8,8,.85) 78%,var(--black) 100%)}
}
.band-veil{
position:absolute;inset:0;
background:linear-gradient(to right,var(--black) 0%,rgba(8,8,8,.9) 34%,rgba(8,8,8,.35) 62%,rgba(8,8,8,.55) 100%);
}
.band-body{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 80px;width:100%}
.band-inner{max-width:35%}
.band-title{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(30px,3.6vw,52px);line-height:1.06;color:var(--warm);
letter-spacing:-.01em;margin-bottom:20px;
}
.band-title em{font-style:italic;color:var(--gold)}
.band-t{font-size:14px;color:rgba(248,247,244,.62);line-height:1.95;margin-bottom:26px}
.band-go{
display:inline-block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
color:var(--gold);padding-bottom:5px;border-bottom:1px solid rgba(201,168,76,.45);
transition:letter-spacing .35s var(--ease-out),border-color .35s var(--ease-out);
}
.band-go:hover{letter-spacing:.3em;border-color:var(--gold)}
@media(max-width:1024px){
.band{min-height:0;padding:90px 0 0;flex-direction:column}
.band-media{position:relative;inset:auto;justify-content:center;padding:0 32px}
.band-media img{max-height:380px}
.band-veil{display:none}
.band-body{padding:48px 40px 90px;order:-1}
.band-inner{max-width:520px}
}
@media(max-width:768px){
.band-body{padding:0 24px 64px}
.band-media img{max-height:320px}
}
/* ── Franja de sectores, discreta como la de prensa ── */
.strip{
border-top:1px solid rgba(201,168,76,.08);
border-bottom:1px solid rgba(201,168,76,.08);
padding:54px 0;
}
.strip-in{
max-width:1280px;margin:0 auto;padding:0 80px;
display:flex;align-items:center;justify-content:space-between;
gap:28px;flex-wrap:wrap;
}
.strip-item{
font-family:'Cormorant Garamond',serif;
font-size:19px;font-weight:300;letter-spacing:.06em;
color:rgba(248,247,244,.32);
transition:color .4s var(--ease-out);white-space:nowrap;
}
.strip-item:hover{color:var(--gold)}
@media(max-width:768px){
.strip{padding:36px 0}
.strip-in{padding:0 24px;gap:14px 22px;justify-content:flex-start}
.strip-item{font-size:15px}
}
/* ══════════════════════════════════════════
V6.1 · PAGINAS DE SERVICIO
══════════════════════════════════════════ */
.pg-hero{
position:relative;padding:190px 0 100px;
border-bottom:1px solid rgba(201,168,76,.08);
background:var(--black);overflow:hidden;
}
.pg-hero-in{max-width:1280px;margin:0 auto;padding:0 80px;position:relative;z-index:2}
.pg-back{
display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
color:rgba(248,247,244,.4);margin-bottom:38px;
transition:color .3s var(--ease-out);
}
.pg-back:hover{color:var(--gold)}
.pg-title{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(38px,6vw,84px);line-height:1.02;letter-spacing:-.02em;
color:var(--warm);margin-bottom:28px;max-width:15ch;
}
.pg-title em{font-style:italic;color:var(--gold)}
.pg-sub{font-size:16px;color:rgba(248,247,244,.6);line-height:1.9;max-width:560px;margin-bottom:40px}
.pg-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pg-sec{max-width:1280px;margin:0 auto;padding:0 80px}
.pg-wrap{padding:130px 0}
.pg-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:64px}
.pg-feat{
padding:48px 40px;
border:1px solid rgba(201,168,76,.09);border-radius:20px;
background:rgba(201,168,76,.02);
transition:border-color .5s var(--ease-out),transform .5s var(--spring);
}
.pg-feat:hover{border-color:rgba(201,168,76,.2);transform:translateY(-4px)}
.pg-feat-n{
font-family:'Cormorant Garamond',serif;font-size:34px;
color:rgba(201,168,76,.28);line-height:1;margin-bottom:22px;
}
.pg-feat h3{
font-size:16px;font-weight:400;color:var(--warm);
margin-bottom:12px;letter-spacing:.01em;font-family:'DM Sans',sans-serif;
}
.pg-feat p{font-size:13.5px;color:var(--grey);line-height:1.85}
.pg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:60px}
.pg-step-n{
font-size:9px;letter-spacing:.34em;color:var(--gold);
text-transform:uppercase;margin-bottom:18px;
padding-bottom:14px;border-bottom:1px solid rgba(201,168,76,.16);
}
.pg-step h3{
font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;
color:var(--warm);margin-bottom:11px;
}
.pg-step p{font-size:13.5px;color:var(--grey);line-height:1.85}
.pg-incl{
margin-top:80px;padding:32px 40px;
border:1px solid rgba(201,168,76,.14);border-radius:16px;
background:rgba(201,168,76,.03);
display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.pg-incl-lab{
font-size:9px;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);white-space:nowrap;
}
.pg-incl p{font-size:14px;color:rgba(248,247,244,.66);line-height:1.7;flex:1;min-width:240px}
@media(max-width:1024px){
.pg-hero-in,.pg-sec{padding-left:40px;padding-right:40px}
.pg-feats{grid-template-columns:1fr;gap:12px}
.pg-steps{grid-template-columns:1fr;gap:40px}
}
@media(max-width:768px){
.pg-hero{padding:140px 0 72px}
.pg-hero-in,.pg-sec{padding-left:24px;padding-right:24px}
.pg-wrap{padding:88px 0}
.pg-feat{padding:36px 28px}
.pg-incl{margin-top:56px;padding:26px 24px;gap:14px}
}
/* ═══ v8 · SERVICIOS INDIVIDUALES + CONTACTO POR PAIS ═══ */
.sv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;align-items:stretch}
.sv-grid>*{min-width:0}
.sv-link{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.35);padding-bottom:2px;transition:border-color .3s ease}
.sv-link:hover{border-color:var(--gold)}
.f-regions-wrap{list-style:none}
.f-regions{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.f-regions li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.f-region{color:rgba(248,247,244,.42);font-size:10px;letter-spacing:.14em;text-transform:uppercase;min-width:104px}
@media(max-width:1180px){.sv-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.sv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sv-grid{grid-template-columns:1fr;gap:12px}
.f-region{min-width:0;display:block;width:100%}}
/* ═══ v9 ═══════════════════════════════════════════════════ */
/* Logo · el viewBox anterior (-7 -2 175 158) recortaba el trazo por arriba
y su relacion no coincidia con los width/height del