/* =====================================================
   VARIABLES
===================================================== */

:root{
--bg:#050505;
--card:#0d0d0d;
--card2:#111;
--line:#242424;
--text:#f5f5f5;
--muted:#999;
--soft:#666;
--max:1180px;
--r:20px;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:Inter,Arial,sans-serif;
overflow-x:hidden;
width:100%;
max-width:100vw;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}

a{
text-decoration:none;
color:inherit;
}

.wrap{
width:min(var(--max),92%);
margin:auto;
}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#050505;
}

::-webkit-scrollbar-thumb{
background:#333;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#555;
}


/* =====================================================
   NAV
===================================================== */

nav{
position:sticky;
top:0;
z-index:100;
background:rgba(5,5,5,.86);
backdrop-filter:blur(18px);
border-bottom:1px solid var(--line);
}

.nav{
height:76px;
display:flex;
align-items:center;
justify-content:space-between;
}

/* =====================================================
   LOGO SS.ECOM
===================================================== */

.logo{
display:flex;
align-items:center;
text-decoration:none;
}

.logo img{
width:155px;
height:62px;
display:block;
object-fit:contain;
object-position:center;
border-radius:0;
background:transparent;
border:none;
transition:.35s ease;
}

/* Efecto al pasar el ratón */
.logo:hover img{
transform:scale(1.04);
filter:brightness(1.08);
box-shadow:none;
}

.menu{
display:flex;
gap:27px;
color:#bbb;
font-size:14px;
}

.menu a{
transition:.25s ease;
position:relative;
}

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:-7px;
width:0;
height:1px;
background:white;
transition:.25s ease;
}

.menu a:hover{
color:white;
}

.menu a:hover::after{
width:100%;
}

.login{
border:1px solid #383838;
border-radius:11px;
padding:10px 15px;
font-weight:700;
font-size:13px;
transition:.25s ease;
}

.login:hover{
background:white;
color:#000;
transform:translateY(-2px);
box-shadow:0 8px 30px rgba(255,255,255,.12);
}


/* =====================================================
   HERO
===================================================== */

.hero{
min-height:700px;
display:flex;
align-items:center;
text-align:center;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% 45%,rgba(255,255,255,.09),transparent 32%),
radial-gradient(circle at 15% 80%,rgba(255,255,255,.035),transparent 25%),
#050505;
}

.hero:before{
content:"";
position:absolute;
width:700px;
height:700px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:radial-gradient(
circle,
rgba(255,255,255,.11),
transparent 65%
);
pointer-events:none;
animation:heroGlow 7s ease-in-out infinite;
}

.hero:after{
content:"";
position:absolute;
width:500px;
height:500px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(255,255,255,.035);
animation:heroRing 14s linear infinite;
pointer-events:none;
}

.hero>*{
position:relative;
z-index:2;
}

@keyframes heroGlow{

0%,100%{
transform:translate(-50%,-50%) scale(1);
opacity:.7;
}

50%{
transform:translate(-50%,-50%) scale(1.2);
opacity:1;
}

}

@keyframes heroRing{

from{
transform:translate(-50%,-50%) rotate(0deg) scale(1);
}

to{
transform:translate(-50%,-50%) rotate(360deg) scale(1.15);
}

}


/* =====================================================
   HERO ENTRANCE
===================================================== */

.hero .pill{
animation:fadeUp .8s ease both;
}

.hero h1{
animation:fadeUp 1s .12s ease both;
}

.hero p{
animation:fadeUp 1s .25s ease both;
}

.hero .buttons{
animation:fadeUp 1s .38s ease both;
}

.hero .metrics{
animation:fadeUp 1s .52s ease both;
}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(25px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* =====================================================
   PILL
===================================================== */

.pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 13px;
border:1px solid #333;
border-radius:999px;
background:#0e0e0e;
color:#bbb;
font-size:11px;
letter-spacing:1px;
text-transform:uppercase;
box-shadow:0 0 0 rgba(255,255,255,0);
transition:.3s ease;
}

.pill:hover{
border-color:#555;
box-shadow:0 0 30px rgba(255,255,255,.06);
transform:translateY(-2px);
}

.pill svg{
width:13px;
height:13px;
}


/* =====================================================
   HERO TITLE
===================================================== */

.hero h1{
font-size:clamp(46px,7vw,84px);
line-height:.94;
letter-spacing:-5px;
max-width:950px;
margin:22px auto 0;
}

.shine{
background:
linear-gradient(
110deg,
#fff 0%,
#777 45%,
#fff 55%,
#777 100%
);
background-size:250% auto;
color:transparent;
background-clip:text;
-webkit-background-clip:text;
animation:textShine 5s linear infinite;
}

@keyframes textShine{

0%{
background-position:200% center;
}

100%{
background-position:-50% center;
}

}

.hero p{
max-width:720px;
color:var(--muted);
font-size:18px;
line-height:1.65;
margin:26px auto;
}


/* =====================================================
   BUTTONS
===================================================== */

.buttons{
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
}

.btn{
padding:14px 20px;
border-radius:13px;
border:1px solid #333;
font-weight:800;
transition:.25s ease;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
position:relative;
overflow:hidden;
}

.btn::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:70%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent
);
transform:skewX(-20deg);
transition:.6s ease;
}

.btn:hover::before{
left:140%;
}

.btn:hover{
transform:translateY(-3px);
}

.primary{
background:#fff;
color:#000;
border-color:#fff;
box-shadow:0 8px 30px rgba(255,255,255,.05);
}

.primary:hover{
box-shadow:0 12px 45px rgba(255,255,255,.14);
}

.secondary{
background:#111;
}


/* =====================================================
   METRICS
===================================================== */

.metrics{
display:grid;
grid-template-columns:repeat(3,1fr);
margin-top:55px;
border:1px solid var(--line);
border-radius:18px;
overflow:hidden;
background:#0b0b0b;
}

.metric{
padding:22px;
border-right:1px solid var(--line);
transition:.3s ease;
}

.metric:last-child{
border:0;
}

.metric:hover{
background:#111;
}

.metric b{
display:block;
font-size:23px;
}

.metric span{
font-size:12px;
color:#777;
}


/* =====================================================
   SECTIONS
===================================================== */

section{
padding:90px 0;
position:relative;
overflow:hidden;
}

.head{
display:flex;
justify-content:space-between;
align-items:end;
gap:30px;
margin-bottom:35px;
position:relative;
z-index:3;
}

.eyebrow{
font-size:11px;
letter-spacing:2px;
color:#777;
text-transform:uppercase;
font-weight:800;
}

h2{
font-size:clamp(31px,4vw,48px);
letter-spacing:-2.5px;
margin:5px 0;
}

.desc{
max-width:570px;
color:var(--muted);
line-height:1.6;
}


/* =====================================================
   SCROLL PROGRESS BAR
===================================================== */
#scrollProgress{
position:fixed;
top:0;
left:0;
height:2.5px;
width:0%;
background:linear-gradient(90deg,#555 0%,#ffffff 50%,#888 100%);
box-shadow:0 0 10px rgba(255,255,255,0.7),0 0 20px rgba(255,255,255,0.3);
z-index:1000;
pointer-events:none;
transition:width .1s linear;
}

/* =====================================================
   STICKY NAV ENHANCED ON SCROLL
===================================================== */
nav{
transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}

nav.nav-scrolled{
background:rgba(4,4,4,.94);
border-bottom:1px solid rgba(255,255,255,.12);
box-shadow:0 10px 30px rgba(0,0,0,.7);
}

/* =====================================================
   SMOOTH SPRING SCROLL REVEAL ANIMATIONS (PREMIUM BLUR-IN)
===================================================== */
.reveal{
opacity:0;
transform:translateY(60px) scale(.95);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .85s cubic-bezier(0.16,1,0.3,1),
box-shadow .85s ease;
will-change:opacity,transform,filter;
}

.reveal.visible{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}

.reveal-left{
opacity:0;
transform:translateX(-65px) scale(.95);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .85s cubic-bezier(0.16,1,0.3,1);
will-change:opacity,transform,filter;
}

.reveal-left.visible{
opacity:1;
transform:translateX(0) scale(1);
filter:blur(0);
}

.reveal-right{
opacity:0;
transform:translateX(65px) scale(.95);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .85s cubic-bezier(0.16,1,0.3,1);
will-change:opacity,transform,filter;
}

.reveal-right.visible{
opacity:1;
transform:translateX(0) scale(1);
filter:blur(0);
}

.reveal-scale{
opacity:0;
transform:scale(.88) translateY(45px);
filter:blur(8px);
transition:
opacity .85s cubic-bezier(0.16,1,0.3,1),
transform .85s cubic-bezier(0.16,1,0.3,1),
filter .85s cubic-bezier(0.16,1,0.3,1);
will-change:opacity,transform,filter;
}

