:root{
    --bg:#071a3a;
    --bg-2:#081a38;
    --bg-3:#07162f;
    --card:#142c5e;
    --card-soft:rgba(20,44,94,0.82);
    --card-border:rgba(255,255,255,0.08);
    --text:#ffffff;
    --text-soft:#d6dceb;
    --primary:#3563ff;
    --primary-2:#4c7dff;
    --green:#25D366;
    --red:#ff4d4d;
    --shadow-sm:0 8px 18px rgba(0,0,0,0.14);
    --shadow-md:0 12px 24px rgba(0,0,0,0.18);
    --shadow-lg:0 16px 30px rgba(0,0,0,0.22);
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:24px;
    --transition:.22s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    line-height:1.5;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
select,
textarea{
    font:inherit;
}

a{
    color:inherit;
}

/* =========================
   FONDO
========================= */
#particles-js{
    position:fixed;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at top, rgba(58,108,255,0.10), transparent 28%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
}

/* =========================
   PROMO BAR
========================= */
.promo-bar{
    background:linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 100%);
    color:white;
    text-align:center;
    padding:10px 14px;
    font-size:14px;
    font-weight:600;
    letter-spacing:.2px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    position:relative;
    z-index:1002;
}

/* =========================
   HEADER
========================= */
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:16px 40px;
    background:rgba(6,19,39,0.94);
    border-bottom:1px solid rgba(255,255,255,0.07);
    box-shadow:var(--shadow-sm);
    position:sticky;
    top:0;
    z-index:1001;
}

.logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    perspective:800px;
    flex-shrink:0;
}

.logo a{
    display:flex;
    align-items:center;
}

.logo img{
    width:148px;
    height:auto;
    animation:spinTrompo 7s linear infinite;
}

@keyframes spinTrompo{
    0%{transform:rotateY(0deg);}
    100%{transform:rotateY(360deg);}
}

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

nav a{
    text-decoration:none;
    color:white;
    font-size:15px;
    font-weight:600;
    transition:color var(--transition), opacity var(--transition), transform var(--transition);
    opacity:.92;
    position:relative;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:2px;
    background:var(--primary-2);
    border-radius:999px;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform var(--transition);
}

nav a:hover{
    color:#dce6ff;
    opacity:1;
}

nav a:hover::after{
    transform:scaleX(1);
}

.cart-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:white;
    cursor:pointer;
    font-size:18px;
    font-weight:700;
    min-width:56px;
    height:48px;
    padding:0 14px;
    border-radius:16px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    transition:transform var(--transition), background var(--transition), border-color var(--transition);
    flex-shrink:0;
}

.cart-icon:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.08);
    border-color:rgba(76,125,255,0.35);
}

#cart-count{
    background:white;
    color:var(--primary);
    border-radius:999px;
    min-width:24px;
    height:24px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:800;
}

.menu-toggle{
    display:none;
    font-size:26px;
    cursor:pointer;
    color:white;
    line-height:1;
    user-select:none;
    width:46px;
    height:46px;
    border-radius:14px;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    transition:background var(--transition), transform var(--transition);
}

.menu-toggle:hover{
    background:rgba(255,255,255,0.1);
}

#menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.54);
    opacity:0;
    pointer-events:none;
    transition:.3s;
    z-index:999;
}

#menu-overlay.active{
    opacity:1;
    pointer-events:auto;
}

/* =========================
   HERO
========================= */
.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:54px;
    padding:86px 80px 64px;
    min-height:540px;
    position:relative;
}

.hero-text{
    max-width:570px;
}

.hero-text h1{
    font-size:68px;
    line-height:1.02;
    margin-bottom:22px;
    letter-spacing:-2px;
}

