/* ============================= */
/* 🌗 SISTEMA DE TEMAS GLOBAL */
/* ============================= */

:root {
  --bg-main: radial-gradient(circle at top,#0f172a,#020617);
  --bg-card: #0f172a;
  --bg-header: rgba(15,23,42,.9);
  --text-main: #ffffff;
  --text-secondary: #94a3b8;
  --border-color: rgba(0,255,255,.15);
  --accent: #00ffff;
}

/* 🌙 MODO OSCURO (default) */
body.dark {
  --bg-main: radial-gradient(circle at top,#0f172a,#020617);
  --bg-card: #0f172a;
  --bg-header: rgba(15,23,42,.9);
  --text-main: #ffffff;
  --text-secondary: #94a3b8;
}

/* ☀️ MODO CLARO */
body.light {
  --bg-main: #f4f7fb;
  --bg-card: #ffffff;
  --bg-header: rgba(255,255,255,.9);
  --text-main: #111;
  --text-secondary: #555;
  --border-color: rgba(0,0,0,.1);
  --accent: #00bcd4;
}
/* ============================= */
/* BASE */
/* ============================= */

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Inter',system-ui;
background:var(--bg-main);
color:var(--text-main);
overflow-x:hidden;
transition:0.3s;
}

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

/* ============================= */
/* HEADER (CYBERXTREME PRO) */
/* ============================= */

.header{
display:flex;
align-items:center;
gap:20px;
max-width:1200px;
margin:12px auto;
padding:10px 20px;

backdrop-filter:blur(12px);
border-radius:14px;

position:sticky;
top:10px;
z-index:1000;

transition:0.3s ease;
}

/* ============================= */
/* 🌙 DARK MODE */
/* ============================= */

body.dark .header{
background:rgba(15,23,42,.9);
border:1px solid rgba(0,255,255,.15);
box-shadow:0 0 15px rgba(0,255,255,.08);
}

/* ============================= */
/* ☀️ LIGHT MODE (CYBER STYLE) */
/* ============================= */

body.light .header{

/* 🔥 blanco tecnológico */
background:rgba(240, 249, 255, 0.9);

/* borde cyber */
border:1px solid rgba(0, 200, 255, 0.25);

/* glow suave */
box-shadow:0 8px 25px rgba(0, 200, 255, 0.15);
}

/* ============================= */
/* LOGO */
/* ============================= */

.logo{
white-space:nowrap;
}

.logo a{
font-size:19px;
font-weight:700;
color:var(--accent);

/* 🔥 glow de marca */
text-shadow:0 0 8px rgba(0,255,255,.5);

transition:0.3s;
}

/* ============================= */
/* CATEGORIAS */
/* ============================= */

.categories-nav{
position:relative;
margin-left:10px;
display:flex;
align-items:center;
}

/* BOTON */

.dropdown-toggle{
padding:8px 12px;
font-weight:500;
cursor:pointer;
display:block;

color:var(--text-main);
transition:.25s;
}

.dropdown-toggle:hover{
color:var(--accent);
}

/* ============================= */
/* MENU */
/* ============================= */

.dropdown-menu{
position:absolute;
top:100%;
left:0;

background:var(--bg-card);
border:1px solid var(--border-color);

border-radius:8px;
list-style:none;
padding:6px 0;
display:none;
min-width:190px;

box-shadow:0 10px 25px rgba(0,0,0,.4);
z-index:100;
}

.categories-nav::after{
content:"";
position:absolute;
left:0;
top:100%;
width:100%;
height:14px;
}

.categories-nav:hover .dropdown-menu{
display:block;
}

/* ITEMS */

.dropdown-menu li{
position:relative;
}

.dropdown-menu a{
display:flex;
justify-content:space-between;
padding:9px 18px;
font-size:14px;

color:var(--text-main);
transition:.2s;
}

.dropdown-menu a:hover{
background:rgba(0,255,255,.1);
color:var(--accent);
}

/* SUBMENU */

.dropdown-submenu{
position:absolute;
left:100%;
top:0;
display:none;

background:var(--bg-card);
border:1px solid var(--border-color);

border-radius:8px;
list-style:none;
padding:6px 0;
min-width:170px;
}

.dropdown-menu li:hover > .dropdown-submenu{
display:block;
}

/* ============================= */
/* SEARCH */
/* ============================= */

.search-bar{
flex:1;
display:flex;
justify-content:center;
}

.search-bar input{
width:100%;
max-width:450px;
padding:10px 14px;
border-radius:6px;

border:1px solid var(--border-color);
background:var(--bg-card);
color:var(--text-main);

transition:0.3s;
}

.search-bar input::placeholder{
color:var(--text-secondary);
}

.search-bar input:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 8px var(--accent);
}