.reveal-scale.visible{
opacity:1;
transform:scale(1) translateY(0);
filter:blur(0);
}

/* Stagger / Cascada automatica */
.grid .card:nth-child(1), .steps .step:nth-child(1), .trust-points .trust-point:nth-child(1), .metrics .metric:nth-child(1){
transition-delay:.06s;
}
.grid .card:nth-child(2), .steps .step:nth-child(2), .trust-points .trust-point:nth-child(2), .metrics .metric:nth-child(2){
transition-delay:.14s;
}
.grid .card:nth-child(3), .steps .step:nth-child(3), .trust-points .trust-point:nth-child(3), .metrics .metric:nth-child(3){
transition-delay:.22s;
}
.grid .card:nth-child(4), .steps .step:nth-child(4), .trust-points .trust-point:nth-child(4){
transition-delay:.30s;
}
.grid .card:nth-child(5), .steps .step:nth-child(5){
transition-delay:.38s;
}
.grid .card:nth-child(6), .steps .step:nth-child(6){
transition-delay:.46s;
}
.faq details:nth-child(1){ transition-delay:.05s; }
.faq details:nth-child(2){ transition-delay:.12s; }
.faq details:nth-child(3){ transition-delay:.19s; }
.faq details:nth-child(4){ transition-delay:.26s; }
.faq details:nth-child(5){ transition-delay:.33s; }
.faq details:nth-child(6){ transition-delay:.40s; }
.faq details:nth-child(7){ transition-delay:.47s; }

/* Back to Top Floating Button */
.back-to-top{
position:fixed;
bottom:25px;
right:25px;
width:42px;
height:42px;
border-radius:12px;
background:rgba(18,18,18,.85);
backdrop-filter:blur(12px);
border:1px solid #333;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:99;
opacity:0;
visibility:hidden;
transform:translateY(15px);
transition:all .3s cubic-bezier(0.16,1,0.3,1);
box-shadow:0 8px 25px rgba(0,0,0,.5);
}

.back-to-top.show{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.back-to-top:hover{
background:#ffffff;
color:#000000;
border-color:#ffffff;
transform:translateY(-4px) scale(1.05);
box-shadow:0 10px 30px rgba(255,255,255,.25);
}

@media(prefers-reduced-motion:reduce){
.reveal,.reveal-left,.reveal-right,.reveal-scale{
transition:none !important;
opacity:1 !important;
transform:none !important;
}
}


/* =====================================================
   CONFIANZA — FONDO TECNOLÓGICO
===================================================== */

.trust{
background:
radial-gradient(circle at 15% 20%,rgba(255,255,255,.06),transparent 25%),
radial-gradient(circle at 90% 80%,rgba(255,255,255,.035),transparent 28%),
#080808;
}

.trust::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:50px 50px;
mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
-webkit-mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
pointer-events:none;
}

.trust-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:20px;
position:relative;
z-index:2;
}

.trust-main{
border:1px solid #333;
border-radius:24px;
padding:35px;
background:
radial-gradient(circle at 90% 0,#252525,transparent 38%),
rgba(13,13,13,.92);
transition:.35s ease;
}

.trust-main:hover{
border-color:#4a4a4a;
transform:translateY(-3px);
}

.trust-main p{
color:var(--muted);
max-width:680px;
line-height:1.7;
}

.trust-main strong{
color:white;
}

.trust-points{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-top:30px;
}

.trust-point{
border:1px solid var(--line);
background:#101010;
border-radius:15px;
padding:18px;
transition:.3s ease;
}

.trust-point:hover{
transform:translateY(-4px);
background:#151515;
border-color:#444;
}

.trust-point strong{
display:block;
font-size:20px;
margin-bottom:5px;
}

.trust-point span{
color:#777;
font-size:12px;
}

.trust-side{
border:1px solid var(--line);
border-radius:24px;
padding:30px;
background:#0d0d0d;
display:flex;
flex-direction:column;
justify-content:center;
transition:.35s ease;
}

.trust-side:hover{
border-color:#555;
transform:translateY(-3px);
}

.big-check{
width:54px;
height:54px;
display:grid;
place-items:center;
border-radius:16px;
background:#fff;
color:#000;
margin-bottom:22px;
}

.big-check svg{
width:25px;
}

.trust-side h3{
font-size:25px;
margin:0 0 10px;
}

.trust-side p{
color:var(--muted);
line-height:1.6;
}

.trust-side strong{
color:white;
}


/* =====================================================
   PROVEEDORES — FONDO PRODUCTOS / ECOMMERCE
===================================================== */

#proveedores{
background:
radial-gradient(circle at 10% 15%,rgba(255,255,255,.055),transparent 25%),
radial-gradient(circle at 90% 75%,rgba(255,255,255,.045),transparent 25%),
#060606;
}

#proveedores::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg,transparent 49.7%,rgba(255,255,255,.025) 50%,transparent 50.3%);
background-size:100px 100px;
opacity:.4;
pointer-events:none;
}


.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
position:relative;
z-index:2;
}

.card{
background:
linear-gradient(145deg,#111,#0a0a0a);
border:1px solid var(--line);
border-radius:var(--r);
padding:24px;
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
position:relative;
overflow:hidden;
}

.card::before{
content:"";
position:absolute;
width:180px;
height:180px;
right:-100px;
top:-100px;
border-radius:50%;
background:rgba(255,255,255,.04);
transition:.5s ease;
}

.card:hover::before{
width:300px;
height:300px;
}

.card:hover{
transform:translateY(-7px);
border-color:#4a4a4a;
box-shadow:0 18px 50px rgba(0,0,0,.35);
}

.icon{
height:48px;
width:48px;
display:grid;
place-items:center;
border-radius:14px;
background:#1a1a1a;
margin-bottom:27px;
transition:.35s ease;
}

.card:hover .icon{
transform:translateY(-3px) scale(1.06);
background:#202020;
}

.icon svg{
width:23px;
height:23px;
stroke:white;
}

.verified{
display:inline-flex;
align-items:center;
gap:6px;
border:1px solid #303030;
background:#151515;
color:#aaa;
border-radius:999px;
padding:5px 8px;
font-size:9px;
font-weight:800;
text-transform:uppercase;
}

.verified svg{
width:11px;
height:11px;
}

.card h3{
font-size:20px;
margin:14px 0 8px;
}

.card p{
color:var(--muted);
font-size:14px;
line-height:1.6;
min-height:90px;
}

.card p strong{
color:#fff;
}

.tags{
display:flex;
gap:6px;
flex-wrap:wrap;
margin:17px 0;
}

.tag{
border:1px solid #303030;
color:#aaa;
border-radius:999px;
padding:5px 8px;
font-size:10px;
transition:.25s ease;
}

.card:hover .tag{
border-color:#3d3d3d;
}

.foot{
border-top:1px solid #222;
padding-top:17px;
margin-top:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

.card-price-group{
display:flex;
flex-direction:column;
gap:3px;
}

.price-strikethrough{
font-size:13px;
font-weight:700;
color:#c8c8c8;
text-decoration:line-through;
text-decoration-color:#f43f5e;
text-decoration-thickness:2px;
letter-spacing:0.1px;
white-space:nowrap;
opacity:.9;
}

.price{
font-weight:900;
font-size:17px;
color:#ffffff;
letter-spacing:-0.3px;
}

.mini{
padding:9px 12px;
border-radius:10px;
background:#fff;
color:#000;
font-weight:800;
font-size:11px;
transition:.25s ease;
}

.mini:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(255,255,255,.1);
}

.tech-number{
position:absolute;
top:18px;
right:18px;
font-size:12px;
font-weight:900;
color:#fff;
border:1px solid #333;
background:#151515;
padding:7px 9px;
border-radius:999px;
}

.authority{
text-align:center;
padding:35px 0 0;
position:relative;
z-index:2;
}

.authority p{
color:#777;
font-size:13px;
line-height:1.6;
}

.authority strong{
color:white;
}


/* =====================================================
   PACKS — FONDO PREMIUM
===================================================== */

#packs{
background:
radial-gradient(circle at 50% 0,rgba(255,255,255,.07),transparent 35%),
radial-gradient(circle at 0 100%,rgba(255,255,255,.025),transparent 30%),
#070707;
}

#packs::before{
content:"";
position:absolute;
width:700px;
height:700px;
border:1px solid rgba(255,255,255,.025);
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%);
box-shadow:
0 0 0 80px rgba(255,255,255,.008),
0 0 0 160px rgba(255,255,255,.006);
pointer-events:none;
}