.hero-text p{
    font-size:18px;
    color:var(--text-soft);
    margin-bottom:28px;
    max-width:480px;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.btn1,
.btn2{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    border:none;
    padding:14px 30px;
    border-radius:16px;
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
    transition:transform var(--transition), filter var(--transition);
}

.btn1:hover,
.btn2:hover{
    transform:translateY(-2px);
    filter:brightness(1.03);
}

.btn1{
    background:linear-gradient(135deg, #2f5cff 0%, var(--primary) 55%, var(--primary-2) 100%);
}

.btn2{
    background:linear-gradient(135deg, #1cc35d 0%, var(--green) 100%);
}

.hero-image{
    flex:1;
    display:flex;
    justify-content:center;
}

.hero-image img{
    width:430px;
    max-width:100%;
}

/* =========================
   ENVÍOS
========================= */
.envios{
    margin-top:26px;
    text-align:left;
    padding:18px 20px;
    border-radius:20px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:var(--shadow-sm);
    width:fit-content;
    max-width:100%;
}

.envios p{
    font-size:14px;
    margin-bottom:10px;
    opacity:.95;
    font-weight:500;
}

.envios-logos{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    opacity:.88;
}

.envios-logos img{
    height:22px;
    object-fit:contain;
    transition:transform var(--transition), opacity var(--transition);
    opacity:.95;
}

.envios-logos img:hover{
    transform:scale(1.04);
    opacity:1;
}

.envios-trust{
    margin-top:12px;
    font-size:14px;
    font-weight:700;
    color:#93b0ff;
    background:rgba(76,125,255,0.14);
    padding:9px 14px;
    border-radius:12px;
    display:inline-block;
}

/* =========================
   CATEGORÍAS
========================= */
.categorias{
    display:flex;
    justify-content:center;
    gap:24px;
    padding:12px 80px 72px;
    flex-wrap:wrap;
}

.categoria{
    background:linear-gradient(180deg, rgba(23,54,109,0.94) 0%, rgba(16,41,85,0.96) 100%);
    width:240px;
    min-height:238px;
    border-radius:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:28px 20px;
    transition:transform var(--transition), border-color var(--transition);
    text-decoration:none;
    color:white;
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:var(--shadow-md);
}

.categoria:hover{
    transform:translateY(-4px);
    border-color:rgba(76,125,255,0.30);
}

.categoria img{
    width:98px;
    height:auto;
    margin-bottom:18px;
    object-fit:contain;
}

.categoria h3{
    font-size:19px;
    line-height:1.3;
}

/* =========================
   SEARCH + FILTERS
========================= */
.catalog-tools{
    padding:16px 80px 0;
}

.search-section{
    padding:0;
}

.search-box{
    position:relative;
    max-width:880px;
    margin:0 auto;
    width:100%;
}

#product-search{
    width:100%;
    height:62px;
    padding:0 58px 0 20px;
    border:none;
    border-radius:20px;
    background:rgba(18,42,88,0.96);
    color:white;
    font-size:16px;
    outline:none;
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:var(--shadow-md);
    transition:border-color var(--transition), box-shadow var(--transition);
}

#product-search:focus{
    border-color:rgba(76,125,255,0.40);
    box-shadow:0 0 0 3px rgba(53,99,255,0.12);
}

#product-search::placeholder{
    color:#dbe5ff;
}

.search-icon{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    opacity:.95;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    z-index:2;
}

.search-suggestions{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:100%;
    background:rgba(12,28,62,0.98);
    border-radius:18px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    display:none;
    z-index:100;
    border:1px solid rgba(255,255,255,0.08);
}

.suggestion-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    cursor:pointer;
    transition:background var(--transition);
}

.suggestion-item:hover{
    background:#1a3470;
}

.suggestion-item img{
    width:48px;
    height:48px;
    object-fit:cover;
    border-radius:10px;
    background:rgba(255,255,255,0.04);
}

