/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#09090b;
    color:white;
    overflow-x:hidden;
}


/* =========================================================
   PANTALLAS
========================================================= */

.pantalla{
    min-height:100vh;
}


/* =========================================================
   PORTADA
========================================================= */

#inicio{

    min-height:100vh;

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

    padding:50px 25px;

    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,104,20,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(220,40,100,.12),
            transparent 30%
        ),
        #0b0b0d;

    opacity:1;
    transform:scale(1);
}


/* =========================================================
   DECORACIÓN DE FONDO
========================================================= */

.fondo-decoracion{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;
}

.fondo-decoracion span{

    position:absolute;

    color:rgba(255,255,255,.04);

    font-size:100px;

    animation:flotar 8s ease-in-out infinite;
}

.fondo-decoracion span:nth-child(1){
    top:8%;
    left:5%;
}

.fondo-decoracion span:nth-child(2){
    top:20%;
    right:5%;
    animation-delay:2s;
}

.fondo-decoracion span:nth-child(3){
    bottom:10%;
    left:10%;
    animation-delay:4s;
}

.fondo-decoracion span:nth-child(4){
    bottom:5%;
    right:12%;
    animation-delay:1s;
}

@keyframes flotar{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-15px) rotate(5deg);
    }

}


/* =========================================================
   ENCABEZADO
========================================================= */

.encabezado{

    text-align:center;

    position:relative;

    z-index:2;

    margin-bottom:55px;
}

.mini-titulo{

    display:block;

    color:#c7a15a;

    font-size:12px;

    letter-spacing:7px;

    margin-bottom:18px;

    text-transform:uppercase;
}


.titulo-principal{

    font-family:Georgia,"Times New Roman",serif;

    font-size:clamp(42px,7vw,78px);

    line-height:.95;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#fff;

    text-shadow:
        0 5px 20px rgba(0,0,0,.6);
}


.titulo-principal span{

    display:block;

    margin-top:14px;

    font-family:Arial,sans-serif;

    font-size:.38em;

    letter-spacing:13px;

    font-weight:300;

    color:#d4b46b;
}


.linea-decorativa{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:25px auto 20px;
}


.linea-decorativa::before,
.linea-decorativa::after{

    content:"";

    width:100px;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #b8924c
    );
}


.linea-decorativa::after{

    background:linear-gradient(
        90deg,
        #b8924c,
        transparent
    );
}


.rombo{

    width:9px;
    height:9px;

    background:#c5a15c;

    transform:rotate(45deg);
}


.subtitulo{

    color:#999;

    font-size:15px;

    letter-spacing:2px;
}


/* =========================================================
   TARJETAS PRINCIPALES
========================================================= */

.temporadas{

    width:100%;

    max-width:1150px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    position:relative;

    z-index:2;
}


.temporada{

    min-height:480px;

    border-radius:28px;

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.1);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.temporada:hover{

    transform:translateY(-10px);

}


/* =========================================================
   HALLOWEEN
========================================================= */

.halloween{

    isolation:isolate;

    background:

        radial-gradient(
            circle at center,
            rgba(255,108,0,.18),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #280036,
            #110713 70%
        );
}


.halloween:hover{

    box-shadow:
        0 25px 70px rgba(255,95,0,.2);
}


.halloween::before{

    content:"";

    position:absolute;

    inset:15px;

    border:1px solid rgba(255,132,35,.35);

    border-radius:20px;

    box-shadow:
        inset 0 0 35px rgba(255,91,0,.035);

    pointer-events:none;
}


.halloween::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:rgba(255,100,0,.08);

    filter:blur(50px);

    top:-100px;
    right:-100px;
}


.decoracion-halloween{

    position:absolute;

    top:25px;
    right:35px;

    font-size:90px;

    opacity:.9;

    filter:
        drop-shadow(
            0 0 20px
            rgba(255,100,0,.5)
        );
}


.murcielagos{

    position:absolute;

    top:30px;
    left:35px;

    font-size:30px;

    letter-spacing:10px;

    opacity:.7;
}


.estrellas-halloween{

    position:absolute;

    top:105px;
    left:48px;

    font-size:20px;

    color:#ffb34d;

    opacity:.65;

    letter-spacing:4px;

    transform:rotate(-8deg);
}


.fantasmas-halloween{

    position:absolute;

    bottom:32px;
    left:38px;

    font-size:46px;

    opacity:.32;

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.25));

    animation:
        fantasmaFlota 5s ease-in-out infinite;
}


@keyframes fantasmaFlota{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}


.calabazas-halloween{

    position:absolute;

    bottom:30px;
    right:35px;

    font-size:29px;

    opacity:.55;

    letter-spacing:4px;

    transform:rotate(-5deg);
}


.luna{

    position:absolute;

    top:38px;
    left:45px;

    font-size:68px;

    opacity:.95;

    line-height:1;

    filter:
        drop-shadow(0 0 14px rgba(255,190,80,.45));

    transform:rotate(-10deg);

    animation:
        lunaFlota 4s ease-in-out infinite;
}

@keyframes lunaFlota{

    0%,100%{
        transform:translateY(0) rotate(-10deg);
    }

    50%{
        transform:translateY(-6px) rotate(-7deg);
    }
}


/* =========================================================
   DIA DE MUERTOS
========================================================= */

.muertos{

    background:

        radial-gradient(
            circle at center,
            rgba(244,178,57,.15),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #541331,
            #170812 70%
        );
}


.muertos:hover{

    box-shadow:
        0 25px 70px rgba(218,45,105,.22);
}


.muertos::before{

    content:"";

    position:absolute;

    inset:15px;

    border:1px solid rgba(255,197,74,.25);

    border-radius:20px;
}


.decoracion-muertos{

    position:absolute;

    top:25px;
    right:35px;

    font-size:90px;

    filter:
        drop-shadow(
            0 0 18px
            rgba(255,195,70,.45)
        );
}


.flores{

    position:absolute;

    top:30px;
    left:30px;

    font-size:30px;

    letter-spacing:8px;
}


.papel-picado{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:30px;

    background:
        repeating-linear-gradient(
            90deg,
            #d72f63 0 45px,
            #f0b93c 45px 90px,
            #6e2b83 90px 135px
        );

    opacity:.35;
}


/* =========================================================
   CONTENIDO DE LAS TARJETAS
========================================================= */

.contenido-temporada{

    position:relative;

    z-index:5;

    max-width:600px;

    width:100%;
}


.etiqueta{

    font-size:11px;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:18px;

    opacity:.75;
}


.halloween .etiqueta{
    color:#ff9238;
}


.muertos .etiqueta{
    color:#ffc954;
}


.contenido-temporada h2{

    font-family:Georgia,"Times New Roman",serif;

    font-size:clamp(45px,6vw,70px);

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:18px;
}


.halloween h2{

    color:#ff8b25;

    text-shadow:
        0 0 25px rgba(255,107,0,.3);
}


.muertos h2{

    color:#ffd05a;

    text-shadow:
        0 0 25px rgba(255,190,60,.25);
}


.ornamento{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:0 auto 22px;
}


.ornamento span{

    width:7px;
    height:7px;

    transform:rotate(45deg);
}


.halloween .ornamento span{
    background:#ff7b20;
}


.muertos .ornamento span{
    background:#e8b746;
}


.ornamento::before,
.ornamento::after{

    content:"";

    height:1px;

    width:75px;

    background:rgba(255,255,255,.25);
}


.contenido-temporada p{

    color:#c4c4c4;

    line-height:1.7;

    font-size:15px;

    max-width:470px;

    margin:auto auto 28px;
}


.btn-catalogo{

    border:none;

    padding:15px 34px;

    border-radius:50px;

    font-weight:bold;

    font-size:12px;

    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;
}


.halloween .btn-catalogo{

    background:#ff7b1a;

    color:#190a03;
}


.muertos .btn-catalogo{

    background:#d83970;

    color:white;
}


.btn-catalogo:hover{

    transform:scale(1.07);

    box-shadow:
        0 10px 30px rgba(0,0,0,.4);
}


/* =========================================================
   CATÁLOGOS
========================================================= */

.catalogo{

    min-height:100vh;

    padding:45px 25px 80px;

    display:none;

    opacity:0;

    transform:scale(.96);

}


.catalogo.activo{
    display:block;
}

/* Seguridad: un catálogo activo nunca debe quedar invisible */
.catalogo.activo:not(.entrando):not(.saliendo){
    opacity:1;
    transform:scale(1);
}


/* Animación entrada */

.catalogo.entrando{

    animation:
        entradaCatalogo
        .65s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


@keyframes entradaCatalogo{

    0%{

        opacity:0;

        transform:
            scale(.94)
            translateY(20px);
    }

    100%{

        opacity:1;

        transform:
            scale(1)
            translateY(0);
    }

}


/* Animación salida */

.catalogo.saliendo{

    animation:
        salidaCatalogo
        .4s
        ease
        forwards;
}


@keyframes salidaCatalogo{

    0%{

        opacity:1;

        transform:scale(1);
    }

    100%{

        opacity:0;

        transform:scale(.96);
    }

}


/* =========================================================
   FONDOS CATALOGOS
========================================================= */

#catalogoHalloween{

    background:

        radial-gradient(
            circle at top right,
            rgba(255,100,0,.13),
            transparent 30%
        ),

        linear-gradient(
            #16051c,
            #08080a
        );
}


#catalogoMuertos{

    background:

        radial-gradient(
            circle at top left,
            rgba(218,48,105,.15),
            transparent 30%
        ),

        linear-gradient(
            #2b0b20,
            #090709
        );
}


/* =========================================================
   CABECERA CATALOGO
========================================================= */

.cabecera-catalogo{

    max-width:1200px;

    margin:auto;

    margin-bottom:45px;
}


.volver{

    background:rgba(255,255,255,.07);

    color:white;

    border:1px solid rgba(255,255,255,.14);

    padding:11px 22px;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

    margin-bottom:35px;
}


.volver:hover{

    background:rgba(255,255,255,.14);

    transform:translateX(-4px);
}


.titulo-catalogo{

    text-align:center;
}


.titulo-catalogo .pequeno{

    font-size:11px;

    letter-spacing:5px;

    color:#aaa;

    text-transform:uppercase;

    display:block;

    margin-bottom:10px;
}


.nombre-coleccion{

    font-family:Georgia,"Times New Roman",serif;

    font-size:clamp(42px,7vw,72px);

    text-transform:uppercase;

    letter-spacing:3px;
}


.h-title{

    color:#ff8b2a;

    text-shadow:
        0 0 25px rgba(255,100,0,.25);
}


.m-title{

    color:#ffc850;

    text-shadow:
        0 0 25px rgba(255,190,60,.2);
}


.linea-catalogo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:18px 0;
}


.linea-catalogo::before,
.linea-catalogo::after{

    content:"";

    width:100px;

    height:1px;

    background:rgba(255,255,255,.2);
}