/* ============================= */
/* USER */
/* ============================= */

.user-nav{
display:flex;
gap:10px;
margin-left:auto;
align-items:center;
}

/* BOTONES */

.nav-button{
padding:6px 14px;
border-radius:6px;

border:1px solid var(--border-color);
background:var(--bg-card);
color:var(--text-main);

font-size:13px;
cursor:pointer;

transition:.25s;
}

.nav-button:hover{
background:var(--accent);
color:#000;
box-shadow:0 0 10px var(--accent);
}

/* ============================= */
/* USER DROPDOWN */
/* ============================= */

#user-profile{
position:relative;
}

#user-dropdown-menu{
display:none;
position:absolute;
top:110%;
right:0;

background:var(--bg-card);
border:1px solid var(--border-color);

border-radius:8px;
min-width:210px;
overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.4);
z-index:200;
}

#user-dropdown-menu a,
#logout-button{
display:block;
width:100%;
padding:10px 15px;

color:var(--text-secondary);
background:none;
border:none;

text-align:left;
font-size:14px;
cursor:pointer;

transition:.2s;
}

#user-dropdown-menu a:hover,
#logout-button:hover{
background:rgba(0,255,255,.1);
color:var(--accent);
}

/* ============================= */
/* ADS LATERALES */
/* ============================= */

.left-ad-container,
.right-ad-container{
  position:fixed;
  top:120px;
  width:140px;
  padding:10px;

  /* 🔥 dinámico */
  background:var(--bg-header);
  border:1px solid var(--border-color);

  border-radius:12px;
  text-align:center;
  z-index:50;

  box-shadow:0 10px 25px rgba(0,0,0,.6);
  transition:transform .35s ease;

  max-height:80vh;
  overflow:hidden;
}

.left-ad-container{
  left:clamp(10px, calc((100vw - 1200px)/2 - 120px), 200px);
}

.right-ad-container{
  right:clamp(10px, calc((100vw - 1200px)/2 - 120px), 200px);
}

@media (max-width: 1392px),
       (max-width: 768px){
  .left-ad-container,
  .right-ad-container{
    display:none;
  }
}

.ad-title{
  font-size:11px;
  color:var(--text-secondary);
  margin-bottom:6px;
}

.ad-image{
  width:100%;
  height:auto;
  border-radius:6px;
  display:block;
  transition:transform .2s ease;
}

.ad-image:hover{
  transform:scale(1.03);
}

/* ============================= */
/* MAIN */
/* ============================= */