.access-choice{
width:min(760px,100%);
margin:0 auto;
position:relative;
z-index:2;
}

.box{
background:#0d0d0d;
border:1px solid var(--line);
border-radius:22px;
padding:32px;
transition:.35s ease;
}

.box:hover{
border-color:#444;
}

.big{
min-height:520px;
background:
radial-gradient(circle at 80% 0,#292929,transparent 38%),
#0d0d0d;
position:relative;
overflow:hidden;
border-color:#393939;
}

.big::before{
content:"";
position:absolute;
inset:-2px;
border-radius:24px;
padding:1px;
background:
linear-gradient(
120deg,
transparent 15%,
rgba(255,255,255,.35),
transparent 35%,
transparent 65%,
rgba(255,255,255,.18),
transparent 85%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
background-size:250% 250%;
animation:borderFlow 6s linear infinite;
pointer-events:none;
}

@keyframes borderFlow{

0%{
background-position:200% 50%;
}

100%{
background-position:-50% 50%;
}

}

.big::after{
content:"";
position:absolute;
width:250px;
height:250px;
right:-130px;
bottom:-130px;
border-radius:50%;
background:rgba(255,255,255,.045);
animation:accessGlow 5s ease-in-out infinite;
pointer-events:none;
}

@keyframes accessGlow{

0%,100%{
transform:scale(1);
opacity:.5;
}

50%{
transform:scale(1.3);
opacity:1;
}

}

.big>*{
position:relative;
z-index:2;
}

.big:hover{
transform:translateY(-5px);
box-shadow:
0 25px 80px rgba(0,0,0,.5),
0 0 50px rgba(255,255,255,.025);
}

.popular{
display:inline-flex;
padding:7px 10px;
border:1px solid #555;
border-radius:999px;
color:#ddd;
font-size:9px;
font-weight:900;
letter-spacing:1.2px;
}

.box h3{
font-size:32px;
margin:15px 0 10px;
}

.box p{
color:var(--muted);
line-height:1.6;
}

.box p strong{
color:white;
}

.access-includes{
margin-top:24px;
}

.include-title{
font-size:11px;
font-weight:900;
letter-spacing:1.5px;
text-transform:uppercase;
color:#777;
margin-bottom:12px;
}

.big .check{
display:grid;
gap:7px;
margin:0;
color:#ddd;
font-size:13px;
}

.big .check div{
display:flex;
align-items:center;
gap:9px;
padding:6px 0;
transition:.25s ease;
}

.big .check div:hover{
transform:translateX(5px);
color:white;
}

.big .check svg{
width:15px;
height:15px;
flex-shrink:0;
}

.all-access-value{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:25px;
padding:17px;
border:1px solid #333;
border-radius:15px;
background:#111;
transition:.3s ease;
}

.all-access-value:hover{
border-color:#555;
transform:translateX(3px);
}

.all-access-value span{
display:block;
font-size:9px;
letter-spacing:1.5px;
color:#777;
font-weight:900;
margin-bottom:4px;
}

.all-access-value strong{
font-size:13px;
}

.value-arrow{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:10px;
background:#fff;
color:#000;
flex-shrink:0;
}

.value-arrow svg{
width:17px;
height:17px;
}

.big>.primary{
animation:purchasePulse 3s ease-in-out infinite;
}

@keyframes purchasePulse{

0%,100%{
box-shadow:0 8px 30px rgba(255,255,255,.04);
}

50%{
box-shadow:0 8px 45px rgba(255,255,255,.13);
}

}

.purchase-note{
text-align:center;
margin-top:12px;
font-size:10px;
color:#666;
}


/* =====================================================
   PACK PERSONALIZADO
===================================================== */

.custom-pack{
background:linear-gradient(155deg,#181818 0%,#0d0d0d 60%,#070707 100%);
border:1px solid #3d3d3d;
box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 35px rgba(255,255,255,.03);
position:relative;
overflow:hidden;
}

.custom-pack::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,transparent,#ffffff,transparent);
pointer-events:none;
}

.discount-floating-badge{
display:inline-flex;
align-items:center;
gap:6px;
background:linear-gradient(135deg,#fff 0%,#e0e0e0 100%);
color:#000;
padding:6px 14px;
border-radius:999px;
font-size:11px;
font-weight:900;
letter-spacing:0.8px;
text-transform:uppercase;
box-shadow:0 4px 18px rgba(255,255,255,.25);
margin-bottom:12px;
animation:pulseGlow 2.5s infinite;
}

@keyframes pulseGlow{
0%,100%{
transform:scale(1);
box-shadow:0 4px 18px rgba(255,255,255,.25);
}
50%{
transform:scale(1.03);
box-shadow:0 6px 25px rgba(255,255,255,.45);
}
}

.discount-offer-banner{
background:rgba(255,255,255,.05);
border:1px dashed rgba(255,255,255,.28);
border-radius:13px;
padding:13px 16px;
margin:16px 0 20px;
display:flex;
align-items:center;
gap:12px;
}

.discount-offer-banner .offer-icon{
font-size:24px;
line-height:1;
}

.discount-offer-banner .offer-title{
color:#fff;
font-weight:800;
font-size:13px;
display:block;
}

.discount-offer-banner .offer-sub{
color:#aaa;
font-size:11px;
display:block;
margin-top:2px;
}

.custom-pack h3{
font-size:26px;
}

.custom-pack-description{
font-size:13px;
margin-bottom:16px;
color:#bbb;
}

.provider-selector{
display:grid;
gap:8px;
margin-top:16px;
}

.provider-option{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 14px;
border:1px solid #292929;
border-radius:12px;
background:#101010;
cursor:pointer;
transition:.25s ease;
}

.provider-option:hover{
border-color:#555;
transform:translateX(3px);
}

.provider-option.selected{
border-color:#fff;
background:#181818;
box-shadow:0 0 20px rgba(255,255,255,.05);
}

.provider-option.disabled{
opacity:.45;
cursor:not-allowed;
}

.provider-left{
display:flex;
align-items:center;
gap:10px;
}

.provider-left input{
width:16px;
height:16px;
accent-color:white;
cursor:pointer;
}

.provider-name{
font-size:13px;
font-weight:700;
}

.provider-price{
font-size:12px;
color:#888;
white-space:nowrap;
}

.discount-progress-container{
margin-top:18px;
background:#111;
border:1px solid #282828;
border-radius:12px;
padding:12px 14px;
}

.discount-progress-header{
display:flex;
justify-content:space-between;
align-items:center;
font-size:12px;
margin-bottom:8px;
}

.discount-progress-header span{
color:#bbb;
}

.discount-progress-header strong{
color:#fff;
font-weight:800;
}

.discount-progress-bar{
width:100%;
height:7px;
background:#222;
border-radius:999px;
overflow:hidden;
position:relative;
}

.discount-progress-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,#888,#fff);
border-radius:999px;
transition:width 0.35s ease, background 0.35s ease;
}

.discount-progress-fill.complete{
background:linear-gradient(90deg,#4ade80,#22c55e);
box-shadow:0 0 12px rgba(34,197,94,0.6);
}

.discount-status-msg{
font-size:11px;
color:#888;
margin-top:6px;
text-align:center;
transition:color 0.25s ease;
}

.discount-status-msg.unlocked{
color:#4ade80;
font-weight:700;
}

.pack-price{
margin-top:18px;
padding:18px 20px;
border-radius:14px;
background:linear-gradient(180deg,#161616 0%,#101010 100%);
border:1px solid #383838;
box-shadow:0 8px 24px rgba(0,0,0,.4);
transition:border-color .3s ease, box-shadow .3s ease;
}

.pack-price.active-discount{
border-color:rgba(255,255,255,.45);
box-shadow:0 8px 30px rgba(255,255,255,.08);
}

.price-row{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
font-size:13px;
}

.original-price{
color:#888;
font-size:14px;
text-decoration:line-through;
}

.discount-price-container{
display:flex;
align-items:center;
gap:10px;
}

.discount-tag-pill{
background:#22c55e;
color:#000;
font-size:11px;
font-weight:900;
padding:3px 8px;
border-radius:6px;
letter-spacing:0.5px;
display:none;
}

.discount-price{
font-size:28px;
font-weight:900;
color:#fff;
letter-spacing:-0.5px;
}

.saving{
display:none;
align-items:center;
justify-content:center;
gap:6px;
margin-top:12px;
padding:10px 14px;
border-radius:10px;
background:linear-gradient(135deg,#ffffff 0%,#f0f0f0 100%);
color:#000;
font-size:12px;
font-weight:900;
letter-spacing:0.5px;
text-align:center;
box-shadow:0 4px 20px rgba(255,255,255,.2);
animation:bounceIn .4s cubic-bezier(0.175,0.885,0.32,1.275);
}

@keyframes bounceIn{
from{
opacity:0;
transform:scale(0.92);
}
to{
opacity:1;
transform:scale(1);
}
}

.pack-button{
width:100%;
margin-top:14px;
opacity:.45;
pointer-events:none;
font-weight:800;
font-size:14px;
padding:15px;
text-align:center;
transition:all .3s ease;
}

.pack-button.active{
opacity:1;
pointer-events:auto;
background:#ffffff;
color:#000;
box-shadow:0 8px 25px rgba(255,255,255,.25);
}

.pack-button.active:hover{
transform:translateY(-2px) scale(1.01);
box-shadow:0 12px 35px rgba(255,255,255,.35);
}

.pack-warning{
text-align:center;
font-size:11px;
color:#888;
margin-top:9px;
}


/* =====================================================
   COMO FUNCIONA — GRÁFICA ECOMMERCE
===================================================== */

.steps-section{
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),transparent 45%),
#060606;
}

.steps-section::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:55px 55px;
mask-image:linear-gradient(
to bottom,
transparent,
black 18%,
black 82%,
transparent
);
-webkit-mask-image:linear-gradient(
to bottom,
transparent,
black 18%,
black 82%,
transparent
);
pointer-events:none;
}

.steps-section::after{
content:"";
position:absolute;
left:3%;
right:3%;
top:50%;
height:280px;
transform:translateY(-50%);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='lineGrad' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.15' stop-color='white' stop-opacity='0.15'/%3E%3Cstop offset='0.55' stop-color='white' stop-opacity='0.3'/%3E%3Cstop offset='0.68' stop-color='white' stop-opacity='0.45'/%3E%3Cstop offset='0.74' stop-color='%23fbbf24' stop-opacity='0.9'/%3E%3Cstop offset='0.88' stop-color='%23ffd700' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23ffb800' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='areaGrad' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='0.65' stop-color='white' stop-opacity='0.02'/%3E%3Cstop offset='0.74' stop-color='%23fbbf24' stop-opacity='0.09'/%3E%3Cstop offset='0.9' stop-color='%23ffd700' stop-opacity='0.18'/%3E%3Cstop offset='1' stop-color='%23ffb800' stop-opacity='0.28'/%3E%3C/linearGradient%3E%3ClinearGradient id='goldGlowLine' x1='0.68' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffd700' stop-opacity='0'/%3E%3Cstop offset='0.4' stop-color='%23ffd700' stop-opacity='0.65'/%3E%3Cstop offset='1' stop-color='%23ffb800' stop-opacity='0.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 245 C100 238 130 220 205 225 C290 232 320 190 390 198 C465 206 490 178 560 184 C635 190 675 130 735 145 C805 162 820 110 875 120 C935 132 955 75 1010 88 C1070 103 1110 52 1200 30 L1200 300 L0 300 Z' fill='url(%23areaGrad)'/%3E%3Cpath d='M0 245 C100 238 130 220 205 225 C290 232 320 190 390 198 C465 206 490 178 560 184 C635 190 675 130 735 145 C805 162 820 110 875 120 C935 132 955 75 1010 88 C1070 103 1110 52 1200 30' fill='none' stroke='url(%23lineGrad)' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M805 162 C820 110 875 120 935 132 C955 75 1010 88 C1070 103 1110 52 1200 30' fill='none' stroke='url(%23goldGlowLine)' stroke-width='9' opacity='0.55' stroke-linecap='round'/%3E%3Ccircle cx='1200' cy='30' r='6' fill='%23ffd700'/%3E%3Ccircle cx='1200' cy='30' r='14' fill='%23ffd700' opacity='0.35'/%3E%3C/svg%3E")
center/100% 100% no-repeat;
opacity:.95;
pointer-events:none;
animation:chartFloat 7s ease-in-out infinite;
}

.steps-section>*{
position:relative;
z-index:2;
}

@keyframes chartFloat{

0%,100%{
transform:translateY(-50%) translateX(0);
opacity:.65;
}

50%{
transform:translateY(-52%) translateX(8px);
opacity:.9;
}

}

.steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.step{
padding:23px;
border:1px solid var(--line);
border-radius:17px;
background:rgba(13,13,13,.9);
backdrop-filter:blur(8px);
transition:.3s ease;
}

.step:hover{
transform:translateY(-5px);
border-color:#444;
background:rgba(17,17,17,.95);
box-shadow:0 18px 45px rgba(0,0,0,.3);
}

.n{
font-size:11px;
color:#666;
}

.step h3{
margin:30px 0 5px;
}

.step p{
color:var(--muted);
font-size:13px;
line-height:1.5;
}


/* =====================================================
   FAQ
===================================================== */

#faq{
background:
radial-gradient(circle at 50% 0,rgba(255,255,255,.045),transparent 35%),
#070707;
}

.faq{
max-width:850px;
margin:auto;
}

.faq details{
border-top:1px solid var(--line);
padding:20px 18px;
border-radius:14px;
margin-bottom:10px;
background:rgba(255, 255, 255, 0.015);
border:1px solid rgba(255, 255, 255, 0.07);
transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
overflow:hidden;
}

.faq details:last-child{
margin-bottom:0;
}

.faq details:hover{
background:rgba(255, 255, 255, 0.035);
border-color:rgba(255, 255, 255, 0.14);
}

.faq details[open]{
background:rgba(255, 255, 255, 0.04);
border-color:rgba(255, 255, 255, 0.16);
box-shadow:0 12px 32px -8px rgba(0,0,0,0.5);
}

.faq summary{
cursor:pointer;
font-weight:700;
font-size:16px;
display:flex;
justify-content:space-between;
align-items:center;
list-style:none;
user-select:none;
gap:16px;
transition:color .2s ease;
}

.faq summary::-webkit-details-marker,
.faq summary::marker{
display:none;
}

.faq summary:focus-visible{
outline:none;
color:#fff;
}

.faq-toggle-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border-radius:50%;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
color:var(--muted);
transition:transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), background .25s ease, border-color .25s ease, color .25s ease;
flex-shrink:0;
}