.suggestion-info{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.suggestion-info span{
    font-size:14px;
}

.suggestion-price{
    font-size:13px;
    opacity:.76;
}

.no-suggestion{
    padding:14px;
    text-align:center;
    opacity:.75;
    font-size:14px;
}

/* =========================
   FILTROS
========================= */
.filters{
    padding:18px 0 0;
}

.filters-container{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    max-width:900px;
    margin:0 auto;
}

.filter-btn{
    padding:12px 20px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(20,44,94,0.92);
    color:white;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:background var(--transition), transform var(--transition), border-color var(--transition);
}

.filter-btn:hover{
    background:#1f3f8a;
    transform:translateY(-1px);
    border-color:rgba(76,125,255,0.30);
}

.filter-btn.active{
    background:#2d6cff;
    border-color:rgba(255,255,255,0.16);
}

mark{
    background:rgba(255,221,87,0.25);
    color:white;
    padding:0 4px;
    border-radius:6px;
}

/* =========================
   SECCIONES
========================= */
.packs,
.sueltos{
    padding:86px 80px;
    text-align:center;
}

.sueltos{
    background:linear-gradient(180deg, rgba(12,35,74,0.94) 0%, rgba(8,26,56,0.75) 100%);
}

.packs h2,
.sueltos h2{
    font-size:42px;
    margin-bottom:16px;
    letter-spacing:-1px;
}

.categoria-seccion{
    scroll-margin-top:130px;
    padding-top:34px;
}

.titulo-categoria-productos{
    scroll-margin-top:140px;
    font-size:28px;
    margin-bottom:24px;
    text-align:left;
}

/* =========================
   PRODUCTOS
========================= */
.productos{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:stretch;
    gap:24px;
    flex-wrap:nowrap;
    width:100%;
    overflow-x:auto;
    padding:10px 0 20px;
    scrollbar-width:thin;
    scrollbar-color:rgba(76,125,255,0.55) transparent;
}

.productos::-webkit-scrollbar{
    height:8px;
}

.productos::-webkit-scrollbar-track{
    background:transparent;
}

.productos::-webkit-scrollbar-thumb{
    background:rgba(76,125,255,0.45);
    border-radius:999px;
}

.producto{
    background:rgba(20,44,94,0.92);
    border-radius:24px;
    padding:26px 22px 22px;
    width:260px;
    min-width:260px;
    text-align:center;
    border:1px solid rgba(255,255,255,0.10);
    transition:transform var(--transition), border-color var(--transition);
    box-shadow:var(--shadow-md);
}

.producto:hover{
    transform:translateY(-4px);
    border-color:rgba(76,125,255,0.42);
}

.producto img{
    width:116px;
    height:116px;
    object-fit:contain;
    margin:0 auto 16px;
    transition:transform var(--transition);
}

.producto:hover img{
    transform:scale(1.03);
}

.producto h3{
    font-size:19px;
    line-height:1.3;
    margin-bottom:10px;
    min-height:50px;
}

.producto button{
    width:100%;
    min-height:46px;
    background:linear-gradient(135deg, #2f5cff 0%, var(--primary) 55%, var(--primary-2) 100%);
    border:none;
    padding:11px 18px;
    border-radius:14px;
    color:white;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    transition:transform var(--transition), filter var(--transition);
}

.producto button:hover{
    transform:translateY(-1px);
    filter:brightness(1.04);
}

.producto .precio{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}

.precio-antes{
    text-decoration:line-through;
    color:#9aa8c7;
    font-size:14px;
}

.badge-descuento{
    display:inline-block;
    align-self:center;
    background:linear-gradient(135deg, #ff4d4d 0%, #ff6b6b 100%);
    color:white;
    font-size:11px;
    font-weight:800;
    padding:5px 10px;
    border-radius:999px;
    margin-bottom:4px;
    letter-spacing:.35px;
}

.precio-ahora{
    color:var(--green);
    font-size:24px;
    font-weight:800;
}

.precio-ahora::before{
    content:"🔥 ";
}

.selector-modelo{
    margin-bottom:14px;
    text-align:left;
}

.selector-modelo label{
    font-size:14px;
    margin-bottom:7px;
    display:block;
    opacity:.92;
    font-weight:600;
}

.selector-modelo select{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:#142c5e;
    color:white;
    font-size:14px;
    cursor:pointer;
    outline:none;
}

.selector-modelo select:focus{
    border-color:rgba(76,125,255,0.40);
    box-shadow:0 0 0 3px rgba(53,99,255,0.10);
}

.cantidad{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.cantidad button{
    background:#1f3f8a;
    border:none;
    color:white;
    width:30px;
    min-height:30px;
    height:30px;
    border-radius:9px;
    cursor:pointer;
    font-size:16px;
    font-weight:700;
    box-shadow:none;
    padding:0;
}

.cantidad button:hover{
    background:#2d6cff;
    transform:none;
    filter:none;
    box-shadow:none;
}

.cantidad span{
    font-size:16px;
    font-weight:800;
    min-width:22px;
}

.ver-mas{
    display:inline-block;
    margin-top:12px;
    color:#b5c8ff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:color var(--transition), transform var(--transition);
}

.ver-mas:hover{
    color:white;
    transform:translateY(-1px);
}

.btn-pack{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:48px;
    background:linear-gradient(135deg, #2f5cff 0%, var(--primary) 55%, var(--primary-2) 100%);
    color:white;
    padding:12px 20px;
    border:none;
    border-radius:14px;
    text-decoration:none;
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    transition:transform var(--transition), filter var(--transition);
}

.btn-pack:hover{
    transform:translateY(-1px);
    filter:brightness(1.04);
}

.empty-category,
.empty-search{
    width:100%;
    text-align:center;
    opacity:.8;
    padding:20px;
}

/* =========================
   COMO COMPRAR
========================= */
.como-comprar{
    padding:88px 40px;
    text-align:center;
    background:#071a3a;
}

.como-comprar h2{
    font-size:40px;
    margin-bottom:50px;
    letter-spacing:-1px;
}

.pasos{
    display:flex;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap;
}

.paso{
    background:rgba(20,44,94,0.90);
    padding:30px 24px;
    border-radius:22px;
    width:220px;
    transition:transform var(--transition), border-color var(--transition);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:var(--shadow-sm);
}

.paso:hover{
    transform:translateY(-4px);
    border-color:rgba(76,125,255,0.30);
}

.numero{
    width:48px;
    height:48px;
    background:linear-gradient(135deg, #2f5cff 0%, var(--primary-2) 100%);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:18px;
    margin:0 auto 16px;
}

.paso h3{
    margin-bottom:10px;
    font-size:18px;
}

.paso p{
    opacity:.84;
    font-size:14px;
    line-height:1.5;
}

/* =========================
   BENEFICIOS
========================= */
.beneficios{
    display:flex;
    justify-content:center;
    gap:18px;
    padding:34px 40px 46px;
    background:#0d1f45;
    flex-wrap:wrap;
}

.beneficios div{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
    padding:14px 18px;
    font-weight:600;
}

/* =========================
   FOOTER
========================= */
.footer{
    background:transparent;
    color:#d6dceb;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 40px 34px;
    margin-top:20px;
    gap:18px;
}

.footer-left{
    display:flex;
    gap:15px;
    align-items:center;
    font-size:14px;
    flex-wrap:wrap;
}

.footer-right a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.footer-right img{
    width:40px;
    height:40px;
    opacity:.88;
    transition:opacity var(--transition), transform var(--transition);
}

.footer-right img:hover{
    opacity:1;
    transform:scale(1.04);
}

/* =========================
   CARRITO
========================= */
.cart-panel{
    position:fixed;
    top:0;
    right:-380px;
    width:380px;
    max-width:100%;
    height:100vh;
    background:rgba(13,31,69,0.98);
    box-shadow:-12px 0 28px rgba(0,0,0,0.30);
    transition:right .3s ease;
    z-index:9999;
    display:flex;
    flex-direction:column;
    border-left:1px solid rgba(255,255,255,0.08);
}

.cart-panel.open{
    right:0;
}

.cart-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.cart-header h2{
    font-size:28px;
    margin:0;
}

.close-cart{
    background:none;
    border:none;
    color:white;
    font-size:22px;
    cursor:pointer;
}

.cart-items{
    flex:1;
    overflow-y:auto;
    padding:20px;
}

.cart-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(20,44,94,0.92);
    padding:12px;
    border-radius:16px;
    margin-bottom:12px;
    border:1px solid rgba(255,255,255,0.06);
}

.cart-thumb{
    width:58px;
    height:58px;
    object-fit:contain;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    padding:6px;
}

.cart-item-info{
    flex:1;
}

.cart-item-info h4{
    font-size:15px;
    margin:0 0 5px 0;
    line-height:1.3;
}

.cart-item-info p{
    margin:0 0 4px 0;
    opacity:.82;
    font-size:13px;
}

.cart-qty{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.cart-qty button{
    width:28px;
    height:28px;
    min-height:28px;
    border:none;
    border-radius:8px;
    background:var(--primary);
    color:white;
    font-size:16px;
    cursor:pointer;
}

.cart-qty span{
    min-width:20px;
    text-align:center;
    font-weight:800;
}

.remove-btn{
    background:var(--red);
    border:none;
    color:white;
    padding:8px 10px;
    border-radius:10px;
    cursor:pointer;
    font-size:13px;
    font-weight:700;
}

.cart-footer{
    padding:20px;
    border-top:1px solid rgba(255,255,255,0.1);
    background:rgba(8,21,45,0.78);
}

.checkout-btn{
    width:100%;
    background:linear-gradient(135deg, #1cc35d 0%, var(--green) 100%);
    color:white;
    border:none;
    padding:14px;
    border-radius:14px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    margin-top:12px;
}

.clear-cart-btn{
    width:100%;
    background:linear-gradient(135deg, #ff4d4d 0%, #ff6969 100%);
    color:white;
    border:none;
    padding:12px;
    border-radius:14px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    margin-top:10px;
    transition:transform var(--transition), filter var(--transition);
}

.clear-cart-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.02);
}

.clear-cart-btn:active{
    transform:scale(.98);
}

.empty-cart{
    opacity:.7;
    text-align:center;
    margin-top:30px;
}

/* =========================
   SHIPPING
========================= */
.shipping-progress-container{
    margin-bottom:15px;
    text-align:center;
}

.shipping-progress-text{
    font-size:13px;
    margin-bottom:8px;
    opacity:.92;
}

.shipping-progress-bar{
    width:100%;
    height:10px;
    background:#142c5e;
    border-radius:10px;
    overflow:hidden;
}

#shipping-progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--primary),var(--green));
    transition:width .4s ease;
}

.shipping-message{
    margin-top:10px;
    padding:10px;
    border-radius:12px;
    font-size:14px;
    font-weight:700;
    text-align:center;
    color:white;
}

.shipping-free{
    background:var(--green);
}

.shipping-warning{
    background:var(--primary);
}

/* =========================
   CHECKOUT
========================= */
.checkout-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,0.68);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:10000;
    padding:20px;
}

.checkout-modal.active{
    display:flex;
}

.checkout-box{
    background:rgba(13,31,69,0.98);
    width:100%;
    max-width:540px;
    border-radius:22px;
    padding:30px;
    position:relative;
    box-shadow:0 18px 36px rgba(0,0,0,0.30);
    max-height:90vh;
    overflow-y:auto;
    border:1px solid rgba(255,255,255,0.08);
}

.close-checkout{
    position:absolute;
    top:15px;
    right:15px;
    background:none;
    border:none;
    color:white;
    font-size:22px;
    cursor:pointer;
}

.checkout-box h2{
    margin-bottom:20px;
    font-size:28px;
}

.checkout-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:14px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-size:14px;
    color:#d6dceb;
    margin-bottom:6px;
    opacity:.95;
    text-align:left;
    font-weight:600;
}

.form-group.full{
    grid-column:span 6;
}

.form-group.half{
    grid-column:span 3;
}

.form-group.third{
    grid-column:span 2;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:14px;
    border:none;
    border-radius:14px;
    background:#142c5e;
    color:white;
    font-size:15px;
    outline:none;
    border:1px solid rgba(255,255,255,0.08);
    transition:border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:rgba(76,125,255,0.44);
    box-shadow:0 0 0 3px rgba(53,99,255,0.10);
}

.form-group select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    cursor:pointer;
}

.form-group textarea{
    min-height:90px;
    resize:none;
}

.confirm-btn,
.whatsapp-order-btn{
    width:100%;
    border:none;
    padding:14px;
    border-radius:14px;
    color:white;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    margin-top:10px;
    transition:transform var(--transition), filter var(--transition);
}

.confirm-btn:hover,
.whatsapp-order-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.03);
}