.main-content{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

/* ============================= */
/* 🎬 CARRUSEL HERO PRO */
/* ============================= */

.carousel-container{
position:relative;
width:100%;

/* 🔥 MÁS GRANDE tipo Mercado Libre */
height:520px;

overflow:hidden;
border-radius:20px;

border:1px solid var(--border-color);
margin-bottom:30px;

transition:.3s;
}

/* ============================= */
/* SLIDES */
/* ============================= */

.carousel-slide{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;

opacity:0;
pointer-events:none;
transition:opacity .6s ease;
}

.carousel-slide.active{
opacity:1;
pointer-events:auto;
}

/* ============================= */
/* IMAGEN */
/* ============================= */

.carousel-slide img{
width:100%;
height:100%;
object-fit:cover;

transform:scale(1);
transition:transform 6s linear;
}

.carousel-slide.active img{
transform:scale(1.08); /* 🔥 más impacto */
}

/* ============================= */
/* 🔥 DEGRADADO PRO */
/* ============================= */

.carousel-slide::after{
content:"";
position:absolute;
inset:0;

background: linear-gradient(
  to bottom,
  transparent 50%,
  var(--bg-main) 100%
);

z-index:1;
}

/* ============================= */
/* CONTENIDO */
/* ============================= */

.slide-content{
position:absolute;
bottom:0;
width:100%;
padding:45px;

z-index:2;

/* animación */
transform:translateY(20px);
opacity:0;
transition:.6s ease;
}

.carousel-slide.active .slide-content{
transform:translateY(0);
opacity:1;
}

/* TEXTO */

.slide-content h2{
font-size:34px;
margin-bottom:8px;
color:var(--text-main);
font-weight:700;
}

.slide-content p{
color:var(--text-secondary);
font-size:16px;
margin-bottom:15px;
}

/* BOTÓN */

.slide-button{
display:inline-block;
padding:12px 26px;
border-radius:8px;

background:var(--accent);
color:#000;

font-weight:700;
font-size:15px;

transition:.25s;
}

.slide-button:hover{
transform:translateY(-3px);
box-shadow:0 8px 25px var(--accent);
filter:brightness(1.1);
}

/* ============================= */
/* FLECHAS */
/* ============================= */

.prev-button,
.next-button{
position:absolute;
top:50%;
transform:translateY(-50%);

width:48px;
height:48px;

background:var(--bg-header);
border:1px solid var(--border-color);

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:18px;
color:var(--text-main);

cursor:pointer;
transition:.25s;

backdrop-filter:blur(6px);
z-index:3;
}

.prev-button{ left:20px; }
.next-button{ right:20px; }

.prev-button:hover,
.next-button:hover{
background:var(--accent);
color:#000;
transform:translateY(-50%) scale(1.15);
box-shadow:0 8px 25px var(--accent);
}

/* ============================= */
/* 📱 RESPONSIVE */
/* ============================= */

@media(max-width:768px){

.carousel-container{
height:260px;
border-radius:14px;
}

.slide-content{
padding:20px;
}

.slide-content h2{
font-size:18px;
}

.slide-content p{
font-size:13px;
}

.slide-button{
padding:8px 14px;
font-size:12px;
}

}

/* ============================= */
/* PRODUCTOS (UPGRADE PRO) */
/* ============================= */

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:25px;
}

.product-card{
background:var(--bg-card);
border-radius:14px;
padding:15px;

border:1px solid var(--border-color);
transition:.3s;
}

.product-card:hover{
border-color:var(--accent);
transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.product-image{
width:100%;
height:160px;
object-fit:cover;
border-radius:8px;
}

.product-name{
margin:10px 0;
font-size:16px;
color:var(--text-main);
}

.product-price{
color:var(--accent);
font-weight:bold;
}

.add-to-cart-btn{
margin-top:10px;
width:100%;
padding:8px;

border:1px solid var(--accent);
border-radius:6px;

background:transparent;
color:var(--accent);

cursor:pointer;
transition:.25s;
}

.add-to-cart-btn:hover{
background:var(--accent);
color:#000;
box-shadow:0 0 10px var(--accent);
}

/* ============================= */
/* BENEFITS */
/* ============================= */

.benefits-section{
margin-top:70px;
text-align:center;
}

.benefits-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:30px;
}

.benefit-card{
background:var(--bg-card);
padding:25px;
border-radius:12px;
border:1px solid var(--border-color);

transition:.25s;
}

.benefit-card:hover{
transform:translateY(-5px);
border-color:var(--accent);
}

/* ============================= */
/* FOOTER (CYBER UPGRADE PRO) */
/* ============================= */

.footer{
margin-top:80px;
padding:60px 40px 25px;
position:relative;

transition:.3s;
}

/* ============================= */
/* 🌙 DARK MODE */
/* ============================= */

