/* ==================================================
   AFILACIONES GUSTAVO
   CATÁLOGO - CSS LIMPIO Y ORDENADO
   ================================================== */


/* ==================================================
   1. CONFIGURACIÓN GENERAL
   ================================================== */

*{
    box-sizing:border-box;
}

:root{
    --red:#c40d29;
    --red2:#ef1736;
    --green:#28c64e;
    --line:#292929;
    --bg:#050505;
    --panel:#0b0b0b;
}

html,
body{
    margin:0;
    overflow-x:hidden;
}

body{
    background:var(--bg);
    color:#eee;
    font-family:Arial,sans-serif;
}

.wrap{
    width:min(1460px,calc(100% - 50px));
    margin:auto;
}

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

button,
input,
select{
    font-family:inherit;
}


/* ==================================================
   3. BANNER DEL CATÁLOGO
   MISMA FORMA VISUAL QUE CONTACTO
   TEXTO BIEN A LA IZQUIERDA
   ================================================== */

.catalog-hero{
    width:100%;
    min-height:300px;

    position:relative;
    overflow:hidden;

    margin:0;

    background:#060606;

    border:0;
    border-bottom:1px solid #252525;
}

/*
   FONDO: MISMO TRATAMIENTO QUE CONTACTO.
   La imagen queda integrada a la derecha y el lado
   izquierdo se funde en negro, sin efecto de cuadro.
*/
.catalog-hero::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.85) 0%,
            rgba(5,5,5,.82) 30%,
            rgba(5,5,5,.60) 50%,
            rgba(5,5,5,.19) 70%,
            rgba(5,5,5,.10) 100%
        ),
        url("assets/banner-catalogo.png");

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

.catalog-hero::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.026),
            rgba(0,0,0,.29)
        );
}

.catalog-hero-inner{
    width:100% !important;
    max-width:none !important;
    min-height:300px;

    margin:0 !important;
    padding-left:35px !important;
    padding-right:35px !important;

    position:relative;
    z-index:2;

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

.catalog-hero-text{
    width:min(610px,50%);
    margin:0 !important;
    padding:0 !important;

    position:relative;
    z-index:2;
}

.catalog-hero-text h1{
    margin:0;
    text-transform:uppercase;
    line-height:.95;
    letter-spacing:-2px;
}

.catalog-hero-text h1 strong{
    display:block;
    color:#ef1736;
    font-size:clamp(42px,4vw,66px);
    font-weight:950;
}

.catalog-hero-text h1 span{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:clamp(34px,3vw,54px);
    font-weight:950;
}

.catalog-hero-text p{
    margin:18px 0 0;
    color:#b0b0b0;
    font-size:13px;
    line-height:1.5;
}

.catalog-hero-text p span{
    color:#e60023;
    font-weight:700;
}


/* ==================================================
   4. ESTRUCTURA DEL CATÁLOGO
   ================================================== */

.layout{
    display:grid;

    grid-template-columns:310px minmax(0,1fr);

    gap:30px;

    padding-top:18px;
}


/* ==================================================
   7. BUSCADOR PREMIUM
   ================================================== */

.catalog-search-bar{
    width:100%;
    height:auto;

    position:sticky;

    top:0;

    z-index:80;

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

    gap:12px;

    margin-bottom:28px;

    padding:10px 0;

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

    backdrop-filter:blur(10px);

    border-bottom:1px solid transparent;
}

.catalog-search{
    width:auto;
    min-width:260px;
    height:54px;

    flex:1 1 480px;

    position:relative;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            180deg,
            #151515 0%,
            #0c0c0c 100%
        );

    border:1px solid #292929;
    border-radius:10px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.03);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.catalog-search:hover{
    border-color:#3a3a3a;
}

.catalog-search:focus-within{
    border-color:var(--red2);

    box-shadow:
        0 0 0 3px rgba(239,23,54,.10),
        0 10px 30px rgba(0,0,0,.28);
}

.catalog-search-icon{
    width:21px;
    height:21px;

    flex:0 0 auto;

    margin-left:18px;
    margin-right:13px;

    fill:var(--red2);
}

.catalog-search input{
    width:100%;
    height:100%;

    padding:0 20px 0 0;

    background:transparent;

    color:#f5f5f5;

    border:0;
    outline:0;

    font-size:14px;
    font-weight:500;

    letter-spacing:.1px;
}

.catalog-search input::placeholder{
    color:#777;

    font-weight:400;
}

.catalog-search input::-webkit-search-cancel-button{
    cursor:pointer;

    filter:invert(1);

    opacity:.55;
}


.catalog-brand-filter{
    width:220px;
    height:54px;

    position:relative;

    flex:0 0 220px;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            180deg,
            #151515 0%,
            #0c0c0c 100%
        );

    border:1px solid #292929;
    border-radius:10px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.03);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.catalog-brand-filter:hover{
    border-color:#3a3a3a;
}

.catalog-brand-filter:focus-within{
    border-color:var(--red2);

    box-shadow:
        0 0 0 3px rgba(239,23,54,.10),
        0 10px 30px rgba(0,0,0,.28);
}

.catalog-brand-filter-icon{
    width:19px;
    height:19px;

    flex:0 0 auto;

    margin-left:15px;
    margin-right:10px;

    fill:var(--red2);
}