.confirm-btn{
    background:linear-gradient(135deg, #2f5cff 0%, var(--primary) 55%, var(--primary-2) 100%);
}

.whatsapp-order-btn{
    background:linear-gradient(135deg, #1cc35d 0%, var(--green) 100%);
}

.transfer-info,
.client-summary{
    background:#142c5e;
    padding:16px;
    border-radius:14px;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,0.08);
}

.transfer-info p,
.client-summary p{
    margin-bottom:8px;
    line-height:1.5;
}

.client-summary h3{
    margin-bottom:12px;
}

.payment-methods{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:16px;
}

.payment-card{
    background:#142c5e;
    padding:16px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
}

.payment-card h3{
    margin-bottom:12px;
    font-size:18px;
    color:#ffffff;
}

.total-card{
    background:#17366d;
    padding:16px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
}

/* =========================
   PÁGINA PRODUCTO
========================= */
.detalle-pack{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:60px;
    padding:84px 80px;
    flex-wrap:wrap;
}

.detalle-imagen img{
    width:350px;
    max-width:100%;
}

.detalle-info{
    max-width:520px;
    flex:1;
}

.detalle-info h1{
    font-size:44px;
    line-height:1.06;
    margin-bottom:14px;
    letter-spacing:-1px;
}

.detalle-info .precio{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-bottom:18px;
}

.detalle-info h3{
    margin-bottom:12px;
    font-size:22px;
}

.detalle-info ul{
    margin-bottom:22px;
    padding-left:20px;
}

.detalle-info li{
    margin-bottom:10px;
    line-height:1.5;
}

.descripcion{
    margin-bottom:25px;
    opacity:.9;
    line-height:1.7;
    color:#dde6fb;
}

.pack-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:22px 0 20px;
    width:100%;
}