body.dark .footer{

/* 🔥 más profundidad */
background: linear-gradient(
  to bottom,
  #020617,
  #020617,
  #031020
);

border-top:1px solid rgba(0,255,255,.15);

/* glow leve */
box-shadow:0 -5px 25px rgba(0,255,255,.08);
}

/* ============================= */
/* ☀️ LIGHT MODE */
/* ============================= */

body.light .footer{

/* 🔥 blanco con estilo tech */
background: linear-gradient(
  to bottom,
  #f8fbff,
  #eef7ff
);

border-top:1px solid rgba(0,200,255,.25);

/* glow suave */
box-shadow:0 -5px 20px rgba(0,200,255,.12);
}

/* ============================= */
/* LINEA CYBER */
/* ============================= */

.footer::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:300px;
height:2px;

background:var(--accent);
box-shadow:0 0 15px var(--accent);
}

/* ============================= */
/* CONTENEDOR */
/* ============================= */

.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;
}

/* ============================= */
/* TITULOS */
/* ============================= */

.footer h3{
margin-bottom:12px;
font-size:16px;
color:var(--accent);
letter-spacing:.5px;
}

/* ============================= */
/* TEXTO */
/* ============================= */

.footer p{
color:var(--text-secondary);
font-size:14px;
line-height:1.6;
max-width:420px;
}

/* ============================= */
/* LINKS */
/* ============================= */

.footer-links ul{
list-style:none;
padding:0;
margin:0;
}

.footer-links li{
margin-bottom:8px;
}

.footer-links a{
font-size:14px;
color:var(--text-main);
transition:.2s;
}

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

/* SOCIAL */

/* ============================= */
/* SOCIAL (UPGRADE PRO) */
/* ============================= */

.social-icons{
margin-top:10px;
display:flex;
gap:12px;
}

.social-icons a{
width:38px;
height:38px;

display:flex;
align-items:center;
justify-content:center;

border-radius:10px;

/* 🔥 MARCO */
border:1px solid var(--border-color);

/* 🔥 fondo dinámico */
background:var(--bg-header);

/* 🔥 color base */
color:var(--text-main);

font-size:16px;

transition:.25s;
position:relative;
overflow:hidden;
}

/* 🔥 EFECTO HOVER GENERAL */
.social-icons a:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 0 15px var(--accent);
border-color:var(--accent);
}

/* ============================= */
/* 🎨 COLORES POR RED */
/* ============================= */

/* Facebook */
.social-icons a:nth-child(1):hover{
background:#1877f2;
color:#fff;
border-color:#1877f2;
}

/* Instagram */
.social-icons a:nth-child(2):hover{
background:linear-gradient(45deg,#ff0050,#ff8a00,#ffd500);
color:#fff;
border-color:#ff8a00;
}

/* Discord */
.social-icons a:nth-child(3):hover{
background:#5865F2;
color:#fff;
border-color:#5865F2;
}

/* FOOTER BOTTOM */

.footer-bottom{
text-align:center;
margin-top:40px;
padding-top:20px;

border-top:1px solid var(--border-color);
color:var(--text-secondary);
font-size:13px;
}

/* ============================= */
/* RESPONSIVE (MEJORADO) */
/* ============================= */

@media(max-width:1200px){
  .left-ad-container,
  .right-ad-container{
    display:none;
  }
}

@media(max-width:768px){

  .header{
    flex-wrap:wrap;
    gap:10px;
  }

  .search-bar input{
    width:100%;
  }

  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }

}

/* ============================= */
/* TITULO PRODUCTOS (THEME READY) */
/* ============================= */

.products-section h2{
text-align:center;
font-size:30px;
font-weight:700;
margin-bottom:35px;

color:var(--text-main);

letter-spacing:.5px;
position:relative;
transition:.3s;
}

/* CYBER TEXTO */

.products-section h2 span{
color:var(--accent);
text-shadow:0 0 12px var(--accent);
}

/* LINEA */