.faq details:hover .faq-toggle-icon{
background:rgba(255,255,255,.1);
border-color:rgba(255,255,255,.25);
color:#fff;
}

.faq details[open] .faq-toggle-icon{
transform:rotate(180deg);
background:rgba(255,255,255,.15);
border-color:rgba(255,255,255,.3);
color:#fff;
}

.faq p{
color:var(--muted);
font-size:14.5px;
line-height:1.65;
margin-top:14px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.05);
}


/* =====================================================
   CTA
===================================================== */

.cta-section{
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.045),transparent 45%),
#050505;
}

.cta{
padding:65px 25px;
text-align:center;
border:1px solid #333;
border-radius:24px;
background:
radial-gradient(circle at 50% 0,#292929,transparent 55%),
#101010;
position:relative;
overflow:hidden;
transition:.35s ease;
}

.cta::before{
content:"";
position:absolute;
width:400px;
height:400px;
left:50%;
top:-300px;
transform:translateX(-50%);
border-radius:50%;
background:rgba(255,255,255,.06);
filter:blur(30px);
animation:ctaGlow 5s ease-in-out infinite;
}

@keyframes ctaGlow{

0%,100%{
transform:translateX(-50%) scale(1);
}

50%{
transform:translateX(-50%) scale(1.3);
}

}

.cta>*{
position:relative;
z-index:2;
}

.cta:hover{
border-color:#555;
}

.cta h2{
max-width:750px;
margin:8px auto;
}

.cta p{
color:var(--muted);
max-width:600px;
margin:15px auto 28px;
line-height:1.6;
}

/* =====================================================
   NEWSLETTER SUBSCRIPTION FORM
===================================================== */
.newsletter-form{
  max-width:540px;
  margin:0 auto 16px;
  display:flex;
  gap:10px;
  position:relative;
  z-index:3;
}

.newsletter-input-group{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
}

.newsletter-icon{
  position:absolute;
  left:16px;
  color:#777;
  pointer-events:none;
}

.newsletter-input{
  width:100%;
  padding:14px 16px 14px 44px;
  background:#141414;
  border:1px solid #333;
  border-radius:12px;
  color:#fff;
  font-size:14px;
  outline:none;
  transition:all .25s ease;
}

.newsletter-input:focus{
  border-color:#fbbf24;
  background:#181818;
  box-shadow:0 0 0 3px rgba(251,191,36,.15);
}

.newsletter-input::placeholder{
  color:#666;
}

.newsletter-btn{
  padding:14px 22px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  border:none;
  background:#fff;
  color:#000;
  transition:all .25s ease;
}

.newsletter-btn:hover{
  background:#e5e5e5;
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(255,255,255,.15);
}

.newsletter-status{
  font-size:13px;
  margin-bottom:16px;
  min-height:20px;
  display:none;
  text-align:center;
}

.newsletter-status.success{
  display:block;
  color:#22c55e;
  font-weight:700;
}

.newsletter-status.error{
  display:block;
  color:#ef4444;
  font-weight:600;
}

.newsletter-features{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-top:14px;
}

.newsletter-feature{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#999;
}

.newsletter-feature span{
  color:#bbb;
}

@media(max-width:640px){
  .newsletter-form{
    flex-direction:column;
  }
  .newsletter-btn{
    width:100%;
    justify-content:center;
  }
  .newsletter-features{
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
    padding-left:15px;
  }
}


/* =====================================================
   FOOTER (PRODUCTION READY & PROFESSIONAL)
===================================================== */

footer.site-footer, footer{
  border-top:1px solid rgba(255, 255, 255, 0.08);
  padding:70px 0 35px;
  color:var(--muted, #a1a1aa);
  font-size:13px;
  background:radial-gradient(circle at 50% 0, rgba(255,255,255,.025), transparent 40%), #050505;
  position:relative;
  z-index:10;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:45px;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.footer-brand{
  display:inline-block;
}

.footer-logo{
  height:44px;
  width:auto;
  display:block;
  object-fit:contain;
  background:transparent;
  transition:transform .25s ease, opacity .25s ease;
}

.footer-logo:hover{
  transform:scale(1.03);
  opacity:.9;
}

.footer-desc{
  color:#8e8e93;
  font-size:13.5px;
  line-height:1.6;
  max-width:340px;
  margin:0;
}

.footer-badges{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}

.footer-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#d4d4d8;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  padding:6px 12px;
  border-radius:20px;
  width:fit-content;
}

.footer-title{
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.8px;
  margin:0 0 6px 0;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer-links a{
  color:#9ca3af;
  text-decoration:none;
  font-size:13.5px;
  transition:color .2s ease, transform .2s ease;
  display:inline-block;
  cursor:pointer;
}

.footer-links a:hover{
  color:#fff;
  transform:translateX(3px);
}

.btn-cookie-settings{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:#9ca3af !important;
  cursor:pointer;
  text-align:left;
  transition:color .2s ease, transform .2s ease;
}

.btn-cookie-settings:hover{
  color:#fff !important;
  transform:translateX(3px);
}

.footer-divider{
  height:1px;
  background:rgba(255,255,255,.07);
  width:100%;
  margin-bottom:30px;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  flex-wrap:wrap;
}

.footer-bottom-left{
  flex:1;
  min-width:280px;
}

.footer-bottom-left p{
  margin:0 0 6px 0;
  color:#71717a;
  font-size:12.5px;
}

.footer-disclaimer{
  font-size:11.5px !important;
  line-height:1.5 !important;
  color:#52525b !important;
  max-width:650px;
}

.footer-payment-methods{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.payment-card-logo{
  height:28px;
  width:auto;
  border-radius:5px;
  object-fit:contain;
  background:#fff;
  padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  display:block;
}

.payment-card-logo:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.6);
  opacity:0.95;
}



/* =====================================================
   LEGAL PAGES STYLES
===================================================== */
.legal-container{
  max-width:850px;
  margin:0 auto;
  padding:40px 20px 80px;
}

.legal-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:20px;
  padding:40px;
  color:#d4d4d8;
  font-size:15px;
  line-height:1.75;
}

.legal-card h2{
  color:#fff;
  font-size:20px;
  font-weight:700;
  margin:32px 0 12px 0;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.legal-card h2:first-child{
  margin-top:0;
}

.legal-card p{
  margin:0 0 16px 0;
  color:#a1a1aa;
}

.legal-card ul, .legal-card ol{
  margin:0 0 20px 24px;
  color:#a1a1aa;
}

.legal-card li{
  margin-bottom:8px;
}

.legal-card strong{
  color:#fff;
}

.legal-card a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-meta{
  display:inline-block;
  font-size:12.5px;
  color:#71717a;
  margin-bottom:24px;
  padding:4px 10px;
  background:rgba(255,255,255,0.03);
  border-radius:6px;
}

/* =====================================================
   COOKIE BANNER & MODAL (RGPD / GDPR)
===================================================== */
.cookie-banner{
  position:fixed;
  bottom:24px;
  left:24px;
  right:24px;
  max-width:540px;
  margin:0 auto;
  background:rgba(18, 18, 20, 0.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255, 255, 255, 0.14);
  border-radius:18px;
  padding:22px 24px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.05);
  z-index:99999;
  transform:translateY(120%);
  opacity:0;
  transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1), opacity .4s ease;
}