.pack-buttons-top{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:14px;
    width:100%;
}

.pack-qty-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:58px;
    padding:0 14px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:18px;
    box-shadow:var(--shadow-sm);
    margin-bottom:0;
}

.pack-qty-box button{
    width:34px;
    height:34px;
    min-height:34px;
    border:none;
    border-radius:10px;
    background:transparent;
    color:#ffffff;
    cursor:pointer;
    font-size:24px;
    line-height:1;
    transition:background var(--transition), transform var(--transition), color var(--transition);
    box-shadow:none;
    padding:0;
}

.pack-qty-box button:hover{
    background:rgba(76,125,255,0.18);
    color:#9cb7ff;
    transform:scale(1.04);
    box-shadow:none;
    filter:none;
}

.pack-qty-box .num{
    min-width:28px;
    text-align:center;
    font-size:20px;
    font-weight:700;
    color:#ffffff;
}

.pack-add-cart-btn{
    min-height:58px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg, #2f5cff 0%, var(--primary) 55%, var(--primary-2) 100%);
    color:#ffffff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:transform var(--transition), filter var(--transition);
}

.pack-add-cart-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.03);
}

.buy-now{
    width:100%;
    min-height:58px;
    border:none;
    border-radius:18px;
    background:linear-gradient(135deg, #05070d 0%, #0d1220 100%) !important;
    color:white;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:transform var(--transition), filter var(--transition);
}

.buy-now:hover{
    transform:translateY(-1px);
    filter:brightness(1.04);
}

/* =========================
   RECOMENDADOS
========================= */
.recomendados{
    padding:74px 80px 86px;
    text-align:center;
}

.recomendados-titulo{
    font-size:34px;
    margin-bottom:35px;
    color:white;
    letter-spacing:-1px;
}

.recomendados-grid{
    justify-content:center;
    flex-wrap:wrap;
    overflow:visible;
    gap:20px;
}

.recomendados .producto{
    width:220px;
    min-width:220px;
}

.recomendados .producto button{
    margin-top:8px;
}

/* =========================
   CARRUSEL PRODUCTO
========================= */
.carousel{
    position:relative;
    width:100%;
    max-width:420px;
    margin:auto;
    overflow:hidden;
    border-radius:24px;
    background:rgba(20,44,94,0.86);
    padding:16px;
    touch-action:pan-y;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:var(--shadow-md);
}

.carousel-track{
    display:flex;
    transition:transform .4s ease;
}

.carousel-item{
    min-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.carousel-item img,
.carousel-item video{
    width:100%;
    max-height:350px;
    object-fit:contain;
    border-radius:16px;
    display:block;
}

.carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:rgba(6,19,39,0.90);
    color:white;
    font-size:20px;
    cursor:pointer;
    z-index:10;
    transition:background var(--transition), transform var(--transition);
    display:flex;
    align-items:center;
    justify-content:center;
}

.carousel-btn:hover{
    background:var(--primary);
    transform:translateY(-50%) scale(1.05);
}

.carousel-btn.left{
    left:10px;
}

.carousel-btn.right{
    right:10px;
}

.carousel video::-webkit-media-controls-volume-slider,
.carousel video::-webkit-media-controls-mute-button{
    display:none !important;
}

/* =========================
   SOCIAL / WHATSAPP
========================= */
.whatsapp-container{
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:999;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}

.whatsapp-container.show{
    opacity:1;
    pointer-events:auto;
}

.whatsapp-msg,
.social-msg{
    background:white;
    color:#0d1f45;
    padding:12px 14px;
    border-radius:14px;
    font-size:14px;
    line-height:1.3;
    box-shadow:var(--shadow-md);
    font-weight:600;
}

.whatsapp-msg span,
.social-msg span{
    font-size:12px;
    opacity:.8;
    font-weight:500;
}

.whatsapp-float{
    width:60px;
    height:60px;
    background:var(--green);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-md);
    transition:transform var(--transition);
}