.products-section h2::after{
content:"";
display:block;
width:120px;
height:3px;

background:var(--accent);

margin:12px auto 0;
border-radius:4px;
box-shadow:0 0 12px var(--accent);
}

/* ============================= */
/* USER NAME HEADER */
/* ============================= */

#user-name-button{
color:var(--accent);
font-weight:600;

border:1px solid var(--accent);
background:rgba(0,255,255,.08);

transition:.25s;
}

#user-name-button:hover{
background:var(--accent);
color:#000;
box-shadow:0 0 10px var(--accent);
}

/* =============================== */
/* TOAST CYBERXTREME (UPGRADE) */
/* =============================== */

.cx-toast{
position:fixed;
bottom:30px;
right:30px;

background:var(--bg-card);
color:var(--accent);

padding:14px 22px;
border-radius:10px;

border:1px solid var(--border-color);

box-shadow:0 0 20px rgba(0,255,255,.25);

font-weight:600;

opacity:0;
transform:translateY(20px);
transition:.35s;

z-index:9999;
}

/* 🔥 ANIMACIÓN MÁS SUAVE */

.cx-toast.show{
opacity:1;
transform:translateY(0);
}

/* 💥 EFECTO EXTRA PRO */

.cx-toast::before{
content:"";
position:absolute;
left:0;
top:0;
height:100%;
width:3px;
background:var(--accent);
box-shadow:0 0 10px var(--accent);
}

/* ============================= */
/* INTRO CYBERXTREME (THEME READY) */
/* ============================= */

#cx-intro{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

/* 🔥 dinámico */
background:rgba(0,0,0,.75);

backdrop-filter:blur(10px);

display:flex;
align-items:center;
justify-content:center;

z-index:99999;
transition:opacity .6s ease;
}

/* contenido */

.cx-intro-content{
text-align:center;
animation:cxFadeUp 1s ease;
color:var(--text-main);
}

/* logo */

.cx-intro-logo{
width:90px;
margin-bottom:15px;
animation:cxPulse 2s infinite;

/* 🔥 glow dinámico */
filter:drop-shadow(0 0 12px var(--accent));
}

/* textos */

.cx-intro-content h2{
color:var(--text-secondary);
margin:0;
font-weight:400;
}

.cx-intro-content h1{
color:var(--accent);
font-size:28px;
margin:5px 0 20px;
text-shadow:0 0 12px var(--accent);
}

/* loader */

.cx-loader{
width:40px;
height:40px;
border:3px solid rgba(255,255,255,.1);
border-top:3px solid var(--accent);
border-radius:50%;
margin:auto;
animation:spin 1s linear infinite;
}

/* animaciones */

@keyframes spin{
to{transform:rotate(360deg);}
}

@keyframes cxFadeUp{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes cxPulse{
0%{transform:scale(1);}
50%{transform:scale(1.05);}
100%{transform:scale(1);}
}

/* texto update */

.cx-update-text{
font-size:13px;
color:var(--text-secondary);
margin-bottom:18px;
max-width:260px;
margin-left:auto;
margin-right:auto;
line-height:1.4;
}

.cx-update-text strong{
color:var(--accent);
}

/* =============================
   🌞 INTRO MODO CLARO
============================= */

body.light #cx-intro{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
}

/* textos */

body.light .cx-intro-content{
  color:#111;
}

body.light .cx-intro-content h2{
  color:#64748b;
}

body.light .cx-intro-content h1{
  color:#00bcd4;
  text-shadow:0 0 10px rgba(0,188,212,.25);
}

/* logo glow */

body.light .cx-intro-logo{
  filter:drop-shadow(0 0 8px rgba(0,188,212,.4));
}

/* loader */

body.light .cx-loader{
  border:3px solid rgba(0,0,0,.1);
  border-top:3px solid #00bcd4;
}

/* texto update */

body.light .cx-update-text{
  color:#64748b;
}

body.light .cx-update-text strong{
  color:#00bcd4;
}

/* ============================= */
/* 🔥 BANNER GLOBAL DESCUENTO (PRO) */
/* ============================= */