.cookie-banner.visible{
  transform:translateY(0);
  opacity:1;
}

.cookie-banner-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.cookie-banner-title{
  color:#fff;
  font-weight:700;
  font-size:15px;
}

.cookie-banner-text{
  color:#a1a1aa;
  font-size:13px;
  line-height:1.55;
  margin:0 0 18px 0;
}

.cookie-banner-text a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}

.cookie-banner-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.cookie-btn{
  padding:9px 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  border:none;
}

.cookie-btn-primary{
  background:#fff;
  color:#000;
}

.cookie-btn-primary:hover{
  background:#e4e4e7;
  transform:translateY(-1px);
}

.cookie-btn-secondary{
  background:rgba(255,255,255,0.08);
  color:#d4d4d8;
  border:1px solid rgba(255,255,255,0.12);
}

.cookie-btn-secondary:hover{
  background:rgba(255,255,255,0.15);
  color:#fff;
}

.cookie-btn-link{
  background:transparent;
  color:#a1a1aa;
  text-decoration:underline;
  font-size:12.5px;
  padding:9px 8px;
}

.cookie-btn-link:hover{
  color:#fff;
}

/* Cookie Settings Modal */
.cookie-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}

.cookie-modal-overlay.active{
  opacity:1;
  visibility:visible;
}

.cookie-modal{
  background:#121214;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  max-width:540px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  padding:28px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.8);
  transform:scale(0.95);
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-modal-overlay.active .cookie-modal{
  transform:scale(1);
}

.cookie-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.cookie-modal-head h3{
  color:#fff;
  font-size:18px;
  margin:0;
}

.cookie-modal-close{
  background:rgba(255,255,255,0.06);
  border:none;
  color:#a1a1aa;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}

.cookie-modal-close:hover{
  background:rgba(255,255,255,0.15);
  color:#fff;
}

.cookie-group{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:16px 0;
}

.cookie-group-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}

.cookie-group-title{
  color:#fff;
  font-weight:600;
  font-size:14.5px;
}

.cookie-group-desc{
  color:#8e8e93;
  font-size:12.5px;
  line-height:1.5;
  margin:0;
}

.cookie-toggle{
  position:relative;
  display:inline-block;
  width:42px;
  height:24px;
}

.cookie-toggle input{
  opacity:0;
  width:0;
  height:0;
}

.cookie-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background-color:rgba(255,255,255,0.15);
  transition:.3s;
  border-radius:24px;
}

.cookie-slider:before{
  position:absolute;
  content:"";
  height:18px;
  width:18px;
  left:3px;
  bottom:3px;
  background-color:white;
  transition:.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius:50%;
}

.cookie-toggle input:checked + .cookie-slider{
  background-color:#22c55e;
}

.cookie-toggle input:disabled + .cookie-slider{
  opacity:0.6;
  cursor:not-allowed;
}

.cookie-toggle input:checked + .cookie-slider:before{
  transform:translateX(18px);
}

.cookie-modal-footer{
  margin-top:20px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}


/* =====================================================
   MOBILE
===================================================== */

/* =====================================================
   NAV ACTIONS & MOBILE HAMBURGER TOGGLE
===================================================== */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-mobile-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:10px;
  background:#141414;
  border:1px solid #2a2a2a;
  color:#fff;
  cursor:pointer;
  place-items:center;
  transition:all .25s ease;
}

.nav-mobile-toggle:hover{
  background:#1f1f1f;
  border-color:#444;
}

/* =====================================================
   MOBILE NAVIGATION DRAWER & BACKDROP
===================================================== */
.mobile-nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  z-index:998;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}

.mobile-nav-backdrop.open{
  opacity:1;
  visibility:visible;
}

.mobile-nav-drawer{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:300px;
  max-width:85vw;
  background:#0c0c0c;
  border-right:1px solid #242424;
  z-index:999;
  transform:translateX(-100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:24px 20px;
  box-shadow:20px 0 50px rgba(0,0,0,.8);
}

.mobile-nav-drawer.open{
  transform:translateX(0);
}

.mobile-nav-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:20px;
  border-bottom:1px solid #1c1c1c;
}