.linea-catalogo span{

    width:8px;

    height:8px;

    transform:rotate(45deg);
}


.h-linea span{
    background:#ff8124;
}


.m-linea span{
    background:#ffc64d;
}


.texto-coleccion{

    color:#999;

    text-align:center;

    font-size:14px;

    letter-spacing:1px;
}


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

.productos{

    width:100%;

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;
}


.producto{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.09);

    border-radius:18px;

    overflow:hidden;

    transition:.3s;

    animation:
        aparecerProducto
        .6s
        ease
        both;
}


.producto:nth-child(2){animation-delay:.05s;}
.producto:nth-child(3){animation-delay:.10s;}
.producto:nth-child(4){animation-delay:.15s;}
.producto:nth-child(5){animation-delay:.20s;}
.producto:nth-child(6){animation-delay:.25s;}
.producto:nth-child(7){animation-delay:.30s;}
.producto:nth-child(8){animation-delay:.35s;}
.producto:nth-child(9){animation-delay:.40s;}
.producto:nth-child(10){animation-delay:.45s;}


@keyframes aparecerProducto{

    from{

        opacity:0;

        transform:
            translateY(20px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }

}


.producto:hover{

    transform:translateY(-7px);

    border-color:rgba(255,255,255,.2);

}


.imagen-producto{

    aspect-ratio:1/1;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:75px;

    position:relative;
}


.producto-h .imagen-producto{

    background:
        radial-gradient(
            circle,
            #472050,
            #17091d
        );
}


.producto-m .imagen-producto{

    background:
        radial-gradient(
            circle,
            #682044,
            #28101d
        );
}


.numero{

    position:absolute;

    top:10px;
    left:10px;

    background:rgba(0,0,0,.5);

    padding:5px 9px;

    border-radius:20px;

    font-size:10px;

    color:#ddd;
}


.info-producto{

    padding:18px;
}


.info-producto h3{

    font-size:15px;

    margin-bottom:8px;
}


.info-producto p{

    color:#999;

    font-size:12px;

    line-height:1.5;
}


.precio{

    display:block;

    margin-top:14px;

    font-size:18px;

    font-weight:bold;
}


.producto-h .precio{
    color:#ff9237;
}


.producto-m .precio{
    color:#ffc653;
}


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

@media(max-width:1050px){

    .productos{

        grid-template-columns:
            repeat(3,1fr);
    }

}


@media(max-width:750px){

    .temporadas{

        grid-template-columns:1fr;
    }

    .temporada{

        min-height:410px;
    }

    .productos{

        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:480px){

    #inicio{

        padding:35px 15px;
    }

    .temporada{

        min-height:390px;

        padding:25px;
    }

    .decoracion-halloween,
    .decoracion-muertos{

        font-size:65px;
    }

    .productos{

        grid-template-columns:1fr;
    }

    .nombre-coleccion{

        font-size:38px;
    }

}


/* Ajuste de título Halloween: nunca sale del recuadro */
.halloween .titulo-temporada,
.halloween h2,
.halloween .titulo {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    font-size: clamp(34px, 7vw, 58px);
    line-height: .95;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    text-align: center;
    letter-spacing: clamp(1px, .5vw, 4px);
}

@media (max-width: 700px){
    .halloween .titulo-temporada,
    .halloween h2,
    .halloween .titulo {
        font-size: clamp(30px, 10vw, 46px);
        letter-spacing: 1px;
    }
}


/* =========================================================
   CARRITO LATERAL
========================================================= */
.btn-agregar{
    width:100%; margin-top:15px; padding:11px 9px; border:none;
    border-radius:10px; color:#fff; font-size:10px; font-weight:800;
    letter-spacing:.8px; cursor:pointer;
    background:linear-gradient(135deg,#6e3a8a,#a54f72); transition:.25s;
}
.producto-h .btn-agregar{background:linear-gradient(135deg,#7c2f9b,#e66d16);}
.producto-m .btn-agregar{background:linear-gradient(135deg,#9e2858,#d99b2b);}
.btn-agregar:hover{transform:translateY(-2px);filter:brightness(1.12);}

.btn-lista-flotante{
    position:fixed; right:22px; bottom:22px; z-index:9800;
    border:none; border-radius:50px; padding:14px 19px;
    background:#fff; color:#211622; font-weight:900; cursor:pointer;
    box-shadow:0 12px 35px rgba(0,0,0,.35); transition:right .35s ease;
}
.contador-lista{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:23px; height:23px; margin-left:6px; padding:0 6px;
    border-radius:20px; background:#e6651b; color:#fff; font-size:11px;
}

/* El carrito ya no tapa la pantalla: entra desde la derecha */
.carrito-fondo{
    position:fixed; top:0; right:0; bottom:0;
    width:390px; max-width:92vw; z-index:9700;
    display:block; padding:0;
    background:#fdfcfd; color:#242027;
    transform:translateX(105%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    box-shadow:-18px 0 50px rgba(0,0,0,.30);
}
.carrito-fondo.abierto{transform:translateX(0);}

.carrito-panel{
    width:100%; height:100vh; max-height:none; overflow-y:auto;
    background:#fdfcfd; color:#242027; border-radius:0;
    box-shadow:none; padding:20px;
}
.carrito-cabecera{
    position:sticky; top:-20px; z-index:3;
    display:flex; align-items:center; justify-content:space-between; gap:15px;
    padding:20px 0 15px; margin-top:-20px;
    background:#fdfcfd; border-bottom:1px solid #e7e1e9;
}
.carrito-cabecera h3{font-family:Georgia,"Times New Roman",serif;font-size:24px;}
.cerrar-carrito{
    width:38px;height:38px;border:none;border-radius:50%;
    background:#eee9ef;color:#332c35;font-size:22px;cursor:pointer;
}
.carrito-vacio{text-align:center;color:#777;padding:35px 10px;line-height:1.7;}
.item-carrito{padding:16px 0;border-bottom:1px solid #e9e4eb;}
.item-superior{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.item-nombre{font-weight:900;font-size:14px;}
.item-codigo{margin-top:4px;color:#817884;font-size:11px;}
.btn-eliminar{
    border:none;border-radius:9px;padding:7px 9px;
    background:#ffe5e5;color:#a72020;font-weight:800;cursor:pointer;
}
.item-detalles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px;}
.detalle-titulo{color:#817884;font-size:9px;text-transform:uppercase;letter-spacing:.4px;}
.detalle-valor{margin-top:3px;font-weight:900;font-size:13px;}
.control-cantidad{display:flex;align-items:center;gap:8px;margin-top:13px;}
.control-cantidad strong{font-size:11px;margin-right:3px;}
.control-cantidad button{
    width:32px;height:32px;border:none;border-radius:9px;
    background:#eee8f1;color:#2c2430;font-size:19px;font-weight:bold;cursor:pointer;
}
.control-cantidad span{min-width:26px;text-align:center;font-weight:900;}
.total-general{
    display:flex;justify-content:space-between;gap:15px;
    padding:18px 0 5px;font-size:18px;font-weight:900;
}
.acciones-carrito{
    position:sticky; bottom:-20px;
    display:grid;grid-template-columns:1fr 1fr;gap:9px;
    margin:15px -20px -20px; padding:14px 20px 20px;
    background:#fdfcfd; border-top:1px solid #e7e1e9;
}
.acciones-carrito button{border:none;border-radius:12px;padding:13px 8px;font-weight:900;cursor:pointer;}
.btn-vaciar{background:#ece9ed;color:#423b45;}
.btn-apartado{background:linear-gradient(135deg,#7a2f89,#d55743);color:white;}

/* Cuando el carrito está abierto, el catálogo se recorre y sigue siendo usable */
body.carrito-abierto #inicio,
body.carrito-abierto .catalogo.activo{
    width:calc(100% - 390px);
    margin-right:390px;
    transition:width .35s ease, margin-right .35s ease;
}
body.carrito-abierto .btn-lista-flotante{right:412px;}

@media(max-width:900px){
    .carrito-fondo{width:340px;}
    body.carrito-abierto #inicio,
    body.carrito-abierto .catalogo.activo{
        width:calc(100% - 340px);
        margin-right:340px;
    }
    body.carrito-abierto .btn-lista-flotante{right:362px;}
    body.carrito-abierto .productos{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:650px){
    /* En celular se mantiene lateral, pero ocupa casi toda la pantalla */
    .carrito-fondo{width:92vw;}
    body.carrito-abierto #inicio,
    body.carrito-abierto .catalogo.activo{width:100%;margin-right:0;}
    body.carrito-abierto .btn-lista-flotante{right:12px;}
    .acciones-carrito{grid-template-columns:1fr;}
    .btn-lista-flotante{right:12px;bottom:12px;}
}


/* =========================================================
   MEJORA VISUAL Y ANIMACIONES DEL CARRITO
========================================================= */

/* Fondo oscuro elegante, evitando el panel completamente blanco */
.carrito-fondo{
    background:
        radial-gradient(circle at 90% 8%, rgba(160,76,184,.14), transparent 30%),
        radial-gradient(circle at 10% 92%, rgba(216,104,36,.10), transparent 32%),
        linear-gradient(180deg,#18131d 0%,#100d13 100%);
    color:#f5eff7;
    border-left:1px solid rgba(255,255,255,.10);
    box-shadow:-22px 0 60px rgba(0,0,0,.48);
    opacity:0;
    visibility:hidden;
    transform:translateX(108%) scale(.985);
    transition:
        transform .48s cubic-bezier(.22,.8,.22,1),
        opacity .32s ease,
        visibility .48s;
}
.carrito-fondo.abierto{
    opacity:1;
    visibility:visible;
    transform:translateX(0) scale(1);
}
.carrito-panel{
    background:transparent;
    color:#f5eff7;
}
.carrito-cabecera{
    background:linear-gradient(180deg,rgba(24,19,29,.98),rgba(24,19,29,.93));
    border-bottom:1px solid rgba(255,255,255,.10);
}
.carrito-cabecera h3{
    color:#fff;
    letter-spacing:.5px;
}
.cerrar-carrito{
    background:rgba(255,255,255,.09);
    color:#fff;
    transition:transform .25s ease, background .25s ease;
}
.cerrar-carrito:hover{
    transform:rotate(90deg);
    background:rgba(255,255,255,.16);
}
.carrito-vacio{
    color:#aaa2ad;
}

/* Animación suave de los artículos cuando aparecen */
.item-carrito{
    position:relative;
    margin:12px 0;
    padding:15px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:15px;
    overflow:hidden;
    background:rgba(255,255,255,.045);
    animation:itemCarritoEntrada .38s cubic-bezier(.2,.8,.2,1) both;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.item-carrito:hover{
    transform:translateX(-3px);
}
@keyframes itemCarritoEntrada{
    from{opacity:0;transform:translateX(22px) scale(.98);}
    to{opacity:1;transform:translateX(0) scale(1);}
}

/* Halloween: morado/naranja, discreto */
.item-halloween{
    border-color:rgba(255,125,36,.30);
    background:
        linear-gradient(135deg,rgba(92,32,113,.22),rgba(255,107,28,.055)),
        rgba(255,255,255,.025);
    box-shadow:inset 3px 0 0 rgba(255,126,36,.75);
}
.item-halloween:hover{
    border-color:rgba(255,125,36,.50);
    background:
        linear-gradient(135deg,rgba(92,32,113,.29),rgba(255,107,28,.08)),
        rgba(255,255,255,.03);
}

/* Día de Muertos: vino/dorado, diferente sin saturar */
.item-muertos{
    border-color:rgba(235,184,69,.28);
    background:
        linear-gradient(135deg,rgba(132,34,74,.22),rgba(226,174,54,.055)),
        rgba(255,255,255,.025);
    box-shadow:inset 3px 0 0 rgba(225,174,58,.72);
}
.item-muertos:hover{
    border-color:rgba(235,184,69,.48);
    background:
        linear-gradient(135deg,rgba(132,34,74,.29),rgba(226,174,54,.08)),
        rgba(255,255,255,.03);
}

.item-etiqueta-tema{
    display:inline-block;
    margin-bottom:5px;
    font-size:8px;
    font-weight:900;
    letter-spacing:1.2px;
    opacity:.78;
}
.item-halloween .item-etiqueta-tema{color:#ff9a49;}
.item-muertos .item-etiqueta-tema{color:#eac55e;}

.item-nombre{color:#fff;}
.item-codigo{color:#9d949f;}
.detalle-titulo{color:#9e959f;}
.detalle-valor{color:#f7f2f8;}
.control-cantidad button{
    background:rgba(255,255,255,.10);
    color:#fff;
    transition:transform .18s ease, background .18s ease;
}
.control-cantidad button:hover{
    transform:scale(1.08);
    background:rgba(255,255,255,.17);
}
.btn-eliminar{
    background:rgba(202,55,65,.15);
    color:#ff9ca3;
    border:1px solid rgba(255,104,112,.15);
}
.total-general{
    color:#fff;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:7px;
}
.acciones-carrito{
    background:linear-gradient(0deg,rgba(16,13,19,.99),rgba(16,13,19,.95));
    border-top:1px solid rgba(255,255,255,.10);
}
.btn-vaciar{
    background:rgba(255,255,255,.09);
    color:#e7e1e9;
}
.btn-apartado{
    background:linear-gradient(135deg,#78388e,#c55245);
    box-shadow:0 7px 20px rgba(115,48,121,.22);
}

/* El botón también acompaña el movimiento lateral */
.btn-lista-flotante{
    transition:
        right .48s cubic-bezier(.22,.8,.22,1),
        transform .25s ease,
        box-shadow .25s ease;
}
.btn-lista-flotante:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 40px rgba(0,0,0,.42);
}

/* Movimiento del catálogo sincronizado con el panel */
body.carrito-abierto #inicio,
body.carrito-abierto .catalogo.activo{
    transition:
        width .48s cubic-bezier(.22,.8,.22,1),
        margin-right .48s cubic-bezier(.22,.8,.22,1);
}

/* Pequeño pulso al agregar una unidad */
@keyframes pulsoContador{
    0%{transform:scale(1);}
    45%{transform:scale(1.28);}
    100%{transform:scale(1);}
}
.contador-lista.pulso{animation:pulsoContador .32s ease;}


/* =========================================================
   AJUSTES CARRITO: COMPACTO, BOTÓN ARRIBA Y TOTAL FIJO
========================================================= */
.btn-lista-flotante{
    top:18px !important;
    right:22px !important;
    bottom:auto !important;
    padding:11px 16px;
}
.carrito-fondo{
    width:335px !important;
    max-width:88vw;
}
.carrito-panel{
    padding:16px !important;
    display:flex;
    flex-direction:column;
    overflow:hidden !important;
}
.carrito-cabecera{
    top:0 !important;
    margin:0 !important;
    padding:4px 0 13px !important;
    flex:0 0 auto;
}
#listaProductos{
    flex:1 1 auto;
    overflow-y:auto;
    padding-right:4px;
    min-height:0;
}
.item-carrito{
    margin:9px 2px !important;
    padding:12px !important;
    border-radius:13px !important;
}
.item-nombre{font-size:13px !important;}
.item-detalles{
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    margin-top:10px !important;
}
.detalle-valor{font-size:12px !important;}
.control-cantidad{margin-top:10px !important;}
.control-cantidad button{width:29px !important;height:29px !important;font-size:17px !important;}

/* Zona inferior fija: total siempre visible */
.total-general{
    flex:0 0 auto;
    margin:0 -16px !important;
    padding:13px 16px 8px !important;
    background:#100d13;
    border-top:1px solid rgba(255,255,255,.12) !important;
    font-size:17px !important;
    position:relative;
    z-index:5;
}
.acciones-carrito{
    position:relative !important;
    flex:0 0 auto;
    bottom:auto !important;
    margin:0 -16px -16px !important;
    padding:8px 16px 15px !important;
    background:#100d13 !important;
}
body.carrito-abierto #inicio,
body.carrito-abierto .catalogo.activo{
    width:calc(100% - 335px) !important;
    margin-right:335px !important;
}
body.carrito-abierto .btn-lista-flotante{
    right:357px !important;
}

/* Botón para cambiar de colección dentro de cada catálogo */
.cambiar-coleccion-wrap{
    display:flex;
    justify-content:center;
    margin-top:22px;
}
.btn-cambiar-coleccion{
    border:1px solid rgba(255,255,255,.14);
    border-radius:50px;
    padding:11px 19px;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:1px;
    cursor:pointer;
    transition:transform .25s ease, filter .25s ease, border-color .25s ease;
}
.btn-cambiar-coleccion:hover{
    transform:translateY(-2px);
    filter:brightness(1.12);
    border-color:rgba(255,255,255,.28);
}
.btn-ir-muertos{
    background:linear-gradient(135deg,rgba(139,39,82,.85),rgba(198,144,40,.82));
}
.btn-ir-halloween{
    background:linear-gradient(135deg,rgba(83,36,108,.9),rgba(211,91,26,.84));
}

@media(max-width:900px){
    .carrito-fondo{width:310px !important;}
    body.carrito-abierto #inicio,
    body.carrito-abierto .catalogo.activo{
        width:calc(100% - 310px) !important;
        margin-right:310px !important;
    }
    body.carrito-abierto .btn-lista-flotante{right:326px !important;}
}
@media(max-width:650px){
    .btn-lista-flotante{top:10px !important;right:10px !important;}
    .carrito-fondo{width:88vw !important;}
    body.carrito-abierto #inicio,
    body.carrito-abierto .catalogo.activo{width:100% !important;margin-right:0 !important;}
    body.carrito-abierto .btn-lista-flotante{right:10px !important;}
}


/* POSICIÓN DE BOTONES PARA CAMBIAR DE COLECCIÓN */
.cabecera-catalogo{
    margin-bottom:28px;
}

.cambiar-coleccion-wrap{
    margin-top:28px !important;
    margin-bottom:34px !important;
    display:flex;
    justify-content:center;
}

.btn-cambiar-coleccion{
    padding:12px 22px;
}


/* =========================================================
   CORRECCIÓN PORTADA: NO MOSTRAR CATÁLOGOS DEBAJO DEL INICIO
========================================================= */
body.mostrando-inicio .catalogo{
    display:none !important;
}

/* La portada ocupa exactamente la vista inicial y no arrastra catálogos */
#inicio{
    min-height:100vh;
}

/* Solo el catálogo seleccionado entra al flujo cuando la portada se oculta */
body:not(.mostrando-inicio) .catalogo:not(.activo){
    display:none !important;
}


/* =========================================================
   BARRA DE BÚSQUEDA DE PRODUCTOS
========================================================= */
.buscador-catalogo{
    width:min(620px,100%);
    margin:26px auto 34px;
    position:relative;
}
.buscador-catalogo input{
    width:100%;
    padding:15px 48px 15px 20px;
    border-radius:50px;
    border:1px solid rgba(255,255,255,.14);
    outline:none;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    transition:.25s;
}
.buscador-catalogo input::placeholder{color:#aaa;}
.buscador-catalogo input:focus{
    border-color:rgba(255,180,75,.48);
    background:rgba(255,255,255,.10);
    box-shadow:0 10px 35px rgba(0,0,0,.2);
}
.icono-busqueda{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
    font-size:18px;
}
.sin-resultados{
    display:none;
    grid-column:1/-1;
    text-align:center;
    padding:45px 20px;
    color:#aaa;
    font-size:14px;
}


/* TOTAL DE COMPRA VISIBLE EN EL BOTÓN VER CARRITO */
.total-boton-carrito{
    display:inline-block;
    margin-left:8px;
    padding-left:9px;
    border-left:1px solid rgba(0,0,0,.16);
    font-size:12px;
    font-weight:900;
    color:#7b397e;
    white-space:nowrap;
}


/* =========================================================
   ALINEACIÓN UNIFORME DE TODAS LAS TARJETAS DE PRODUCTO
   Mantiene nombres, textos, precios y botones a la misma altura
========================================================= */
.productos{
    align-items:stretch;
}

.producto{
    height:100%;
    display:flex !important;
    flex-direction:column;
}

/* Mantener el área visual de todos los productos con la misma altura */
.producto > .imagen-producto,
.producto > .producto-imagen,
.producto > .img-producto,
.producto > .imagen{
    flex:0 0 auto;
}

/* Nombres alineados entre sí */
.producto h3{
    min-height:52px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    margin-bottom:10px;
}

/* Descripciones alineadas y con espacio uniforme */
.producto p:not(.precio){
    min-height:44px;
}

/* Empuja precio y botón hacia la parte inferior */
.producto .precio{
    margin-top:auto;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Todos los botones de agregar quedan en la misma línea */
.producto button{
    min-height:44px;
    margin-top:12px;
    width:100%;
}

/* Si el nombre o descripción es un poco más largo, conserva el orden visual */
.producto .info-producto,
.producto .producto-info,
.producto .contenido-producto{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* Las tarjetas de cada fila deben conservar una altura consistente */
@media (min-width:651px){
    .productos{
        grid-auto-rows:1fr;
    }
}


/* =========================================================
   TARJETAS MÁS ANCHAS Y MENOS ALARGADAS
========================================================= */

/* Menos columnas = cada artículo gana ancho */
.productos{
    grid-template-columns:repeat(auto-fit, minmax(245px, 1fr)) !important;
    gap:22px !important;
    max-width:1180px;
    margin-left:auto;
    margin-right:auto;
}

/* Tarjeta más compacta verticalmente */
.producto{
    min-height:0 !important;
    height:auto !important;
    padding-bottom:18px !important;
}

/* Reducimos espacios verticales sin perder la alineación */
.producto h3{
    min-height:44px !important;
    margin-bottom:6px !important;
}

.producto p:not(.precio){
    min-height:36px !important;
    margin-top:4px;
    margin-bottom:6px;
}

.producto .precio{
    min-height:30px !important;
}

.producto button{
    min-height:42px !important;
    margin-top:8px !important;
}

/* Evita que grid-auto-rows fuerce tarjetas demasiado altas */
@media (min-width:651px){
    .productos{
        grid-auto-rows:auto !important;
    }
}

/* En pantallas medianas, mantener buen ancho */
@media (max-width:900px){
    .productos{
        grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
    }
}

/* En celular, una tarjeta cómoda y ancha */
@media (max-width:560px){
    .productos{
        grid-template-columns:1fr !important;
        max-width:390px;
    }
}


/* FOTOS LOCALES: coloca masy.webp y canasta.webp junto al archivo HTML */
.imagen-producto img{
    width:100%;
    height:100%;
    max-width:220px;
    max-height:190px;
    object-fit:contain;
    display:block;
    margin:auto;
}

/* =========================================================
   PRODUCTOS CON VARIOS MODELOS
========================================================= */

.producto-con-modelos{
    position:relative;
}

.badge-modelos{
    position:absolute;
    top:12px;
    right:12px;
    padding:7px 11px;
    border-radius:20px;
    background:rgba(0,0,0,.72);
    border:1px solid rgba(255,255,255,.16);
    color:#ffd36b;
    font-size:10px;
    font-weight:900;
    letter-spacing:1px;
}

.btn-modelos{
    width:100%;
    min-height:44px;
    margin-top:12px;
    border:0;
    border-radius:13px;
    cursor:pointer;
    font-weight:900;
    letter-spacing:.5px;
    color:#fff;
    background:linear-gradient(90deg,#9c2e60,#d1842d);
    transition:transform .2s ease, filter .2s ease;
}

.btn-modelos:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}


/* Fondo del submenú */
.modal-modelos-fondo{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
    background:rgba(5,5,7,.82);
    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
}

.modal-modelos-fondo.abierto{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* Panel */
.modal-modelos-panel{
    width:min(980px,96vw);
    max-height:90vh;
    overflow:auto;
    position:relative;
    padding:32px;
    border-radius:26px;

    background:
        radial-gradient(circle at top right,rgba(218,48,105,.16),transparent 35%),
        linear-gradient(145deg,#29101f,#110b11);

    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 30px 100px rgba(0,0,0,.65);

    transform:translateY(18px) scale(.98);
    transition:transform .28s ease;
}

.modal-modelos-fondo.abierto .modal-modelos-panel{
    transform:translateY(0) scale(1);
}

.cerrar-modelos{
    position:absolute;
    top:16px;
    right:17px;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:26px;
    line-height:1;
    cursor:pointer;
}

.modal-modelos-cabecera{
    text-align:center;
    padding:4px 55px 25px;
}

.modal-mini-titulo{
    color:#d6ad66;
    font-size:10px;
    font-weight:bold;
    letter-spacing:3px;
}

.modal-modelos-cabecera h2{
    margin:8px 0 7px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(30px,5vw,44px);
    color:#ffd05a;
}

.modal-modelos-cabecera p{
    color:#aaa;
    font-size:14px;
}


/* Modelos */
.grid-modelos{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.modelo-card{
    overflow:hidden;
    border-radius:20px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.11);
    transition:transform .25s ease,border-color .25s ease;
}

.modelo-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,197,74,.35);
}

.modelo-imagen{
    height:235px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:
        radial-gradient(circle,#682044,#28101d);
}

.modelo-imagen img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.modelo-info{
    padding:17px;
    text-align:center;
}

.modelo-info h3{
    margin-bottom:8px;
    font-size:16px;
}

.modelo-codigo{
    display:block;
    color:#999;
    font-size:12px;
}

.modelo-precio{
    display:block;
    margin:13px 0;
    color:#ffc653;
    font-size:20px;
}

.btn-agregar-modelo{
    width:100%;
    min-height:42px;
    border:0;
    border-radius:12px;
    background:#d83970;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
}

.btn-agregar-modelo:hover{
    filter:brightness(1.1);
}

.btn-agregar-modelo.agregado{
    background:#397c50;
}

body.modal-modelos-abierto{
    overflow:hidden;
}

@media(max-width:760px){
    .modal-modelos-fondo{
        padding:12px;
    }

    .modal-modelos-panel{
        padding:25px 15px;
    }

    .grid-modelos{
        grid-template-columns:1fr;
    }

    .modelo-imagen{
        height:220px;
    }
}



/* =========================================================
   SUBMENÚS GRANDES DE MODELOS
========================================================= */
.modal-modelos-panel{
    scrollbar-width:thin;
}
.grid-modelos{
    align-items:stretch;
}
.grid-modelos .modelo-card{
    display:flex !important;
    flex-direction:column;
}
.grid-modelos .modelo-info{
    display:flex;
    flex-direction:column;
    flex:1;
}
.grid-modelos .btn-agregar-modelo{
    margin-top:auto;
}
@media(min-width:1050px){
    #modalModelosGenerico .grid-modelos{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}
@media(max-width:1049px) and (min-width:761px){
    #modalModelosGenerico .grid-modelos{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

/* =========================================================
   BUSCADOR: MANTIENE EL TAMAÑO ORIGINAL DE LAS TARJETAS
========================================================= */

/* Oculta resultados sin cambiar el tipo de display de las tarjetas visibles */
.productos > .producto.oculto-busqueda{
    display:none !important;
}

/*
   Cuando hay una búsqueda activa usamos exactamente el ancho que tenía
   una tarjeta antes de filtrar, evitando que 1 o 2 resultados se hagan enormes.
*/
.productos.busqueda-activa{
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(100%, var(--ancho-tarjeta-busqueda, 260px)),
                var(--ancho-tarjeta-busqueda, 260px)
            )
        ) !important;
    justify-content:start;
    align-items:stretch;
}

/* En celular se conserva el ancho normal disponible */
@media (max-width:560px){
    .productos.busqueda-activa{
        grid-template-columns:1fr !important;
    }
}

/* Estado visual al agregar una variante */
.btn-agregar-modelo.agregado{
    background:#397c50 !important;
    color:#fff !important;
}



/* =========================================================
   ESTADO PERMANENTE "AGREGADO"
========================================================= */
.btn-agregar.agregado,
.btn-agregar-modelo.agregado{
    background:#397c50 !important;
    color:#fff !important;
}

/* =========================================================
   LUPA / ZOOM DE IMÁGENES
========================================================= */
.imagen-producto img,
.modelo-imagen img{
    cursor:zoom-in;
}

.imagen-producto,
.modelo-imagen{
    position:relative;
}

.imagen-producto::after,
.modelo-imagen::after{
    content:"🔍";
    position:absolute;
    right:10px;
    bottom:10px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.62);
    border:1px solid rgba(255,255,255,.16);
    font-size:15px;
    opacity:0;
    transform:scale(.9);
    transition:.2s;
    pointer-events:none;
}

.imagen-producto:hover::after,
.modelo-imagen:hover::after{
    opacity:1;
    transform:scale(1);
}

.visor-imagen-fondo{
    position:fixed;
    inset:0;
    z-index:150000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(7px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.22s ease;
}

.visor-imagen-fondo.abierto{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.visor-imagen-panel{
    width:min(900px,95vw);
    max-height:92vh;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
    border-radius:24px;
    background:#111;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 100px rgba(0,0,0,.65);
}

#visorImagenGrande{
    max-width:100%;
    max-height:78vh;
    object-fit:contain;
    cursor:zoom-out;
}

.visor-imagen-titulo{
    margin-top:14px;
    color:#fff;
    font-size:15px;
    font-weight:700;
    text-align:center;
}

.cerrar-visor{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:26px;
    cursor:pointer;
}

body.visor-imagen-abierto{
    overflow:hidden;
}


/* =========================================================
   MODELOS: NOMBRE Y PRECIO SOLO ARRIBA
========================================================= */
.modal-precio-grupo{
    margin:10px 0 4px;
    color:#ffc653;
    font-size:24px;
    font-weight:900;
}

.modelo-info-simple{
    min-height:96px;
    justify-content:flex-end;
}

.modelo-info-simple .modelo-codigo{
    margin-bottom:12px;
}

.grid-modelos .modelo-card .modelo-precio,
.grid-modelos .modelo-card > h3,
.grid-modelos .modelo-card .modelo-info > h3{
    display:none !important;
}


.modelo-nombre-variable{display:block;font-size:13px;line-height:1.25;margin-bottom:5px;}
.modelo-precio-variable{display:block;font-size:15px;font-weight:800;margin-bottom:8px;}




/* =========================================================
   ZOOM: FONDO NEUTRO Y ESTÉTICO
========================================================= */

/* Fondo general oscuro suave, sin ser negro puro */
.visor-imagen-fondo{
    background:rgba(18,18,20,.88) !important;
    backdrop-filter:blur(10px);
}

/* Panel elegante en gris neutro */
.visor-imagen-panel{
    background:
        linear-gradient(145deg,#ecebea,#d6d4d2) !important;
    border:1px solid rgba(255,255,255,.45) !important;
    box-shadow:
        0 30px 90px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* Área de la imagen: color sólido neutro, sin cuadros */
#visorImagenGrande{
    background:#e2e0de !important;
    background-image:none !important;
    padding:20px;
    border-radius:18px;
    box-shadow:
        0 10px 28px rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.55);
}

/* Título */
.visor-imagen-titulo{
    color:#2c2b2a !important;
}


/* =========================================================
   ZOOM DEFINITIVO: SIN CUADRÍCULA / SIN EFECTO TRANSPARENCIA
========================================================= */

.visor-imagen-fondo{
    background:rgba(20,20,22,.90) !important;
    backdrop-filter:blur(9px) !important;
}

.visor-imagen-panel{
    background:#a9a6a2 !important;
    border:1px solid rgba(255,255,255,.25) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.55) !important;
}

/* Fondo liso neutro detrás de la imagen */
#visorImagenGrande{
    background:#b7b4b0 !important;
    background-color:#b7b4b0 !important;
    background-image:none !important;
    background-size:auto !important;
    background-position:initial !important;
    padding:18px !important;
    border-radius:16px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
}

.visor-imagen-titulo{
    color:#1f1f1f !important;
}


/* =========================================================
   PAPEL PICADO: TAMAÑO VISUAL UNIFORME EN LOS MODELOS
   No afecta otros grupos del catálogo.
========================================================= */

/* Área idéntica para todas las imágenes de cada grupo */
#modalModelosGenerico[data-grupo-modelos="papelPicadoChico"] .modelo-imagen,
#modalModelosGenerico[data-grupo-modelos="papelPicadoGrande"] .modelo-imagen,
#modalModelosGenerico[data-grupo-modelos="mantelPapelPicado"] .modelo-imagen{
    height:235px !important;
    padding:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Todas las imágenes usan exactamente la misma caja visual */
#modalModelosGenerico[data-grupo-modelos="papelPicadoChico"] .modelo-imagen img,
#modalModelosGenerico[data-grupo-modelos="papelPicadoGrande"] .modelo-imagen img,
#modalModelosGenerico[data-grupo-modelos="mantelPapelPicado"] .modelo-imagen img{
    width:190px !important;
    height:190px !important;
    max-width:190px !important;
    max-height:190px !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:auto !important;
}

/* En celular conservan proporción y tamaño uniforme */
@media(max-width:760px){
    #modalModelosGenerico[data-grupo-modelos="papelPicadoChico"] .modelo-imagen,
    #modalModelosGenerico[data-grupo-modelos="papelPicadoGrande"] .modelo-imagen,
    #modalModelosGenerico[data-grupo-modelos="mantelPapelPicado"] .modelo-imagen{
        height:220px !important;
    }

    #modalModelosGenerico[data-grupo-modelos="papelPicadoChico"] .modelo-imagen img,
    #modalModelosGenerico[data-grupo-modelos="papelPicadoGrande"] .modelo-imagen img,
    #modalModelosGenerico[data-grupo-modelos="mantelPapelPicado"] .modelo-imagen img{
        width:175px !important;
        height:175px !important;
        max-width:175px !important;
        max-height:175px !important;
    }
}


/* =========================================================
   CARRITO: SIN ANIMACIÓN DE REAPARICIÓN AL MODIFICAR ARTÍCULOS
========================================================= */

/*
   El carrito se vuelve a dibujar al agregar, quitar o cambiar cantidad.
   Evitamos que cada artículo vuelva a desvanecerse y entrar nuevamente.
   La animación de abrir/cerrar el panel del carrito se conserva.
*/
#listaProductos .item-carrito{
    animation:none !important;
}


/* =========================================================
   CARRITO: QUITAR DESTELLO / CUADRO NEGRO AL ABRIR
========================================================= */

/*
   El carrito conserva el deslizamiento lateral, pero ya no usa
   desvanecimiento ni escala. Eso evita que aparezca primero un
   bloque oscuro antes de que termine de entrar.
*/
.carrito-fondo{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(108%) !important;
    transition:transform .38s cubic-bezier(.22,.8,.22,1) !important;
}

.carrito-fondo.abierto{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(0) !important;
}


/* =========================================================
   PORTADA: FONDO ANIMADO CON OBJETOS FLOTANTES
========================================================= */

/* Más profundidad al fondo principal */
#inicio{
    isolation:isolate;
}

#inicio::before,
#inicio::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(8px);
    pointer-events:none;
    z-index:0;
}

/* Luz naranja flotante */
#inicio::before{
    width:240px;
    height:240px;
    left:-80px;
    top:18%;
    background:radial-gradient(circle,rgba(255,110,30,.16),rgba(255,110,30,0) 70%);
    animation:luzNaranjaFlota 10s ease-in-out infinite alternate;
}

/* Luz rosa/morada flotante */
#inicio::after{
    width:300px;
    height:300px;
    right:-100px;
    bottom:8%;
    background:radial-gradient(circle,rgba(210,50,120,.15),rgba(210,50,120,0) 72%);
    animation:luzRosaFlota 12s ease-in-out infinite alternate;
}

/* Las figuras decorativas ahora se mueven por el fondo */
.fondo-decoracion span{
    opacity:.10;
    will-change:transform;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
}

.fondo-decoracion span:nth-child(1){
    animation:fondoMover1 11s ease-in-out infinite;
}

.fondo-decoracion span:nth-child(2){
    animation:fondoMover2 13s ease-in-out infinite;
}

.fondo-decoracion span:nth-child(3){
    animation:fondoMover3 15s ease-in-out infinite;
}

.fondo-decoracion span:nth-child(4){
    animation:fondoMover4 12s ease-in-out infinite;
}

/* Pequeños destellos que cruzan lentamente la portada */
.fondo-decoracion::before,
.fondo-decoracion::after{
    content:"✦";
    position:absolute;
    color:rgba(255,205,110,.18);
    font-size:28px;
    pointer-events:none;
    text-shadow:0 0 18px rgba(255,170,70,.24);
}

.fondo-decoracion::before{
    left:12%;
    top:72%;
    animation:destelloCruza1 14s linear infinite;
}

.fondo-decoracion::after{
    right:14%;
    top:18%;
    animation:destelloCruza2 17s linear infinite;
}

@keyframes fondoMover1{
    0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}
    25%{transform:translate(38px,-22px) rotate(8deg) scale(1.05);}
    50%{transform:translate(70px,18px) rotate(-5deg) scale(.96);}
    75%{transform:translate(25px,38px) rotate(5deg) scale(1.03);}
}

@keyframes fondoMover2{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    33%{transform:translate(-55px,28px) rotate(-10deg);}
    66%{transform:translate(-18px,-38px) rotate(7deg);}
}

@keyframes fondoMover3{
    0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}
    50%{transform:translate(58px,-42px) rotate(12deg) scale(1.08);}
}

@keyframes fondoMover4{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    30%{transform:translate(-38px,-28px) rotate(-7deg);}
    70%{transform:translate(-75px,22px) rotate(9deg);}
}

@keyframes destelloCruza1{
    0%{transform:translate(-20px,20px) rotate(0deg);opacity:0;}
    15%{opacity:.35;}
    50%{transform:translate(180px,-110px) rotate(120deg);opacity:.28;}
    85%{opacity:.18;}
    100%{transform:translate(360px,-180px) rotate(240deg);opacity:0;}
}

@keyframes destelloCruza2{
    0%{transform:translate(20px,-10px) rotate(0deg);opacity:0;}
    18%{opacity:.28;}
    55%{transform:translate(-160px,120px) rotate(-120deg);opacity:.22;}
    100%{transform:translate(-320px,180px) rotate(-240deg);opacity:0;}
}

@keyframes luzNaranjaFlota{
    0%{transform:translate(0,0) scale(1);}
    100%{transform:translate(140px,60px) scale(1.18);}
}

@keyframes luzRosaFlota{
    0%{transform:translate(0,0) scale(1);}
    100%{transform:translate(-130px,-75px) scale(1.16);}
}

/* En pantallas pequeñas, movimiento más suave */
@media(max-width:600px){
    .fondo-decoracion span{
        font-size:72px !important;
    }

    #inicio::before,
    #inicio::after{
        transform:scale(.8);
    }
}

/* Respeta usuarios que prefieran menos movimiento */
@media (prefers-reduced-motion: reduce){
    .fondo-decoracion span,
    .fondo-decoracion::before,
    .fondo-decoracion::after,
    #inicio::before,
    #inicio::after{
        animation:none !important;
    }
}


/* =========================================================
   PORTADA: ANIMACIÓN MÁS VISIBLE Y DINÁMICA
========================================================= */

/* Más contraste en las figuras flotantes */
.fondo-decoracion span{
    opacity:.22 !important;
    font-size:120px !important;
    text-shadow:
        0 0 18px rgba(255,255,255,.08),
        0 0 30px rgba(255,140,70,.10);
}

/* Movimiento más amplio */
.fondo-decoracion span:nth-child(1){
    animation:fondoDinamico1 8s ease-in-out infinite !important;
}

.fondo-decoracion span:nth-child(2){
    animation:fondoDinamico2 9s ease-in-out infinite !important;
}

.fondo-decoracion span:nth-child(3){
    animation:fondoDinamico3 10s ease-in-out infinite !important;
}

.fondo-decoracion span:nth-child(4){
    animation:fondoDinamico4 8.5s ease-in-out infinite !important;
}

/* Destellos más visibles */
.fondo-decoracion::before,
.fondo-decoracion::after{
    font-size:38px !important;
    color:rgba(255,214,125,.34) !important;
    text-shadow:
        0 0 16px rgba(255,184,80,.35),
        0 0 32px rgba(255,120,40,.22) !important;
}

/* Luces de fondo más notorias */
#inicio::before{
    width:360px !important;
    height:360px !important;
    background:
        radial-gradient(circle,rgba(255,115,35,.26),rgba(255,115,35,.08) 40%,transparent 72%) !important;
    animation:luzNaranjaDinamica 7s ease-in-out infinite alternate !important;
}

#inicio::after{
    width:420px !important;
    height:420px !important;
    background:
        radial-gradient(circle,rgba(214,45,125,.24),rgba(145,55,180,.08) 42%,transparent 72%) !important;
    animation:luzRosaDinamica 8s ease-in-out infinite alternate !important;
}

/* Movimiento principal */
@keyframes fondoDinamico1{
    0%{transform:translate(0,0) rotate(0deg) scale(.9);}
    20%{transform:translate(75px,-35px) rotate(10deg) scale(1.08);}
    45%{transform:translate(135px,25px) rotate(-8deg) scale(.98);}
    70%{transform:translate(70px,70px) rotate(12deg) scale(1.12);}
    100%{transform:translate(0,0) rotate(0deg) scale(.9);}
}

@keyframes fondoDinamico2{
    0%{transform:translate(0,0) rotate(0deg) scale(1);}
    25%{transform:translate(-90px,50px) rotate(-13deg) scale(1.1);}
    55%{transform:translate(-155px,-25px) rotate(9deg) scale(.95);}
    80%{transform:translate(-65px,-75px) rotate(-7deg) scale(1.08);}
    100%{transform:translate(0,0) rotate(0deg) scale(1);}
}

@keyframes fondoDinamico3{
    0%{transform:translate(0,0) rotate(0deg) scale(.95);}
    30%{transform:translate(95px,-65px) rotate(15deg) scale(1.12);}
    60%{transform:translate(165px,-5px) rotate(-10deg) scale(1);}
    85%{transform:translate(85px,55px) rotate(7deg) scale(1.08);}
    100%{transform:translate(0,0) rotate(0deg) scale(.95);}
}

@keyframes fondoDinamico4{
    0%{transform:translate(0,0) rotate(0deg) scale(1);}
    25%{transform:translate(-80px,-45px) rotate(-12deg) scale(1.1);}
    50%{transform:translate(-145px,20px) rotate(9deg) scale(.96);}
    75%{transform:translate(-70px,75px) rotate(-6deg) scale(1.1);}
    100%{transform:translate(0,0) rotate(0deg) scale(1);}
}

@keyframes luzNaranjaDinamica{
    0%{
        transform:translate(-20px,-10px) scale(.92);
        opacity:.78;
    }
    50%{
        transform:translate(160px,85px) scale(1.18);
        opacity:1;
    }
    100%{
        transform:translate(260px,-20px) scale(1.04);
        opacity:.86;
    }
}

@keyframes luzRosaDinamica{
    0%{
        transform:translate(20px,20px) scale(.92);
        opacity:.82;
    }
    50%{
        transform:translate(-170px,-95px) scale(1.2);
        opacity:1;
    }
    100%{
        transform:translate(-260px,25px) scale(1.05);
        opacity:.88;
    }
}

/* Dos destellos recorriendo más área */
.fondo-decoracion::before{
    animation:destelloDinamico1 9s linear infinite !important;
}

.fondo-decoracion::after{
    animation:destelloDinamico2 11s linear infinite !important;
}

@keyframes destelloDinamico1{
    0%{
        transform:translate(-60px,80px) rotate(0deg) scale(.7);
        opacity:0;
    }
    12%{opacity:.55;}
    45%{
        transform:translate(260px,-120px) rotate(150deg) scale(1.15);
        opacity:.42;
    }
    75%{
        transform:translate(520px,-210px) rotate(250deg) scale(.9);
        opacity:.30;
    }
    100%{
        transform:translate(720px,-280px) rotate(360deg) scale(.7);
        opacity:0;
    }
}

@keyframes destelloDinamico2{
    0%{
        transform:translate(80px,-40px) rotate(0deg) scale(.7);
        opacity:0;
    }
    14%{opacity:.5;}
    50%{
        transform:translate(-280px,150px) rotate(-170deg) scale(1.12);
        opacity:.4;
    }
    78%{
        transform:translate(-520px,240px) rotate(-270deg) scale(.9);
        opacity:.28;
    }
    100%{
        transform:translate(-700px,320px) rotate(-360deg) scale(.7);
        opacity:0;
    }
}

/* Pulso muy suave en las dos tarjetas principales */
.temporada{
    animation:tarjetaRespira 5.5s ease-in-out infinite;
}

.temporada:nth-child(2){
    animation-delay:1.2s;
}

@keyframes tarjetaRespira{
    0%,100%{
        box-shadow:0 0 0 rgba(0,0,0,0);
    }
    50%{
        box-shadow:0 20px 55px rgba(0,0,0,.24);
    }
}

/* En móvil: visible, pero menos exagerado */
@media(max-width:600px){
    .fondo-decoracion span{
        font-size:88px !important;
        opacity:.18 !important;
    }

    #inicio::before{
        width:260px !important;
        height:260px !important;
    }

    #inicio::after{
        width:300px !important;
        height:300px !important;
    }
}


/* =========================================================
   CARRITO: SCROLL INDEPENDIENTE DE LA PÁGINA
========================================================= */

/* El panel completo no desplaza la página que está detrás */
.carrito-fondo{
    overscroll-behavior:contain !important;
}

.carrito-panel{
    overflow:hidden !important;
}

/* Solo esta zona se desplaza al usar la rueda del mouse */
#listaProductos{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    scroll-behavior:auto !important;
    scrollbar-gutter:stable;
}

/* Evita que la página de fondo se mueva mientras el cursor está en el carrito */
body.carrito-abierto{
    overscroll-behavior:none;
}


/* =========================================================
   PRODUCTOS NUEVOS
========================================================= */

.producto-nuevo{
    position:relative;
}

.badge-nuevo{
    position:absolute;
    top:12px;
    left:12px;
    z-index:3;
    padding:7px 12px;
    border-radius:999px;
    background:#ff3b6b;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.2px;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
}

.placeholder-producto-nuevo{
    width:145px;
    height:145px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    border:1px dashed rgba(255,255,255,.25);
    background:rgba(255,255,255,.055);
    color:rgba(255,255,255,.5);
    font-size:28px;
    font-weight:900;
    letter-spacing:2px;
}

/* Una ligera presencia visual sin cambiar el diseño general */
.producto-nuevo .imagen-producto{
    position:relative;
}


/* =========================================================
   GEMAS FACIALES: PRECIO INDIVIDUAL POR MODELO
========================================================= */

#modalGemas .modelo-precio-gemas{
    display:block;
    margin:8px 0 12px;
    font-size:18px;
    font-weight:900;
    color:#fff;
    line-height:1;
}

#modalGemas .modelo-codigo{
    display:block;
}


/* =========================================================
   GEMAS FACIALES: ALINEACIÓN DE LA TARJETA PRINCIPAL
========================================================= */

.info-gemas-principal{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
}

.info-gemas-principal p{
    margin-bottom:18px !important;
}

.info-gemas-principal .btn-modelos{
    margin-top:auto !important;
    width:100% !important;
}


/* =========================================================
   NUEVOS GRUPOS DE MODELOS — SIN ALTERAR TARJETAS ORIGINALES
========================================================= */

.placeholder-grupo-modelos{
    padding:12px;
    text-align:center;
    font-size:17px !important;
    line-height:1.15;
}

.modelo-placeholder{
    width:100%;
    height:100%;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:16px;
    border-radius:14px;
    border:1px dashed rgba(255,255,255,.24);
    background:rgba(255,255,255,.055);
    color:rgba(255,255,255,.55);
    font-size:16px;
    font-weight:900;
    letter-spacing:1px;
}

.modelo-descripcion-variable{
    display:block;
    margin:0 0 8px;
    color:#b9b9b9;
    font-size:12px;
    line-height:1.35;
}

/* Solo alinea el botón de las nuevas tarjetas, sin estirar la tarjeta */
.producto-con-modelos.producto-nuevo .info-producto{
    display:flex;
    flex-direction:column;
}

.producto-con-modelos.producto-nuevo .btn-modelos{
    margin-top:12px;
}


/* =========================================================
   MODELOS: MÁS ESPACIO ENTRE CÓDIGO, BORDES Y TARJETAS
========================================================= */

/* Más separación entre cada artículo/modelo */
.grid-modelos{
    gap:22px !important;
}

/* Evita que el texto quede pegado a los bordes */
.grid-modelos .modelo-card .modelo-info,
.grid-modelos .modelo-info-simple{
    padding:16px 18px 18px !important;
}

/* La línea del código queda más separada y respirada */
.grid-modelos .modelo-codigo{
    display:block !important;
    margin-top:10px !important;
    padding:9px 12px !important;
    border-radius:9px !important;
    line-height:1.35 !important;
    background:rgba(255,255,255,.045) !important;
}

/* Más espacio entre nombre, precio, descripción y código */
.grid-modelos .modelo-nombre-variable{
    margin-bottom:8px !important;
}

.grid-modelos .modelo-precio-variable{
    margin-bottom:9px !important;
}

.grid-modelos .modelo-descripcion-variable{
    margin-bottom:10px !important;
}

/* Un poco más de aire alrededor de toda la tarjeta */
.grid-modelos .modelo-card{
    padding-bottom:4px !important;
}


/* =========================================================
   FLUJO DE APARTADO
========================================================= */

body.apartado-modal-abierto{
    overflow:hidden;
}

.apartado-modal-fondo{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:rgba(7,7,9,.82);
    backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
}

.apartado-modal-fondo.abierto{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.apartado-modal{
    position:relative;
    width:min(94vw, 560px);
    max-height:90vh;
    overflow:auto;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(160deg,#1d1720,#0f0d11);
    box-shadow:0 30px 100px rgba(0,0,0,.58);
    padding:30px;
    transform:translateY(18px) scale(.98);
    transition:transform .22s ease;
}

.apartado-modal-fondo.abierto .apartado-modal{
    transform:translateY(0) scale(1);
}

.apartado-cerrar{
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.09);
    color:#fff;
    font-size:24px;
    cursor:pointer;
}

.apartado-cerrar:hover{
    background:rgba(255,255,255,.16);
}

.apartado-confirmacion{
    text-align:center;
    width:min(92vw, 500px);
    padding:40px 34px 34px;
}

.apartado-icono{
    width:70px;
    height:70px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:22px;
    font-size:34px;
    background:rgba(255,184,67,.11);
    border:1px solid rgba(255,196,88,.22);
}

.apartado-confirmacion h2{
    margin:0 0 12px;
    font-size:24px;
    letter-spacing:1px;
}

.apartado-confirmacion p{
    margin:0 auto;
    max-width:390px;
    color:#bbb;
    line-height:1.6;
    font-size:14px;
}

.apartado-confirmacion-botones{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:28px;
}

.apartado-confirmacion-botones button,
.apartado-btn-whatsapp{
    border:0;
    border-radius:13px;
    padding:14px 18px;
    font-weight:900;
    cursor:pointer;
    letter-spacing:.7px;
}

.apartado-btn-no{
    background:rgba(255,255,255,.09);
    color:#fff;
}

.apartado-btn-si{
    background:#d9a83e;
    color:#1b1305;
}

.apartado-resumen{
    width:min(95vw, 850px);
    padding:28px;
}

.apartado-resumen-cabecera{
    position:relative;
    padding-right:50px;
    margin-bottom:22px;
}

.apartado-etiqueta{
    display:inline-block;
    margin-bottom:7px;
    color:#e4b649;
    font-size:11px;
    font-weight:900;
    letter-spacing:2px;
}

.apartado-resumen h2{
    margin:0 0 8px;
    font-size:28px;
}

.apartado-id{
    margin:0;
    color:#aaa;
    font-size:14px;
}

.apartado-id strong{
    color:#fff;
    letter-spacing:1px;
}

.apartado-lista{
    display:grid;
    gap:14px;
}

.apartado-articulo{
    padding:18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:17px;
    background:rgba(255,255,255,.045);
}

.apartado-articulo-superior{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:14px;
}

.apartado-articulo-superior h3{
    margin:5px 0 0;
    font-size:17px;
}

.apartado-temporada{
    font-size:10px;
    font-weight:900;
    letter-spacing:1px;
    color:#d8c9ae;
}

.apartado-subtotal{
    white-space:nowrap;
    font-size:18px;
    color:#efc35f;
}

.apartado-articulo-datos{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.apartado-articulo-datos > div{
    min-width:0;
    padding:11px 12px;
    border-radius:12px;
    background:rgba(0,0,0,.18);
}

.apartado-articulo-datos span{
    display:block;
    margin-bottom:5px;
    color:#999;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.apartado-articulo-datos strong{
    display:block;
    overflow-wrap:anywhere;
    font-size:13px;
}

.apartado-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:18px 0;
    padding:17px 18px;
    border-radius:15px;
    background:linear-gradient(135deg,rgba(215,47,99,.18),rgba(240,185,60,.12));
    border:1px solid rgba(239,190,73,.19);
}

.apartado-total span{
    font-size:12px;
    font-weight:900;
    letter-spacing:1.5px;
}

.apartado-total strong{
    font-size:24px;
    color:#f1c65e;
}

.apartado-avisos{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.apartado-avisos p{
    margin:0;
    padding:12px 14px;
    border-left:3px solid #d7aa43;
    border-radius:0 10px 10px 0;
    background:rgba(255,255,255,.035);
    color:#bdbdbd;
    font-size:13px;
    line-height:1.55;
}

.apartado-avisos strong{
    color:#fff;
}

.apartado-instruccion{
    margin:20px 0 12px;
    text-align:center;
    color:#ddd;
    font-size:13px;
    line-height:1.55;
}

.apartado-btn-whatsapp{
    width:100%;
    background:#25D366;
    color:#07160c;
    font-size:14px;
    padding:16px 18px;
}

.apartado-btn-whatsapp:hover{
    filter:brightness(1.05);
}

@media(max-width:700px){
    .apartado-modal{
        padding:22px 16px;
        border-radius:19px;
    }

    .apartado-confirmacion{
        padding:34px 20px 22px;
    }

    .apartado-articulo-superior{
        flex-direction:column;
        gap:8px;
    }

    .apartado-articulo-datos{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:430px){
    .apartado-confirmacion-botones{
        grid-template-columns:1fr;
    }

    .apartado-articulo-datos{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   APARTADO — DATOS DEL CLIENTE Y ACCIÓN FIJA
========================================================= */

.apartado-formulario{
    width:min(92vw,560px);
}

.apartado-formulario h2{
    margin:3px 0 8px;
    font-size:26px;
}

.apartado-formulario-texto{
    margin:0 0 22px;
    color:#aaa;
    font-size:14px;
    line-height:1.55;
}

#formularioApartado{
    display:grid;
    gap:15px;
}

.apartado-campo{
    display:grid;
    gap:7px;
}

.apartado-campo > span{
    color:#ddd;
    font-size:12px;
    font-weight:800;
    letter-spacing:.4px;
}

.apartado-campo input,
.apartado-campo textarea{
    width:100%;
    border:1px solid rgba(255,255,255,.13);
    border-radius:12px;
    background:rgba(255,255,255,.055);
    color:#fff;
    padding:13px 14px;
    font:inherit;
    outline:none;
}

.apartado-campo textarea{
    resize:vertical;
    min-height:86px;
}

.apartado-campo input:focus,
.apartado-campo textarea:focus{
    border-color:rgba(234,188,82,.65);
    box-shadow:0 0 0 3px rgba(234,188,82,.09);
}

.apartado-btn-aceptar{
    border:0;
    border-radius:13px;
    padding:15px 18px;
    background:#d9a83e;
    color:#1b1305;
    font-weight:900;
    letter-spacing:.7px;
    cursor:pointer;
}

.apartado-datos-cliente{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:16px 0 18px;
}

.apartado-datos-cliente > div{
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.apartado-datos-cliente .apartado-domicilio-dato{
    grid-column:1 / -1;
}

.apartado-datos-cliente span{
    display:block;
    margin-bottom:5px;
    color:#999;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.apartado-datos-cliente strong{
    display:block;
    overflow-wrap:anywhere;
    font-size:13px;
}

/* Los avisos aparecen al principio del resumen */
.apartado-resumen .apartado-avisos{
    margin:0 0 16px;
}

/* Zona de confirmación visible incluso al desplazarse */
.apartado-accion-fija{
    position:sticky;
    bottom:-28px;
    z-index:8;
    margin:20px -28px -28px;
    padding:14px 28px 22px;
    background:linear-gradient(to top,#100e12 72%,rgba(16,14,18,.94),rgba(16,14,18,0));
}

.apartado-accion-fija .apartado-instruccion{
    margin:0 0 10px;
}

@media(max-width:700px){
    .apartado-datos-cliente{
        grid-template-columns:1fr;
    }

    .apartado-datos-cliente .apartado-domicilio-dato{
        grid-column:auto;
    }

    .apartado-accion-fija{
        bottom:-22px;
        margin:18px -16px -22px;
        padding:13px 16px 18px;
    }
}


/* =========================================================
   CONFIRMACIÓN FINAL DE PDF / NUEVA VENTA
========================================================= */

.apartado-confirmacion-envio{
    width:min(92vw,520px);
    text-align:center;
    padding:38px 30px 30px;
}

.apartado-confirmacion-envio h2{
    margin:0 0 12px;
    font-size:24px;
    letter-spacing:1px;
}

.apartado-confirmacion-envio p{
    margin:0 auto 24px;
    max-width:430px;
    color:#c3c3c3;
    line-height:1.65;
    font-size:14px;
}

.apartado-confirmacion-envio p strong{
    color:#fff;
}

.apartado-btn-cerrar-final{
    width:100%;
    border:0;
    border-radius:13px;
    padding:15px 18px;
    background:#d9a83e;
    color:#1b1305;
    font-weight:900;
    letter-spacing:.8px;
    cursor:pointer;
}

.apartado-btn-cerrar-final:hover{
    filter:brightness(1.05);
}


/* =========================================================
   APARTADO — TOTAL SUPERIOR FIJO Y ENLACE WHATSAPP
========================================================= */

.apartado-cabecera-fija{
    position:sticky;
    top:-28px;
    z-index:10;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:start;
    margin:-28px -28px 18px;
    padding:28px 78px 18px 28px;
    background:linear-gradient(to bottom,#161218 82%,rgba(22,18,24,.96),rgba(22,18,24,0));
}

.apartado-cabecera-textos{
    min-width:0;
}

.apartado-total-superior{
    min-width:145px;
    padding:11px 14px;
    border-radius:14px;
    text-align:right;
    background:linear-gradient(135deg,rgba(215,47,99,.18),rgba(240,185,60,.13));
    border:1px solid rgba(239,190,73,.20);
}

.apartado-total-superior span{
    display:block;
    margin-bottom:3px;
    color:#aaa;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.5px;
}

.apartado-total-superior strong{
    display:block;
    color:#f1c65e;
    font-size:22px;
}

.apartado-whatsapp-aviso{
    margin-top:-8px !important;
    margin-bottom:12px !important;
}

.apartado-enlace-whatsapp{
    display:block;
    width:100%;
    margin:0 0 12px;
    padding:15px 18px;
    border-radius:13px;
    background:#25D366;
    color:#07160c;
    text-decoration:none;
    font-weight:900;
    letter-spacing:.6px;
    text-align:center;
}

.apartado-enlace-whatsapp:hover{
    filter:brightness(1.05);
}

@media(max-width:700px){
    .apartado-cabecera-fija{
        top:-22px;
        margin:-22px -16px 16px;
        padding:22px 58px 16px 16px;
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px;
    }

    .apartado-total-superior{
        min-width:118px;
        padding:10px 11px;
    }

    .apartado-total-superior strong{
        font-size:18px;
    }
}

@media(max-width:470px){
    .apartado-cabecera-fija{
        grid-template-columns:1fr;
        padding-right:58px;
    }

    .apartado-total-superior{
        width:100%;
        text-align:left;
    }
}


/* =========================================================
   BANNER MÓVIL EN PORTADA
========================================================= */

.banner-inicio-movil{
    width:min(1150px,100%);
    margin:0 auto 28px;
    overflow:hidden;
    position:relative;
    z-index:3;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:linear-gradient(
        90deg,
        rgba(255,123,26,.10),
        rgba(216,57,112,.10)
    );
    box-shadow:0 10px 35px rgba(0,0,0,.18);
}

.banner-inicio-movil::before,
.banner-inicio-movil::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:60px;
    z-index:2;
    pointer-events:none;
}

.banner-inicio-movil::before{
    left:0;
    background:linear-gradient(90deg,#0b0b0d,transparent);
}

.banner-inicio-movil::after{
    right:0;
    background:linear-gradient(-90deg,#0b0b0d,transparent);
}

.banner-inicio-track{
    display:flex;
    width:max-content;
    animation:bannerInicioMover 20s linear infinite;
}

.banner-inicio-item{
    min-width:520px;
    padding:15px 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    white-space:nowrap;
    color:#f4f4f4;
    font-size:13px;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.banner-inicio-item strong{
    font-weight:900;
}

.banner-inicio-icono{
    color:#e4b650;
    font-size:16px;
}

.banner-inicio-movil:hover .banner-inicio-track{
    animation-play-state:paused;
}

@keyframes bannerInicioMover{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@media(max-width:700px){
    .banner-inicio-movil{
        margin-bottom:22px;
        border-radius:13px;
    }

    .banner-inicio-item{
        min-width:390px;
        padding:13px 22px;
        font-size:11px;
        letter-spacing:1.2px;
    }
}

@media(max-width:430px){
    .banner-inicio-item{
        min-width:330px;
        padding:12px 18px;
        font-size:10px;
    }
}

@media(prefers-reduced-motion:reduce){
    .banner-inicio-track{
        animation:none;
    }
}


/* =========================================================
   BANNER MÓVIL — VERSIÓN MÁS LLAMATIVA
========================================================= */

.banner-inicio-movil{
    border:1px solid rgba(255,202,90,.28);
    background:
        linear-gradient(
            100deg,
            rgba(255,112,20,.18),
            rgba(132,42,157,.18) 48%,
            rgba(216,57,112,.20)
        );
    box-shadow:
        0 12px 34px rgba(0,0,0,.30),
        0 0 24px rgba(255,133,40,.10);
}

.banner-inicio-movil::before{
    width:82px;
    background:linear-gradient(90deg,#0b0b0d 24%,transparent);
}

.banner-inicio-movil::after{
    width:82px;
    background:linear-gradient(-90deg,#0b0b0d 24%,transparent);
}

.banner-inicio-item{
    min-width:560px;
    padding:17px 38px;
    font-size:14px;
    letter-spacing:2px;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.banner-inicio-item strong{
    position:relative;
    padding:7px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 0 18px rgba(255,255,255,.02);
}

.banner-inicio-item:nth-child(1) strong,
.banner-inicio-item:nth-child(3) strong{
    color:#ffd166;
}

.banner-inicio-item:nth-child(2) strong,
.banner-inicio-item:nth-child(4) strong{
    color:#ff9fc0;
}

.banner-inicio-icono{
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 0 0 5px rgba(255,255,255,.025),
        0 0 16px rgba(255,185,70,.18);
}

.banner-inicio-track{
    animation-duration:17s;
}

@media(max-width:700px){
    .banner-inicio-item{
        min-width:420px;
        padding:15px 24px;
        font-size:12px;
        letter-spacing:1.4px;
    }

    .banner-inicio-icono{
        width:30px;
        height:30px;
        font-size:16px;
    }
}

@media(max-width:430px){
    .banner-inicio-item{
        min-width:350px;
        padding:14px 20px;
        font-size:10.5px;
    }

    .banner-inicio-item strong{
        padding:6px 11px;
    }
}


/* =========================================================
   OPTIMIZACIÓN PARA TELÉFONO Y RENDIMIENTO
========================================================= */

/* El navegador puede omitir el render de tarjetas fuera de pantalla */
.productos > .producto{
    content-visibility:auto;
    contain-intrinsic-size:280px 210px;
}

/* ---------- TELÉFONOS ---------- */
@media(max-width:600px){

    /* Catálogo más aprovechado en pantalla */
    .catalogo{
        padding:24px 10px 70px !important;
    }

    .cabecera-catalogo{
        margin-bottom:24px !important;
    }

    .buscador-catalogo{
        margin-bottom:18px !important;
    }

    /* Dos tarjetas por fila, más compactas */
    .productos{
        width:100% !important;
        max-width:none !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
        padding:0 !important;
    }

    .producto{
        min-width:0 !important;
        border-radius:13px !important;
        padding-bottom:9px !important;
        animation:none !important;
        transition:transform .18s ease,border-color .18s ease !important;
    }

    .producto:hover{
        transform:none !important;
    }

    /* Imagen más baja para evitar tarjetas gigantes */
    .imagen-producto{
        aspect-ratio:1 / .82 !important;
        min-height:0 !important;
        font-size:42px !important;
    }

    .imagen-producto img{
        width:100% !important;
        height:100% !important;
        max-width:140px !important;
        max-height:125px !important;
        padding:6px !important;
        object-fit:contain !important;
    }

    /* Información más compacta */
    .info-producto{
        padding:10px 9px 8px !important;
    }

    .producto h3{
        min-height:36px !important;
        margin:0 0 5px !important;
        font-size:12.5px !important;
        line-height:1.25 !important;
        justify-content:flex-start !important;
        text-align:left !important;
    }

    .producto p:not(.precio){
        min-height:32px !important;
        margin:0 0 5px !important;
        font-size:10px !important;
        line-height:1.35 !important;
    }

    .producto .precio{
        min-height:24px !important;
        margin:5px 0 0 !important;
        font-size:15px !important;
        justify-content:flex-start !important;
    }

    .producto button,
    .btn-agregar,
    .btn-modelos{
        min-height:35px !important;
        margin-top:6px !important;
        padding:8px 6px !important;
        border-radius:9px !important;
        font-size:9.5px !important;
        line-height:1.15 !important;
        letter-spacing:.15px !important;
    }

    .badge-nuevo,
    .badge-modelos{
        padding:5px 7px !important;
        font-size:7.5px !important;
        letter-spacing:.5px !important;
    }

    .badge-nuevo{
        top:7px !important;
        left:7px !important;
    }

    .badge-modelos{
        top:7px !important;
        right:7px !important;
    }

    /* Tarjetas principales Halloween / Día de Muertos más cortas */
    #inicio{
        padding:24px 12px 36px !important;
    }

    .encabezado{
        margin-bottom:28px !important;
    }

    .temporadas{
        gap:14px !important;
    }

    .temporada{
        min-height:300px !important;
        padding:22px 18px !important;
        border-radius:20px !important;
    }

    .contenido-temporada h2{
        font-size:38px !important;
    }

    .contenido-temporada p{
        font-size:13px !important;
        margin-bottom:20px !important;
    }

    /* Banner más compacto */
    .banner-inicio-movil{
        margin-bottom:16px !important;
    }

    .banner-inicio-item{
        min-width:310px !important;
        padding:11px 14px !important;
        font-size:9.5px !important;
    }

    .banner-inicio-icono{
        width:27px !important;
        height:27px !important;
        font-size:14px !important;
    }

    /* Menos filtros costosos en celular */
    .apartado-modal-fondo,
    .modal-modelos-fondo,
    .visor-imagen-fondo,
    .carrito-fondo{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    /* Modelos también compactos */
    .grid-modelos{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }

    .grid-modelos .modelo-card{
        border-radius:12px !important;
    }

    .grid-modelos .modelo-card .modelo-info,
    .grid-modelos .modelo-info-simple{
        padding:10px !important;
    }

    .grid-modelos .modelo-codigo{
        margin-top:6px !important;
        padding:6px 7px !important;
        font-size:9px !important;
    }

    .modelo-placeholder{
        min-height:110px !important;
        font-size:12px !important;
    }
}

/* Pantallas muy angostas: mantener dos columnas, pero todavía más ajustadas */
@media(max-width:370px){
    .productos{
        gap:7px !important;
    }

    .info-producto{
        padding:8px 7px 7px !important;
    }

    .producto h3{
        font-size:11.5px !important;
    }

    .producto p:not(.precio){
        font-size:9px !important;
    }

    .producto button,
    .btn-agregar,
    .btn-modelos{
        font-size:8.7px !important;
    }
}

/* En dispositivos táctiles no ejecutar efectos hover innecesarios */
@media(hover:none){
    .producto:hover,
    .temporada:hover,
    .btn-catalogo:hover{
        transform:none !important;
        box-shadow:inherit !important;
    }
}

/* Si el usuario pide menos movimiento, apagar animaciones decorativas */
@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}


/* =========================================================
   PRECIOS EN RECUADROS: ENTEROS + DECIMALES PEQUEÑOS
   Solo afecta tarjetas del catálogo y tarjetas de modelos.
   Carrito, apartado, totales y PDF conservan tamaño uniforme.
========================================================= */

.catalogo .productos > .producto .precio .precio-entero,
.grid-modelos .modelo-precio-variable .precio-entero{
    font-size:1em;
    line-height:1;
}

.catalogo .productos > .producto .precio .precio-decimales,
.grid-modelos .modelo-precio-variable .precio-decimales{
    display:inline-block;
    margin-left:1px;
    font-size:.70em;
    line-height:1;
    vertical-align:top;
    position:relative;
    top:.10em;
    font-weight:inherit;
}

/* Los nuevos recuadros de máscaras usan placeholder hasta que agregues imágenes. */
.producto-con-modelos .placeholder-producto-nuevo{
    width:100%;
    height:100%;
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:900;
    letter-spacing:2px;
    color:rgba(255,255,255,.50);
}


/* ETIQUETA NUEVO ESPECIAL — MÁSCARAS LED Y SANGRE FALSA */
.badge-nuevo.badge-nuevo-especial{
    background:linear-gradient(135deg,#00c6d7,#1769ff) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.32) !important;
    box-shadow:0 5px 14px rgba(0,107,255,.28),0 0 12px rgba(0,198,215,.18) !important;
}

/* =========================================================
   CORRECCIONES FINALES PARA TELÉFONO — CARRITO Y PORTADA
   2026-10-06
   Solo se aplican en pantallas de hasta 650 px.
========================================================= */
@media(max-width:650px){

    /* En la pantalla principal queda únicamente el ícono del carrito. */
    body.mostrando-inicio .btn-lista-flotante{
        width:48px !important;
        height:48px !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:50% !important;
    }

    body.mostrando-inicio #textoBotonCarrito{
        font-size:0 !important;
        line-height:1 !important;
    }

    body.mostrando-inicio #textoBotonCarrito::before{
        content:"🛒";
        font-size:21px !important;
        line-height:1 !important;
    }

    body.mostrando-inicio #contadorLista,
    body.mostrando-inicio #totalBotonCarrito{
        display:none !important;
    }

    /* En los catálogos recupera el texto normal del botón. */
    body:not(.mostrando-inicio) #textoBotonCarrito{
        font-size:inherit !important;
    }

    /* Más aire entre las dos portadas principales. */
    #inicio{
        padding:28px 14px 44px !important;
    }

    .temporadas{
        width:100% !important;
        max-width:430px !important;
        gap:26px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .temporada{
        min-height:340px !important;
        padding:28px 20px !important;
        border-radius:22px !important;
    }

    /* El fondo ocupa toda la pantalla para capturar el toque fuera del panel. */
    .carrito-fondo{
        inset:0 !important;
        width:100vw !important;
        max-width:none !important;
        height:100dvh !important;
        padding:0 !important;
        background:rgba(0,0,0,.52) !important;
        border-left:0 !important;
        box-shadow:none !important;
        transform:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:opacity .22s ease, visibility .22s ease !important;
    }

    .carrito-fondo.abierto{
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    /* El panel real sigue entrando desde la derecha. */
    .carrito-panel{
        width:min(88vw, 360px) !important;
        height:100dvh !important;
        max-height:100dvh !important;
        margin-left:auto !important;
        padding:
            max(12px, env(safe-area-inset-top))
            14px
            calc(10px + env(safe-area-inset-bottom)) !important;
        display:flex !important;
        flex-direction:column !important;
        overflow:hidden !important;
        background:
            radial-gradient(circle at 90% 8%, rgba(160,76,184,.14), transparent 30%),
            radial-gradient(circle at 10% 92%, rgba(216,104,36,.10), transparent 32%),
            linear-gradient(180deg,#18131d 0%,#100d13 100%) !important;
        border-left:1px solid rgba(255,255,255,.10) !important;
        box-shadow:-16px 0 42px rgba(0,0,0,.46) !important;
        transform:translateX(105%) !important;
        transition:transform .30s cubic-bezier(.22,.8,.22,1) !important;
    }

    .carrito-fondo.abierto .carrito-panel{
        transform:translateX(0) !important;
    }

    /* Encabezado despejado: el botón X ya no tapa la palabra Carrito. */
    .carrito-cabecera{
        position:relative !important;
        top:auto !important;
        width:100% !important;
        min-height:52px !important;
        margin:0 !important;
        padding:4px 0 12px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:14px !important;
        flex:0 0 auto !important;
    }

    .carrito-cabecera h3{
        margin:0 !important;
        padding:0 !important;
        min-width:0 !important;
        font-size:23px !important;
        line-height:1.1 !important;
    }

    .cerrar-carrito{
        position:static !important;
        flex:0 0 40px !important;
        width:40px !important;
        height:40px !important;
        margin:0 !important;
        z-index:2 !important;
    }

    /* La lista es la única parte que se desplaza; total y botones siempre quedan visibles. */
    #listaProductos{
        flex:1 1 auto !important;
        min-height:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        touch-action:pan-y !important;
        overscroll-behavior:contain !important;
        padding:2px 3px 10px 0 !important;
        scrollbar-gutter:auto !important;
    }

    .total-general{
        flex:0 0 auto !important;
        margin:0 -14px !important;
        padding:12px 14px 8px !important;
        position:relative !important;
        bottom:auto !important;
        z-index:3 !important;
        background:#100d13 !important;
        font-size:16px !important;
    }

    .acciones-carrito{
        flex:0 0 auto !important;
        position:relative !important;
        bottom:auto !important;
        margin:0 -14px calc(-10px - env(safe-area-inset-bottom)) !important;
        padding:8px 14px calc(10px + env(safe-area-inset-bottom)) !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        background:#100d13 !important;
        z-index:3 !important;
    }

    .acciones-carrito button{
        min-height:44px !important;
        padding:10px 7px !important;
        font-size:11px !important;
        line-height:1.15 !important;
    }

    /* Al abrir el carrito se bloquea la página de atrás y se oculta el botón flotante. */
    body.carrito-abierto{
        overflow:hidden !important;
        touch-action:none;
    }

    body.carrito-abierto #listaProductos,
    body.carrito-abierto .carrito-panel{
        touch-action:pan-y !important;
    }

    body.carrito-abierto .btn-lista-flotante{
        display:none !important;
    }

    body.carrito-abierto #inicio,
    body.carrito-abierto .catalogo.activo{
        width:100% !important;
        margin-right:0 !important;
    }
}