.promo-banner{
width:100%;
padding:12px 20px;
text-align:center;
font-weight:600;
font-size:14px;
letter-spacing:.5px;

/* 🔥 dinámico */
background:linear-gradient(90deg,var(--accent),#00bfa6,var(--accent));
color:#000;

box-shadow:0 0 15px var(--accent);
animation:bannerGlow 2.5s infinite alternate;

display:none;
transition:.3s;
}

/* glow */

@keyframes bannerGlow{
0%{ box-shadow:0 0 10px var(--accent); }
100%{ box-shadow:0 0 25px var(--accent); }
}

/* hover */

.promo-banner:hover{
filter:brightness(1.1);
transform:scale(1.01);
}

/* ============================= */
/* SEARCH TOAST (UPGRADE PRO) */
/* ============================= */

.search-toast{
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(20px);

/* 🔥 dinámico */
background:var(--bg-card);
color:#ff4d4d;

padding: 14px 22px;
border-radius: 10px;

border: 1px solid #ff4d4d;
font-weight: 600;

opacity: 0;
pointer-events: none;
transition: all .35s ease;

box-shadow:0 0 15px rgba(255,77,77,.3);
z-index: 9999;
}

/* animación */

.search-toast.show{
opacity: 1;
transform: translateX(-50%) translateY(0);
}

/* ============================= */
/* 📱 RESPONSIVE ULTRA CLEAN */
/* ============================= */

@media (max-width: 768px){

  /* HEADER */
  .header{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding:8px 12px;
  }

  /* LOGO */
  .logo{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
  }

  .logo a{
    width:100%;
    text-align:center;
    font-size:17px;
  }

  /* USER */
  .user-nav{
    width:100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:5px;
    padding:0 5px;
  }

  .nav-button{
    padding:5px 10px;
    font-size:12px;
  }

  /* SEARCH */
  .search-bar{
    width:100%;
  }

  .search-bar input{
    width:100%;
    max-width:100%;
    padding:8px 10px;
    font-size:13px;
  }

  /* CATEGORÍAS */
  .categories-nav{
    width:100%;
    display:flex;
    justify-content:center;
  }

  .dropdown-toggle{
    padding:8px 16px;
    font-size:13px;
    text-align:center;

    /* 🔥 dinámico */
    background:var(--bg-card);

    border-radius:6px;
  }

  /* MENU */
  .dropdown-menu{
    left:50%;
    transform:translateX(-50%);
    max-width:90vw;
  }

  /* SUBMENU */
  .dropdown-submenu{
    position:static;
    display:none;
    width:100%;
    margin-top:8px;
  }

  .dropdown-menu li.active > .dropdown-submenu{
    display:block;
  }

  .dropdown-submenu li a{
    padding-left:18px;
    text-align:left;
    font-size:13px;
  }

}

@media (max-width: 768px){

/* ============================= */
/* 📱 MOBILE OPTIMIZED PRO */
/* ============================= */

@media (max-width: 768px){

  /* ============================= */
  /* 🎬 CARRUSEL */
  /* ============================= */

  .carousel-container{
    height:260px;
    border:1px solid var(--border-color);
  }

  .carousel-slide img{
    transition:transform 3s linear;
  }

  .slide-content{
    padding:18px;
    background:linear-gradient(transparent, rgba(0,0,0,0.85));
  }

  .slide-content h2{
    font-size:18px;
    color:var(--text-main);
  }

  .slide-content p{
    font-size:13px;
    color:var(--text-secondary);
  }

  .slide-button{
    padding:8px 14px;
    font-size:12px;
    background:var(--accent);
    color:#000;
  }

  /* ============================= */
  /* 🧱 PRODUCTOS */
  /* ============================= */

  .product-grid{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:15px;
  }

  .product-card{
    background:var(--bg-card);
    border:1px solid var(--border-color);
  }

  .product-image{
    height:120px;
  }

  .product-name{
    font-size:14px;
    color:var(--text-main);
  }

  .product-price{
    font-size:14px;
    color:var(--accent);
  }

  /* ============================= */
  /* 🎯 BOTONES */
  /* ============================= */

  .add-to-cart-btn{
    padding:6px;
    font-size:12px;
    border:1px solid var(--accent);
    color:var(--accent);
  }

  .add-to-cart-btn:hover{
    background:var(--accent);
    color:#000;
  }

  /* ============================= */
  /* 🧠 BENEFITS */
  /* ============================= */

  .benefits-grid{
    grid-template-columns:1fr;
    gap:15px;
  }

  .benefit-card{
    background:var(--bg-card);
    border:1px solid var(--border-color);
  }

  /* ============================= */
  /* 🔻 FOOTER */
  /* ============================= */

  .footer{
    padding:40px 20px 20px;
    background:var(--bg-card);
  }

  .footer p{
    font-size:13px;
    color:var(--text-secondary);
  }

}

}

/* 🌫️ FONDO (blur + fade PRO) */
.theme-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  backdrop-filter: blur(16px);
  background: rgba(0,0,0,0.55);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease;

  z-index: 9999;
}