.mobile-nav-logo img{
  width:130px;
  height:auto;
  display:block;
}

.mobile-nav-close{
  width:36px;
  height:36px;
  border-radius:8px;
  background:#181818;
  border:1px solid #282828;
  color:#888;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease;
}

.mobile-nav-close:hover{
  color:#fff;
  background:#222;
}

.mobile-menu-links{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:24px 0;
  flex:1;
  overflow-y:auto;
}

.mobile-menu-links a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:12px;
  color:#aaa;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  transition:all .2s ease;
}

.mobile-menu-links a svg{
  width:18px;
  height:18px;
  color:#777;
  transition:color .2s ease;
}

.mobile-menu-links a:hover{
  color:#fff;
  background:#141414;
}

.mobile-menu-links a.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent);
  border-left:3px solid #fbbf24;
}

.mobile-menu-links a.active svg{
  color:#fbbf24;
}

.mobile-nav-footer{
  padding-top:18px;
  border-top:1px solid #1c1c1c;
}

.mobile-nav-cta{
  width:100%;
  padding:14px;
  justify-content:center;
  border-radius:12px;
  font-weight:800;
}

/* =====================================================
   FULL RESPONSIVE MEDIA QUERIES
===================================================== */
@media(max-width:850px){
  /* Eliminate horizontal overflow from reveal animations on mobile */
  .reveal-left{
    transform:translateY(35px) scale(.96);
  }
  .reveal-left.visible{
    transform:translateY(0) scale(1);
  }
  .reveal-right{
    transform:translateY(35px) scale(.96);
  }
  .reveal-right.visible{
    transform:translateY(0) scale(1);
  }

  .menu{
    display:none !important;
  }
  .nav-mobile-toggle{
    display:grid;
  }
  .nav{
    height:68px;
  }
  .grid,
  .steps,
  .trust-grid{
    grid-template-columns:1fr !important;
    gap:28px;
  }
  .metrics{
    grid-template-columns:1fr;
  }
  .metric{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:20px 0;
  }
  .metric:last-child{
    border-bottom:0;
  }
  .head{
    display:block;
  }
  .desc{
    margin-top:10px;
  }
  .trust-points{
    grid-template-columns:repeat(2,1fr);
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .brand-col{
    grid-column:1 / -1;
  }
  .footer-bottom{
    flex-direction:column;
    gap:20px;
  }
  .big{
    min-height:auto;
  }
  .access-choice{
    width:100%;
  }
  .steps-section::after{
    left:-20%;
    right:-20%;
    width:140%;
    opacity:.4;
  }
}

@media(max-width:640px){
  .wrap{
    padding-left:16px;
    padding-right:16px;
  }
  .nav{
    height:64px;
  }
  .logo img{
    width:125px;
    height:auto;
  }
  .nav-cart-btn{
    padding:8px 12px;
    font-size:12px;
  }
  .hero{
    min-height:auto;
    padding:50px 0 60px;
  }
  .hero h1{
    font-size:clamp(28px, 8vw, 40px);
    letter-spacing:-1px;
    line-height:1.15;
  }
  .hero p{
    font-size:14.5px;
    line-height:1.55;
    margin:14px auto 26px;
  }
  .hero .buttons{
    flex-direction:column;
    width:100%;
    gap:10px;
  }
  .hero .buttons .btn{
    width:100%;
    justify-content:center;
    padding:16px;
    min-height:48px;
  }
  .page-hero{
    padding:45px 0 25px;
  }
  .page-hero h1{
    font-size:clamp(26px, 7vw, 36px);
    letter-spacing:-1px;
  }
  section{
    padding:55px 0;
  }
  .card{
    padding:20px;
    border-radius:16px;
  }
  .card .foot{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .card .mini.btn-add-cart{
    padding:10px 18px;
    min-height:42px;
    font-size:13px;
  }
  .all-access-box{
    padding:20px 16px;
    border-radius:18px;
  }
  .all-access-headline h3{
    font-size:22px;
  }
  .all-access-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .access-card-item{
    padding:10px 12px;
  }
  .all-access-pricing{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
  }
  .pricing-right{
    width:100%;
    justify-content:space-between;
  }
  .all-access-cta-btn{
    padding:16px;
    font-size:14px;
    min-height:50px;
  }
  .all-access-guarantees{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .discount-offer-banner{
    flex-direction:column;
    text-align:left;
    align-items:flex-start;
    gap:10px;
    padding:14px;
  }
  .provider-selector{
    gap:8px;
  }
  .provider-option{
    padding:12px 14px;
    min-height:48px;
  }
  .box{
    padding:20px 16px;
    border-radius:18px;
  }
  .cta{
    padding:40px 18px;
    border-radius:18px;
  }
  .newsletter-form{
    flex-direction:column;
    gap:10px;
  }
  .newsletter-input{
    padding:14px 16px 14px 42px;
  }
  .newsletter-btn{
    width:100%;
    justify-content:center;
    padding:15px;
    min-height:48px;
  }
  .newsletter-features{
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
  }
  .reviews-summary{
    grid-template-columns:repeat(2,1fr);
    padding:18px 14px;
    gap:16px;
  }
  .reviews-grid{
    grid-template-columns:1fr;
  }
  .review-card{
    padding:20px 16px;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .cart-drawer{
    width:100%;
    max-width:100%;
  }
}

@media(max-width:420px){
  .trust-points{
    grid-template-columns:1fr;
  }
  .reviews-summary{
    grid-template-columns:1fr;
  }
  .announcement-badge{
    font-size:9.5px;
  }
  .announcement-text{
    font-size:12px;
  }
}

/* =====================================================
   REDUCED MOTION
===================================================== */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* =====================================================
   ACTIVE NAV LINK
===================================================== */
.menu a.active{
    color:#fff;
    font-weight:600;
}


/* =====================================================
   ACTIVE NAV LINK & PAGE HERO
===================================================== */
.menu a.active{
  color: #fff !important;
  font-weight: 600;
}
.menu a.active::after{
  width: 100% !important;
}

.page-hero{
  padding: 70px 0 35px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.07), transparent 35%), #050505;
}

.page-hero h1{
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: -1.5px;
  margin: 16px auto;
  max-width: 800px;
}

.page-hero p{
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}

/* =====================================================
   SVG ICONS HELPER CLASSES
===================================================== */
.ui-icon{
  width:14px;
  height:14px;
  display:inline-block;
  vertical-align:middle;
  stroke:currentColor;
  fill:none;
  flex-shrink:0;
}

.ui-icon-sm{
  width:12px;
  height:12px;
}

.ui-icon-lg{
  width:18px;
  height:18px;
}

.ui-icon-xl{
  width:24px;
  height:24px;
}

/* =====================================================
   SHOPPING CART (DRAWER & BADGE)
===================================================== */
.nav-cart-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#141414;
  border:1px solid #333;
  color:#fff;
  padding:8px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  position:relative;
  transition:all .25s ease;
}

.nav-cart-btn:hover{
  background:#1e1e1e;
  border-color:#555;
  transform:translateY(-2px);
  box-shadow:0 4px 15px rgba(0,0,0,.4);
}

.cart-badge{
  background:#fff;
  color:#000;
  font-size:10px;
  font-weight:900;
  min-width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  transition:transform .2s ease;
}

.cart-badge.bump{
  animation:badgeBump .3s ease;
}

@keyframes badgeBump{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.35); background:#22c55e; color:#fff; }
}

.cart-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}

.cart-backdrop.open{
  opacity:1;
  visibility:visible;
}

.cart-drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(420px, 92vw);
  background:rgba(12,12,12,.98);
  border-left:1px solid #282828;
  box-shadow:-15px 0 50px rgba(0,0,0,.8);
  z-index:2001;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(0.16,1,0.3,1);
}

.cart-drawer.open{
  transform:translateX(0);
}

.cart-header{
  padding:22px 24px;
  border-bottom:1px solid #222;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.cart-header-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:800;
  color:#fff;
}

.cart-header-count{
  font-size:11px;
  background:#202020;
  border:1px solid #333;
  color:#aaa;
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
}

.cart-close-btn{
  background:transparent;
  border:1px solid #2a2a2a;
  color:#888;
  width:32px;
  height:32px;
  border-radius:8px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all .2s ease;
}

.cart-close-btn:hover{
  background:#222;
  color:#fff;
  border-color:#444;
}

.cart-body{
  flex:1;
  overflow-y:auto;
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cart-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:100%;
  padding:40px 20px;
  gap:14px;
}

.cart-empty-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#181818;
  border:1px solid #2e2e2e;
  display:grid;
  place-items:center;
  color:#777;
}

.cart-empty h3{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin:0;
}