.whatsapp-float:hover{
    transform:scale(1.05);
}

.whatsapp-float img{
    width:32px;
    height:32px;
}

.social-container{
    position:fixed;
    bottom:20px;
    right:20px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    z-index:999;
}

.social-btn{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-md);
    transition:transform var(--transition);
    cursor:pointer;
    border:1px solid rgba(255,255,255,0.08);
}

.social-btn img{
    width:26px;
    height:26px;
}

.social-btn.whatsapp{
    background:var(--green);
}

.social-btn.instagram{
    background:linear-gradient(45deg,#feda75,#d62976,#962fbf,#4f5bd5);
}

.social-btn.tiktok{
    background:#000;
}

.social-btn:hover{
    transform:scale(1.05) translateY(-2px);
}

/* =========================
   TOAST
========================= */
.toast{
    position:fixed;
    top:96px;
    right:25px;
    background:var(--green);
    color:white;
    padding:14px 18px;
    border-radius:14px;
    box-shadow:var(--shadow-md);
    font-size:15px;
    font-weight:700;
    opacity:0;
    transform:translateY(-20px);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    z-index:10000;
}

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

/* =========================
   RESPONSIVE PRO MOBILE
========================= */
@media (max-width: 768px){
    .promo-bar{
        font-size:12px;
        padding:8px 10px;
    }

    header{
        padding:12px 16px;
        gap:10px;
    }

    .logo img{
        width:98px;
        animation:none;
    }

    .menu-toggle{
        display:flex;
        order:2;
        margin-left:auto;
    }

    nav{
        position:fixed;
        top:0;
        right:-100%;
        width:82%;
        max-width:320px;
        height:100vh;
        background:rgba(6,19,39,0.98);
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        padding:88px 20px 20px;
        gap:6px;
        transition:right .3s ease;
        z-index:1000;
        box-shadow:-10px 0 30px rgba(0,0,0,0.35);
        margin-left:0;
        border-left:1px solid rgba(255,255,255,0.08);
    }

    nav a{
        width:100%;
        font-size:18px;
        padding:14px 0;
        border-bottom:1px solid rgba(255,255,255,0.08);
    }

    nav a::after{
        display:none;
    }

    nav.active{
        right:0;
    }

    .cart-icon{
        order:3;
        font-size:15px;
        gap:6px;
        min-width:50px;
        height:44px;
        padding:0 12px;
        border-radius:14px;
    }

    #cart-count{
        font-size:11px;
        min-width:22px;
        height:22px;
    }

    .hero{
        flex-direction:column;
        text-align:center;
        padding:30px 16px 20px;
        gap:22px;
        min-height:auto;
    }

    .hero-text{
        max-width:100%;
    }

    .hero-text h1{
        font-size:36px;
        line-height:1.04;
        margin-bottom:14px;
        letter-spacing:-1.5px;
    }

    .hero-text p{
        font-size:15px;
        margin-bottom:18px;
        max-width:100%;
    }

    .hero-actions{
        flex-direction:column;
        gap:10px;
    }

    .btn1,
    .btn2{
        width:100%;
        margin:0;
        min-height:50px;
        padding:13px 18px;
        font-size:15px;
        border-radius:14px;
    }

    .hero-image img{
        width:78%;
        max-width:280px;
        margin:0 auto;
    }

    .envios{
        text-align:center;
        margin-top:18px;
        width:100%;
        padding:16px 14px;
        border-radius:18px;
    }

    .envios-logos{
        justify-content:center;
        gap:14px;
    }

    .envios-logos img{
        height:18px;
    }

    .envios-trust{
        font-size:12px;
        padding:7px 10px;
    }

    .categorias{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:12px;
        padding:18px 16px 26px;
    }

    .categoria{
        width:100%;
        min-height:156px;
        padding:16px 12px;
        border-radius:18px;
    }

    .categoria img{
        width:58px;
        margin-bottom:10px;
    }

    .categoria h3{
        font-size:14px;
    }

    .catalog-tools{
        padding:16px 16px 0;
    }

    .search-box{
        max-width:100%;
    }

    #product-search{
        height:54px;
        font-size:15px;
        padding:0 48px 0 16px;
        border-radius:16px;
    }

    .search-icon{
        right:15px;
        font-size:18px;
    }

    .search-suggestions{
        border-radius:14px;
    }

    .suggestion-item{
        padding:10px 12px;
    }

    .suggestion-item img{
        width:40px;
        height:40px;
    }

    .filters{
        padding:14px 0 0;
    }

    .filters-container{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:8px;
        gap:10px;
        scrollbar-width:none;
        max-width:100%;
    }

    .filters-container::-webkit-scrollbar{
        display:none;
    }

    .filter-btn{
        white-space:nowrap;
        font-size:13px;
        padding:10px 16px;
        flex:0 0 auto;
    }

    .packs,
    .sueltos,
    .recomendados,
    .detalle-pack,
    .como-comprar{
        padding:32px 16px;
    }

    .packs h2,
    .sueltos h2,
    .como-comprar h2{
        font-size:28px;
        margin-bottom:22px;
    }

    .titulo-categoria-productos{
        font-size:20px;
        margin-bottom:14px;
        text-align:left;
    }

    .categoria-seccion{
        padding-top:14px;
    }

    .productos{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:12px;
        overflow:visible;
        padding:0;
    }

    .producto{
        width:100%;
        min-width:0;
        padding:16px 10px 14px;
        border-radius:18px;
    }

    .producto img{
        width:84px;
        height:84px;
        margin-bottom:10px;
    }

    .producto h3{
        font-size:14px;
        line-height:1.25;
        min-height:36px;
        margin-bottom:8px;
    }

    .producto .precio{
        gap:4px;
        margin-bottom:10px;
    }

    .precio-antes{
        font-size:12px;
    }

    .precio-ahora{
        font-size:16px;
    }

    .badge-descuento{
        font-size:9px;
        padding:4px 8px;
        margin-bottom:4px;
    }

    .selector-modelo{
        margin-bottom:10px;
        text-align:left;
    }

    .selector-modelo label{
        font-size:12px;
        margin-bottom:4px;
    }

    .selector-modelo select{
        padding:10px;
        font-size:13px;
        border-radius:10px;
    }

    .cantidad{
        gap:8px;
        margin-bottom:10px;
    }

    .cantidad button{
        width:26px;
        min-height:26px;
        height:26px;
        font-size:14px;
        border-radius:8px;
    }

    .cantidad span{
        font-size:14px;
    }

    .producto button{
        width:100%;
        font-size:13px;
        min-height:42px;
        padding:10px 12px;
        border-radius:12px;
    }

    .ver-mas{
        margin-top:10px;
        font-size:12px;
    }

    .btn-pack{
        width:100%;
        text-align:center;
        min-height:42px;
        padding:10px 12px;
        font-size:13px;
        border-radius:12px;
    }

    .pasos{
        gap:14px;
    }

    .paso{
        width:100%;
        max-width:none;
        padding:18px;
        border-radius:16px;
    }

    .numero{
        width:40px;
        height:40px;
        font-size:16px;
        margin-bottom:10px;
    }

    .paso h3{
        font-size:16px;
    }

    .paso p{
        font-size:13px;
    }

    .beneficios{
        padding:20px 16px 26px;
        gap:10px;
        font-size:13px;
    }

    .beneficios div{
        width:100%;
        text-align:center;
        padding:10px 12px;
        border-radius:12px;
    }

    .footer{
        flex-direction:column;
        text-align:center;
        gap:12px;
        padding:18px 16px 30px;
        margin-top:10px;
    }

    .footer-left{
        flex-direction:column;
        gap:6px;
        font-size:13px;
    }

    .cart-panel{
        width:100%;
        right:-100%;
        border-radius:0;
    }

    .cart-header{
        padding:16px;
    }

    .cart-header h2{
        font-size:24px;
    }

    .cart-items{
        padding:16px;
    }

    .cart-item{
        padding:10px;
        border-radius:14px;
        gap:10px;
    }

    .cart-thumb{
        width:50px;
        height:50px;
    }

    .cart-item-info h4{
        font-size:14px;
    }

    .cart-item-info p{
        font-size:12px;
    }

    .cart-qty{
        gap:8px;
        margin-top:8px;
    }

    .cart-qty button{
        width:24px;
        height:24px;
        min-height:24px;
        font-size:14px;
    }

    .remove-btn{
        font-size:12px;
        padding:7px 8px;
    }

    .cart-footer{
        padding:16px;
    }

    .checkout-btn,
    .clear-cart-btn{
        font-size:14px;
        padding:12px;
        border-radius:12px;
    }

    .checkout-modal{
        padding:10px;
        align-items:flex-end;
    }

    .checkout-box{
        max-width:100%;
        width:100%;
        max-height:92vh;
        border-radius:20px 20px 0 0;
        padding:22px 16px;
    }

    .checkout-box h2{
        font-size:24px;
    }

    .checkout-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .form-group.full,
    .form-group.half,
    .form-group.third{
        grid-column:span 1;
    }

    .form-group input,
    .form-group select,
    .form-group textarea{
        padding:13px;
        font-size:14px;
        border-radius:12px;
    }

    .confirm-btn,
    .whatsapp-order-btn{
        font-size:14px;
        padding:13px;
        border-radius:12px;
    }

    .payment-card,
    .total-card,
    .transfer-info,
    .client-summary{
        padding:14px;
        border-radius:12px;
    }

    .detalle-pack{
        gap:20px;
        padding-bottom:150px;
    }

    .detalle-imagen,
    .detalle-info{
        width:100%;
        max-width:100%;
    }

    .detalle-info h1{
        font-size:30px;
        margin-bottom:12px;
    }

    .detalle-info .precio{
        margin-bottom:14px;
    }

    .descripcion{
        font-size:14px;
        line-height:1.6;
    }

    .detalle-info ul{
        padding-left:18px;
    }

    .detalle-info li{
        font-size:14px;
        margin-bottom:8px;
    }

    .carousel{
        max-width:100%;
        padding:10px;
        border-radius:18px;
    }

    .carousel-item img,
    .carousel-item video{
        max-height:260px;
        border-radius:12px;
    }

    .carousel-btn{
        width:34px;
        height:34px;
        font-size:18px;
    }

    .carousel-btn.left{
        left:6px;
    }

    .carousel-btn.right{
        right:6px;
    }

    .pack-buttons{
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        margin:0;
        padding:12px 12px calc(12px + env(safe-area-inset-bottom));
        background:rgba(6,19,39,0.98);
        z-index:998;
        display:flex;
        flex-direction:column;
        gap:10px;
        border-top:1px solid rgba(255,255,255,0.08);
    }

    .pack-buttons-top{
        grid-template-columns:110px 1fr;
        gap:10px;
    }

    .pack-qty-box{
        min-height:52px;
        border-radius:16px;
        padding:0 10px;
    }

    .pack-qty-box button{
        width:30px;
        height:30px;
        min-height:30px;
        font-size:21px;
    }

    .pack-qty-box .num{
        font-size:17px;
    }

    .pack-add-cart-btn,
    .buy-now{
        min-height:52px;
        font-size:14px;
        border-radius:16px;
    }

    .whatsapp-msg,
    .social-msg{
        display:none;
    }

    .whatsapp-container{
        bottom:84px;
        right:14px;
    }

    .whatsapp-float{
        width:54px;
        height:54px;
    }

    .whatsapp-float img{
        width:28px;
        height:28px;
    }

    .social-container{
        bottom:84px;
        right:14px;
        gap:8px;
    }

    .social-btn{
        width:48px;
        height:48px;
    }

    .social-btn img{
        width:24px;
        height:24px;
    }

    .toast{
        top:78px;
        right:12px;
        left:12px;
        font-size:14px;
        padding:12px 14px;
        border-radius:12px;
    }
}

/* 🛒 CARRITO FLOTANTE */
.cart-float{
    position:fixed;
    bottom:25px;
    left:20px;
    width:60px;
    height:60px;
    background:linear-gradient(135deg,#007bff,#00c6ff);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:white;
    box-shadow:var(--shadow-md);
    cursor:pointer;
    z-index:9999;
    transition:transform .3s ease;
}

.cart-float:hover{
    transform:scale(1.05);
}

.cart-float span{
    position:absolute;
    top:-5px;
    right:-5px;
    background:red;
    color:white;
    font-size:12px;
    padding:4px 6px;
    border-radius:50%;
    font-weight:bold;
}

@media(max-width:768px){
    .cart-float{
        bottom:90px;
        left:15px;
    }
}

/* =========================
   REDUCIR MOVIMIENTO
========================= */
@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }
}