.catalog-brand-filter select{
    width:100%;
    height:100%;

    padding:0 35px 0 0;

    appearance:none;
    -webkit-appearance:none;

    background:transparent;
    color:#f5f5f5;

    border:0;
    outline:0;

    cursor:pointer;

    font-size:13px;
    font-weight:600;
}

.catalog-brand-filter select option{
    background:#111;
    color:#f5f5f5;
}

.catalog-brand-filter-arrow{
    position:absolute;
    right:15px;
    top:50%;

    color:#888;

    font-size:18px;
    line-height:1;

    pointer-events:none;

    transform:translateY(-57%);
}

.catalog-search-bar #count{
    flex:0 0 auto;

    color:#888;

    font-size:12px;
    font-weight:600;

    white-space:nowrap;
}


/* ==================================================
   8. GRILLA DE PRODUCTOS
   ================================================== */

.grid{
    display:grid;

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

    gap:11px;
}


/* ==================================================
   9. TARJETAS
   ================================================== */

.card{
    position:relative;

    overflow:hidden;

    background:#0a0a0a;

    border:2px solid #303030;
    border-radius:5px;

    cursor:pointer;

    animation:catalogCardIn .35s ease;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.card:hover{
    transform:translateY(-5px);

    border-color:#731426;

    box-shadow:
        0 16px 35px rgba(0,0,0,.35);
}


/* ANIMACIÓN ENTRADA */

@keyframes catalogCardIn{

    from{
        opacity:0;

        transform:translateY(12px);
    }

    to{
        opacity:1;

        transform:translateY(0);
    }

}

.card:nth-child(2){
    animation-delay:.025s;
}

.card:nth-child(3){
    animation-delay:.05s;
}

.card:nth-child(4){
    animation-delay:.075s;
}

.card:nth-child(5){
    animation-delay:.10s;
}

.card:nth-child(6){
    animation-delay:.125s;
}

.card:nth-child(7){
    animation-delay:.15s;
}

.card:nth-child(8){
    animation-delay:.175s;
}


/* FOTO PRODUCTO */

.photo{
    height:185px;

    position:relative;

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

    overflow:hidden;

    background:#fff;

    border-bottom:1px solid #222;
}

.photo img{
    width:100%;
    height:100%;

    object-fit:contain;

    transition:transform .35s ease;
}

.card:hover .photo img{
    transform:scale(1.045);
}


/* VER PRODUCTO */

.photo::after{
    content:"VER PRODUCTO";

    position:absolute;

    left:50%;
    bottom:14px;

    padding:8px 15px;

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

    color:#fff;

    border:1px solid rgba(255,255,255,.22);
    border-radius:5px;

    font-size:10px;
    font-weight:900;

    letter-spacing:.8px;

    opacity:0;

    pointer-events:none;

    transform:translate(-50%,10px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.card:hover .photo::after{
    opacity:1;

    transform:translate(-50%,0);
}


/* CUERPO TARJETA */

.body{
    padding:14px 12px 15px;
}

.cat{
    color:var(--red2);

    font-size:10px;
    font-weight:900;
}

.body h3{
    margin:6px 0;

    font-size:14px;
}


/* CÓDIGO */

.code{
    color:#999;

    font-size:11px;
}

.card-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:7px;

    margin-top:8px;
}

.card .code,
.card-brand{
    min-height:28px;

    display:inline-flex;
    align-items:center;

    padding:5px 10px;

    background:#151515;

    color:#eee;

    border:1px solid #343434;
    border-left:3px solid var(--red2);
    border-radius:4px;

    font-size:11px;
    font-weight:800;

    letter-spacing:.4px;
}

.card .code{
    margin-top:0;
}

.card-brand{
    border-left-color:#777;
}


/* ==================================================
   10. BOTÓN CONSULTAR DE CADA PRODUCTO
   ================================================== */

.consult{
    height:46px;

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

    gap:0;

    margin-top:20px;

    color:#fff;

    background:var(--red2);

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

    font-size:13px;
    font-weight:800;

    letter-spacing:.2px;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.consult img,
.consult .consult-wa-icon{
    display:none;
}

.consult:hover{
    color:#fff;

    background:#ff2142;

    border-color:#ff2142;

    transform:translateY(-2px);
}


/* ==================================================
   11. SIN RESULTADOS
   ================================================== */

.empty-state{
    width:100%;
    min-height:300px;

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

    margin-top:10px;

    padding:50px 20px;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            #0e0e0e,
            #080808
        );

    border:1px solid #292929;
    border-radius:8px;
}

.empty-state.show{
    display:flex;
}

.empty-icon{
    width:65px;
    height:65px;

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

    margin-bottom:18px;

    border:1px solid #3a3a3a;
    border-radius:50%;
}

.empty-icon svg{
    width:30px;
    height:30px;

    display:block;

    fill:var(--red2);
}

.empty-state h3{
    margin:0 0 10px;

    color:#fff;

    font-size:18px;
}

.empty-state p{
    margin:0 0 22px;

    color:#888;

    font-size:13px;
}

.empty-state button{
    height:42px;

    padding:0 24px;

    background:var(--red2);

    color:#fff;

    border:0;
    border-radius:5px;

    font-size:11px;
    font-weight:800;

    cursor:pointer;

    transition:
        transform .2s ease,
        filter .2s ease;
}

.empty-state button:hover{
    transform:translateY(-1px);

    filter:brightness(1.12);
}


/* ==================================================
   12. INFORMACIÓN DE PÁGINA
   ================================================== */

.page-info{
    min-height:25px;

    margin-top:20px;

    color:#777;

    font-size:11px;
    font-weight:600;

    text-align:center;
}

.page-info strong{
    color:#ddd;
}


/* ==================================================
   13. PAGINACIÓN
   ================================================== */

.pagination{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    padding:12px 0 25px;
}

.pagination button{
    min-width:40px;
    height:40px;

    padding:0 10px;

    background:#0d0d0d;

    color:#aaa;

    border:1px solid #343434;
    border-radius:6px;

    font-weight:800;

    cursor:pointer;

    transition:
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        background .2s ease;
}

.pagination button:hover:not(:disabled){
    color:#fff;

    border-color:var(--red2);

    transform:translateY(-2px);
}

.pagination .page-number.active{
    background:var(--red2);

    color:#fff;

    border-color:var(--red2);

    box-shadow:
        0 5px 18px rgba(239,23,54,.18);
}

.pagination .page-arrow{
    font-size:22px;
}

.pagination button:disabled{
    opacity:.3;

    cursor:default;
}


/* ==================================================
   14. MODAL DEL PRODUCTO
   ================================================== */

.modal{
    display:none;

    position:fixed;

    inset:0;

    z-index:1000;
}

.modal.open{
    display:block;
}

.modal-backdrop{
    position:absolute;

    inset:0;

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

    backdrop-filter:blur(3px);
}

.modal-open{
    overflow:hidden;
}


/* CAJA MODAL */

.detail{
    width:min(880px,calc(100% - 30px));

    max-height:90vh;

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.15fr .85fr;

    overflow:auto;

    margin:5vh auto;

    background:#080909;

    border:1px solid #383838;
    border-radius:7px;

    box-shadow:0 25px 90px #000;
}


/* CERRAR */

.detail-close{
    width:35px;
    height:35px;

    position:absolute;

    top:9px;
    right:12px;

    z-index:10;

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

    padding:0;

    background:#111;

    color:#fff;

    border:0;
    border-radius:50%;

    font-size:28px;

    cursor:pointer;
}

.detail-close:hover{
    background:var(--red2);
}


/* ==================================================
   15. GALERÍA DEL PRODUCTO
   ================================================== */

.detail-media{
    display:flex;
    flex-direction:column;

    background:#0b0b0b;
}

.detail-photo{
    min-height:520px;

    position:relative;

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

    overflow:hidden;

    background:#fff;
}

.detail-photo img{
    width:100%;
    height:100%;

    max-height:620px;

    object-fit:contain;
}

#detailImage{
    cursor:zoom-in;
}


/* MINIATURAS */

.detail-gallery{
    display:flex;
    align-items:flex-start;
    flex:1 0 auto;

    gap:8px;

    min-height:82px;

    padding:10px;

    background:#0b0b0b;

    border-top:0;
}

.thumb{
    width:72px;
    height:62px;

    overflow:hidden;

    padding:0;

    background:#111;

    border:2px solid #333;
    border-radius:4px;

    cursor:pointer;

    transition:border-color .2s ease;
}

.thumb.active{
    border-color:var(--red2);
}

.thumb:hover{
    border-color:#777;
}

.thumb img{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
}


/* FLECHAS GALERÍA */

.gallery-arrow{
    width:42px;
    height:42px;

    position:absolute;

    top:50%;

    z-index:5;

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

    padding:0;

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

    color:#fff;

    border:1px solid rgba(255,255,255,.3);
    border-radius:50%;

    font-size:32px;
    line-height:1;

    cursor:pointer;

    opacity:0;

    transform:translateY(-50%);

    transition:
        opacity .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.detail-photo:hover .gallery-arrow{
    opacity:1;
}

.gallery-arrow:hover{
    background:var(--red2);

    border-color:var(--red2);
}

.gallery-prev{
    left:15px;
}

.gallery-next{
    right:15px;
}

.gallery-arrow.hidden{
    display:none;
}


/* CONTADOR FOTO */

.photo-counter{
    position:absolute;

    right:14px;
    bottom:14px;

    z-index:5;

    padding:6px 10px;

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

    color:#fff;

    border-radius:4px;

    font-size:10px;
    font-weight:800;
}


/* ==================================================
   16. INFORMACIÓN DEL MODAL
   ================================================== */

.detail-body{
    padding:48px 28px 28px;
}

.detail-body h2{
    margin:6px 0 8px;

    font-size:29px;
}

.detail-meta{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:10px;
}

.detail-meta-box{
    min-height:30px;

    display:inline-flex;
    align-items:center;

    padding:6px 11px;

    background:#151515;

    color:#ddd;

    border:1px solid #333;
    border-left:3px solid var(--red2);
    border-radius:4px;

    font-size:11px;
    font-weight:800;

    letter-spacing:.2px;
}

.detail-meta-box[hidden]{
    display:none !important;
}

.detail-description{
    grid-column:1 / -1;

    padding:28px 34px 31px;

    background:#101112;

    border-top:1px solid #303235;
}

.detail-description-title{
    display:flex;
    align-items:center;

    gap:10px;

    margin:0 0 15px;

    color:#f6f6f6;

    font-size:14px;
    font-weight:800;

    letter-spacing:.8px;
    text-transform:uppercase;
}

.detail-description-title::before{
    content:"";

    width:4px;
    height:21px;

    flex:0 0 4px;

    background:var(--red2);
    border-radius:6px;
}

.detail-description-copy{
    max-width:790px;
}

.detail-description-summary{
    margin:0;

    color:#d2d3d4;

    font-size:15px;
    line-height:1.72;

    letter-spacing:.1px;
    overflow-wrap:anywhere;
}

/* Respeta visualmente cada punto y aparte escrito desde el panel */
.detail-description-summary + .detail-description-summary{
    margin-top:14px;
}

.detail-use-grid{
    display:grid;

    grid-template-columns:150px minmax(0,1fr);

    gap:24px;

    margin-top:23px;
    padding-top:21px;

    border-top:1px solid #303235;
}

.detail-use-title{
    margin:0;

    color:#f6f6f6;

    font-size:13px;
    font-weight:800;

    letter-spacing:.7px;
    text-transform:uppercase;
}

.detail-use-steps{
    display:grid;

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

    gap:16px;

    margin:0;
    padding:0;

    list-style:none;
    counter-reset:detail-step;
}

.detail-use-step{
    min-width:0;

    color:#d2d3d4;

    font-size:13px;
    line-height:1.55;

    counter-increment:detail-step;
}

.detail-use-step::before{
    content:counter(detail-step);

    width:26px;
    height:26px;

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

    margin-bottom:9px;

    color:#fff;
    background:rgba(239,23,54,.13);

    border:1px solid rgba(239,23,54,.4);
    border-radius:50%;

    font-size:11px;
    font-weight:800;
}

.detail-care{
    display:flex;
    align-items:flex-start;

    gap:9px;

    margin:21px 0 0;
    padding:14px 15px;

    color:#a9abad;
    background:#171819;

    border-radius:7px;

    font-size:13px;
    line-height:1.55;
}

.detail-care strong{
    color:#d9d9da;
}

.detail-care-mark{
    color:var(--red2);
    font-weight:900;
}

.features{
    margin:18px 0;
}

.features div{
    margin:9px 0;

    color:#ddd;

    font-size:13px;
}

.features div::first-letter{
    color:var(--red2);
}


/* COPIAR / COMPARTIR */

.detail-actions{
    display:flex;

    gap:8px;

    margin-top:14px;
    margin-bottom:5px;
}

.product-action{
    min-height:36px;

    padding:0 14px;

    background:#111;

    color:#aaa;

    border:1px solid #363636;
    border-radius:4px;

    font-size:9px;
    font-weight:900;

    letter-spacing:.4px;

    cursor:pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.product-action:hover{
    background:#161616;

    color:#fff;

    border-color:var(--red2);
}


/* WHATSAPP MODAL */

.detail-wa{
    height:48px;

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

    gap:9px;

    margin-top:25px;

    color:#46df66;

    border:1px solid var(--green);
    border-radius:5px;

    font-size:12px;
    font-weight:900;

    transition:
        background .2s ease,
        transform .2s ease;
}

.detail-wa img,
.detail-wa .wa-inline-icon{
    width:22px;
    height:22px;

    object-fit:contain;
}

.detail-wa:hover{
    background:rgba(40,198,78,.05);

    transform:translateY(-1px);
}


/* ==================================================
   17. ZOOM DE IMAGEN
   ================================================== */

.image-zoom{
    position:fixed;

    inset:0;

    z-index:3000;

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

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

    backdrop-filter:blur(8px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.image-zoom.open{
    opacity:1;
    visibility:visible;
}

.image-zoom img{
    width:auto;
    height:auto;

    max-width:92vw;
    max-height:90vh;

    object-fit:contain;

    cursor:zoom-out;
}

.image-zoom-close{
    width:45px;
    height:45px;

    position:absolute;

    top:20px;
    right:25px;

    z-index:4;

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

    padding:0;

    background:#111;

    color:#fff;

    border:1px solid #444;
    border-radius:50%;

    font-size:30px;

    cursor:pointer;
}

.image-zoom-close:hover{
    background:var(--red2);

    border-color:var(--red2);
}


/* ==================================================
   CARRUSEL DE MARCAS - MOVIMIENTO CONTINUO
   ================================================== */

.product-marquee{
    width:100%;
    overflow:hidden;
    position:relative;

    margin-top:26px;
    padding:12px 0;

    background:
        linear-gradient(
            90deg,
            #850016 0%,
            #b80020 18%,
            #c8102e 50%,
            #b80020 82%,
            #850016 100%
        );

    border-top:1px solid #e21b3c;
    border-bottom:1px solid #e21b3c;
}


/* DIFUMINADO DE LOS LATERALES */

.product-marquee::before,
.product-marquee::after{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    width:80px;

    z-index:5;

    pointer-events:none;
}

.product-marquee::before{
    left:0;

    background:
        linear-gradient(
            90deg,
            #850016 0%,
            rgba(133,0,22,0) 100%
        );
}

.product-marquee::after{
    right:0;

    background:
        linear-gradient(
            270deg,
            #850016 0%,
            rgba(133,0,22,0) 100%
        );
}


/* PISTA QUE SE MUEVE */

.marquee-track{
    display:flex;

    flex-direction:row;
    flex-wrap:nowrap;

    align-items:center;

    width:max-content;

    animation:
        marcas-movimiento 24s linear infinite !important;

    will-change:transform;
}


/* CADA GRUPO DE LOGOS */

.marquee-set{
    display:flex;

    flex-direction:row;
    flex-wrap:nowrap;

    align-items:center;

    flex-shrink:0;

    gap:62px;

    padding-right:62px;
}


/* LOGOS */

.marquee-set img{
    display:block;

    width:auto;
    height:52px;

    max-width:135px;

    flex-shrink:0;

    object-fit:contain;

    background:transparent;

    border:0;
    border-radius:0;

    box-shadow:none;
}


/* MOVIMIENTO CONTINUO */

@keyframes marcas-movimiento{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}


/* NO SE DETIENE CUANDO PASÁS EL MOUSE */

.product-marquee:hover .marquee-track{
    animation-play-state:running !important;
}


/* CELULAR */

@media(max-width:700px){

    .product-marquee{
        padding:9px 0;
    }

    .marquee-track{
        animation-duration:20s !important;
    }

    .marquee-set{
        gap:40px;

        padding-right:40px;
    }

    .marquee-set img{
        height:40px;

        max-width:105px;
    }

}


/* DIFUMINADO LATERALES */

.product-marquee::before,
.product-marquee::after{
    content:"";

    width:80px;

    position:absolute;

    top:0;
    bottom:0;

    z-index:2;

    pointer-events:none;
}

.product-marquee::before{
    left:0;

    background:
        linear-gradient(
            90deg,
            #850016 0%,
            rgba(133,0,22,0) 100%
        );
}

.product-marquee::after{
    right:0;

    background:
        linear-gradient(
            270deg,
            #850016 0%,
            rgba(133,0,22,0) 100%
        );
}


/* MOVIMIENTO */

.marquee-track{
    width:max-content;

    display:flex;
    align-items:center;

    animation:
        marcas-movimiento 28s linear infinite;

    will-change:transform;
}

.marquee-set{
    display:flex;
    align-items:center;

    flex:0 0 auto;

    gap:62px;

    padding-right:62px;
}

.marquee-set img{
    width:auto;
    height:52px;

    max-width:135px;

    flex:0 0 auto;

    display:block;

    object-fit:contain;

    background:transparent;

    border:0;

    box-shadow:none;
}

.product-marquee:hover .marquee-track{
    animation-play-state:running;
}

@keyframes marcas-movimiento{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


/* ==================================================
   19. BENEFICIOS
   ================================================== */

.benefits.wrap{
    width:100vw;
    max-width:none;

    position:relative;

    left:50%;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    margin-top:42px;
    margin-left:-50vw;
    margin-right:0;

    background:#0a0a0a;

    border:1px solid #292929;
}

.benefits > div{
    min-height:105px;

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

    gap:18px;

    padding:18px 28px;

    border-right:1px solid #252525;
}

.benefits > div:last-child{
    border-right:0;
}

.benefit-icon{
    width:62px;
    height:62px;

    flex:0 0 62px;

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

.benefit-icon img{
    width:36px;
    height:36px;

    display:block;

    object-fit:contain;
}

.benefits > div > span:last-child{
    text-align:left;
}

.benefits strong{
    display:block;

    color:#fff;

    font-size:13px;
}

.benefits small{
    display:block;

    margin-top:5px;

    color:#aaa;

    font-size:11.5px;
    line-height:1.55;
}


/* ==================================================
   20. FOOTER
   ================================================== */

.site-footer.wrap{
    width:100vw;
    max-width:none;

    min-height:125px;

    position:relative;

    left:50%;

    display:grid;

    grid-template-columns:
        1.25fr 1fr 1fr .9fr;

    align-items:center;

    gap:36px;

    margin-top:8px;
    margin-left:-50vw;
    margin-right:0;

    padding:20px 70px;

    background:#050505;

    border-top:1px solid #292929;
}


/* MARCA FOOTER */

.footer-brand{
    display:flex;
    align-items:center;
    justify-self:center;

    gap:13px;
}

.footer-brand img{
    width:72px;
    height:72px;

    object-fit:contain;

    background:#000;

    border-radius:50%;
}

.footer-brand strong{
    display:block;

    font-size:20px;
}

.footer-brand small{
    display:block;

    margin-top:5px;

    color:var(--red2);

    font-size:10px;
    font-weight:800;
}


/* ENLACES */

.footer-links{
    justify-self:center;

    text-align:center;
}

.footer-links > b,
.footer-social > b{
    display:block;

    margin-bottom:12px;

    color:var(--red2);

    font-size:11px;
}

.footer-links > div{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:30px;
}

.footer-links a{
    color:#ddd;

    font-size:11px;

    transition:color .2s ease;
}

.footer-links a:hover{
    color:var(--red2);
}


/* INSTAGRAM */

.footer-social{
    justify-self:center;

    text-align:center;
}

.social-row{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;
}

.social-icon{
    width:50px;
    height:50px;

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

    border:1px solid #333;
    border-radius:9px;
}

.social-icon img{
    width:30px;
    height:30px;

    object-fit:contain;
}

.ig-name{
    color:#ddd;

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

    transition:color .2s ease;
}

.ig-name:hover{
    color:var(--red2);
}


/* COPYRIGHT */

.footer-copy{
    justify-self:center;

    color:#aaa;

    font-size:11px;
    line-height:1.7;

    text-align:center;
}


/* ==================================================
   21. BOTÓN VOLVER ARRIBA
   ================================================== */

.back-to-top{
    width:52px;
    height:52px;

    position:fixed;

    right:28px;
    bottom:28px;

    z-index:900;

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

    padding:0;

    background:var(--red2);

    color:#fff;

    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;

    font-size:25px;
    font-weight:900;

    cursor:pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,.45);

    transition:
        transform .2s ease,
        background .2s ease;
}

.back-to-top:hover{
    background:#ff2345;

    transform:translateY(-4px);
}


/* ==================================================
   22. OTROS
   ================================================== */

.admin-link{
    color:var(--red2) !important;
    font-weight:800;
}

.admin-link:hover{
    color:#fff !important;
}


/* ==================================================
   23. RESPONSIVE - TABLET
   ================================================== */

@media(max-width:1100px){

    .site-footer.wrap{
        gap:24px;

        padding-left:30px;
        padding-right:30px;
    }

    .benefits > div{
        padding:16px 18px;
    }

}


@media(max-width:1000px){

    .brand{
        min-width:0;
    }

    .brand strong{
        font-size:18px;
    }

    .brand small{
        display:none;
    }

    nav{
        gap:15px;
    }

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

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

    .benefits.wrap{
        grid-template-columns:
            repeat(2,1fr);
    }

    .site-footer.wrap{
        height:auto;

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

        padding:25px 35px;
    }

}


/* ==================================================
   24. RESPONSIVE - MODAL
   ================================================== */

@media(max-width:720px){

    .detail{
        grid-template-columns:1fr;

        max-height:96vh;

        margin:2vh auto;
    }

    .detail-photo{
        min-height:300px;
        height:340px;
    }

    .detail-body{
        padding:25px 18px;
    }

    .gallery-arrow{
        width:38px;
        height:38px;

        opacity:1;

        font-size:27px;
    }

    .detail-actions{
        flex-direction:column;
    }

    .product-action{
        width:100%;
    }

    .detail-description{
        padding:23px 18px 26px;
    }

    .detail-use-grid{
        grid-template-columns:1fr;

        gap:14px;
    }

    .detail-use-steps{
        grid-template-columns:1fr;

        gap:13px;
    }

    .detail-use-step{
        display:grid;

        grid-template-columns:26px minmax(0,1fr);

        gap:11px;
    }

    .detail-use-step::before{
        margin-bottom:0;
    }

}


/* ==================================================
   25. RESPONSIVE - CELULAR
   ================================================== */

@media(max-width:700px){

    .catalog-hero{
        min-height:340px;
    }

    .catalog-hero::before{
        background:
            linear-gradient(
                90deg,
                rgba(5,5,5,.83),
                rgba(5,5,5,.70)
            ),
            url("assets/banner-catalogo.png");

        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }

    .catalog-hero-inner{
        width:100% !important;
        max-width:none !important;
        min-height:340px;

        margin:0 !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }

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

    .catalog-hero-text h1 strong{
        font-size:clamp(42px,12vw,58px);
    }

    .catalog-hero-text h1 span{
        font-size:clamp(32px,9vw,46px);
    }

    .catalog-hero-text p{
        font-size:12px;
    }


    /* BUSCADOR */

    .catalog-search-bar{
        flex-direction:column;
        align-items:stretch;

        gap:10px;
    }

    .catalog-search{
        width:100%;
        min-width:0;
        flex-basis:auto;
    }

    .catalog-brand-filter{
        width:100%;
        flex-basis:auto;
    }

    .catalog-search-bar #count{
        text-align:right;
    }


    /* CARRUSEL */

    .product-marquee{
        padding:9px 0;
    }

    .marquee-track{
        animation-duration:22s;
    }

    .marquee-set{
        gap:40px;

        padding-right:40px;
    }

    .marquee-set img{
        height:40px;

        max-width:105px;
    }


    /* NO MOSTRAR VER PRODUCTO EN TOUCH */

    .card .photo::after{
        display:none;
    }


    /* VOLVER ARRIBA */

    .back-to-top{
        width:46px;
        height:46px;

        right:16px;
        bottom:16px;
    }

}


/* ==================================================
   26. RESPONSIVE - CELULAR CHICO
   ================================================== */

@media(max-width:650px){

    .benefits.wrap{
        grid-template-columns:1fr;
    }

    .benefits > div{
        justify-content:flex-start;

        border-right:0;
        border-bottom:1px solid #252525;
    }

    .benefits > div:last-child{
        border-bottom:0;
    }

    .site-footer.wrap{
        grid-template-columns:1fr;

        gap:28px;

        padding:28px 22px;
    }

    .footer-brand{
        justify-content:center;
    }

    .footer-links,
    .footer-social,
    .footer-copy{
        justify-self:center;

        text-align:center;
    }

}


@media(max-width:600px){

    nav{
        display:none;
    }

    .wa span{
        display:none;
    }

    .wrap{
        width:calc(100% - 20px);
    }

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

}


/* ==================================================
   27. ACCESIBILIDAD
   ================================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;
    }

}
/* ==================================================
   PROTECCIÓN DE IMÁGENES
   ================================================== */

img{
    -webkit-user-drag:none;
}

/* =========================================================
   PANEL PREMIUM DE CATEGORÍAS - VERSIÓN LIMPIA
   ========================================================= */

.catalog-sidebar{
    width:100%;
}


/* CABECERA */

.catalog-category-panel{
    position:relative;
    padding:24px 17px 18px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(190,0,35,.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #101318 0%,
            #090c10 100%
        );

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

    box-shadow:
        0 22px 50px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.category-panel-head{
    margin-bottom:20px;
}

.category-title-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.category-red-bar{
    width:5px;
    height:32px;
    flex:0 0 5px;

    background:#f2163d;
    border-radius:10px;

    box-shadow:
        0 0 14px rgba(242,22,61,.6);
}

.category-panel-head h3{
    margin:0;
    color:#fff;

    font-size:23px;
    font-weight:900;
    letter-spacing:1.8px;
}

.category-title-line{
    height:1px;
    flex:1;
    margin-left:5px;

    background:
        linear-gradient(
            90deg,
            #e2193c,
            rgba(226,25,60,0)
        );
}

.category-mountains-mark{
    width:57px;
    height:30px;
    flex:0 0 57px;

    color:#34383d;
    opacity:.55;
}

.category-mountains-mark path{
    fill:none;
    stroke:currentColor;
    stroke-width:5;
    stroke-linecap:square;
    stroke-linejoin:miter;
}

.category-mountains-mark path:last-child{
    stroke-width:3;
}

.category-panel-head p{
    margin:8px 0 0 17px;

    color:#8f959d;

    font-size:14px;
    line-height:1.4;
}


/* LISTA */

.catalog-category-panel #filters{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.catalog-category-panel .category-filter-group{
    width:100%;
}

.catalog-category-panel .filter{
    width:100%;
    min-height:68px;

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

    padding:0 16px;

    color:#f7f7f7;

    background:
        linear-gradient(
            180deg,
            #15191e 0%,
            #101318 100%
        );

    border:1px solid #30353b;
    border-radius:12px;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.catalog-category-panel .filter:hover{
    background:
        linear-gradient(
            180deg,
            #1a1f25 0%,
            #12161b 100%
        );

    border-color:#484f56;

    transform:translateY(-1px);
}

.catalog-category-panel .filter.active{
    color:#fff;

    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(255,49,74,.22),
            transparent 48%
        ),
        linear-gradient(
            100deg,
            #a40620 0%,
            #da1232 55%,
            #a40620 100%
        );

    border-color:#ff3150;

    box-shadow:
        0 0 22px rgba(219,18,49,.22),
        inset 0 1px 0 rgba(255,255,255,.12);
}


/* ICONO + TEXTO */

.catalog-category-panel .filter-label{
    min-width:0;

    display:flex;
    align-items:center;
    gap:15px;

    font-size:14px;
    font-weight:800;
}

.catalog-category-panel .cat-icon-svg{
    width:34px;
    height:34px;
    flex:0 0 34px;

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

    color:#f5f6f7;

    transition:transform .2s ease;
}

.catalog-category-panel .cat-icon-svg svg{
    width:100%;
    height:100%;
    display:block;
}

.catalog-category-panel .filter:hover .cat-icon-svg{
    transform:scale(1.06);
}


/* CONTADOR + FLECHA */

.catalog-category-panel .filter-right{
    display:flex;
    align-items:center;
    gap:12px;

    margin-left:10px;
}

.catalog-category-panel .filter-right small{
    min-width:42px;
    height:36px;

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

    padding:0 10px;

    color:#eee;

    background:
        linear-gradient(
            180deg,
            #252a30,
            #181c21
        );

    border:1px solid #343a41;
    border-radius:30px;

    font-size:13px;
    font-weight:700;
}

.catalog-category-panel .category-arrow{
    color:#e5e7e9;

    font-size:29px;
    font-weight:400;
    line-height:1;

    transition:
        transform .2s ease,
        color .2s ease;
}

.catalog-category-panel
.category-filter-group:has(.subfilters.open)
.category-arrow{
    color:#fff;
    transform:rotate(90deg);
}

.catalog-category-panel
#filters > .filter > b{
    width:42px;
    height:42px;

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

    color:#fff;

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

    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;

    font-size:29px;
    font-weight:400;
    line-height:1;
}


/* SUBCATEGORÍAS */

.catalog-category-panel .subfilters{
    display:none;

    margin:7px 4px 2px 12px;
    padding:7px 0 7px 13px;

    background:transparent;

    border-left:1px solid #363b42;
}

.catalog-category-panel .subfilters.open{
    display:block;
}

.catalog-category-panel .subfilter{
    min-height:38px;

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

    gap:10px;

    padding:8px 13px;

    color:#9ba1a8;

    background:transparent;

    border:0;
    border-radius:7px;

    font-size:12px;
    font-weight:600;

    cursor:pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.catalog-category-panel .subfilter span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.catalog-category-panel .subfilter:hover{
    color:#fff;
    background:#171b20;
}

.catalog-category-panel .subfilter.active{
    color:#fff;
    background:rgba(218,18,50,.12);
}

.catalog-category-panel .subfilter small{
    color:#818890;

    font-size:10px;
    font-weight:700;
}


/* =========================================================
   CONSULTA WHATSAPP
   ========================================================= */

.catalog-help-card{
    position:relative;

    margin-top:18px;
    padding:22px 18px 18px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(5,9,11,.38) 0%,
            rgba(4,8,10,.62) 55%,
            rgba(3,6,8,.94) 100%
        ),
        url("assets/montanas-whatsapp.jpg")
        center center / cover
        no-repeat;

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

    box-shadow:
        0 20px 45px rgba(0,0,0,.38);
}

.catalog-help-card::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 20% 25%,
            rgba(18,255,100,.12),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.04),
            rgba(0,0,0,.28)
        );
}

.catalog-help-card > *{
    position:relative;
    z-index:1;
}

.catalog-help-card .help-main{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.catalog-help-card .help-whatsapp-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;

    display:block;

    color:#35f276;

    filter:
        drop-shadow(
            0 0 10px rgba(53,242,118,.34)
        );
}

.catalog-help-card .help-copy{
    flex:1;
}

.catalog-help-card .help-copy h3{
    margin:2px 0 8px;

    color:#fff;

    font-size:20px;
    font-weight:900;
    line-height:1.05;
    letter-spacing:.3px;
}

.catalog-help-card .help-copy p{
    min-height:0;
    margin:0;

    color:#d0d4d8;

    font-size:13px;
    line-height:1.45;
}

.catalog-help-card .help-whatsapp-button{
    width:100%;
    height:54px;

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

    gap:11px;

    margin-top:19px;
    padding:0 14px;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            rgba(5,94,44,.78),
            rgba(2,44,24,.70)
        );

    border:2px solid #28df69;
    border-radius:11px;

    font-size:11px;
    font-weight:900;
    letter-spacing:.5px;

    box-shadow:
        0 0 22px rgba(20,221,93,.13);

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

.catalog-help-card .help-whatsapp-button:hover{
    background:
        linear-gradient(
            90deg,
            rgba(8,120,55,.9),
            rgba(4,66,33,.86)
        );

    transform:translateY(-1px);

    box-shadow:
        0 0 25px rgba(20,221,93,.21);
}

.catalog-help-card .help-button-whatsapp-icon{
    width:25px;
    height:25px;
    flex:0 0 25px;

    display:block;

    color:#fff;
}

.catalog-help-card .help-whatsapp-button span{
    flex:1;
    text-align:center;
}

.catalog-help-card .help-whatsapp-button b{
    font-size:26px;
    font-weight:400;
}

.help-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    margin-top:20px;
    padding-top:16px;

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

.help-benefit{
    min-width:0;

    display:flex;
    align-items:center;
    gap:7px;

    padding:0 8px;

    color:#aeb4ba;

    border-right:1px solid rgba(255,255,255,.12);
}

.help-benefit:first-child{
    padding-left:0;
}

.help-benefit:last-child{
    padding-right:0;
    border-right:0;
}

.help-benefit svg{
    width:21px;
    height:21px;
    flex:0 0 21px;

    fill:#e4e7e9;
}

.help-benefit span{
    font-size:9px;
    line-height:1.35;
}


/* =========================================================
   WHATSAPP INLINE - HEADER / PRODUCTOS / MODAL
   ========================================================= */

.wa-ring{
    fill:none;
    stroke:currentColor;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.wa-phone{
    fill:currentColor;
}

.wa .wa-inline-icon{
    width:45px;
    height:45px;
    flex:0 0 45px;

    display:block;

    color:#28c64e;
}

.consult .consult-wa-icon{
    display:none;
}

.detail-wa .wa-inline-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;

    display:block;

    color:#46df66;
}


/* =========================================================
   RESPONSIVE DEL LATERAL
   ========================================================= */

@media(max-width:1000px){

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

    .catalog-sidebar{
        max-width:520px;
        margin:0 auto;
    }

}

@media(max-width:560px){

    main.wrap.layout{
        width:calc(100vw - 24px);
        max-width:calc(100vw - 24px);
        min-width:0;

        margin-left:auto;
        margin-right:auto;
    }

    .layout > *,
    .catalog-sidebar,
    .catalog-category-panel,
    .catalog-help-card{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .catalog-category-panel{
        padding:20px 13px 15px;
    }

    .category-panel-head h3{
        font-size:21px;
    }

    .catalog-category-panel .filter{
        width:100%;
        max-width:100%;
        min-width:0;

        min-height:62px;
        padding:0 13px;
    }

    .catalog-category-panel .filter-label{
        flex:1 1 auto;
        min-width:0;

        gap:13px;
        font-size:14px;
    }

    .catalog-category-panel .filter-right{
        flex:0 0 auto;
        min-width:0;
    }

    .catalog-category-panel .cat-icon-svg{
        width:31px;
        height:31px;
        flex-basis:31px;
    }

    .catalog-category-panel .filter-right small{
        min-width:38px;
        height:32px;
        font-size:12px;
    }

    .catalog-help-card .help-copy h3{
        font-size:19px;
    }

    .catalog-help-card .help-main,
    .catalog-help-card .help-copy,
    .catalog-help-card .help-whatsapp-button{
        max-width:100%;
        min-width:0;
    }

    .catalog-help-card .help-copy p{
        overflow-wrap:anywhere;
    }

}

/* AG-YARARA-5FOTOGRAFIAS */
/* Las miniaturas se acomodan en varias filas en pantallas pequeñas. */
@media(max-width:650px){.detail-gallery{flex-wrap:wrap}.detail-gallery .thumb{flex:0 0 72px}}