.cart-empty p{
  font-size:13px;
  color:#777;
  max-width:240px;
  line-height:1.5;
  margin:0;
}

.cart-empty-btn{
  margin-top:6px;
  padding:9px 18px;
  background:#fff;
  color:#000;
  border-radius:10px;
  font-weight:800;
  font-size:12px;
  text-decoration:none;
  transition:.25s ease;
}

.cart-empty-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,255,255,.15);
}

.cart-item{
  background:#141414;
  border:1px solid #242424;
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition:border-color .25s ease, transform .25s ease;
}

.cart-item:hover{
  border-color:#383838;
}

.cart-item-info{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.cart-item-tag{
  font-size:9px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.5px;
  color:#888;
}

.cart-item-name{
  font-size:14px;
  font-weight:700;
  color:#fff;
}

.cart-item-sub{
  font-size:11px;
  color:#777;
}

.cart-item-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.cart-item-price{
  font-size:14px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}

.cart-item-remove{
  background:transparent;
  border:none;
  color:#666;
  cursor:pointer;
  padding:4px;
  border-radius:6px;
  display:grid;
  place-items:center;
  transition:all .2s ease;
}

.cart-item-remove:hover{
  color:#ef4444;
  background:rgba(239,68,68,.1);
}

.cart-footer{
  border-top:1px solid #222;
  padding:20px 24px;
  background:#0e0e0e;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cart-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:#888;
}

.cart-row strong{
  color:#fff;
}

.cart-discount-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#22c55e;
  background:rgba(34,197,94,.08);
  border:1px dashed rgba(34,197,94,.3);
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
}

.cart-total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  color:#fff;
  font-weight:800;
  padding-top:6px;
  border-top:1px solid #202020;
}

.cart-total-price{
  font-size:20px;
  font-weight:900;
  color:#fff;
}

.cart-checkout-btn{
  width:100%;
  padding:14px;
  border-radius:12px;
  background:#fff;
  color:#000;
  font-size:14px;
  font-weight:800;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .25s ease;
}

.cart-checkout-btn:hover{
  background:#e6e6e6;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(255,255,255,.15);
}

.cart-guarantee{
  font-size:11px;
  color:#666;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.btn-add-cart{
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.btn-add-cart.added{
  background:#22c55e;
  color:#fff;
}

/* =====================================================
   REVIEWS & TESTIMONIALS SECTION
===================================================== */
.reviews-section{
  background:radial-gradient(circle at 50% 0,rgba(255,255,255,.05),transparent 40%),#060606;
  border-top:1px solid var(--line);
  padding:80px 0;
  position:relative;
  overflow:hidden;
}

.reviews-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  background:#0f0f0f;
  border:1px solid #222;
  border-radius:18px;
  padding:24px;
  margin-bottom:40px;
  text-align:center;
}

.rev-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.rev-score{
  font-size:26px;
  font-weight:900;
  color:#fff;
}

.rev-score span{
  font-size:14px;
  color:#777;
  font-weight:600;
}

.rev-stars{
  display:flex;
  gap:4px;
  margin:4px 0;
}

.rev-stars svg, .review-stars svg{
  width:16px;
  height:16px;
  fill:#ffb800 !important;
  stroke:#ffb800 !important;
  filter:drop-shadow(0 0 6px rgba(255, 184, 0, 0.75)) drop-shadow(0 0 12px rgba(255, 184, 0, 0.4));
  transition:transform .25s ease;
}

.review-stars{
  display:flex;
  gap:4px;
}

.review-card:hover .review-stars svg{
  transform:scale(1.1);
}

.rev-num{
  font-size:26px;
  font-weight:900;
  color:#fff;
}