.theme-modal.active {
  opacity: 1;
  pointer-events: all;
}

/* 🧊 CAJA (THEME DINÁMICO) */
.theme-content {
  background: var(--bg-card);
  color: var(--text-main);

  padding: 35px;
  border-radius: 18px;
  text-align: center;
  min-width: 280px;

  border: 1px solid var(--border-color);

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);

  transform: scale(0.9);
  opacity: 0;
  transition: all 0.3s ease;

  pointer-events: auto;
}

/* 🔥 ENTRADA */
.theme-modal.active .theme-content {
  transform: scale(1);
  opacity: 1;
}

/* 🧠 TÍTULO */
.theme-content h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

/* 🎨 BOTONES BASE */
.theme-content button {
  width: 100%;
  margin-top: 12px;
  padding: 12px;

  border: none;
  border-radius: 10px;

  cursor: pointer;
  font-weight: bold;
  font-size: 15px;

  transition: all 0.25s ease;
}

/* ☀️ MODO CLARO */
.theme-content button:nth-child(2) {
  background: #f1f1f1;
  color: #111;
}

.theme-content button:nth-child(2):hover {
  background: #e0e0e0;
  transform: translateY(-2px);
}

/* 🌙 MODO OSCURO */
.theme-content button:nth-child(3) {
  background: #121212;
  color: #fff;
}

.theme-content button:nth-child(3):hover {
  background: #1f1f1f;
  transform: translateY(-2px);
}

/* 💥 EFECTO CLICK */
.theme-content button:active {
  transform: scale(0.96);
}

/* ✨ EFECTO EXTRA CYBER */
.theme-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;

  border: 1px solid var(--accent);
  opacity: 0.2;

  pointer-events: none;
}

/* ============================= */
/* 🔥 FIX GENERAL INTERACCIONES */
/* ============================= */

/* evita overlays invisibles del carrusel */
.carousel-slide::after{
  pointer-events: none !important;
}

/* solo slide activo recibe interacción */
.carousel-slide{
  pointer-events: none;
}

.carousel-slide.active{
  pointer-events: auto;
}

/* ============================= */
/* 🔥 FIX MODO CLARO (CAPAS) */
/* ============================= */

body.light .main-content,
body.light section{
  position: relative;
  z-index: 2;
}

/* ============================= */
/* 🔥 FIX MOBILE HOVER BUG */
/* ============================= */

@media (hover: none){

  /* eliminar efectos hover en touch */

  .nav-button:hover,
  .footer-links a:hover,
  .social-icons a:hover,
  .add-to-cart-btn:hover,
  .dropdown-menu a:hover,
  .plan:hover,
  .card:hover,
  .product-card:hover{

    background: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: inherit !important;
  }

}

/* ============================= */
/* 🔥 FIX TOUCH UI */
/* ============================= */

/* elimina highlight azul feo */
*{
  -webkit-tap-highlight-color: transparent;
}