.rev-label{
  font-size:12px;
  color:#888;
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.review-card{
  background:linear-gradient(145deg,#131313,#0b0b0b);
  border:1px solid #242424;
  border-radius:18px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.review-card:hover{
  transform:translateY(-5px);
  border-color:#444;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}

.review-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.review-date{
  font-size:11px;
  color:#666;
}

.review-text{
  font-size:13.5px;
  color:#bbb;
  line-height:1.65;
  font-style:normal;
  margin:0;
}

.review-author{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:14px;
  border-top:1px solid #1c1c1c;
}

.review-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#2a2a2a,#1a1a1a);
  border:1px solid #3a3a3a;
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.review-name{
  font-size:13px;
  font-weight:800;
  color:#fff;
  display:block;
}

.review-product{
  font-size:11px;
  color:#22c55e;
  display:block;
  margin-top:2px;
}

@media(max-width:960px){
  .reviews-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .reviews-summary{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }
}

@media(max-width:640px){
  .reviews-grid{
    grid-template-columns:1fr;
  }
  .reviews-summary{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* =====================================================
   TOP ANNOUNCEMENT BAR (FLASH OFFER & COUNTDOWN)
===================================================== */
.announcement-bar{
  background:linear-gradient(90deg,#161003 0%,#261702 35%,#2a1b04 65%,#140e02 100%);
  border-bottom:1px solid rgba(251,191,36,.28);
  padding:9px 0;
  position:relative;
  z-index:101;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}

.announcement-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.announcement-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.announcement-badge{
  background:rgba(251,191,36,.15);
  border:1px solid rgba(251,191,36,.4);
  color:#fbbf24;
  font-size:10px;
  font-weight:900;
  padding:3px 8px;
  border-radius:999px;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.announcement-text{
  font-size:13px;
  color:#e5e5e5;
  letter-spacing:-.1px;
}

.announcement-text strong{
  color:#fbbf24;
  font-weight:800;
}

.announcement-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.countdown-container{
  display:flex;
  align-items:center;
  gap:8px;
}

.countdown-label{
  font-size:11px;
  color:#a3a3a3;
  font-weight:600;
}

.countdown-timer{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-family:monospace;
}

.cd-box{
  background:#111;
  border:1px solid #333;
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:3px 6px;
  border-radius:6px;
  font-variant-numeric:tabular-nums;
  display:inline-flex;
  align-items:baseline;
  gap:1px;
}

.cd-box b{
  color:#fbbf24;
  font-weight:900;
}

.cd-colon{
  color:#777;
  font-weight:800;
  font-size:11px;
}

.announcement-cta{
  background:#fbbf24;
  color:#000;
  font-size:11px;
  font-weight:900;
  padding:6px 12px;
  border-radius:8px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  transition:all .25s ease;
  box-shadow:0 0 12px rgba(251,191,36,.3);
}

.announcement-cta:hover{
  background:#fcd34d;
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(251,191,36,.55);
}

@media(max-width:860px){
  .announcement-wrap{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:8px;
  }
  .announcement-left{
    justify-content:center;
    flex-wrap:wrap;
  }
  .announcement-right{
    justify-content:center;
    flex-wrap:wrap;
  }
}

/* =====================================================
   ALL ACCESS PREMIUM VISUAL CARD (RELUCIENTE & ANIMADO)
===================================================== */
.all-access-box{
  background:radial-gradient(circle at 85% 0%,rgba(251,191,36,.18),transparent 45%),
             radial-gradient(circle at 15% 100%,rgba(251,191,36,.12),transparent 40%),
             linear-gradient(160deg,#181818 0%,#0d0d0d 100%) !important;
  border:1px solid rgba(251,191,36,.55) !important;
  box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 50px rgba(251,191,36,.2),inset 0 1px 0 rgba(255,255,255,.25) !important;
  position:relative;
  overflow:hidden;
  animation:allAccessGlowPulse 5s ease-in-out infinite;
}

@keyframes allAccessGlowPulse{
  0%,100%{
    box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 40px rgba(251,191,36,.15),inset 0 1px 0 rgba(255,255,255,.2);
    border-color:rgba(251,191,36,.5);
  }
  50%{
    box-shadow:0 30px 85px rgba(0,0,0,.85),0 0 65px rgba(251,191,36,.35),inset 0 1px 0 rgba(255,255,255,.4);
    border-color:rgba(251,191,36,.95);
  }
}

/* Destello dorado en movimiento continuo cruzando la tarjeta */
.all-access-shimmer-sweep{
  position:absolute;
  top:0;
  left:-150%;
  width:70%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,184,0,.05) 15%,
    rgba(255,215,0,.45) 45%,
    rgba(255,255,255,.85) 50%,
    rgba(255,215,0,.45) 55%,
    rgba(255,184,0,.05) 85%,
    transparent 100%
  );
  transform:skewX(-25deg);
  animation:sweepGoldFlare 3.5s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events:none;
  z-index:1;
}

@keyframes sweepGoldFlare{
  0%{
    left:-100%;
  }
  60%,100%{
    left:200%;
  }
}

/* Orbe dorado flotante en movimiento */
.all-access-orb{
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,0,.22) 0%,rgba(255,184,0,0) 70%);
  filter:blur(30px);
  pointer-events:none;
  z-index:1;
  animation:moveGoldOrb 8s ease-in-out infinite alternate;
}

@keyframes moveGoldOrb{
  0%{
    top:-40px;
    left:-40px;
    transform:scale(1);
    opacity:.7;
  }
  50%{
    top:50%;
    left:70%;
    transform:scale(1.3);
    opacity:1;
  }
  100%{
    top:80%;
    left:10%;
    transform:scale(1.1);
    opacity:.8;
  }
}

/* Borde superior dinámico */
.all-access-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,#fbbf24 0%,#ffffff 50%,#fbbf24 100%);
  background-size:200% auto;
  animation:laserShine 2.5s linear infinite;
  z-index:2;
}

@keyframes laserShine{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

.all-access-top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:10px;
  position:relative;
  z-index:2;
}

.popular-pill{
  background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(251,191,36,.08));
  border:1px solid rgba(251,191,36,.6);
  color:#fbbf24;
  font-size:10.5px;
  font-weight:900;
  padding:5px 12px;
  border-radius:999px;
  letter-spacing:.5px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 0 15px rgba(251,191,36,.3);
  animation:pillPulse 3s ease-in-out infinite;
}

@keyframes pillPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 12px rgba(251,191,36,.25);
  }
  50%{
    transform:scale(1.03);
    box-shadow:0 0 22px rgba(251,191,36,.55);
  }
}

.all-access-stars{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.all-access-stars svg{
  width:14px;
  height:14px;
  fill:#ffb800 !important;
  stroke:#ffb800 !important;
  filter:drop-shadow(0 0 6px rgba(255,184,0,.8));
}

.all-access-stars span{
  font-size:11px;
  color:#bbb;
  font-weight:700;
  margin-left:4px;
}

.all-access-headline{
  position:relative;
  z-index:2;
}

.all-access-headline h3{
  font-size:27px;
  font-weight:900;
  letter-spacing:-.5px;
  margin:0 0 8px;
  background:linear-gradient(90deg,#ffffff 0%,#ffeaa7 30%,#ffd000 50%,#fffdf0 70%,#ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:metallicTextShine 4s linear infinite;
}

@keyframes metallicTextShine{
  to{background-position:200% center;}
}

.all-access-headline p{
  font-size:14px;
  color:#aaa;
  line-height:1.6;
  margin-bottom:22px;
}

.all-access-headline p strong{
  color:#fff;
}

.all-access-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:24px;
  position:relative;
  z-index:2;
}

.access-card-item{
  background:rgba(22,22,22,.7);
  border:1px solid #282828;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:all .25s ease;
}

.access-card-item:hover{
  background:rgba(30,30,30,.9);
  border-color:#444;
  transform:translateY(-2px);
}

.access-card-item.highlight{
  background:rgba(34,197,94,.06);
  border-color:rgba(34,197,94,.28);
}

.access-card-item.highlight:hover{
  background:rgba(34,197,94,.1);
  border-color:rgba(34,197,94,.45);
}

.access-item-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  background:#181818;
  border:1px solid #333;
  display:grid;
  place-items:center;
  color:#fff;
  flex-shrink:0;
}

.access-item-icon.guide{
  background:rgba(34,197,94,.15);
  border-color:rgba(34,197,94,.35);
  color:#4ade80;
}

.access-item-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.access-item-text strong{
  font-size:13px;
  font-weight:700;
  color:#fff;
}

.access-item-text span{
  font-size:11px;
  color:#777;
}

.all-access-pricing{
  background:linear-gradient(145deg,#131313,#0b0b0b);
  border:1px solid rgba(251,191,36,.3);
  border-radius:14px;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  z-index:2;
}

.pricing-left{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.pricing-label{
  font-size:11px;
  color:#888;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.3px;
}

.pricing-crossed{
  font-size:16px;
  color:#888;
  text-decoration:line-through;
  text-decoration-color:#ef4444;
  text-decoration-thickness:2px;
  font-weight:800;
}

.pricing-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.pricing-save-tag{
  background:#22c55e;
  color:#000;
  font-size:10.5px;
  font-weight:900;
  padding:4px 9px;
  border-radius:6px;
  letter-spacing:.3px;
  box-shadow:0 0 12px rgba(34,197,94,.4);
}

.pricing-final{
  display:flex;
  align-items:baseline;
  color:#fff;
  font-weight:900;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

.pricing-final .currency{
  font-size:18px;
  margin-right:2px;
}

.pricing-final .amount{
  font-size:36px;
  letter-spacing:-1px;
  line-height:1;
}

.pricing-final .cents{
  font-size:18px;
}

.all-access-cta-btn{
  width:100%;
  padding:17px;
  border-radius:12px;
  font-size:15px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  border:none;
  background:linear-gradient(90deg,#ffffff 0%,#fff5cc 50%,#ffffff 100%);
  background-size:200% auto;
  color:#000;
  transition:all .3s ease;
  box-shadow:0 10px 30px rgba(251,191,36,.25),0 0 20px rgba(255,255,255,.15);
  animation:buttonGleam 4s linear infinite;
  position:relative;
  z-index:2;
}

@keyframes buttonGleam{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

.all-access-cta-btn:hover{
  background:#fff;
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 15px 45px rgba(251,191,36,.45),0 0 30px rgba(255,255,255,.3);
}

.all-access-guarantees{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #1c1c1c;
  position:relative;
  z-index:2;
}

.guarantee-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#888;
}

.guarantee-item span{
  color:#aaa;
}

@media(max-width:640px){
  .all-access-grid{
    grid-template-columns:1fr;
  }
  .all-access-pricing{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .all-access-guarantees{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =====================================================
   GOLD SHINE PREMIUM TEXT
===================================================== */
.gold-shine{
  background:linear-gradient(90deg,#ffffff 0%,#ffe082 25%,#ffd700 45%,#ffae00 65%,#fffdf0 85%,#ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:goldTextShimmer 4s linear infinite;
  display:inline;
  font-weight:inherit;
  filter:drop-shadow(0 0 14px rgba(255,184,0,.35));
}

@keyframes goldTextShimmer{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

/* =====================================================
   TRUST SECTION (.trust, .trust-grid, .trust-main, .trust-side)
===================================================== */
.trust{
  padding:80px 0;
  position:relative;
  background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.03),transparent 40%),var(--bg);
}

.trust-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:36px;
  align-items:center;
  width:100%;
}

.trust-main{
  min-width:0;
  width:100%;
}

.trust-main h2{
  font-size:clamp(22px, 4.5vw, 36px);
  line-height:1.2;
  letter-spacing:-1px;
  margin:10px 0 16px;
  word-break:break-word;
  overflow-wrap:break-word;
}

.trust-main p{
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
  margin:0 0 14px;
}

.trust-points{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:28px;
  width:100%;
}

.trust-point{
  background:linear-gradient(145deg,#141414,#0b0b0b);
  border:1px solid #242424;
  border-radius:14px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  width:100%;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.trust-point:hover{
  transform:translateY(-3px);
  border-color:#383838;
  box-shadow:0 8px 25px rgba(0,0,0,.5);
}

.trust-point strong{
  font-size:20px;
  font-weight:900;
  color:#fff;
  display:inline-block;
  word-break:break-word;
  overflow-wrap:break-word;
}

.trust-point strong.gold-shine{
  background:linear-gradient(90deg,#ffffff 0%,#ffe082 25%,#ffd700 45%,#ffae00 65%,#fffdf0 85%,#ffffff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:goldTextShimmer 4s linear infinite;
  filter:drop-shadow(0 0 10px rgba(255,184,0,.35));
}

.trust-point span{
  font-size:12.5px;
  color:#888;
  line-height:1.4;
}

.trust-side{
  background:linear-gradient(145deg,#141414,#0c0c0c);
  border:1px solid #282828;
  border-radius:20px;
  padding:36px 30px;
  min-width:0;
  width:100%;
  position:relative;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.5);
}

.trust-side h3{
  font-size:22px;
  font-weight:800;
  margin:0 0 12px;
  color:#fff;
}

.trust-side p{
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
  margin:0;
}

.big-check{
  width:48px;
  height:48px;
  border-radius:12px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
  color:#22c55e;
  display:grid;
  place-items:center;
  margin-bottom:20px;
}

.big-check svg{
  width:24px;
  height:24px;
}

@media(max-width:850px){
  .trust{
    padding:50px 0;
  }
  .trust-side{
    padding:24px 18px;
  }
}

@media(max-width:520px){
  .trust-points{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .trust-point{
    padding:16px;
  }
  .trust-point strong{
    font-size:18px;
  }
}