/* evita zoom raro en inputs (iOS) */
input, textarea, select{
  font-size:16px;
}

/* ============================= */
/* 🔥 EXTRA ESTABILIDAD */
/* ============================= */

/* evita que elementos invisibles bloqueen clicks */
[style*="opacity: 0"]{
  pointer-events: none !important;
}

/* ============================= */
/* 🔥 FIX MODAL FANTASMA */
/* ============================= */

.theme-modal{
  opacity: 0;
  pointer-events: none;
  visibility: hidden; /* 🔥 CLAVE */
}

/* cuando está activo */
.theme-modal.active{
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

/* ============================= */
/* 🔥 FIX SEGURO (RECOMENDADO) */
/* ============================= */

/* solo para elementos ocultos del sistema */
.theme-modal:not(.active),
.cx-intro[style*="opacity: 0"]{
  pointer-events: none !important;
}

/* ============================= */
/* 🔔 NOTIFICACIONES CYBER ULTRA */
/* ============================= */

.notif-box{
  position:fixed;

  /* 🔥 MÁS ARRIBA (tipo app real) */
  bottom:100px;

  left:50%;
  transform:translateX(-50%) translateY(40px) scale(.92);

  width:90%;
  max-width:400px;

  padding:20px;

  border-radius:18px;

  backdrop-filter:blur(16px);

  z-index:9999;

  opacity:0;
  pointer-events:none;

  transition: all .45s cubic-bezier(.22,1,.36,1);
}

/* ============================= */
/* 🌙 MODO OSCURO */
/* ============================= */

body.dark .notif-box{
  background:rgba(15,23,42,.95);
  border:1px solid rgba(0,255,255,.18);

  box-shadow:
    0 0 25px rgba(0,255,255,.12),
    0 10px 40px rgba(0,0,0,.6);
}

/* ============================= */
/* ☀️ MODO CLARO */
/* ============================= */

body.light .notif-box{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,200,255,.25);

  box-shadow:
    0 10px 30px rgba(0,200,255,.12),
    0 10px 40px rgba(0,0,0,.1);
}

/* ============================= */
/* 🔥 MOSTRAR */
/* ============================= */

.notif-box.show{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* ============================= */
/* CONTENIDO */
/* ============================= */

.notif-content h3{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
  letter-spacing:.3px;
}

body.dark .notif-content h3{
  color:#00ffff;
  text-shadow:0 0 10px rgba(0,255,255,.4);
}

body.light .notif-content h3{
  color:#00bcd4;
}

.notif-content p{
  font-size:13px;
  margin-bottom:16px;
  line-height:1.5;
}

body.dark .notif-content p{
  color:#94a3b8;
}

body.light .notif-content p{
  color:#555;
}

/* ============================= */
/* BOTONES */
/* ============================= */

.notif-actions{
  display:flex;
  gap:10px;
}

/* base */

.notif-actions button{
  flex:1;
  padding:11px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
  font-size:13px;
}

/* 🔥 ACEPTAR */

#notif-allow{
  background:linear-gradient(135deg,#00ffff,#00bcd4);
  color:#001;
  box-shadow:0 0 12px rgba(0,255,255,.3);
}

#notif-allow:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 18px rgba(0,255,255,.6);
}

/* ❌ RECHAZAR */

#notif-deny{
  background:transparent;
}

body.dark #notif-deny{
  border:1px solid #64748b;
  color:#cbd5e1;
}

body.light #notif-deny{
  border:1px solid #ccc;
  color:#333;
}

#notif-deny:hover{
  border-color:#00bcd4;
  color:#00bcd4;
  transform:translateY(-1px);
}

/* ============================= */
/* ✨ EFECTO EXTRA (GLOW TOP) */
/* ============================= */

.notif-box::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:2px;

  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.6;
  border-radius:10px;
}

/* ============================= */
/* 📱 RESPONSIVE */
/* ============================= */

@media(max-width:500px){

  .notif-box{
    bottom:90px;
    padding:18px;
  }

}