*{
    margin:0;

    box-sizing: border-box;

    padding: 0;
}
:root{

    /* ===== PALETA PRINCIPAL ===== */

    --color-fondo: #eedec0;
    --color-superficie: #ebcea0;
    --color-tarjeta: #e0c69f;

    /* ===== ACENTOS ===== */

    --color-acento: #D5B36A;
    --color-acento-claro: #E8D09A;
    --color-acento-oliva: #597239;

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

    --color-texto-claro: rgb(253, 245, 234);
    --color-texto: #3d2f25;
    --color-texto-secundario: #554537;

    /* ===== BORDES ===== */

    --color-borde: #7A6046;
    --color-borde-suave: rgba(122,96,70,.18);

    /* ===== SOMBRAS ===== */

    --color-sombra-exagerada: rgba(47,36,28,.77);
    --color-sombra-fuerte: rgba(47,36,28,.52);
    --color-sombra-media: rgba(47,36,28,.31);
    --color-sombra-suave: rgba(47,36,28,.12);

}

/* -----HERO----- */

#hero{
    background-color: transparent;

    position: relative;

    height: 480px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}
.hero-content {

    position: relative;

    z-index:1;

    display: inline-block;

    text-align: center;
}
.hero-content h2{
    font-size:58px;

    color: var(--color-texto-claro);

    text-shadow:3px 3px 8px var(--color-sombra-fuerte);

    font-variant:small-caps;

    margin-bottom:15px;

    letter-spacing:1px;
}
.hero-content p{
    font-size: 38px;

    color: var(--color-texto-claro);

    text-shadow: 3px 3px 8px var(--color-sombra-fuerte);
}
#ref-banner {
    color: var(--color-acento-claro);
}
.hero-content::before{
    background:

    radial-gradient(

    ellipse,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.145) 50%,
    rgba(0,0,0,0.054) 100%
    );

    content:"";

    position:absolute;

    inset:-40px;

    z-index:-1;
}
.hero-image{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center
}

/* ----- HEADER ----- */

.site-header{

    width:100%;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:sticky;

    top:0;

    z-index:1000;

    overflow:visible;

    transform:translateY(0);

    background:
        rgba(238,222,192,.97);

    border-bottom:
        1px solid transparent;

    box-shadow:
        0 0 0 rgba(47,36,28,0);

    backdrop-filter:
        blur(10px);

    transition:
        transform .58s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        border-color .35s ease,
        background-color .35s ease;

    isolation:isolate;

}
.site-header.is-scrolled{

    background:
        rgba(243, 217, 169, 0.94);

    border-bottom-color:
        var(--color-sombra-suave);

    box-shadow:
        0 8px 22px var(--color-sombra-suave);

}
html{

    scroll-behavior:smooth;

    scroll-padding-top:110px;

}
.site-header.is-collapsed{

    transform:
        translateY(
            calc(-100% + 12px)
        );

    box-shadow:none;

}
/* ===== PESTAÑA PARA PLEGAR EL HEADER ===== */

.header-toggle{

    position:absolute;

    left:50%;

    bottom:-22px;

    width:48px;

    height:34px;

    display:grid;

    place-items:center;

    padding:0;

    border:
        1px solid rgba(89,114,57,.36);

    border-top:none;

    border-radius:
        0 0
        17px 17px;

    background:
        linear-gradient(
            135deg,
            #b6c982 0%,
            var(--color-acento-claro) 34%,
            var(--color-acento) 62%,
            var(--color-acento-oliva) 100%
        );

    color:var(--color-texto);

    box-shadow:
        0 5px 12px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.65);

    cursor:pointer;

    opacity:0;

    pointer-events:none;

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

    transition:
        opacity .28s ease,
        transform .45s cubic-bezier(.22,1,.36,1),
        filter .2s ease,
        box-shadow .2s ease;

}


/* La pestaña aparece después de comenzar a bajar */

.site-header.is-toggle-ready .header-toggle,
.site-header.is-collapsed .header-toggle{

    opacity:1;

    pointer-events:auto;

    transform:
        translateX(-50%);

}


.header-toggle:hover{

    filter:brightness(1.06);

    box-shadow:
        0 7px 15px var(--color-sombra-media),
        inset 0 2px 4px rgba(255,255,255,.75);

}


.header-toggle:active{

    transform:
        translateX(-50%)
        scale(.94);

}
.header-toggle-arrow{

    width:11px;

    height:11px;

    border-right:
        2px solid currentColor;

    border-bottom:
        2px solid currentColor;

    transform:
        rotate(225deg);

    transition:
        transform .42s cubic-bezier(.22,1,.36,1);

}


/* Cuando está plegado, apunta hacia abajo */

.site-header.is-collapsed
.header-toggle-arrow{

    transform:
        rotate(45deg);

}

.brand-title{

    margin:0;

    font-size:38px;

    color:var(--color-texto);

    letter-spacing:1px;

    white-space: nowrap;

}
.brand-title::after{

    content:"";

    display:block;

    width:100%;

    height:5px;

    margin:4px auto 0;

    border-radius:999px;

    opacity:0;

    transform:scaleX(0);

    transform-origin:center;

    background:

        /* Brillo móvil */

        linear-gradient(
            90deg,
            transparent,
            rgba(255,247,204,.15),
            rgba(232,208,154,.9),
            rgba(255,247,204,.15),
            transparent
        ),

        /* Barra principal con puntas transparentes */

        linear-gradient(
            90deg,

            transparent 0%,

            #493326 11%,

            #73523b 28%,

            var(--color-borde) 42%,

            var(--color-acento-oliva) 56%,

            var(--color-acento) 70%,

            #73523b 86%,

            #493326 91%,

            transparent 100%
        );

    background-repeat:no-repeat;

    background-size:
        22% 100%,
        100% 100%;

    background-position:
        -35% 0,
        0 0;

    box-shadow:
        0 3px 8px var(--color-sombra-media),
        0 1px 2px rgba(255,255,255,.22);

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        opacity .38s ease,
        filter .4s ease;

}
.site-header:not(.is-collapsed):hover
.brand-title::after{

    opacity:1;

    transform:scaleX(1);

    filter:brightness(1.03);

    animation:
        brandUnderlineShine
        .85s
        ease-out
        .48s
        forwards;

}

@keyframes brandUnderlineShine{

    0%{

        background-position:
            -35% 0,
            0 0;

    }

    100%{

        background-position:
            135% 0,
            0 0;

    }

}
.header-action{

    width:53px;

    height:53px;

    position:absolute;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    border:

    1px solid var(--color-acento);

    background:

    linear-gradient(
        180deg,
        #dac592,
        #ffd375
    );

    box-shadow:

        0 2px 5px var(--color-sombra-media),

        inset 0 3px 7px rgba(255,255,255,.65),

        inset 0 -3px 6px var(--color-sombra-suave);

    cursor:pointer;

    transition:

    transform .2s ease,

    background .2s ease;

}
.header-action img{

    width:30px;

    height:30px;

    object-fit:contain;

}
.menu-button{

    left:65px;

}
.cart-button{

    right:65px;

}
.header-action:hover{

    transform:translateY(-2px);

    box-shadow:
        0 4px 8px var(--color-sombra-media),
        inset 0 2px 5px rgba(255,255,255,.65),
        inset 0 -2px 3px var(--color-sombra-suave);

}
.header-action:active{

    transform:

    scale(.90);

    box-shadow:

    0 2px 6px var(--color-sombra-media),

    inset 0 2px 4px rgb(238, 237, 237);

}
.cart-counter{

    position:absolute;

    right:-10px;

    top:-7px;

    min-width:22px;

    height:22px;

    padding:0 5px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:999px;

    background:
        linear-gradient(
            #abdd7d,
            var(--color-acento-oliva)
        );

    border:
        1px solid rgba(89,114,57,.35);

    color:var(--color-texto-claro);

    font-size:15px;

    font-weight:bold;

    text-shadow:
        0 1px 2px rgba(47,36,28,.55);

    box-shadow:
        0 3px 7px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.65),
        inset 0 -2px 3px rgba(89,114,57,.22);

}

.cart-counter.pop{

    animation:cartPop .28s ease;

}

@keyframes cartPop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.35);

    }

    100%{

        transform:scale(1);

    }

}
.header-expand{

    display:none;

}

/* ===== IDENTIDAD DE MARCA, Header ===== */

.brand-container{

    width:calc(100% - 270px);

    max-width:1200px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

}

.brand-decoration{

    flex:0 1 250px;

    max-width:250px;

    min-width:100px;

    display:flex;

    align-items:center;

    gap:9px;

}

.brand-decoration .line{

    flex:1 1 auto;

    width:auto;

    min-width:25px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-borde) 16%,
            var(--color-borde) 84%,
            transparent
        );

    transform:scaleX(0);

    opacity:0;

}
/* Lado izquierdo: el rombo se acerca al título */

.brand-decoration.left .line:first-child{

    flex-grow:1.25;

}

.brand-decoration.left .line:last-child{

    flex-grow:.75;

}


/* Lado derecho: el rombo se acerca al título */

.brand-decoration.right .line:first-child{

    flex-grow:.75;

}

.brand-decoration.right .line:last-child{

    flex-grow:1.25;

}
.brand-decoration .line:first-child{

    transform-origin:right center;

}

.brand-decoration .line:last-child{

    transform-origin:left center;

}

.line.show{

    animation:
    brandLine 1.4s cubic-bezier(.18,1,.30,1) forwards;

}
.brand-decoration .diamond{

    width:15px;

    height:15px;

    flex:0 0 16px;

    background:
        linear-gradient(
            135deg,
            var(--color-acento),
            var(--color-acento-oliva)
        );

    transform:rotate(45deg) scale(0);

    border-radius:2px;

    box-shadow:
        0 0 8px rgba(89,114,57,.18);

}
.diamond.glow{

    animation:
    brandDiamond .9s cubic-bezier(.18,1,.30,1) forwards,
    diamondGlow 1s ease;

}


@keyframes diamondGlow{

    0%{
        filter:brightness(1);
        box-shadow:0 0 8px rgba(89,114,57,.18);
    }

    50%{
        filter:brightness(1.6);
        box-shadow:0 0 18px rgba(89,114,57,.55);
    }

    100%{
        filter:brightness(1);
        box-shadow:0 0 8px rgba(89,114,57,.18);
    }

}
@keyframes brandLine{

    from{

        transform:scaleX(0);
        opacity:0;

    }

    to{

        transform:scaleX(1);
        opacity:.85;

    }

}
@keyframes brandDiamond{

    0%{

        transform:rotate(45deg) scale(0);

        opacity:0;

    }

    70%{

        transform:rotate(45deg) scale(1.18);

        opacity:1;

    }

    100%{

        transform:rotate(45deg) scale(1);

    }

}
/* -----NOSOTROS----- */
/* =========================================
   REWORK TARJETAS DE PRESENTACIÓN
========================================= */

.presentation-cards{

    position:relative;

    isolation:isolate;

    width:min(
        1100px,
        calc(100% - 36px)
    );

    margin:
        8px auto
        70px;

    padding:
        25px 18px
        34px;

    overflow:visible;

    border:none;

    border-radius:0;

    background:transparent;

    box-shadow:none;

}


/* Luz ambiental */

.presentation-cards::before{

    display:none;

}

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

.presentation-cards-heading{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:
        0 auto
        30px;

    text-align:center;

}


.presentation-kicker{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;

    padding:
        6px 12px;

    border:none;

    border-radius:999px;

    background:
        rgba(232,208,154,.18);

    color:var(--color-acento-oliva);

    font-size:12px;

    font-weight:800;

    letter-spacing:1.3px;

    text-transform:uppercase;

}


.presentation-cards-heading h2{

    max-width:720px;

    margin:
        0 auto
        11px;

    color:var(--color-texto);

    font-size:
        clamp(28px,3.2vw,39px);

    line-height:1.15;

    text-wrap:balance;

    text-shadow:
        0 3px 8px rgba(47,36,28,.17);

}


.presentation-cards-heading p{

    max-width:640px;

    margin:0 auto;

    color:var(--color-texto-secundario);

    font-size:17px;

    line-height:1.5;

    text-wrap:balance;

}

/* =========================================
   CUADRÍCULA
========================================= */

.presentation-cards-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    align-items:stretch;

    gap:22px;

}
.philosophy-continuation{

    width:min(560px,70%);

    margin:
        0 auto
        27px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:13px;

}


.continuation-line{

    flex:1;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #73523b,
            var(--color-acento-oliva),
            var(--color-acento),
            transparent
        );

    opacity:.75;

}


.continuation-diamond{

    width:12px;

    height:12px;

    flex:0 0 12px;

    transform:rotate(45deg);

    border-radius:2px;

    background:
        linear-gradient(
            135deg,
            var(--color-acento-claro),
            var(--color-acento),
            var(--color-acento-oliva)
        );

    box-shadow:
        0 3px 8px rgba(47,36,28,.17);

}

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

#nosotros .presentation-card{

    background:

        radial-gradient(
            circle at 15% 0%,
            rgba(255,250,229,.42),
            transparent 43%
        ),

        linear-gradient(
            150deg,
            rgba(235,206,160,.72),
            rgba(224,198,159,.80)
        );

    border-color:
        rgba(115,82,59,.15);

    box-shadow:
        0 10px 23px rgba(47,36,28,.11),
        inset 0 1px 2px rgba(255,255,255,.48);

}

/* Borde superior de color */

#nosotros .presentation-card::before{

    content:"";

    position:absolute;

    top:0;

    left:18px;

    right:18px;

    height:4px;

    border-radius:
        0 0
        999px 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-acento-oliva),
            var(--color-acento),
            transparent
        );

}


/* Número decorativo */

#nosotros .presentation-card::after{

    content:
        attr(data-step);

    position:absolute;

    z-index:-1;

    right:13px;

    bottom:-18px;

    color:
        rgba(115,82,59,.085);

    font-size:94px;

    font-weight:900;

    line-height:1;

    pointer-events:none;

}


/* Revelación */

#nosotros
.presentation-card.is-revealed{

    animation:
        presentationCardReveal
        .75s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes presentationCardReveal{

    0%{

        opacity:0;

        filter:blur(5px);

        transform:
            translateY(28px)
            scale(.965);

    }

    72%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(-2px)
            scale(1.008);

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================
   ICONOS Y CONTENIDO
========================================= */

#nosotros
.presentation-card
.icon-card,

#nosotros
.presentation-card
.icon-cardP,

#nosotros
.presentation-card
.icon-cardPP{

    position:relative;

    z-index:2;

    width:66px;

    height:66px;

    flex:
        0 0
        66px;

}


#nosotros
.presentation-card
.content-card{

    position:relative;

    z-index:2;

    flex:1;

    text-align:left;

}


#nosotros
.presentation-card h3{

    margin-bottom:9px;

    color:var(--color-texto);

    font-size:
        clamp(22px,2vw,27px);

    line-height:1.14;

}


#nosotros
.presentation-card p{

    margin:0;

    color:var(--color-texto-secundario);

    font-size:17px;

    line-height:1.5;

}


.presentation-text-mobile{

    display:none;

}


/* =========================================
   INTERACCIÓN EN COMPUTADORA
========================================= */

#nosotros .presentation-card{

    transition:
        translate .34s cubic-bezier(.22,1,.36,1),
        box-shadow .38s ease,
        border-color .34s ease,
        filter .34s ease;

}


@media (hover:hover) and (pointer:fine){

    #nosotros
    .presentation-card.is-revealed:hover{

        translate:
            0 -7px;

        filter:
            brightness(1.025);

        border-color:
            rgba(213,179,106,.55);

        box-shadow:
            0 0 18px rgba(255,239,186,.48),
            0 0 34px rgba(213,179,106,.27),
            0 18px 34px rgba(47,36,28,.13),
            inset 0 1px 3px rgba(255,255,255,.67);

    }

}
#nosotros{
    background-color: transparent;

    display:flex;

    flex-direction:column;
    
    text-align: center;

    align-items: center;

}
.nosotros-init{
    display:flex;

    flex-direction:column;
    
    text-align: center;

    align-items: center;

}

.nosotros-init h2{
    text-shadow:2px 2px 6px var(--color-sombra-fuerte);

    font-size: 65px;
    
    margin-bottom: 15px;

    padding: 7px;

    color: var(--color-texto);
}
.nosotros-init h3{
    text-shadow:2px 2px 4px var(--color-sombra-fuerte);

    font-size: 32px;
    
    margin-bottom: 15px;

    padding: 17px;

    color: var(--color-texto);
}
.nosotros-init p{

    text-shadow:2px 2px 4px var(--color-sombra-fuerte);

    font-size: 20px;

    padding-bottom: 15px;

    color: var(--color-texto);

    max-width: 77%;
}

.icon-card {
    width: 70px;
    height: 70px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--color-acento-claro);
    border-radius:50%;
    box-shadow:
    0 5px 15px var(--color-sombra-media),
    inset 0 7px 14px rgba(255,255,255,.90);
    border:1px solid rgba(95,70,48,.12);
}
.icon-card img{
    width: 80%;
    height: 80%;
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
}
.icon-cardP {
    width: 70px;
    height: 70px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--color-acento-claro);
    border-radius:50%;
    box-shadow:
    0 5px 15px var(--color-sombra-media),
    inset 0 7px 14px rgba(255,255,255,.90);
    padding-left: 8px;
    border:1px solid rgba(95,70,48,.12);
}
.icon-cardP img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.icon-cardPP {
    width: 70px;
    height: 70px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--color-acento-claro);
    border-radius:50%;
    box-shadow:
    0 5px 15px var(--color-sombra-media),
    inset 0 7px 14px rgba(255,255,255,.90),
    inset 0 2px 3px rgba(255,255,255,.35);
    padding-left: 7px;
    border:1px solid rgba(95,70,48,.12);
}
.icon-cardPP img{
    width: 78%;
    height: 78%;
    object-fit: contain;
    padding-top: 5px;
    padding-right: 8px;
}
.content-card{
    flex: 1;
    text-align: left;
}
.icon-card,
.icon-cardP,
.icon-cardPP{
    flex:0 0 70px;

    width:70px;
    height:70px;

    position:relative;

    overflow:hidden;

}
.icon-card::before,
.icon-cardP::before,
.icon-cardPP::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-120%;

    width:50%;

    height:180%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );

    transform:rotate(25deg);

}
@keyframes iconShine{

    from{

        left:-120%;

    }

    to{

        left:170%;

    }

}
.icon-card.shine::before,
.icon-cardP.shine::before,
.icon-cardPP.shine::before{

    animation:iconShine .75s ease forwards;

}

/* -----NOSOTROS, Init----- */

.nosotros-init{

    width:100%;

    padding:
        28px 20px
        8px;

    overflow:hidden;

}

.nosotros-init > h2,
.nosotros-init > h3{

    opacity:0;

    filter:blur(7px);

    transform:
        translateY(22px)
        scale(.97);

}
/* ===== ACTIVACIÓN INDIVIDUAL DE TÍTULOS ===== */

.philosophy-heading{

    opacity:0;

    filter:blur(7px);

    transform:
        translateY(22px)
        scale(.97);

}

.philosophy-heading.is-visible{

    animation:
        philosophyHeading
        .92s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


/* ===== ESCRITURA INDIVIDUAL DE PÁRRAFOS ===== */

.typing-text{

    opacity:1;

    transform:none;

    filter:none;

    line-height:1.55;

}

.typing-text .word{

    display:inline-block;

    margin-right:.27em;

    opacity:0;

    filter:blur(4px);

    transform:
        translateY(.55em)
        scale(.96);

}

.typing-text.is-visible .word{

    animation:
        philosophyWord
        .34s
        cubic-bezier(.22,1,.36,1)
        var(--word-delay)
        forwards;

}


/* ===== ACTIVACIÓN INDIVIDUAL DE BARRAS ===== */

.nosotros-divider.is-visible{

    animation:
        philosophyDividerOpen
        1s
        cubic-bezier(.22,1,.36,1)
        forwards;

}

.nosotros-divider.is-visible::after{

    animation:
        philosophyDividerShine
        .85s
        ease-out
        .88s
        forwards;

}
@keyframes philosophyHeading{

    0%{

        opacity:0;

        filter:blur(7px);

        transform:
            translateY(22px)
            scale(.97);

        letter-spacing:2px;

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(0)
            scale(1);

        letter-spacing:normal;

    }

}

.nosotros-init > p{

    opacity:1;

    transform:none;

    filter:none;

    line-height:1.55;

}

.nosotros-init > p .word{

    display:inline-block;

    margin-right:.27em;

    opacity:0;

    filter:blur(4px);

    transform:
        translateY(.55em)
        scale(.96);

}

@keyframes philosophyWord{

    0%{

        opacity:0;

        filter:blur(4px);

        transform:
            translateY(.55em)
            scale(.96);

    }

    65%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(-1px)
            scale(1.01);

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}

.nosotros-divider{

    position:relative;

    height:5px;

    border-radius:999px;

    overflow:hidden;

    opacity:0;

    transform:scaleX(0);

    transform-origin:center;

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            #493326 9%,

            #73523b 28%,

            var(--color-borde) 42%,

            var(--color-acento-oliva) 53%,

            var(--color-acento) 66%,

            #73523b 84%,

            transparent 100%
        );

    box-shadow:
        0 4px 11px var(--color-sombra-media),
        0 1px 2px rgba(255,255,255,.24);

}

.nosotros-divider.top{

    --open-delay:0ms;

    width:46%;

    max-width:560px;

    margin:
        0 auto
        34px;

}

.nosotros-divider.bottom{

    --open-delay:var(--bottom-delay, 4200ms);

    width:68%;

    max-width:760px;

    margin:
        36px auto
        10px;

}

@keyframes philosophyDividerOpen{

    0%{

        opacity:0;

        transform:scaleX(0);

        filter:brightness(.75);

    }

    70%{

        opacity:1;

        transform:scaleX(1.025);

        filter:brightness(1.05);

    }

    100%{

        opacity:1;

        transform:scaleX(1);

        filter:brightness(1);

    }

}

.nosotros-divider::after{

    content:"";

    position:absolute;

    top:-4px;

    bottom:-4px;

    left:-30%;

    width:22%;

    opacity:0;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,247,204,.82),
            rgba(232,208,154,.95),
            transparent
        );

    filter:blur(.7px);

}
@keyframes philosophyDividerShine{

    0%{

        left:-30%;

        opacity:0;

    }

    18%{

        opacity:1;

    }

    65%{

        opacity:.9;

    }

    100%{

        left:112%;

        opacity:0;

    }

}
/* =========================================================
   AUTHORITY — CONTINUIDAD VISUAL
========================================================= */

#entregas.authority{

    position:relative;

    isolation:isolate;

    width:min(
        1120px,
        calc(100% - 28px)
    );

    margin:
        0 auto
        clamp(65px,8vw,105px);

    padding:
        clamp(25px,4vw,47px)
        clamp(18px,5vw,60px)
        clamp(40px,5vw,65px);

    display:flex;

    flex-direction:column;

    align-items:center;

    overflow:visible;

    text-align:center;

    background:

        radial-gradient(
            ellipse at 50% 26%,
            rgba(255,249,225,.46),
            rgba(232,208,154,.14) 42%,
            transparent 70%
        ),

        radial-gradient(
            ellipse at 12% 67%,
            rgba(213,179,106,.08),
            transparent 45%
        ),

        radial-gradient(
            ellipse at 90% 69%,
            rgba(89,114,57,.055),
            transparent 45%
        );

}


/* Luz alrededor del contador */

#entregas.authority::before{

    content:"";

    position:absolute;

    z-index:-1;

    top:90px;

    left:50%;

    width:min(
        720px,
        88vw
    );

    height:430px;

    transform:
        translateX(-50%);

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse,
            rgba(255,243,194,.28),
            rgba(213,179,106,.09) 43%,
            transparent 72%
        );

    filter:blur(17px);

}


/* Luz inferior hacia el catálogo */

#entregas.authority::after{

    content:"";

    position:absolute;

    z-index:-1;

    left:50%;

    bottom:-85px;

    width:min(
        820px,
        90%
    );

    height:210px;

    transform:
        translateX(-50%);

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse,
            rgba(232,208,154,.16),
            rgba(89,114,57,.04) 48%,
            transparent 73%
        );

    filter:blur(17px);

}
/* =========================================================
   CONECTOR HACIA AUTHORITY
========================================================= */

.authority-bridge{

    width:min(
        570px,
        67%
    );

    margin:
        0 auto
        29px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    opacity:0;

    transform:
        translateY(14px)
        scaleX(.84);

    transform-origin:center;

}


.authority-bridge-line{

    flex:1;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #73523b,
            var(--color-acento-oliva),
            var(--color-acento),
            transparent
        );

    opacity:.74;

}


.authority-bridge-diamond{

    width:12px;

    height:12px;

    flex:0 0 12px;

    border-radius:2px;

    transform:
        rotate(45deg);

    background:
        linear-gradient(
            135deg,
            var(--color-acento-claro),
            var(--color-acento),
            var(--color-acento-oliva)
        );

    box-shadow:
        0 3px 9px
        rgba(47,36,28,.18);

}


.authority-bridge.is-visible{

    animation:
        authorityBridgeReveal
        .78s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes authorityBridgeReveal{

    0%{

        opacity:0;

        transform:
            translateY(14px)
            scaleX(.84);

    }

    72%{

        opacity:1;

        transform:
            translateY(-1px)
            scaleX(1.015);

    }

    100%{

        opacity:.84;

        transform:
            translateY(0)
            scaleX(1);

    }

}
/* =========================================================
   CABECERA DE AUTHORITY
========================================================= */

.authority-heading{

    width:100%;

    max-width:940px;

    display:flex;

    flex-direction:column;

    align-items:center;

}


.authority-kicker{

    display:inline-flex;

    align-items:center;

    margin-bottom:17px;

    padding:
        6px 12px;

    border-radius:999px;

    background:
        rgba(255,248,221,.24);

    color:var(--color-acento-oliva);

    font-size:12px;

    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;

    opacity:0;

    transform:
        translateY(11px)
        scale(.96);

}


.authority-kicker.is-visible{

    animation:
        authorityMetaReveal
        .58s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


.authority-live-label{

    display:inline-flex;

    align-items:center;

    gap:9px;

    margin-bottom:4px;

    color:var(--color-texto-secundario);

    font-size:13px;

    font-weight:750;

    letter-spacing:1.1px;

    text-transform:uppercase;

    opacity:0;

    transform:
        translateY(10px);

}


.authority-live-label.is-visible{

    animation:
        authorityMetaReveal
        .58s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes authorityMetaReveal{

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


.authority-live-dot{

    position:relative;

    width:9px;

    height:9px;

    flex:0 0 9px;

    border-radius:50%;

    background:
        var(--color-acento-oliva);

    box-shadow:
        0 0 0 5px
        rgba(89,114,57,.09);

}


.authority-live-label.is-visible
.authority-live-dot::after{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:50%;

    background:
        rgba(89,114,57,.18);

    animation:
        authorityLivePulse
        2.3s
        ease-out
        infinite;

}


@keyframes authorityLivePulse{

    0%{

        opacity:.75;

        transform:scale(.65);

    }

    75%{

        opacity:0;

        transform:scale(1.65);

    }

    100%{

        opacity:0;

        transform:scale(1.65);

    }

}


/* ===== CONTADOR ===== */

.authority-counter-stage{

    position:relative;

    width:100%;

    margin:
        4px auto
        5px;

    opacity:0;

    filter:blur(6px);

    transform:
        translateY(24px)
        scale(.94);

}


.authority-counter-stage.is-visible{

    animation:
        authorityCounterStageReveal
        .82s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes authorityCounterStageReveal{

    0%{

        opacity:0;

        filter:blur(6px);

        transform:
            translateY(24px)
            scale(.94);

    }

    72%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(-2px)
            scale(1.008);

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


#entregas
.authority-counter{

    margin:0;

    padding:
        7px 0;

    color:var(--color-texto);

    font-size:
        clamp(92px,14vw,156px);

    font-weight:900;

    line-height:.86;

    letter-spacing:-.035em;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 7px 20px rgba(47,36,28,.28),
        0 18px 40px rgba(47,36,28,.10);

}


#entregas
.authority-counter.is-finished{

    animation:
        authorityCounterFinish
        .68s
        cubic-bezier(.22,1,.36,1);

}


@keyframes authorityCounterFinish{

    0%{

        transform:scale(1);

    }

    48%{

        transform:scale(1.035);

        text-shadow:
            0 0 24px rgba(255,240,180,.72),
            0 0 49px rgba(213,179,106,.34);

    }

    100%{

        transform:scale(1);

    }

}


/*
Actividad permanente sin inventar
nuevas entregas numéricas.
*/

#entregas
.authority-counter.is-live{

    animation:
        authorityCounterLiving
        5.2s
        ease-in-out
        infinite;

}


@keyframes authorityCounterLiving{

    0%,
    100%{

        filter:brightness(1);

        text-shadow:
            0 7px 20px rgba(47,36,28,.28),
            0 18px 40px rgba(47,36,28,.10);

    }

    50%{

        filter:brightness(1.045);

        text-shadow:
            0 5px 19px rgba(47,36,28,.23),
            0 0 30px rgba(213,179,106,.21),
            0 0 52px rgba(89,114,57,.08);

    }

}


/* ===== TÍTULO ===== */

#entregas
.authority-title{

    max-width:850px;

    margin:
        20px auto
        18px;

    padding:0;

    color:var(--color-texto);

    font-size:
        clamp(30px,4vw,47px);

    font-weight:800;

    line-height:1.08;

    letter-spacing:.055em;

    text-transform:uppercase;

    text-wrap:balance;

    text-shadow:
        0 4px 10px rgba(47,36,28,.21);

    opacity:0;

    filter:blur(5px);

    transform:
        translateY(20px)
        scale(.97);

}


#entregas
.authority-title.is-visible{

    animation:
        authorityTitleReveal
        .78s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes authorityTitleReveal{

    0%{

        opacity:0;

        filter:blur(5px);

        transform:
            translateY(20px)
            scale(.97);

    }

    72%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(-2px)
            scale(1.006);

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


/* ===== DESCRIPCIÓN ===== */

#entregas
.authority-description{

    width:min(
        790px,
        94%
    );

    max-width:none;

    margin:0 auto;

    padding:0;

    color:var(--color-texto-secundario);

    font-size:
        clamp(17px,1.7vw,21px);

    line-height:1.67;

    text-align:center;

    text-wrap:balance;

    text-shadow:
        0 2px 5px rgba(47,36,28,.09);

    opacity:0;

    filter:blur(3px);

    transform:
        translateY(14px);

}


#entregas
.authority-description.is-visible{

    animation:
        authorityDescriptionReveal
        .66s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes authorityDescriptionReveal{

    to{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(0);

    }

}
/* =========================================================
   VALORES CONECTADOS
========================================================= */

.authority-values{

    position:relative;

    width:min(
        960px,
        100%
    );

    margin:
        clamp(38px,5vw,57px)
        auto
        0;

    display:grid;

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

    align-items:start;

    gap:
        clamp(22px,3vw,42px);

}


/*
Línea compartida que conecta
los tres mensajes.
*/

.authority-values::before{

    content:"";

    position:absolute;

    z-index:0;

    top:15px;

    left:10%;

    right:10%;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(115,82,59,.50),
            var(--color-acento-oliva),
            var(--color-acento),
            rgba(115,82,59,.50),
            transparent
        );

    opacity:.58;

}


.authority-value{

    position:relative;

    z-index:1;

    min-width:0;

    padding:
        39px 17px
        10px;

    text-align:center;

    opacity:0;

    filter:blur(4px);

    transform:
        translateY(22px)
        scale(.97);

}


/*
Rombo que conecta cada mensaje
con la línea compartida.
*/

.authority-value::before{

    content:"";

    position:absolute;

    top:8px;

    left:50%;

    width:13px;

    height:13px;

    transform:
        translateX(-50%)
        rotate(45deg);

    border-radius:2px;

    background:
        linear-gradient(
            135deg,
            var(--color-acento-claro),
            var(--color-acento),
            var(--color-acento-oliva)
        );

    box-shadow:
        0 3px 9px rgba(47,36,28,.18),
        0 0 0 6px rgba(238,222,192,.72);

}


.authority-value.is-visible{

    animation:
        authorityValueReveal
        .72s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes authorityValueReveal{

    0%{

        opacity:0;

        filter:blur(4px);

        transform:
            translateY(22px)
            scale(.97);

    }

    72%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(-2px)
            scale(1.008);

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


.authority-value-index{

    display:block;

    margin-bottom:8px;

    color:var(--color-acento-oliva);

    font-size:12px;

    font-weight:800;

    letter-spacing:1.5px;

}


.authority-value strong{

    display:block;

    margin-bottom:8px;

    color:var(--color-texto);

    font-size:
        clamp(22px,2.2vw,28px);

    line-height:1.1;

    text-shadow:
        0 3px 7px rgba(47,36,28,.16);

}


.authority-value p{

    width:100%;

    max-width:270px;

    margin:0 auto;

    color:var(--color-texto-secundario);

    font-size:16px;

    line-height:1.45;

    text-wrap:balance;

}
/* ----- PRODUCTOS ----- */

#productos{

    background: transparent;

    padding-top:5%;

    padding-bottom:25px;

}
.productos-init{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}
.productos-init
.productos-heading-panel >h2,
.productos-init
.productos-heading-panel >p{

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22,1,.36,1);

}
.productos-init
.productos-heading-panel > h2.visible,
.productos-init
.productos-heading-panel > p.visible{

    opacity:1;

    transform:translateY(0);

}
.productos-init
.productos-heading-panel > h2{

    font-size:42px;

    letter-spacing:1px;

    color:var(--color-texto);

    margin-bottom:18px;

    text-shadow:
        2px 2px 6px
        var(--color-sombra-fuerte);

}


.productos-init
.productos-heading-panel > p{

    max-width:700px;

    font-size:24px;

    color:var(--color-texto);

    line-height:1.6;

    margin-bottom:35px;

}
.productos-divider{

    width:75%;
    max-width:680px;
    height:5px;

    margin:0 auto 45px;

    border-radius:999px;

    background:var(--color-borde);

    box-shadow:
        0 5px 15px var(--color-sombra-media);

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .9s cubic-bezier(.22,1,.36,1);

}
.productos-divider.visible{

    transform:scaleX(1);

}

/* # # TARJETAS DE VENTA # # */

.products-grid{

    width:min(1240px, 96%);

    margin:0 auto;

    padding:
        35px 24px
        85px;

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 340px)
        );

    justify-content:center;

    align-items:stretch;

    column-gap:28px;

    row-gap:42px;

}
@media (max-width:1050px){

    .products-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0, 340px)
            );

    }

}

@media (max-width:740px){

    .products-grid{

        width:100%;

        grid-template-columns:
            minmax(0, 340px);

        padding:
            28px 18px
            65px;

        row-gap:34px;

    }

}
.product-card{

    position:relative;

    width:100%;

    max-width: 340px;

    height:100%;

    margin:0;

    background:var(--color-tarjeta);

    border-radius:26px;

    overflow:hidden;

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

    box-shadow:
        0 10px 24px var(--color-sombra-media),
        inset 0 2px 4px rgba(255,255,255,.65);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
    
    opacity:0;

    transform:
        translateY(48px)
        rotate(5.35deg)
        scale(.8);

    transform-origin:center bottom;


}
.product-card.visible{

    opacity:1;

    transform:
        translateY(0)
        rotate(0deg)
        scale(1);

    animation:cardSettle 1.22s cubic-bezier(.39,1,.45,1) forwards;

    transition:opacity .35s ease;

}
@keyframes cardSettle{

    0%{

        transform:
            translateY(45px)
            rotate(.9deg)
            scale(.96);

    }

    82%{

        transform:
            translateY(-2px)
            rotate(-.15deg)
            scale(1);

    }

    100%{

        transform:
            translateY(0)
            rotate(0deg)
            scale(1);

    }

}
.product-card img{

    width:82%;

    height:150px;

    object-fit:cover;

    display:block;

}

.product-info{

    padding:8px;

    display:flex;

    flex-direction:column;

    flex:1;

}
.product-info h3{

    font-size:30px;

    color:var(--color-texto);

    margin-bottom:4px;

    letter-spacing: 1px;

    font-weight: 700;

}
.product-description{

    color:var(--color-texto);

    font-size:20px;

    line-height:1.35;

    font-weight:400;

    min-height:54px;

    margin-bottom:4px;

}
.product-weight{

    display:block;

    font-size:20px;

    color:var(--color-texto);

    margin-bottom:6px;

    font-weight: 400;
}
.product-price{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    width:100%;

    gap:6px;

}
.old-price{

    display:inline-block;

    font-size:27px;

    font-weight:650;

    color:var(--color-texto);

    transform:scale(1.24);

    transform-origin:left center;

}
.old-price.striked{

    opacity:.55;

    filter:saturate(.45);

    transform:
        translateY(-3px)
        scale(.94);

}
.old-price::after{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:100%;

    height:3px;

    background:#ff0000;

    border-radius:999px;

    opacity:0;

    transform:rotate(-7deg);

    transition:
        opacity .50s ease;

}
.old-price.fade{

    opacity:.30;

    transition:opacity .60s ease;

}
.old-price.shrink{

    transform:
        translateY(-3px)
        scale(.92);

    transition:
        transform .38s cubic-bezier(.34,1,.46,1);

}
.old-price.striked::after{

    opacity:1;

    margin-bottom: 10px;
}
.new-price{
    position:relative;

    overflow:hidden;

    display:inline-block;

    min-width:130px;

    white-space:nowrap;

    font-size:36px;

    font-weight:bold;

    color:var(--color-texto);

    opacity:0;

    filter:blur(4px);

    transform:
        translateY(14px)
        scale(.90);

}
.new-price::before{

    content:"";

    position:absolute;

    top:-10%;

    left:-35%;

    width:12%;

    height:200%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:rotate(20deg);

    opacity:0;

}
@keyframes priceShine{

    from{

        left:-35%;

        opacity:0;

    }

    5%{

        opacity:1;

    }

    25%{

        opacity:1;

    }

    to{

        left:80%;

        opacity:0;

    }
}
.new-price.shine::before{

    animation:priceShine .55s ease forwards;

}
.new-price.show{

    opacity:1;

    filter:blur(0);

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .30s ease,
        transform .36s cubic-bezier(.22,1,.36,1),
        filter .30s ease;

}
.new-price.finish{

    animation:priceFinish .22s ease;

}
@keyframes priceFinish{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}
.saving{

    color:var(--color-acento-oliva);

    font-weight:600;

    font-size:17px;

    text-shadow: 1px 1px 2px rgba(52, 141, 52, 0.6);

    opacity:0;

    transform:translateY(8px);

}
.saving.show{

    opacity:1;

    transform:translateY(0);

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

}

.quantity-selector{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    margin:18px 0;

}
.quantity-btn{

    width:46px;

    height:46px;

    border-radius:50%;

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

    background:linear-gradient(
        180deg,
        #f0e0b2,
        #ddc483
    );

    box-shadow:
        0 4px 10px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.85);

    cursor:pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease;

}
.quantity-btn:hover{

    transform:translateY(-2px);

}
.quantity-btn img{

    width:18px;

    height:18px;

    line-height:1;

}
.quantity-value{

    font-size:48px;

    font-weight:700;

    color:var(--color-texto);

    min-width:40px;

    text-align:center;

}

.quantity-value.change{

    animation: quantityBounce .22s ease;

}


@keyframes quantityBounce{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.25);
    }

    100%{
        transform:scale(1);
    }

}
.product-image{

    padding:16px 16px 0 16px;

}
.product-image img{

    width:100%;

    height:145px;

    object-fit:cover;

    border-radius:18px;

    display:block;

}
.quantity-selector button{

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    font-size: 55px;

    font-weight: 800;

    color: var(--color-texto);

    display:flex;

    justify-content:center;

    align-items:center;

    line-height:1;

    background:linear-gradient(
        180deg,
        #f0e0b2,
        #ddc483
    );

    box-shadow:
        0 5px 12px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.9);

    transition:
        transform .12s ease,
        box-shadow .12s ease;

}
.quantity-symbol{

    display:block;

    margin:0;

    color:var(--color-texto);

    text-shadow:
        1px 1px 2px var(--color-sombra-fuerte);

    pointer-events:none;

}

.plus-symbol{
    margin-top: 5px;

    font-size:46px;

    font-weight:650;

    line-height:.65;

    transform:translateY(-1px);

}

.minus-symbol{
    margin-top: 5px;

    font-size:52px;

    font-weight:650;

    line-height:1;

    transform:translateY(-3px);

}
.quantity-selector button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 8px 16px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.95);

}
.quantity-selector button:active{

    transform:scale(.95);

}
.add-cart-btn{

    width:100%;

    margin-top:auto;

    margin-bottom: 7px;

    padding:11px 13px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    background:linear-gradient(
        180deg,
        #5f4632,
        #3f2e22
    );

    color:var(--color-texto-claro);

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    transition:
        transform .18s ease,
        box-shadow .48s ease,
        filter .30s ease;
    box-shadow:
        0 8px 18px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.12);

    position:relative;

    overflow:hidden;

    isolation:isolate;
}
.add-cart-btn img{

    width:22px;

    height:22px;

    object-fit:contain;

    filter:brightness(0) invert(1);

}
.add-cart-btn:not(:disabled):hover{

    transform:none;

    filter:brightness(1.045);

    box-shadow:
        0 12px 24px var(--color-sombra-fuerte),
        inset 0 2px 3px rgba(255,255,255,.18);

}

.add-cart-btn:not(:disabled):active{

    transform:scale(.985);

}
/* ===== MICROINTERACCIÓN AGREGAR AL PEDIDO ===== */

.add-cart-btn > *{

    position:relative;

    z-index:2;

}
.add-cart-text{

    display:inline-block;

}

.add-cart-icon{

    flex:0 0 auto;

}
/* Capa de confirmación verde-dorada */

.add-cart-btn::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    border-radius:inherit;

    pointer-events:none;

    opacity:0;

    background:
        linear-gradient(
            135deg,
            #536b38 0%,
            #788c4f 27%,
            var(--color-acento) 58%,
            #657b43 78%,
            #40542f 100%
        );

    transition:
        opacity .55s cubic-bezier(.22,1,.36,1);

}
/* Destello que recorrerá el botón */

.add-cart-btn::after{

    content:"";

    position:absolute;

    z-index:1;

    top:-40%;

    bottom:-40%;

    left:-35%;

    width:22%;

    opacity:0;

    pointer-events:none;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,248,211,.34),
            rgba(232,208,154,.88),
            rgba(255,248,211,.34),
            transparent
        );

}


/* Primer impacto al presionar */

.add-cart-btn.is-adding{

    animation:
        addButtonPress
        .28s
        ease
        forwards;

}
.add-cart-btn.is-added::before{

    opacity:1;

}
@keyframes addButtonPress{

    0%{

        transform:
            translateY(0)
            scale(1);

    }

    45%{

        transform:
            translateY(2px)
            scale(.965);

    }

    100%{

        transform:
            translateY(0)
            scale(1);

    }

}


/* Pequeño movimiento del carrito */

.add-cart-btn.is-adding .add-cart-icon{

    transform-origin:center bottom;

    animation:
        addCartMovement
        .68s
        cubic-bezier(.22,.8,.36,1)
        forwards;

}

@keyframes addCartMovement{

    0%{

        transform:
            translateX(0)
            rotate(0deg)
            scale(1);

    }

    38%{

        transform:
            translateX(-1px)
            rotate(-2.5deg)
            scale(.99);

    }

    72%{

        transform:
            translateX(2px)
            rotate(2deg)
            scale(1.015);

    }

    100%{

        transform:
            translateX(0)
            rotate(0deg)
            scale(1);

    }

}

/* Estado de confirmación */

.add-cart-btn.is-added{

    box-shadow:
        0 9px 21px var(--color-sombra-media),
        inset 0 2px 4px rgba(255,255,255,.28);

}

/* El brillo aparece después de agregarse */

.add-cart-btn.is-added::after{

    animation:
        addButtonShine
        .88s
        ease-out
        .16s
        forwards;

}

@keyframes addButtonShine{

    0%{

        left:-35%;

        opacity:0;

    }

    18%{

        opacity:1;

    }

    70%{

        opacity:.85;

    }

    100%{

        left:115%;

        opacity:0;

    }

}


/* Entrada del mensaje de confirmación */

.add-cart-btn.is-added .add-cart-text{

    animation:
        addTextConfirmation
        .36s
        cubic-bezier(.22,1,.36,1);

}

@keyframes addTextConfirmation{

    0%{

        opacity:0;

        filter:blur(3px);

        transform:
            translateY(5px)
            scale(.96);

    }

    70%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(-1px)
            scale(1.015);

    }

    100%{

        opacity:1;

        filter:blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


/* Evita el doble clic durante la confirmación */

.add-cart-btn:disabled{

    opacity:1;

    cursor:default;

}
.add-cart-icon{

    display:block;

    backface-visibility:hidden;

    will-change:transform;

}
/* :::: Etiqueta de Oferta :::: */

.offer-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 15px;

    margin:14px 12px 3px;

    background:linear-gradient(
        180deg,
        #d3be80,
        #fcdb82
    );

    color:var(--color-texto);

    font-size:17px;

    font-weight:600;

    border-radius:999px;

    border:1px solid rgba(122,96,70,.18);

    box-shadow:
        0 8px 18px var(--color-sombra-media),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 10px 18px rgba(255,255,255,.18);

}
.offer-badge img{

    margin-top: 1px;

    margin-left: 7px;

    width: 24px;

    height: 24px;

}
/* =========================================
   PANEL LATERAL DEL CARRITO
========================================= */

.cart-overlay{

    position:fixed;

    inset:0;

    z-index:1900;

    background:
        rgba(47,36,28,.38);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .42s ease,
        visibility .42s ease;

}

.cart-overlay.is-visible{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/* ===== PANEL ===== */

.cart-panel{

    position:fixed;

    top:0;

    right:0;

    z-index:2000;

    width:min(430px, 92vw);

    height:100dvh;

    display:flex;

    flex-direction:column;

    padding:
        25px 22px
        28px;

    background:
        linear-gradient(
            160deg,
            #f1e3c8 0%,
            var(--color-fondo) 46%,
            #e5cda4 100%
        );

    border-left:
        1px solid var(--color-borde-suave);

    box-shadow:
        -18px 0 45px rgba(47,36,28,.24);

    transform:
        translateX(105%);

    visibility:hidden;

    transition:
        transform .62s cubic-bezier(.22,1,.36,1),
        visibility .62s ease;

}

.cart-panel.is-open{

    transform:
        translateX(0);

    visibility:visible;

}


/* ===== CABECERA DEL PANEL ===== */

.cart-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.cart-panel-title{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.cart-panel-eyebrow{

    margin-bottom:3px;

    color:var(--color-acento-oliva);

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.cart-panel-title h2{

    color:var(--color-texto);

    font-size:34px;

    line-height:1;

    text-shadow:
        0 2px 5px var(--color-sombra-suave);

}


/* ===== BOTÓN CERRAR ===== */

.cart-close-btn{

    width:44px;

    height:44px;

    flex:0 0 44px;

    display:grid;

    place-items:center;

    padding:0;

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

    border-radius:50%;

    background:
        linear-gradient(
            180deg,
            #f0e0b2,
            #ddc483
        );

    color:var(--color-texto);

    box-shadow:
        0 5px 12px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.85);

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;

}

.cart-close-btn span{

    margin-top: 15%;

    display:block;

    font-size:35px;

    font-weight:400;

    line-height:.8;

    transform:
        translateY(-2px);

}

.cart-close-btn:hover{

    filter:brightness(1.05);

    box-shadow:
        0 8px 16px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.9);

}

.cart-close-btn:active{

    transform:scale(.92);

}


/* ===== DIVISOR ===== */

.cart-panel-divider{

    position:relative;

    height:4px;

    margin:
        22px 0
        24px;

    border-radius:999px;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #493326 10%,
            #73523b 28%,
            var(--color-acento-oliva) 52%,
            var(--color-acento) 70%,
            #73523b 88%,
            transparent 100%
        );

    box-shadow:
        0 3px 8px var(--color-sombra-suave);

}


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

.cart-panel-content{

    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;

    overflow-y:auto;

    overscroll-behavior:contain;

}


/* ===== ESTADO VACÍO ===== */

.cart-empty-state{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:
        25px 20px
        70px;

}

.cart-empty-icon{

    width:82px;

    height:82px;

    display:grid;

    place-items:center;

    margin-bottom:22px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #b6c982 0%,
            var(--color-acento-claro) 38%,
            var(--color-acento) 67%,
            var(--color-acento-oliva) 100%
        );

    box-shadow:
        0 10px 24px var(--color-sombra-media),
        inset 0 3px 6px rgba(255,255,255,.65);

}

.cart-empty-icon img{

    width:42px;

    height:42px;

    object-fit:contain;

}

.cart-empty-state h3{

    margin-bottom:10px;

    color:var(--color-texto);

    font-size:25px;

}

.cart-empty-state p{

    max-width:310px;

    color:var(--color-texto-secundario);

    font-size:18px;

    line-height:1.5;

}


/* Bloquea el fondo mientras el carrito está abierto */

body.cart-open{

    overflow:hidden;

}
/* ===== PRODUCTOS DENTRO DEL CARRITO ===== */

.cart-items{

    display:flex;

    flex-direction:column;

    gap:15px;

    padding:
        2px 4px
        18px;

}


.cart-item{

    display:grid;

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

    align-items:center;

    gap:12px;

    padding:12px;

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

    border-radius:18px;

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

    box-shadow:
        0 6px 15px var(--color-sombra-suave),
        inset 0 1px 2px rgba(255,255,255,.45);

}


/* Imagen */

.cart-item-image{

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:13px;

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

}


/* Información */

.cart-item-info{

    min-width:0;

}

.cart-item-info h3{

    margin-bottom:5px;

    overflow:hidden;

    color:var(--color-texto);

    font-size:18px;

    white-space:nowrap;

    text-overflow:ellipsis;

}

.cart-item-unit-price{

    color:var(--color-texto-secundario);

    font-size:15px;

}


/* Subtotal */

.cart-item-subtotal{

    color:var(--color-texto);

    font-size:17px;

    font-weight:700;

    white-space:nowrap;

}
/* Fila inferior */

.cart-item-actions{

    grid-column:
        2 / -1;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:3px;

}


/* Selector de cantidad interno */

.cart-item-quantity{

    display:flex;

    align-items:center;

    gap:10px;

}

.cart-item-quantity button{

    width:31px;

    height:31px;

    display:grid;

    place-items:center;

    padding:0;

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

    border-radius:50%;

    background:
        linear-gradient(
            180deg,
            #f0e0b2,
            #ddc483
        );

    color:var(--color-texto);

    font-size:21px;

    line-height:1;

    cursor:pointer;

    box-shadow:
        0 3px 7px var(--color-sombra-suave),
        inset 0 2px 2px rgba(255,255,255,.7);

    transition:
        transform .15s ease,
        filter .15s ease;

}

.cart-item-quantity button:hover{

    filter:brightness(1.05);

}

.cart-item-quantity button:active{

    transform:scale(.91);

}

.cart-item-quantity button:disabled{

    opacity:.42;

    cursor:default;

}

.cart-item-quantity span{

    min-width:22px;

    color:var(--color-texto);

    font-size:18px;

    font-weight:700;

    text-align:center;

}


/* Eliminar */

.cart-remove-btn{

    padding:
        6px 8px;

    border:none;

    background:transparent;

    color:#765040;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:
        color .18s ease,
        transform .18s ease;

}

.cart-remove-btn:hover{

    color:#9a3f32;

    transform:translateY(-1px);

}


/* ===== TOTAL ===== */

.cart-summary{

    flex:0 0 auto;

    padding:
        18px 4px
        0;

    border-top:
        1px solid var(--color-borde-suave);

}

.cart-summary-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.cart-summary-row span{

    color:var(--color-texto-secundario);

    font-size:18px;

    font-weight:600;

}

.cart-total{

    color:var(--color-texto);

    font-size:27px;

    font-weight:800;

}
/* Oculta correctamente los estados dinámicos del carrito */

.cart-empty-state[hidden],
.cart-summary[hidden]{

    display:none !important;

}
/* ===== BOTÓN DE WHATSAPP DEL CARRITO ===== */

.cart-whatsapp-btn{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    width:100%;

    min-height:54px;

    margin-top:18px;

    padding:13px 17px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:11px;

    border:none;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #40542f 0%,
            #5c743d 32%,
            #788c4f 55%,
            #657b43 77%,
            #374928 100%
        );

    color:var(--color-texto-claro);

    box-shadow:
        0 9px 21px var(--color-sombra-media),
        inset 0 2px 4px rgba(255,255,255,.23),
        inset 0 -3px 5px rgba(47,36,28,.20);

    cursor:pointer;

    transition:
        transform .20s ease,
        filter .25s ease,
        box-shadow .28s ease;

}


/* Brillo interior */

.cart-whatsapp-btn::before{

    content:"";

    position:absolute;

    z-index:-1;

    top:-45%;

    bottom:-45%;

    left:-35%;

    width:21%;

    opacity:0;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,247,204,.14),
            rgba(232,208,154,.63),
            rgba(255,247,204,.14),
            transparent
        );

}


.cart-whatsapp-btn:hover{

    transform:translateY(-2px);

    filter:brightness(1.045);

    box-shadow:
        0 13px 27px var(--color-sombra-fuerte),
        inset 0 2px 4px rgba(255,255,255,.28);

}


.cart-whatsapp-btn:hover::before{

    animation:
        cartWhatsappShine
        .85s
        ease-out
        forwards;

}


.cart-whatsapp-btn:active{

    transform:
        translateY(0)
        scale(.98);

}


.cart-whatsapp-text{

    font-size:17px;

    font-weight:700;

}


.cart-whatsapp-arrow{

    display:inline-grid;

    place-items:center;

    width:25px;

    height:25px;

    border-radius:50%;

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

    font-size:17px;

    line-height:1;

    transition:
        transform .28s
        cubic-bezier(.22,1,.36,1);

}


.cart-whatsapp-btn:hover
.cart-whatsapp-arrow{

    transform:
        translate(2px,-2px);

}


.cart-whatsapp-note{

    margin-top:10px;

    color:var(--color-texto-secundario);

    font-size:14px;

    line-height:1.4;

    text-align:center;

}


@keyframes cartWhatsappShine{

    0%{

        left:-35%;

        opacity:0;

    }

    18%{

        opacity:1;

    }

    70%{

        opacity:.75;

    }

    100%{

        left:115%;

        opacity:0;

    }

}
.cart-summary:not([hidden]){

    display:block;

}

.cart-summary[hidden]{

    display:none !important;

}

.cart-whatsapp-btn{

    display:flex;

}

/* =========================================
   VITRINA DEL CATÁLOGO
========================================= */

.catalog-showcase{

    position:relative;

    isolation:isolate;

    width:min(
        1180px,
        calc(100% - 32px)
    );

    margin:
        30px auto
        52px;

    padding:18px;

    border:
        1px solid rgba(115,82,59,.23);

    border-radius:36px;

    background:

        radial-gradient(
            circle at 8% 0%,
            rgba(255,247,221,.70),
            transparent 31%
        ),

        radial-gradient(
            circle at 94% 100%,
            rgba(89,114,57,.12),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #ead5ad 0%,
            #e2c597 52%,
            #d7b982 100%
        );

    box-shadow:
        0 24px 55px rgba(47,36,28,.17),
        inset 0 2px 3px rgba(255,255,255,.65),
        inset 0 -2px 4px rgba(115,82,59,.10);

}


/* ===== CABECERA DEL CATÁLOGO ===== */

.catalog-showcase-header{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    width:100%;

    min-height:64px;

    padding:
        8px 13px
        18px;

}


.catalog-showcase-header::after{

    content:"";

    position:absolute;

    left:13px;

    right:13px;

    bottom:5px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(115,82,59,.34) 16%,
            rgba(89,114,57,.32) 50%,
            rgba(115,82,59,.34) 84%,
            transparent
        );

}


.catalog-showcase-label{

    display:inline-flex;

    align-items:center;

    gap:11px;

    padding:
        10px 17px;

    border:
        1px solid rgba(115,82,59,.20);

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(255,250,228,.76),
            rgba(232,208,154,.48)
        );

    color:var(--color-texto);

    font-size:15px;

    font-weight:800;

    letter-spacing:.7px;

    text-transform:uppercase;

    box-shadow:
        0 5px 13px rgba(47,36,28,.10),
        inset 0 1px 2px rgba(255,255,255,.70);

}


.catalog-showcase-status{

    position:relative;

    width:10px;

    height:10px;

    flex:0 0 10px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--color-acento),
            var(--color-acento-oliva)
        );

    box-shadow:
        0 0 0 5px rgba(89,114,57,.11);

}


.catalog-showcase-status::after{

    content:"";

    position:absolute;

    inset:-5px;

    border:
        1px solid rgba(89,114,57,.30);

    border-radius:50%;

    animation:
        catalogAvailablePulse
        2.5s
        ease-out
        infinite;

}


.catalog-showcase-count{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:37px;

    padding:
        8px 15px;

    border:
        1px solid rgba(115,82,59,.19);

    border-radius:999px;

    background:
        rgba(255,248,221,.45);

    color:var(--color-texto-secundario);

    font-size:14px;

    font-weight:750;

    box-shadow:
        0 4px 11px rgba(47,36,28,.08),
        inset 0 1px 2px rgba(255,255,255,.65);

}


@keyframes catalogAvailablePulse{

    0%{

        opacity:.7;

        transform:scale(.75);

    }

    75%{

        opacity:0;

        transform:scale(1.55);

    }

    100%{

        opacity:0;

        transform:scale(1.55);

    }

}


/* =========================================
   SUPERFICIE INTERIOR
========================================= */

.catalog-showcase-stage{

    position:relative;

    overflow:hidden;

    padding:
        36px 27px
        43px;

    border:
        1px solid rgba(115,82,59,.16);

    border-radius:27px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,248,222,.40),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.20),
            rgba(238,216,177,.40) 45%,
            rgba(224,198,159,.48)
        );

    box-shadow:
        inset 0 3px 10px rgba(255,255,255,.36),
        inset 0 -5px 18px rgba(115,82,59,.06),
        0 8px 20px rgba(47,36,28,.08);

}


/* Textura muy sutil */

.catalog-showcase-stage::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.20;

    background-image:

        linear-gradient(
            rgba(115,82,59,.10) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(115,82,59,.10) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 86%
        );

}


/* Luz inferior compartida */

.catalog-showcase-stage::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-150px;

    width:90%;

    height:260px;

    transform:
        translateX(-50%);

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse,
            rgba(89,114,57,.13),
            rgba(213,179,106,.10) 38%,
            transparent 72%
        );

}


/* =========================================
   CUADRÍCULA INTERIOR
========================================= */

.catalog-showcase
.products-grid{

    position:relative;

    z-index:2;

    width:100%;

    max-width:none;

    margin:0;

    padding:0;

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,320px)
        );

    justify-content:center;

    align-items:stretch;

    column-gap:30px;

    row-gap:38px;

}


.catalog-showcase
.product-card{

    width:100%;

    max-width:340px;

    height:100%;

    margin:0 auto;

    border-color:
        rgba(115,82,59,.25);

    box-shadow:
        0 13px 28px rgba(47,36,28,.16),
        inset 0 1px 2px rgba(255,255,255,.40);

}


/* Grancilla centrada explícitamente */

.catalog-showcase
.product-card-grancilla{

    grid-column:2;

}


/* =========================================
   CIERRE VISUAL DEL CATÁLOGO
========================================= */

.catalog-closing{

    position:relative;

    isolation:isolate;

    width:min(860px, calc(100% - 36px));

    margin:
        0 auto
        90px;

    padding:
        34px 36px
        32px;

    overflow:hidden;

    text-align:center;

    border:
        1px solid rgba(115,82,59,.16);

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.24),
            rgba(232,208,154,.20) 48%,
            rgba(213,179,106,.16)
        );

    box-shadow:
        0 15px 36px rgba(47,36,28,.10),
        inset 0 1px 2px rgba(255,255,255,.58);

}


/* Luz suave detrás del contenido */

.catalog-closing::before{

    content:"";

    position:absolute;

    z-index:-1;

    left:50%;

    top:-125px;

    width:520px;

    height:260px;

    border-radius:50%;

    transform:translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(213,179,106,.25) 0%,
            rgba(232,208,154,.12) 43%,
            transparent 72%
        );

    pointer-events:none;

}


/* ===== LÍNEAS Y ROMBO ===== */

.catalog-closing-decoration{

    width:min(520px, 82%);

    margin:
        0 auto
        20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

}


.catalog-closing-line{

    position:relative;

    display:block;

    flex:1;

    height:2px;

    border-radius:999px;

    opacity:0;

    transform:scaleX(0);

    background:
        linear-gradient(
            90deg,
            transparent,
            #73523b 22%,
            var(--color-acento-oliva) 54%,
            var(--color-acento) 82%
        );

    box-shadow:
        0 2px 5px rgba(47,36,28,.13);

}


.catalog-closing-line-left{

    transform-origin:right center;

}


.catalog-closing-line-right{

    transform-origin:left center;

    background:
        linear-gradient(
            90deg,
            var(--color-acento) 18%,
            var(--color-acento-oliva) 46%,
            #73523b 78%,
            transparent
        );

}


.catalog-closing-diamond{

    width:13px;

    height:13px;

    flex:0 0 13px;

    opacity:0;

    transform:
        rotate(45deg)
        scale(.2);

    border:
        1px solid rgba(89,114,57,.48);

    border-radius:2px;

    background:
        linear-gradient(
            135deg,
            var(--color-acento-claro),
            var(--color-acento),
            var(--color-acento-oliva)
        );

    box-shadow:
        0 4px 9px rgba(47,36,28,.18),
        inset 0 1px 2px rgba(255,255,255,.68);

}


/* ===== TEXTOS ===== */

.catalog-closing-kicker{

    display:block;

    margin-bottom:7px;

    opacity:0;

    transform:translateY(9px);

    color:var(--color-acento-oliva);

    font-size:14px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.catalog-closing-title{

    margin:0;

    opacity:0;

    transform:translateY(12px);

    color:var(--color-texto);

    font-size:
        clamp(25px, 3.4vw, 35px);

    line-height:1.15;

    text-shadow:
        0 3px 8px rgba(47,36,28,.10);

}


.catalog-closing-text{

    max-width:620px;

    margin:
        13px auto
        22px;

    opacity:0;

    transform:translateY(12px);

    color:var(--color-texto-secundario);

    font-size:18px;

    line-height:1.5;

}


/* ===== INDICADORES INFERIORES ===== */

.catalog-closing-features{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:center;

    gap:
        11px 24px;

}


.catalog-closing-feature{

    display:inline-flex;

    align-items:center;

    gap:8px;

    opacity:0;

    transform:translateY(10px);

    color:var(--color-texto);

    font-size:15px;

    font-weight:650;

}


.catalog-feature-dot{

    width:7px;

    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--color-acento),
            var(--color-acento-oliva)
        );

    box-shadow:
        0 0 0 4px rgba(89,114,57,.10);

}
/* ===== APARICIÓN DEL CIERRE DEL CATÁLOGO ===== */

.catalog-closing.is-visible
.catalog-closing-line-left{

    animation:
        catalogLineOpen
        .8s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


.catalog-closing.is-visible
.catalog-closing-line-right{

    animation:
        catalogLineOpen
        .8s
        .10s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


.catalog-closing.is-visible
.catalog-closing-diamond{

    animation:
        catalogDiamondAppear
        .65s
        .48s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


.catalog-closing.is-visible
.catalog-closing-kicker{

    animation:
        catalogContentAppear
        .58s
        .72s
        ease-out
        forwards;

}


.catalog-closing.is-visible
.catalog-closing-title{

    animation:
        catalogContentAppear
        .65s
        .84s
        ease-out
        forwards;

}


.catalog-closing.is-visible
.catalog-closing-text{

    animation:
        catalogContentAppear
        .65s
        .96s
        ease-out
        forwards;

}


.catalog-closing.is-visible
.catalog-closing-feature:nth-child(1){

    animation:
        catalogContentAppear
        .5s
        1.10s
        ease-out
        forwards;

}


.catalog-closing.is-visible
.catalog-closing-feature:nth-child(2){

    animation:
        catalogContentAppear
        .5s
        1.21s
        ease-out
        forwards;

}


.catalog-closing.is-visible
.catalog-closing-feature:nth-child(3){

    animation:
        catalogContentAppear
        .5s
        1.32s
        ease-out
        forwards;

}


@keyframes catalogLineOpen{

    from{

        opacity:0;

        transform:scaleX(0);

    }

    to{

        opacity:1;

        transform:scaleX(1);

    }

}


@keyframes catalogDiamondAppear{

    0%{

        opacity:0;

        transform:
            rotate(45deg)
            scale(.2);

    }

    70%{

        opacity:1;

        transform:
            rotate(45deg)
            scale(1.16);

    }

    100%{

        opacity:1;

        transform:
            rotate(45deg)
            scale(1);

    }

}


@keyframes catalogContentAppear{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =========================================
   ELEVACIÓN INTERACTIVA DE LAS TARJETAS
========================================= */

.catalog-showcase .product-card{

    translate:0 0;

    will-change:translate;

    transition:
        translate .34s cubic-bezier(.22,1,.36,1),
        box-shadow .42s ease,
        border-color .34s ease,
        filter .34s ease;

}
.catalog-showcase .product-card:focus-within{

    translate:0 -2px;

    border-color:
        rgba(89,114,57,.32);

    box-shadow:
        0 25px 42px rgba(47,36,28,.23),
        inset 0 1px 2px rgba(255,255,255,.50);

}

/* Solo se activa en dispositivos con cursor */

@media (hover:hover) and (pointer:fine){

    .catalog-showcase .product-card:hover{

        translate:0 -10px;

        border-color:
            rgba(213,179,106,.52);

        box-shadow:
            0 0 16px rgba(255,239,186,.52),
            0 0 32px rgba(213,179,106,.38),
            0 0 52px rgba(89,114,57,.12),
            inset 0 1px 3px rgba(255,255,255,.50);

        filter:brightness(1.025);

    }

}
/* =========================================
   DIVISORES ENTRE FILOSOFÍA Y CATÁLOGO
========================================= */

.section-flow-divider{

    position:relative;

    width:min(760px, 68%);

    height:5px;

    overflow:hidden;

    border-radius:999px;

    opacity:0;

    transform:scaleX(0);

    transform-origin:center;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #493326 9%,
            #73523b 27%,
            var(--color-borde) 41%,
            var(--color-acento-oliva) 54%,
            var(--color-acento) 68%,
            #73523b 85%,
            transparent 100%
        );

    box-shadow:
        0 4px 11px var(--color-sombra-media),
        0 1px 2px rgba(255,255,255,.25);

    transition:none;

}


/* Destello que recorre la barra */

.section-flow-divider::after{

    content:"";

    position:absolute;

    top:-4px;

    bottom:-4px;

    left:-30%;

    width:22%;

    opacity:0;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,247,204,.78),
            rgba(232,208,154,.96),
            transparent
        );

    filter:blur(.7px);

}


/* Barra situada sobre el contador */

.authority-divider-top{

    margin:
        22px auto
        34px;

}


/* Barra situada sobre el título del catálogo */

.productos-divider.section-flow-divider{

    width:min(760px, 68%);

    max-width:none;

    margin:
        0 auto
        30px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #493326 9%,
            #73523b 27%,
            var(--color-borde) 41%,
            var(--color-acento-oliva) 54%,
            var(--color-acento) 68%,
            #73523b 85%,
            transparent 100%
        );

    transform:scaleX(0);

}


/* Apertura */

.section-flow-divider.visible{

    animation:
        sectionFlowOpen
        .95s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


/* Brillo posterior */

.section-flow-divider.visible::after{

    animation:
        sectionFlowShine
        .85s
        ease-out
        .82s
        forwards;

}


@keyframes sectionFlowOpen{

    0%{

        opacity:0;

        transform:scaleX(0);

        filter:brightness(.75);

    }

    70%{

        opacity:1;

        transform:scaleX(1.025);

        filter:brightness(1.06);

    }

    100%{

        opacity:1;

        transform:scaleX(1);

        filter:brightness(1);

    }

}


@keyframes sectionFlowShine{

    0%{

        left:-30%;

        opacity:0;

    }

    18%{

        opacity:1;

    }

    68%{

        opacity:.9;

    }

    100%{

        left:112%;

        opacity:0;

    }

}
/* =========================================
   PRESENTACIÓN DEL CATÁLOGO
========================================= */

.productos-heading-panel{

    position:relative;

    isolation:isolate;

    width:min(
        820px,
        calc(100% - 40px)
    );

    margin:0 auto;

    padding:
        30px 34px
        27px;

    overflow:hidden;

    border:
        1px solid rgba(115,82,59,.15);

    border-radius:27px;

    background:

        radial-gradient(
            circle at 50% -35%,
            rgba(255,248,220,.58),
            transparent 58%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.20),
            rgba(232,208,154,.13),
            rgba(213,179,106,.09)
        );

    box-shadow:
        0 13px 30px rgba(47,36,28,.09),
        inset 0 1px 2px rgba(255,255,255,.55);

}


/* Luz ambiental suave */

.productos-heading-panel::before{

    content:"";

    position:absolute;

    z-index:-1;

    left:50%;

    top:-135px;

    width:520px;

    height:250px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(213,179,106,.20),
            transparent 70%
        );

    pointer-events:none;

}


/* Etiqueta superior */

.productos-kicker{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:11px;

    padding:
        7px 13px;

    border:
        1px solid rgba(89,114,57,.18);

    border-radius:999px;

    background:
        rgba(255,248,221,.34);

    color:var(--color-acento-oliva);

    font-size:13px;

    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;

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

}


.productos-kicker::before{

    content:"";

    width:7px;

    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--color-acento),
            var(--color-acento-oliva)
        );

    box-shadow:
        0 0 0 4px rgba(89,114,57,.09);

}


/* Título */

.productos-heading-panel
.productos-init h2,
.productos-heading-panel h2{

    position:relative;

    margin:
        0 auto
        14px;

    padding:0;

    font-size:
        clamp(35px, 4vw, 48px);

    line-height:1.12;

    letter-spacing:.4px;

    text-wrap:balance;

    text-shadow:
        0 3px 8px rgba(47,36,28,.24);

}


/* Pequeño detalle debajo del título */

.productos-heading-panel h2::after{

    content:"";

    display:block;

    width:min(180px, 46%);

    height:3px;

    margin:
        14px auto
        0;

    border-radius:999px;

    opacity:0;

    transform:scaleX(0);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-acento-oliva),
            var(--color-acento),
            transparent
        );

    box-shadow:
        0 3px 7px rgba(47,36,28,.13);

}


.productos-heading-panel h2.visible::after{

    animation:
        productsTitleLineOpen
        .72s
        .22s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes productsTitleLineOpen{

    to{

        opacity:1;

        transform:scaleX(1);

    }

}


/* Subtítulo */

.productos-heading-panel
.productos-init p,
.productos-heading-panel p{

    width:100%;

    max-width:630px;

    margin:0 auto;

    color:var(--color-texto-secundario);

    font-size:
        clamp(17px, 2vw, 21px);

    line-height:1.5;

    text-wrap:balance;

}
/*========================================================
========== ESPECIAL REWORK TABLET 742 - 900PX ============
========================================================*/

@media (min-width:742px) and (max-widht: 900px){

    #entregas.authority{

        width:
            calc(100% - 22px);

        padding:
            31px 18px
            49px;

    }


    .authority-values{

        gap:16px;

    }


    .authority-value{

        padding-left:10px;

        padding-right:10px;

    }


    .authority-value p{

        font-size:15px;

    }

        .section-flow-divider{

        width:72%;

        max-width:600px;

    }


    .authority-divider-top{

        margin:
            20px auto
            30px;

    }


    .productos-divider.section-flow-divider{

        width:72%;

        margin-bottom:27px;

    }


    .productos-heading-panel{

        width:
            calc(100% - 30px);

        padding:
            27px 24px
            24px;

        border-radius:25px;

    }


    .productos-heading-panel h2{

        font-size:
            clamp(32px, 5vw, 40px);

    }


    .productos-heading-panel p{

        max-width:570px;

        font-size:18px;

    }
    .presentation-cards{

        width:
            calc(100% - 28px);

        padding:
            27px 23px
            31px;

        border-radius:30px;

    }


    .presentation-cards-grid{

        grid-template-columns:1fr;

        gap:17px;

    }


    #nosotros .presentation-card{

        min-height:auto;

        flex-direction:row;

        align-items:center;

        padding:
            20px 22px;

        gap:18px;

    }


    #nosotros
    .presentation-card::after{

        right:16px;

        bottom:-15px;

        font-size:78px;

    }


    #nosotros
    .presentation-card h3{

        font-size:25px;

    }




}
#nosotros .presentation-card{

    opacity:0;

    visibility:visible;

}


#nosotros .presentation-card.is-revealed{

    visibility:visible;

}

/*========================================================
============= REWORK TO MEDIA PHONE 741PX ================
==========================================================*/

@media (max-width:741px){
  

    #entregas.authority{

        width:
            calc(100% - 10px);

        margin-bottom:65px;

        padding:
            24px 11px
            37px;

    }


    .authority-bridge{

        width:68%;

        margin-bottom:24px;

    }


    #entregas
    .authority-counter{

        font-size:
            clamp(78px,25vw,112px);

        line-height:.9;

    }


    #entregas
    .authority-title{

        max-width:360px;

        margin-top:16px;

        margin-bottom:14px;

        font-size:
            clamp(27px,8vw,34px);

        letter-spacing:.035em;

    }


    #entregas
    .authority-description{

        width:96%;

        max-width:390px;

        font-size:16px;

        line-height:1.52;

    }


    .authority-values{

        width:min(
            390px,
            100%
        );

        margin-top:36px;

        display:flex;

        flex-direction:column;

        gap:7px;

    }


    /*
    Línea vertical compartida.
    */

    .authority-values::before{

        top:12px;

        bottom:17px;

        left:25px;

        right:auto;

        width:2px;

        height:auto;

        background:
            linear-gradient(
                180deg,
                transparent,
                var(--color-acento-oliva),
                var(--color-acento),
                transparent
            );

    }


    .authority-value{

        min-height:91px;

        padding:
            10px 9px
            14px 61px;

        text-align:left;

    }


    .authority-value::before{

        top:15px;

        left:19px;

        transform:
            rotate(45deg);

        box-shadow:
            0 3px 8px rgba(47,36,28,.17),
            0 0 0 6px rgba(238,222,192,.76);

    }


    .authority-value-index{

        margin-bottom:4px;

        text-align:left;

    }


    .authority-value strong{

        margin-bottom:5px;

        font-size:21px;

        text-align:left;

    }


    .authority-value p{

        max-width:none;

        margin:0;

        font-size:14px;

        line-height:1.4;

        text-align:left;

    }

.site-header{

    height:82px;

}

.menu-button{

    left:18px;

}

.cart-button{

    right:18px;

}

.brand-container{

    width:calc(100% - 170px);

    gap:10px;

}

.brand-title{

    font-size:30px;

}

.brand-decoration{

    gap:5px;

}

.brand-decoration .diamond{

    width:12px;

    height:12px;

    flex-basis:12px;

}
.products-grid{

    padding:
        28px 18px
        65px;

    gap:32px;

}

    .catalog-closing{

        width:calc(100% - 28px);

        margin-bottom:65px;

        padding:
            29px 18px
            27px;

        border-radius:23px;

    }


    .catalog-closing-decoration{

        width:88%;

        gap:11px;

        margin-bottom:18px;

    }


    .catalog-closing-title{

        font-size:27px;

    }


    .catalog-closing-text{

        max-width:340px;

        font-size:16px;

    }


    .catalog-closing-features{

        flex-direction:column;

        align-items:center;

        gap:13px;

    }

    .section-flow-divider{

        width:72%;

        max-width:440px;

        height:4px;

    }


    .authority-divider-top{

        margin:
            16px auto
            25px;

    }


    .productos-divider.section-flow-divider{

        width:72%;

        margin:
            0 auto
            22px;

    }


    .productos-heading-panel{

        width:
            calc(100% - 20px);

        padding:
            21px 15px
            20px;

        border-radius:22px;

    }


    .productos-kicker{

        margin-bottom:10px;

        padding:
            6px 10px;

        font-size:10px;

        letter-spacing:.9px;

    }


    .productos-heading-panel h2{

        max-width:350px;

        margin-bottom:11px;

        font-size:29px;

        line-height:1.1;

        letter-spacing:.2px;

    }


    .productos-heading-panel h2::after{

        width:135px;

        margin-top:11px;

    }


    .productos-heading-panel p{

        max-width:340px;

        font-size:16px;

        line-height:1.45;

    }

    .presentation-cards{

        width:
            calc(100% - 14px);

        margin:
            4px auto
            48px;

        padding:
            17px 7px
            22px;

    }


    .philosophy-continuation{

        width:72%;

        margin-bottom:21px;

        gap:10px;

    }


    .presentation-cards-heading{

        margin-bottom:19px;

        padding:
            0 7px;

    }


    .presentation-cards-heading h2{

        max-width:330px;

        font-size:25px;

        line-height:1.1;

    }


    .presentation-cards-heading p{

        max-width:325px;

        font-size:14px;

        line-height:1.4;

    }

    .presentation-cards-grid{

        gap:13px;

    }


    #nosotros .presentation-card{

        min-height:auto;

        padding:
            15px 14px;

        gap:13px;

        border-radius:20px;

    }


    #nosotros
    .presentation-card
    .icon-card,

    #nosotros
    .presentation-card
    .icon-cardP,

    #nosotros
    .presentation-card
    .icon-cardPP{

        width:54px;

        height:54px;

        flex:
            0 0
            54px;

    }


    #nosotros
    .presentation-card h3{

        margin-bottom:5px;

        font-size:19px;

        line-height:1.1;

    }


    #nosotros
    .presentation-card p{

        max-width:245px;

        font-size:14px;

        line-height:1.35;

    }


    .presentation-text-desktop{

        display:none;

    }


    .presentation-text-mobile{

        display:inline;

    }


    #nosotros
    .presentation-card::after{

        right:8px;

        bottom:-8px;

        font-size:57px;

    }




}
/*============= REWORK TO MEDIA PHONE 540PX ================*/

@media (max-width:540px){

    .brand-container{

        width:auto;

    }

    .brand-decoration{

        display:none;

    }

    .brand-title{

        font-size:28px;

    }

.products-grid{

    padding:
        20px 12px
        50px;

    gap:24px;

}














}

/* =========================================
   DISTRIBUCIÓN DEFINITIVA DEL CATÁLOGO
========================================= */

/* Escritorio: 3 columnas */

@media (min-width:901px){

    .catalog-showcase .products-grid{

        width:100%;

        max-width:1080px;

        margin:0 auto;

        display:grid;

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

        column-gap:24px;

        row-gap:38px;

        justify-content:center;

    }


    .catalog-showcase .product-card{

        width:100%;

        max-width:340px;

        justify-self:center;

    }


    .catalog-showcase
    .product-card-grancilla{

        grid-column:2 !important;

    }

}


/* Tablet: 2 columnas */

@media (min-width:741px) and (max-width:900px){

    .catalog-showcase .products-grid{

        grid-template-columns:
            repeat(2, minmax(0, 340px)) !important;

        justify-content:center;

    }


    .catalog-showcase
    .product-card-grancilla{

        grid-column:auto !important;

    }

}


/* Celular: 1 columna */

@media (max-width:740px){

    .catalog-showcase .products-grid{

        grid-template-columns:
            minmax(0, 340px) !important;

        justify-content:center;

    }


    .catalog-showcase
    .product-card-grancilla{

        grid-column:auto !important;

    }

}
/* =========================================
   FONDO GENERAL CON PROFUNDIDAD
========================================= */

html{

    background-color:
        var(--color-fondo);

}


body{

    min-height:100vh;

    background-color:
        var(--color-fondo);

}


/* ===== ESCRITORIO GRANDE ===== */

@media (min-width:1101px){

    body{

        background-image:

            /* Luz dorada superior izquierda */

            radial-gradient(
                circle at 7% 13%,
                rgba(213,179,106,.18) 0%,
                rgba(213,179,106,.09) 20%,
                transparent 43%
            ),


            /* Luz oliva lateral derecha */

            radial-gradient(
                circle at 94% 35%,
                rgba(89,114,57,.13) 0%,
                rgba(89,114,57,.055) 24%,
                transparent 47%
            ),


            /* Profundidad marrón inferior */

            radial-gradient(
                circle at 18% 83%,
                rgba(115,82,59,.20) 0%,
                rgba(115,82,59,.09) 23%,
                transparent 42%
            ),


            /* Oscurecimiento mínimo en los laterales */

            linear-gradient(
                90deg,
                rgba(115,82,59,0.18) 0%,
                transparent 15%,
                transparent 85%,
                rgba(104, 114, 57, 0.18) 100%
            ),


            /* Textura geométrica muy tenue */

            repeating-linear-gradient(
                135deg,
                rgba(47,36,28,.04) 0,
                rgba(47,36,28,.04) 1px,
                transparent 1px,
                transparent 36px
            );

        background-attachment:
            fixed;

    }

}
@media (min-width:851px) and (max-width:1100px){

    body{

        background-image:

            radial-gradient(
                circle at 6% 15%,
                rgba(213,179,106,.13) 0%,
                transparent 39%
            ),

            radial-gradient(
                circle at 95% 50%,
                rgba(89,114,57,.075) 0%,
                transparent 42%
            ),

            linear-gradient(
                90deg,
                rgba(115,82,59,.026),
                transparent 18%,
                transparent 82%,
                rgba(89,114,57,.022)
            );

        background-attachment:
            fixed;

    }

}
@media (min-width:601px) and (max-width:850px){

    body{

        background-image:

            radial-gradient(
                circle at 5% 18%,
                rgba(213,179,106,.065),
                transparent 43%
            ),

            radial-gradient(
                circle at 96% 62%,
                rgba(89,114,57,.038),
                transparent 45%
            );

        background-attachment:
            scroll;

    }

}
/* ===== FONDO SUAVE EN CELULAR ===== */

@media (max-width:600px){

    html,
    body{

        background-color:
            var(--color-fondo);

        background-image:

            /* Luz dorada muy suave arriba */

            radial-gradient(
                circle at 4% 12%,
                rgba(213,179,106,.225) 0%,
                rgba(213,179,106,.208) 25%,
                transparent 47%
            ),

            /* Toque oliva muy tenue abajo */

            radial-gradient(
                circle at 96% 72%,
                rgba(89,114,57,.1) 0%,
                transparent 46%
            ),

            /* Textura diagonal casi imperceptible */

            repeating-linear-gradient(
                135deg,
                rgba(47,36,28,.05) 0,
                rgba(47,36,28,.05) 1px,
                transparent 1px,
                transparent 42px
            );

        background-attachment:
            scroll;

    }

}
/* =========================================
   CARRITO A PANTALLA COMPLETA EN MÓVIL
========================================= */

@media (max-width:740px){

    .cart-panel{

        opacity:0;

        transform:
            translateX(100%)
            scale(.985);

        transform-origin:
            right center;

        will-change:
            transform,
            opacity;

        transition:
            transform .58s cubic-bezier(.22,1,.36,1),
            opacity .28s ease,
            visibility .58s ease;

    }


    .cart-panel.is-open{

        opacity:1;

        transform:
            translateX(0)
            scale(1);

    }

    .cart-panel-header,
    .cart-panel-divider,
    .cart-panel-content,
    .cart-summary{

        opacity:0;

        transform:
            translateY(14px);

    }


    .cart-panel.is-open
    .cart-panel-header{

        animation:
            mobileCartContentAppear
            .48s
            .18s
            cubic-bezier(.22,1,.36,1)
            forwards;

    }


    .cart-panel.is-open
    .cart-panel-divider{

        animation:
            mobileCartDividerAppear
            .56s
            .27s
            cubic-bezier(.22,1,.36,1)
            forwards;

    }

    .cart-panel-content,
    .cart-summary{

        width:100%;

    }

    .cart-overlay{
        background:
            rgba(47,36,28,.48);

    }
}
/* =========================================
   CARRITO MÓVIL: ENTRADA Y CONTENIDO
========================================= */

@media (max-width:740px){

    .cart-panel{

        position:fixed;

        inset:0;

        width:auto;
        max-width:none;

        height:auto;
        min-height:100dvh;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transform:
            translate3d(100%,0,0);

        will-change:
            transform,
            opacity;

        transition:
            transform .58s cubic-bezier(.22,1,.36,1),
            opacity .28s ease,
            visibility 0s linear .58s;

    }


    .cart-panel.is-open{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:
            translate3d(0,0,0);

        transition-delay:0s;

    }


    /* Contenido inicialmente oculto */

    .cart-panel > .cart-panel-header,
    .cart-panel > .cart-panel-divider,
    .cart-panel > .cart-panel-content,
    .cart-panel > .cart-summary:not([hidden]){

        opacity:0;

        translate:
            0 14px;

        transition:
            opacity .45s ease,
            translate .52s cubic-bezier(.22,1,.36,1);

    }


    /* Cabecera */

    .cart-panel.is-open
    > .cart-panel-header{

        opacity:1;

        translate:0 0;

        transition-delay:.16s;

    }


    /* Divisor */

    .cart-panel.is-open
    > .cart-panel-divider{

        opacity:1;

        translate:0 0;

        transition-delay:.24s;

    }


    /* Productos o estado vacío */

    .cart-panel.is-open
    > .cart-panel-content{

        opacity:1;

        translate:0 0;

        transition-delay:.31s;

    }


    /* Total y WhatsApp */

    .cart-panel.is-open
    > .cart-summary:not([hidden]){

        opacity:1;

        translate:0 0;

        transition-delay:.38s;

    }


    .cart-summary[hidden]{

        display:none !important;

    }

}
@media (max-width:600px){

    .authority-stats{
        display:none;
    }
    .authority{
        padding-bottom:25px;
    }
}
@media (max-width:600px){

    /* Título NUESTRA FILOSOFÍA */

    .nosotros-init h2{

        font-size:42px;

        line-height:.98;

        letter-spacing:.3px;

        margin-bottom:12px;

        padding:
            5px 10px;

    }


    /* Párrafos escritos palabra por palabra */

    .nosotros-init > p{

        width:94%;

        max-width:390px;

        padding:
            0 4px
            13px;

        line-height:1.45;

    }

}

/* =========================================
   MENÚ LATERAL DEL HEADER
========================================= */

.menu-overlay{

    position:fixed;

    inset:0;

    z-index:2100;

    background:
        rgba(47,36,28,.48);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .38s ease,
        visibility .38s ease;

}

.menu-overlay.is-visible{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.menu-panel{

    position:fixed;

    top:0;

    left:0;

    z-index:2200;

    width:min(440px,92vw);

    height:100vh;
    height:100dvh;

    display:flex;

    flex-direction:column;

    padding:
        25px 22px
        22px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255,248,221,.72),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(89,114,57,.13),
            transparent 42%
        ),
        linear-gradient(
            155deg,
            #f1e3c8 0%,
            var(--color-fondo) 48%,
            #e4c99b 100%
        );

    border-right:
        1px solid rgba(115,82,59,.22);

    box-shadow:
        18px 0 48px rgba(47,36,28,.25);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translate3d(-104%,0,0);

    transition:
        transform .62s cubic-bezier(.22,1,.36,1),
        opacity .28s ease,
        visibility 0s linear .62s;

}

.menu-panel.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translate3d(0,0,0);

    transition-delay:0s;

}

.menu-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    flex:0 0 auto;

}

.menu-panel-brand{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.menu-panel-eyebrow{

    margin-bottom:4px;

    color:var(--color-acento-oliva);

    font-size:12px;

    font-weight:800;

    letter-spacing:1.7px;

    text-transform:uppercase;

}

.menu-panel-brand h2{

    margin:0;

    color:var(--color-texto);

    font-size:34px;

    line-height:1;

    text-shadow:
        0 3px 7px rgba(47,36,28,.14);

}

.menu-close-button{

    width:44px;

    height:44px;

    flex:0 0 44px;

    display:grid;

    place-items:center;

    padding:0;

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

    border-radius:50%;

    background:
        linear-gradient(
            180deg,
            #f0e0b2,
            #ddc483
        );

    color:var(--color-texto);

    box-shadow:
        0 5px 12px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.85);

    cursor:pointer;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease;

}

.menu-close-button span{

    margin-top:15%;

    display:block;

    font-size:34px;

    line-height:.8;

    transform:translateY(-2px);

}

.menu-close-button:hover{

    filter:brightness(1.055);

    box-shadow:
        0 8px 16px var(--color-sombra-media),
        inset 0 2px 3px rgba(255,255,255,.9);

}

.menu-close-button:active{

    transform:scale(.92);

}

.menu-panel-divider{

    position:relative;

    flex:0 0 4px;

    height:4px;

    margin:
        21px 0
        18px;

    overflow:hidden;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #73523b 18%,
            var(--color-acento-oliva) 47%,
            var(--color-acento) 70%,
            #73523b 86%,
            transparent
        );

    box-shadow:
        0 3px 8px rgba(47,36,28,.15);

}

.menu-navigation{

    min-height:0;

    display:flex;

    flex:1;

    flex-direction:column;

    gap:8px;

    overflow-y:auto;

    padding:
        2px 3px
        16px;

    overscroll-behavior:contain;

    scrollbar-width:thin;

    scrollbar-color:
        rgba(89,114,57,.45)
        transparent;

}

.menu-link{

    position:relative;

    width:100%;

    min-height:66px;

    display:grid;

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

    align-items:center;

    gap:12px;

    padding:
        10px 12px;

    overflow:hidden;

    border:
        1px solid transparent;

    border-radius:17px;

    background:transparent;

    color:var(--color-texto);

    font:inherit;

    text-align:left;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .25s cubic-bezier(.22,1,.36,1),
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;

}

.menu-link::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    opacity:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,250,228,.74),
            rgba(232,208,154,.28),
            rgba(89,114,57,.08)
        );

    transition:opacity .28s ease;

}

.menu-link:hover,
.menu-link:focus-visible,
.menu-link.is-active{

    transform:translateX(4px);

    border-color:
        rgba(115,82,59,.16);

    box-shadow:
        0 7px 17px rgba(47,36,28,.09),
        inset 0 1px 2px rgba(255,255,255,.55);

    outline:none;

}

.menu-link:hover::before,
.menu-link:focus-visible::before,
.menu-link.is-active::before{

    opacity:1;

}

.menu-link-number{

    color:var(--color-acento-oliva);

    font-size:12px;

    font-weight:900;

    letter-spacing:.8px;

}

.menu-link-copy{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;

}

.menu-link-copy strong{

    overflow:hidden;

    font-size:18px;

    line-height:1.1;

    white-space:nowrap;

    text-overflow:ellipsis;

}

.menu-link-copy small{

    overflow:hidden;

    color:var(--color-texto-secundario);

    font-size:13px;

    line-height:1.25;

    white-space:nowrap;

    text-overflow:ellipsis;

}

.menu-link-arrow{

    display:grid;

    place-items:center;

    width:27px;

    height:27px;

    border-radius:50%;

    background:
        rgba(213,179,106,.20);

    color:var(--color-texto);

    transition:
        transform .28s cubic-bezier(.22,1,.36,1),
        background .28s ease;

}

.menu-link:hover .menu-link-arrow,
.menu-link:focus-visible .menu-link-arrow,
.menu-link.is-active .menu-link-arrow{

    transform:translateX(3px);

    background:
        rgba(89,114,57,.17);

}

.menu-panel-contact{

    flex:0 0 auto;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

    margin-top:4px;

    padding:
        15px 16px;

    border:
        1px solid rgba(115,82,59,.16);

    border-radius:18px;

    background:
        rgba(255,248,221,.30);

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

}

.menu-panel-contact > span{

    color:var(--color-texto-secundario);

    font-size:13px;

}

.menu-panel-contact a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--color-acento-oliva);

    font-size:16px;

    font-weight:800;

    text-decoration:none;

}

.menu-panel-location{

    flex:0 0 auto;

    margin:
        12px 0
        0;

    color:rgba(85,69,55,.76);

    font-size:12px;

    text-align:center;

}

body.menu-open{

    overflow:hidden;

}

/* Entrada interna escalonada */

.menu-panel > .menu-panel-header,
.menu-panel > .menu-panel-divider,
.menu-panel > .menu-navigation,
.menu-panel > .menu-panel-contact,
.menu-panel > .menu-panel-location{

    opacity:0;

    translate:-12px 0;

    transition:
        opacity .42s ease,
        translate .48s cubic-bezier(.22,1,.36,1);

}

.menu-panel.is-open > .menu-panel-header{
    opacity:1;
    translate:0 0;
    transition-delay:.14s;
}

.menu-panel.is-open > .menu-panel-divider{
    opacity:1;
    translate:0 0;
    transition-delay:.20s;
}

.menu-panel.is-open > .menu-navigation{
    opacity:1;
    translate:0 0;
    transition-delay:.26s;
}

.menu-panel.is-open > .menu-panel-contact{
    opacity:1;
    translate:0 0;
    transition-delay:.33s;
}

.menu-panel.is-open > .menu-panel-location{
    opacity:1;
    translate:0 0;
    transition-delay:.38s;
}

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

.site-footer{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    padding:
        72px 30px
        23px;

    color:#f8edda;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(213,179,106,.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 100%,
            rgba(89,114,57,.20),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #493426 0%,
            #34261d 52%,
            #28311f 100%
        );

    border-top:
        1px solid rgba(213,179,106,.34);

    box-shadow:
        0 -16px 36px rgba(47,36,28,.12);

}

.site-footer::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    opacity:.13;

    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.14) 0,
            rgba(255,255,255,.14) 1px,
            transparent 1px,
            transparent 42px
        );

    mask-image:
        linear-gradient(
            black,
            transparent 92%
        );

}

.footer-decoration{

    position:absolute;

    top:25px;

    left:50%;

    width:min(720px,72%);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    transform:translateX(-50%);

}

.footer-decoration span{

    flex:1;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(232,208,154,.78),
            rgba(89,114,57,.72),
            transparent
        );

}

.footer-decoration i{

    width:13px;

    height:13px;

    flex:0 0 13px;

    transform:rotate(45deg);

    border-radius:2px;

    background:
        linear-gradient(
            135deg,
            var(--color-acento-claro),
            var(--color-acento),
            var(--color-acento-oliva)
        );

    box-shadow:
        0 0 13px rgba(213,179,106,.35);

}

.footer-inner{

    width:min(1180px,100%);

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(180px,.65fr)
        minmax(230px,.85fr);

    gap:
        42px 58px;

    align-items:start;

}

.footer-brand{

    max-width:520px;

}

.footer-eyebrow{

    display:block;

    margin-bottom:10px;

    color:#d9c184;

    font-size:13px;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

}

.footer-brand h2{

    max-width:510px;

    margin:
        0 0
        15px;

    color:#fff7e8;

    font-size:
        clamp(31px,3.5vw,47px);

    line-height:1.08;

    text-wrap:balance;

    text-shadow:
        0 4px 12px rgba(0,0,0,.22);

}

.footer-brand p{

    max-width:500px;

    margin:
        0 0
        22px;

    color:rgba(248,237,218,.76);

    font-size:17px;

    line-height:1.6;

}

.footer-whatsapp-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:10px;

    min-height:50px;

    padding:
        11px 17px;

    overflow:hidden;

    border:
        1px solid rgba(232,208,154,.24);

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #50653a,
            #6e8248 48%,
            #45572f
        );

    color:#fffaf0;

    font-size:15px;

    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 9px 21px rgba(0,0,0,.20),
        inset 0 1px 2px rgba(255,255,255,.20);

    transition:
        transform .22s ease,
        filter .22s ease,
        box-shadow .28s ease;

}

.footer-whatsapp-link:hover{

    transform:translateY(-2px);

    filter:brightness(1.06);

    box-shadow:
        0 13px 28px rgba(0,0,0,.26),
        0 0 22px rgba(213,179,106,.12);

}

.footer-whatsapp-mark{

    width:27px;

    height:27px;

    display:grid;

    place-items:center;

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

    border-radius:50%;

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

    font-size:13px;

}

.footer-navigation h3,
.footer-information h3{

    margin:
        3px 0
        17px;

    color:#fff5e3;

    font-size:19px;

}

.footer-navigation{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.footer-navigation a{

    position:relative;

    display:inline-block;

    margin-bottom:11px;

    color:rgba(248,237,218,.75);

    font-size:15px;

    text-decoration:none;

    transition:
        color .20s ease,
        translate .20s ease;

}

.footer-navigation a::after{

    content:"";

    position:absolute;

    left:0;

    right:100%;

    bottom:-3px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--color-acento),
            var(--color-acento-oliva)
        );

    transition:right .25s ease;

}

.footer-navigation a:hover,
.footer-navigation a:focus-visible{

    color:#fff8ec;

    translate:3px 0;

    outline:none;

}

.footer-navigation a:hover::after,
.footer-navigation a:focus-visible::after{

    right:0;

}

.footer-information{

    display:flex;

    flex-direction:column;

}

.footer-info-item{

    display:flex;

    align-items:flex-start;

    gap:11px;

    margin-bottom:17px;

}

.footer-info-dot{

    width:8px;

    height:8px;

    flex:0 0 8px;

    margin-top:7px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--color-acento),
            #7e9654
        );

    box-shadow:
        0 0 0 4px rgba(213,179,106,.10);

}

.footer-info-item div{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.footer-info-item strong{

    color:#fff5e4;

    font-size:14px;

}

.footer-info-item span{

    color:rgba(248,237,218,.69);

    font-size:14px;

    line-height:1.35;

}

.footer-cart-button{

    width:100%;

    min-height:46px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:5px;

    padding:
        10px 14px;

    border:
        1px solid rgba(232,208,154,.24);

    border-radius:14px;

    background:
        rgba(255,248,221,.08);

    color:#fff6e7;

    font-size:14px;

    font-weight:800;

    cursor:pointer;

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

}

.footer-cart-button:hover{

    transform:translateY(-2px);

    border-color:
        rgba(232,208,154,.42);

    background:
        rgba(255,248,221,.13);

}

.footer-bottom{

    width:min(1180px,100%);

    margin:
        48px auto
        0;

    padding-top:19px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:22px;

    border-top:
        1px solid rgba(232,208,154,.15);

}

.footer-bottom p{

    margin:0;

    color:rgba(248,237,218,.58);

    font-size:13px;

}

.footer-top-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:
        8px 11px;

    border:
        1px solid rgba(232,208,154,.18);

    border-radius:999px;

    background:transparent;

    color:rgba(248,237,218,.76);

    font-size:13px;

    cursor:pointer;

    transition:
        color .20s ease,
        background .20s ease,
        transform .20s ease;

}

.footer-top-button:hover{

    color:#fff8ec;

    background:
        rgba(255,248,221,.08);

    transform:translateY(-2px);

}

@media (max-width:900px){

    .footer-inner{

        grid-template-columns:
            minmax(0,1.25fr)
            minmax(210px,.75fr);

        gap:
            38px 48px;

    }

    .footer-brand{

        grid-column:1 / -1;

        max-width:650px;

    }

}

@media (max-width:740px){

    .menu-panel{

        inset:0;

        width:100%;

        height:100vh;
        height:100dvh;

        padding:
            calc(18px + env(safe-area-inset-top))
            15px
            calc(17px + env(safe-area-inset-bottom));

        border-right:none;

        box-shadow:none;

    }

    .menu-overlay{

        background:
            rgba(47,36,28,.42);

    }

    .menu-panel-brand h2{

        font-size:30px;

    }

    .menu-panel-divider{

        margin:
            18px 0
            14px;

    }

    .menu-navigation{

        gap:6px;

    }

    .menu-link{

        min-height:60px;

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

        gap:9px;

        padding:
            8px 9px;

        border-radius:15px;

    }

    .menu-link-copy strong{

        font-size:16px;

    }

    .menu-link-copy small{

        font-size:12px;

    }

    .menu-panel-contact{

        padding:
            12px 13px;

    }

    .site-footer{

        padding:
            62px 18px
            20px;

    }

    .footer-decoration{

        top:22px;

        width:76%;

        gap:11px;

    }

    .footer-inner{

        grid-template-columns:1fr;

        gap:32px;

    }

    .footer-brand{

        grid-column:auto;

    }

    .footer-brand h2{

        font-size:32px;

    }

    .footer-brand p{

        font-size:15px;

        line-height:1.5;

    }

    .footer-navigation{

        display:grid;

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

        gap:
            5px 18px;

    }

    .footer-navigation h3{

        grid-column:1 / -1;

    }

    .footer-navigation a{

        margin-bottom:8px;

        font-size:14px;

    }

    .footer-bottom{

        margin-top:35px;

        flex-direction:column-reverse;

        align-items:flex-start;

        gap:15px;

    }

}

@media (max-width:420px){

    .footer-navigation{

        grid-template-columns:1fr;

    }

    .footer-navigation h3{

        grid-column:auto;

    }

    .footer-whatsapp-link{

        width:100%;

        justify-content:center;

    }

}

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

    .menu-panel,
    .menu-panel > *,
    .menu-link,
    .footer-whatsapp-link,
    .footer-top-button,
    .footer-cart-button{

        animation:none !important;

        transition:none !important;

    }

}
/* =========================================================
   CATÁLOGO UNIFICADO
   Entrada + productos + cierre como una sola composición
========================================================= */

#productos{

    padding:
        clamp(38px,5vw,68px)
        0
        clamp(55px,7vw,90px);

    background:transparent;

}


/* ===== SUPERFICIE GENERAL COMPARTIDA ===== */

.catalog-unified{

    position:relative;

    isolation:isolate;

    width:min(
        1280px,
        calc(100% - 28px)
    );

    margin:0 auto;

    padding:
        clamp(42px,5vw,68px)
        clamp(18px,3vw,38px)
        clamp(42px,5vw,65px);

    overflow:visible;

    /*
    Sin borde y sin una caja claramente delimitada.
    Las luces se desvanecen sobre el fondo general.
    */

    border:none;

    border-radius:0;

    background:

        radial-gradient(
            ellipse at 50% 8%,
            rgba(255,249,226,.42) 0%,
            rgba(232,208,154,.15) 38%,
            transparent 69%
        ),

        radial-gradient(
            ellipse at 12% 49%,
            rgba(213,179,106,.10) 0%,
            transparent 46%
        ),

        radial-gradient(
            ellipse at 91% 58%,
            rgba(89,114,57,.07) 0%,
            transparent 48%
        ),

        radial-gradient(
            ellipse at 50% 92%,
            rgba(232,208,154,.14) 0%,
            transparent 62%
        );

    box-shadow:none;

}


/* Luz vertical que conecta visualmente las tres partes */

.catalog-unified::before{

    content:"";

    position:absolute;

    z-index:-1;

    top:8%;

    bottom:7%;

    left:50%;

    width:min(1050px,92%);

    transform:translateX(-50%);

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255,248,221,.17) 17%,
            rgba(232,208,154,.12) 47%,
            rgba(213,179,106,.08) 76%,
            transparent 100%
        );

    filter:blur(24px);

}


/* Todos los bloques quedan por encima de la iluminación */

.catalog-unified > *{

    position:relative;

    z-index:1;

}
/* =========================================================
   ENTRADA DEL CATÁLOGO
========================================================= */

.catalog-unified
.productos-init{

    width:100%;

    margin:0 auto;

    padding:
        0 0
        clamp(30px,4vw,48px);

}


/*
El bloque de título deja de parecer
una tarjeta independiente.
*/

.catalog-unified
.productos-heading-panel{

    width:min(850px,100%);

    margin:0 auto;

    padding:
        12px 22px
        18px;

    border:none;

    border-radius:0;

    background:transparent;

    box-shadow:none;

}


/* Desactivamos la luz encerrada del bloque anterior */

.catalog-unified
.productos-heading-panel::before{

    opacity:.42;

}


/*
La barra sigue existiendo como detalle decorativo,
pero ya no funciona como una frontera gruesa.
*/

.catalog-unified
.productos-divider{

    width:min(650px,58%);

    height:3px;

    margin:
        0 auto
        31px;

    opacity:.76;

    box-shadow:
        0 3px 9px
        rgba(47,36,28,.15);

}


/* Etiqueta superior más ligera */

.catalog-unified
.productos-kicker{

    border:none;

    background:
        rgba(255,248,221,.24);

    box-shadow:none;

}
/* =========================================================
   VITRINA INTEGRADA
========================================================= */

.catalog-unified
.catalog-showcase{

    width:100%;

    max-width:none;

    margin:0;

    padding:0;

    overflow:visible;

    border:none;

    border-radius:0;

    background:transparent;

    box-shadow:none;

}


/*
Eliminamos las luces propias de la caja anterior,
porque ahora las controla .catalog-unified.
*/

.catalog-unified
.catalog-showcase::before,

.catalog-unified
.catalog-showcase::after{

    display:none;

}


/* ===== CABECERA DE MATERIALES ===== */

.catalog-unified
.catalog-showcase-header{

    width:100%;

    min-height:auto;

    margin:
        0 auto
        8px;

    padding:
        0 12px
        17px;

    border:none;

}


/* Elimina la línea inferior rígida */

.catalog-unified
.catalog-showcase-header::after{

    display:none;

}


/* Las etiquetas conservan identidad, pero sin bordes */

.catalog-unified
.catalog-showcase-label,

.catalog-unified
.catalog-showcase-count{

    border:none;

    background:
        rgba(255,248,221,.30);

    box-shadow:
        0 5px 15px
        rgba(47,36,28,.07);

}
/* ===== SUPERFICIE DE LOS PRODUCTOS ===== */

.catalog-unified
.catalog-showcase-stage{

    position:relative;

    padding:
        clamp(29px,4vw,46px)
        clamp(5px,2vw,24px)
        clamp(34px,4vw,52px);

    overflow:visible;

    border:none;

    border-radius:0;

    background:

        radial-gradient(
            ellipse at 50% 47%,
            rgba(238,216,177,.25) 0%,
            rgba(224,198,159,.10) 48%,
            transparent 76%
        );

    box-shadow:none;

}


/*
La textura cuadriculada anterior queda
casi imperceptible.
*/

.catalog-unified
.catalog-showcase-stage::before{

    opacity:.045;

}


/* Conservamos una luz inferior suave */

.catalog-unified
.catalog-showcase-stage::after{

    bottom:-95px;

    width:78%;

    height:210px;

    opacity:.52;

    filter:blur(18px);

}


/* Quitamos relleno externo duplicado del grid */

.catalog-unified
.catalog-showcase
.products-grid{

    width:100%;

    max-width:none;

    margin:0;

    padding:0;

}
/* =========================================================
   CIERRE INTEGRADO DEL CATÁLOGO
========================================================= */

.catalog-unified
.catalog-closing{

    width:min(880px,100%);

    margin:
        clamp(10px,2vw,22px)
        auto
        0;

    padding:
        clamp(28px,4vw,43px)
        22px
        0;

    overflow:visible;

    border:none;

    border-radius:0;

    background:transparent;

    box-shadow:none;

}


/* Luz ambiental sin formar una caja */

.catalog-unified
.catalog-closing::before{

    z-index:-1;

    top:-95px;

    width:min(650px,90%);

    height:280px;

    opacity:.68;

    background:
        radial-gradient(
            ellipse,
            rgba(213,179,106,.16) 0%,
            rgba(232,208,154,.07) 43%,
            transparent 72%
        );

}


/*
La decoración sigue conectando,
pero con menos fuerza visual.
*/

.catalog-unified
.catalog-closing-decoration{

    width:min(450px,64%);

    margin-bottom:19px;

    opacity:.78;

}


.catalog-unified
.catalog-closing-line{

    height:2px;

    box-shadow:
        0 2px 6px
        rgba(47,36,28,.10);

}
/* =========================================================
   CONTINUIDAD Y ESPACIADO
========================================================= */

.catalog-unified
.productos-init
+ .catalog-showcase{

    margin-top:0;

}


.catalog-unified
.catalog-showcase
+ .catalog-closing{

    margin-top:
        clamp(6px,1.5vw,18px);

}


/*
Evita que el cierre deje un vacío excesivo
antes de la siguiente sección o del footer.
*/

.catalog-unified
.catalog-closing:last-child{

    margin-bottom:0;

}
@media (max-width:600px){

    #productos{

        padding:
            27px 0
            55px;

    }


    .catalog-unified{

        width:100%;

        padding:
            31px 7px
            38px;

        background:

            radial-gradient(
                ellipse at 50% 9%,
                rgba(255,249,226,.27),
                transparent 57%
            ),

            radial-gradient(
                ellipse at 50% 74%,
                rgba(213,179,106,.075),
                transparent 65%
            );

    }


    .catalog-unified::before{

        width:96%;

        opacity:.58;

    }


    .catalog-unified
    .productos-init{

        padding-bottom:25px;

    }


    .catalog-unified
    .productos-heading-panel{

        width:100%;

        padding:
            5px 8px
            13px;

    }


    .catalog-unified
    .productos-divider{

        width:68%;

        margin-bottom:23px;

    }


    .catalog-unified
    .catalog-showcase-header{

        padding:
            0 5px
            13px;

    }


    .catalog-unified
    .catalog-showcase-stage{

        padding:
            23px 0
            31px;

        background:
            radial-gradient(
                ellipse at center,
                rgba(238,216,177,.16),
                transparent 74%
            );

    }


    .catalog-unified
    .catalog-closing{

        width:100%;

        padding:
            25px 10px
            0;

    }


    .catalog-unified
    .catalog-closing-decoration{

        width:70%;

    }

}
/* =========================================================
   PROTECCIÓN DE LA ESTRUCTURA INTERNA DE PRODUCTOS
========================================================= */

.catalog-unified
.product-card{

    text-align:left;

}


/* El contenido principal vuelve
   a ocupar todo el ancho disponible */

.catalog-unified
.product-card
.product-info{

    width:100%;

    align-items:stretch;

    text-align:left;

}


/* Título, descripción y peso
   alineados como en el diseño original */

.catalog-unified
.product-card
.product-info h3,

.catalog-unified
.product-card
.product-description,

.catalog-unified
.product-card
.product-weight{

    width:100%;

    text-align:left;

}


/* La descripción nunca debe heredar
   la opacidad de la introducción */

.catalog-unified
.product-card
.product-description{

    opacity:1;

    visibility:visible;

    filter:none;

    transform:none;

}


/* Precios alineados hacia la izquierda */

.catalog-unified
.product-card
.product-price{

    width:100%;

    align-items:flex-start;

    text-align:left;

}


/* La etiqueta vuelve a colocarse
   en el lateral izquierdo */

.catalog-unified
.product-card
.offer-badge{

    width:max-content;

    max-width:
        calc(100% - 24px);

    margin:
        14px auto
        3px 12px;

    text-align:left;

}


/* Imagen restaurada */

.catalog-unified
.product-card
.product-image{

    width:100%;

}


.catalog-unified
.product-card
.product-image img{

    width:100%;

    opacity:1;

    visibility:visible;

    filter:none;

}


/* El selector de cantidades sí permanece centrado */

.catalog-unified
.product-card
.quantity-selector{

    width:100%;

    align-self:stretch;

    justify-content:center;

    text-align:center;

}


/* Botón inferior completo */

.catalog-unified
.product-card
.add-cart-btn{

    width:100%;

    align-self:stretch;

}
/* =========================================
   PRESENTACIÓN — ESCRITORIO DEFINITIVO
========================================= */

@media (min-width:901px){

    .presentation-cards{

        width:min(
            1100px,
            calc(100% - 36px)
        );

        padding:
            25px 18px
            34px;

    }


    .presentation-cards-grid{

        display:grid;

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

        align-items:stretch;

        gap:22px;

    }


    #nosotros .presentation-card{

        width:100%;

        max-width:none;

        min-height:255px;

        margin:0;

        padding:
            25px 23px
            23px;

        display:flex;

        flex-direction:column
            !important;

        align-items:flex-start
            !important;

        gap:19px;

    }


    #nosotros
    .presentation-card
    .content-card{

        width:100%;

        text-align:left;

    }

}
/* =========================================
   AJUSTE FINO DE ICONOS — NOSOTROS
========================================= */

/* ===== PRECIOS MAYORISTAS ===== */

#nosotros
.presentation-card
.icon-card{

    padding:0;

}


#nosotros
.presentation-card
.icon-card img{

    width:76%;

    height:76%;

    object-fit:contain;

    transform:
        translateX(4px);

}


/* ===== ATENCIÓN PERSONALIZADA ===== */

#nosotros
.presentation-card
.icon-cardP{

    padding-left:0;

    display:flex;

    justify-content:center;

    align-items:center;

}


#nosotros
.presentation-card
.icon-cardP img{

    width:72%;

    height:72%;

    display:block;

    object-fit:contain;

    margin:auto;

    padding:0;

    transform:none;

}

@media (max-width:600px){

    #nosotros
    .presentation-card
    .icon-card img{

        width:78%;

        height:78%;

        transform:
            translateX(3px);

    }


    #nosotros
    .presentation-card
    .icon-cardP img{

        width:75%;

        height:75%;

    }

}
/* =========================================================
   NUESTRA FILOSOFÍA — COMPOSICIÓN CONTINUA
========================================================= */

#nosotros .nosotros-init{

    position:relative;

    isolation:isolate;

    width:min(
        1120px,
        calc(100% - 28px)
    );

    margin:0 auto;

    padding:
        clamp(48px,6vw,78px)
        clamp(18px,5vw,60px)
        clamp(39px,5vw,59px);

    overflow:visible;

    border:none;

    background:

        radial-gradient(
            ellipse at 50% 9%,
            rgba(255,250,229,.50),
            rgba(232,208,154,.15) 43%,
            transparent 70%
        ),

        radial-gradient(
            ellipse at 13% 56%,
            rgba(213,179,106,.09),
            transparent 47%
        ),

        radial-gradient(
            ellipse at 90% 63%,
            rgba(89,114,57,.06),
            transparent 46%
        );

    box-shadow:none;

}


/* Luz ambiental superior */

#nosotros .nosotros-init::before{

    content:"";

    position:absolute;

    z-index:-1;

    top:-115px;

    left:50%;

    width:min(
        860px,
        92vw
    );

    height:390px;

    transform:
        translateX(-50%);

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse,
            rgba(255,244,199,.26),
            rgba(213,179,106,.08) 43%,
            transparent 72%
        );

    filter:blur(14px);

}


/* Luz inferior que conduce hacia las tarjetas */

#nosotros .nosotros-init::after{

    content:"";

    position:absolute;

    z-index:-1;

    left:50%;

    bottom:-95px;

    width:min(
        790px,
        88%
    );

    height:210px;

    transform:
        translateX(-50%);

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse,
            rgba(232,208,154,.17),
            rgba(89,114,57,.045) 48%,
            transparent 73%
        );

    filter:blur(16px);

}


/* Mantiene el contenido por encima de las luces */

#nosotros
.nosotros-init > *{

    position:relative;

    z-index:1;

}
/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */

#nosotros
.nosotros-init > h2{

    width:100%;

    max-width:1000px;

    margin:
        0 auto
        20px;

    padding:0;

    color:var(--color-texto);

    font-size:
        clamp(44px,6vw,72px);

    font-weight:800;

    line-height:.98;

    letter-spacing:.025em;

    text-wrap:balance;

    text-shadow:
        0 5px 12px rgba(47,36,28,.25),
        0 13px 30px rgba(47,36,28,.09);

}


/*
Gradiente aplicado únicamente cuando el navegador
soporta texto recortado mediante background-clip.
*/

@supports (
    -webkit-background-clip:text
){

    #nosotros
    .nosotros-init > h2{

        background:
            linear-gradient(
                108deg,
                #3d2f25 3%,
                #73523b 36%,
                var(--color-acento-oliva) 57%,
                #73523b 72%,
                #3d2f25 96%
            );

        background-size:
            180% 100%;

        background-position:
            0% center;

        -webkit-background-clip:
            text;

        background-clip:
            text;

        -webkit-text-fill-color:
            transparent;

    }

}


/* Detalle luminoso inferior, no es un borde */

#nosotros
.nosotros-init > h2::after{

    content:"";

    display:block;

    width:min(
        245px,
        44%
    );

    height:3px;

    margin:
        17px auto
        0;

    border-radius:999px;

    opacity:0;

    transform:
        scaleX(.18);

    transform-origin:center;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-acento-oliva),
            var(--color-acento),
            transparent
        );

    box-shadow:
        0 4px 10px rgba(47,36,28,.13);

}


#nosotros
.nosotros-init > h2.is-visible::after{

    animation:
        philosophyTitleAccent
        .78s
        cubic-bezier(.22,1,.36,1)
        .28s
        forwards;

}


@keyframes philosophyTitleAccent{

    to{

        opacity:.88;

        transform:
            scaleX(1);

    }

}
/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */

#nosotros
.nosotros-init > h2{

    width:100%;

    max-width:1000px;

    margin:
        0 auto
        20px;

    padding:0;

    color:var(--color-texto);

    font-size:
        clamp(44px,6vw,72px);

    font-weight:800;

    line-height:.98;

    letter-spacing:.025em;

    text-wrap:balance;

    text-shadow:
        0 5px 12px rgba(47,36,28,.25),
        0 13px 30px rgba(47,36,28,.09);

}


/*
Gradiente aplicado únicamente cuando el navegador
soporta texto recortado mediante background-clip.
*/

@supports (
    -webkit-background-clip:text
){

    #nosotros
    .nosotros-init > h2{

        background:
            linear-gradient(
                108deg,
                #3d2f25 3%,
                #73523b 36%,
                var(--color-acento-oliva) 57%,
                #73523b 72%,
                #3d2f25 96%
            );

        background-size:
            180% 100%;

        background-position:
            0% center;

        -webkit-background-clip:
            text;

        background-clip:
            text;

        -webkit-text-fill-color:
            transparent;

    }

}


/* Detalle luminoso inferior, no es un borde */

#nosotros
.nosotros-init > h2::after{

    content:"";

    display:block;

    width:min(
        245px,
        44%
    );

    height:3px;

    margin:
        17px auto
        0;

    border-radius:999px;

    opacity:0;

    transform:
        scaleX(.18);

    transform-origin:center;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-acento-oliva),
            var(--color-acento),
            transparent
        );

    box-shadow:
        0 4px 10px rgba(47,36,28,.13);

}


#nosotros
.nosotros-init > h2.is-visible::after{

    animation:
        philosophyTitleAccent
        .78s
        cubic-bezier(.22,1,.36,1)
        .28s
        forwards;

}


@keyframes philosophyTitleAccent{

    to{

        opacity:.88;

        transform:
            scaleX(1);

    }

}
/* =========================================================
   PREGUNTA Y TEXTO
========================================================= */

#nosotros
.nosotros-init > h3{

    max-width:780px;

    margin:
        0 auto
        23px;

    padding:
        4px 10px;

    color:var(--color-texto);

    font-size:
        clamp(25px,3vw,34px);

    font-weight:750;

    line-height:1.2;

    letter-spacing:.015em;

    text-wrap:balance;

    text-shadow:
        0 3px 7px rgba(47,36,28,.22);

}


#nosotros
.nosotros-init > .typing-text{

    width:min(
        900px,
        94%
    );

    max-width:none;

    margin:
        0 auto
        13px;

    padding:0;

    color:var(--color-texto-secundario);

    font-size:
        clamp(17px,1.6vw,21px);

    line-height:1.68;

    text-align:center;

    text-wrap:balance;

    text-shadow:
        0 2px 5px rgba(47,36,28,.10);

}


/* Segundo párrafo ligeramente más ligero */

#nosotros
.nosotros-init > .typing-text:nth-of-type(2){

    max-width:790px;

    color:
        rgba(61,47,37,.88);

}
/* =========================================================
   ANIMACIONES DE FILOSOFÍA
========================================================= */

#nosotros
.philosophy-heading.is-visible{

    animation:
        philosophyHeadingPremium
        .88s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes philosophyHeadingPremium{

    0%{

        opacity:0;

        filter:
            blur(8px);

        transform:
            translateY(25px)
            scale(.965);

        letter-spacing:.075em;

    }

    68%{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(-2px)
            scale(1.006);

    }

    100%{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(0)
            scale(1);

        letter-spacing:
            normal;

    }

}


#nosotros
.typing-text.is-visible
.word{

    animation:
        philosophyWordPremium
        .42s
        cubic-bezier(.22,1,.36,1)
        var(--word-delay)
        forwards;

}


@keyframes philosophyWordPremium{

    0%{

        opacity:0;

        filter:
            blur(4px);

        transform:
            translateY(.55em)
            scale(.965);

    }

    66%{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(-1px)
            scale(1.012);

    }

    100%{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


/* Divisores más suaves para no cortar la continuidad */

#nosotros
.nosotros-divider{

    height:3px;

    box-shadow:
        0 3px 9px rgba(47,36,28,.15);

}


#nosotros
.nosotros-divider.top{

    width:min(
        510px,
        51%
    );

}


#nosotros
.nosotros-divider.bottom{

    width:min(
        650px,
        63%
    );

    margin-top:
        33px;

}
/* =========================================================
   TRANSICIÓN HACIA “NUESTRA FORMA DE TRABAJAR”
========================================================= */

#nosotros
.philosophy-continuation{

    opacity:0;

    transform:
        translateY(14px)
        scaleX(.86);

    transform-origin:center;

    will-change:
        opacity,
        transform;

}


#nosotros
.philosophy-continuation.is-visible{

    animation:
        philosophyBridgeReveal
        .78s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes philosophyBridgeReveal{

    0%{

        opacity:0;

        transform:
            translateY(14px)
            scaleX(.86);

    }

    72%{

        opacity:1;

        transform:
            translateY(-1px)
            scaleX(1.015);

    }

    100%{

        opacity:.82;

        transform:
            translateY(0)
            scaleX(1);

    }

}


#nosotros
.presentation-kicker,

#nosotros
.presentation-cards-heading > h2,

#nosotros
.presentation-cards-heading > p{

    opacity:0;

    will-change:
        opacity,
        transform,
        filter;

}


#nosotros
.presentation-kicker{

    transform:
        translateY(11px)
        scale(.96);

}


#nosotros
.presentation-kicker.is-visible{

    animation:
        philosophyMetaReveal
        .58s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes philosophyMetaReveal{

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


#nosotros
.presentation-cards-heading > h2{

    transform:
        translateY(20px)
        scale(.97);

    filter:
        blur(5px);

}


#nosotros
.presentation-cards-heading > h2.is-visible{

    animation:
        presentationHeadingReveal
        .76s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes presentationHeadingReveal{

    to{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


#nosotros
.presentation-cards-heading > p{

    transform:
        translateY(13px);

    filter:
        blur(3px);

}


#nosotros
.presentation-cards-heading > p.is-visible{

    animation:
        presentationTextReveal
        .62s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes presentationTextReveal{

    to{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(0);

    }

}
/* =========================================================
   REVELACIÓN DE TARJETAS
========================================================= */

#nosotros
.presentation-card{

    opacity:0;

    filter:
        blur(5px);

    transform:
        translateY(27px)
        scale(.968);

}


#nosotros
.presentation-card.is-revealed{

    animation:
        presentationCardRevealPremium
        .78s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes presentationCardRevealPremium{

    0%{

        opacity:0;

        filter:
            blur(5px);

        transform:
            translateY(27px)
            scale(.968);

    }

    72%{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(-3px)
            scale(1.008);

    }

    100%{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


/* El círculo del icono acompaña la entrada */

#nosotros
.presentation-card.is-revealed
.presentation-card-icon,

#nosotros
.presentation-card.is-revealed
.icon-card,

#nosotros
.presentation-card.is-revealed
.icon-cardP,

#nosotros
.presentation-card.is-revealed
.icon-cardPP{

    animation:
        presentationIconReveal
        .70s
        cubic-bezier(.22,1,.36,1)
        .10s
        both;

}


@keyframes presentationIconReveal{

    0%{

        opacity:0;

        filter:
            blur(4px)
            brightness(.9);

        transform:
            translateY(8px)
            scale(.72)
            rotate(-6deg);

    }

    72%{

        opacity:1;

        filter:
            blur(0)
            brightness(1.08);

        transform:
            translateY(-2px)
            scale(1.06)
            rotate(1deg);

    }

    100%{

        opacity:1;

        filter:
            blur(0)
            brightness(1);

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

    }

}
/* =========================================================
   REVELACIÓN DE TARJETAS
========================================================= */

#nosotros
.presentation-card{

    opacity:0;

    filter:
        blur(5px);

    transform:
        translateY(27px)
        scale(.968);

}


#nosotros
.presentation-card.is-revealed{

    animation:
        presentationCardRevealPremium
        .78s
        cubic-bezier(.22,1,.36,1)
        forwards;

}


@keyframes presentationCardRevealPremium{

    0%{

        opacity:0;

        filter:
            blur(5px);

        transform:
            translateY(27px)
            scale(.968);

    }

    72%{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(-3px)
            scale(1.008);

    }

    100%{

        opacity:1;

        filter:
            blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


/* El círculo del icono acompaña la entrada */

#nosotros
.presentation-card.is-revealed
.presentation-card-icon,

#nosotros
.presentation-card.is-revealed
.icon-card,

#nosotros
.presentation-card.is-revealed
.icon-cardP,

#nosotros
.presentation-card.is-revealed
.icon-cardPP{

    animation:
        presentationIconReveal
        .70s
        cubic-bezier(.22,1,.36,1)
        .10s
        both;

}


@keyframes presentationIconReveal{

    0%{

        opacity:0;

        filter:
            blur(4px)
            brightness(.9);

        transform:
            translateY(8px)
            scale(.72)
            rotate(-6deg);

    }

    72%{

        opacity:1;

        filter:
            blur(0)
            brightness(1.08);

        transform:
            translateY(-2px)
            scale(1.06)
            rotate(1deg);

    }

    100%{

        opacity:1;

        filter:
            blur(0)
            brightness(1);

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

    }

}

/* =========================================================
   CORRECCIÓN FINAL DE DISTRIBUCIÓN Y ESPACIADO
   - Restaura las tarjetas de presentación
   - Compacta Authority
   - Acerca Authority al catálogo
   - Elimina "4 opciones"
========================================================= */

/* =========================================================
   1. PRESENTACIÓN: ESTRUCTURA CORRECTA
========================================================= */

#nosotros .presentation-cards{
    display:block !important;
    grid-template-columns:none !important;

    width:min(
        1100px,
        calc(100% - 36px)
    ) !important;

    margin:
        6px auto
        22px !important;

    padding:
        18px 18px
        22px !important;
}

#nosotros .presentation-cards
> .philosophy-continuation,

#nosotros .presentation-cards
> .presentation-cards-heading,

#nosotros .presentation-cards
> .presentation-cards-grid{
    width:100%;
}

#nosotros .philosophy-continuation{
    width:min(560px,70%) !important;

    margin:
        0 auto
        24px !important;
}

#nosotros .presentation-cards-heading{
    max-width:760px;

    margin:
        0 auto
        26px !important;
}

#nosotros .presentation-cards-grid{
    display:grid !important;

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

    align-items:stretch !important;

    gap:22px !important;
}

#nosotros .presentation-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    min-height:255px !important;

    margin:0 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    padding:
        25px 23px
        23px !important;

    gap:19px !important;
}

#nosotros .presentation-card
.content-card{
    width:100% !important;

    min-width:0;

    text-align:left !important;
}

#nosotros .presentation-card h3,
#nosotros .presentation-card p{
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
}


/* =========================================================
   2. AUTHORITY: COMPACTA Y SIN VACÍOS
========================================================= */

#entregas.authority{
    width:min(
        1120px,
        calc(100% - 28px)
    ) !important;

    height:auto !important;
    min-height:0 !important;

    margin:
        12px auto
        20px !important;

    padding:
        22px
        clamp(18px,5vw,60px)
        24px !important;
}

#entregas.authority::before{
    top:55px !important;
    height:360px !important;
}

#entregas.authority::after{
    bottom:-35px !important;
    height:125px !important;
}

#entregas .authority-bridge{
    margin:
        0 auto
        20px !important;
}

#entregas .authority-kicker{
    margin-bottom:12px !important;
}

#entregas .authority-live-label{
    margin-bottom:2px !important;
}

#entregas .authority-counter-stage{
    margin:
        2px auto
        2px !important;
}

#entregas .authority-title{
    margin:
        14px auto
        12px !important;
}

#entregas .authority-description{
    margin:
        0 auto !important;

    line-height:1.58 !important;
}

#entregas .authority-values{
    width:min(960px,100%) !important;

    margin:
        28px auto
        0 !important;

    padding-bottom:0 !important;

    gap:
        clamp(20px,3vw,36px)
        !important;
}

#entregas .authority-value{
    min-height:0 !important;

    padding:
        36px 14px
        6px !important;
}


/* =========================================================
   3. AUTHORITY -> CATÁLOGO: CONTINUIDAD
========================================================= */

#productos{
    margin:0 !important;

    padding:
        10px 0
        55px !important;
}

.catalog-unified{
    width:min(
        1280px,
        calc(100% - 28px)
    ) !important;

    padding:
        22px
        clamp(18px,3vw,38px)
        42px !important;
}

.catalog-unified
.productos-init{
    margin:0 auto !important;

    padding:
        0 0
        14px !important;
}

.catalog-unified
.productos-divider{
    margin:
        0 auto
        20px !important;
}

.catalog-unified
.productos-heading-panel{
    padding:
        8px 22px
        10px !important;
}

.catalog-unified
.productos-heading-panel > h2{
    margin-bottom:10px !important;
}

.catalog-unified
.productos-heading-panel > p{
    margin-bottom:0 !important;
}

.catalog-unified
.catalog-showcase{
    margin:0 !important;
}

.catalog-unified
.catalog-showcase-header{
    min-height:auto !important;

    margin:
        0 auto
        10px !important;

    padding:
        0 12px
        8px !important;

    justify-content:center !important;
}

.catalog-unified
.catalog-showcase-label{
    margin:0 auto !important;
}


/* Elimina definitivamente la etiqueta "4 opciones". */

.catalog-showcase-count{
    display:none !important;
}


.catalog-unified
.catalog-showcase-stage{
    padding:
        24px
        clamp(5px,2vw,24px)
        34px !important;
}


/* =========================================================
   4. TABLET
========================================================= */

@media (min-width:741px) and (max-width:900px){

    #nosotros .presentation-cards{
        display:block !important;

        width:
            calc(100% - 28px)
            !important;

        margin-bottom:20px !important;

        padding:
            20px 18px
            22px !important;
    }

    #nosotros .presentation-cards-grid{
        grid-template-columns:
            1fr !important;

        gap:17px !important;
    }

    #nosotros .presentation-card{
        min-height:auto !important;

        flex-direction:row !important;

        align-items:center !important;

        padding:
            20px 22px !important;

        gap:18px !important;
    }

    #entregas.authority{
        margin-bottom:18px !important;

        padding:
            22px 18px
            23px !important;
    }

    #entregas .authority-values{
        margin-top:26px !important;
    }

    #productos{
        padding-top:8px !important;
    }

    .catalog-unified{
        width:
            calc(100% - 18px)
            !important;

        padding:
            20px 14px
            38px !important;
    }

}


/* =========================================================
   5. CELULAR
========================================================= */

@media (max-width:740px){

    #nosotros .presentation-cards{
        display:block !important;

        width:
            calc(100% - 14px)
            !important;

        margin:
            2px auto
            18px !important;

        padding:
            16px 7px
            18px !important;
    }

    #nosotros .presentation-cards-grid{
        grid-template-columns:
            1fr !important;

        gap:13px !important;
    }

    #nosotros .presentation-card{
        width:100% !important;

        min-height:auto !important;

        flex-direction:row !important;

        align-items:center !important;

        padding:
            15px 14px !important;

        gap:13px !important;
    }

    #nosotros .presentation-card
    .content-card{
        text-align:left !important;
    }

    #entregas.authority{
        width:
            calc(100% - 10px)
            !important;

        margin:
            6px auto
            16px !important;

        padding:
            20px 11px
            20px !important;
    }

    #entregas .authority-bridge{
        margin-bottom:18px !important;
    }

    #entregas .authority-values{
        margin-top:26px !important;
    }

    #productos{
        padding:
            7px 0
            48px !important;
    }

    .catalog-unified{
        width:100% !important;

        padding:
            18px 7px
            34px !important;
    }

    .catalog-unified
    .productos-init{
        padding-bottom:12px !important;
    }

    .catalog-unified
    .productos-divider{
        margin-bottom:17px !important;
    }

    .catalog-unified
    .productos-heading-panel{
        padding:
            5px 8px
            8px !important;
    }

    .catalog-unified
    .catalog-showcase-header{
        margin-bottom:8px !important;

        padding:
            0 5px
            7px !important;
    }

    .catalog-unified
    .catalog-showcase-stage{
        padding:
            18px 0
            29px !important;
    }

}
/* =========================================================
   PRECIOS CON OFERTA DENTRO DEL CARRITO
========================================================= */

.cart-item-unit-prices{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:2px;

}


.cart-item-old-price{

    color:
        rgba(85,69,55,.61);

    font-size:13px;

    line-height:1.1;

    text-decoration:
        line-through;

    text-decoration-thickness:
        1.5px;

    text-decoration-color:
        rgba(154,63,50,.70);

}


.cart-item-new-price{

    color:
        var(--color-acento-oliva);

    font-size:15px;

    font-weight:800;

    line-height:1.2;

}


/* Columna de subtotales */

.cart-item-subtotals{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    justify-content:center;

    gap:2px;

    text-align:right;

    white-space:nowrap;

}


.cart-item-old-subtotal{

    color:
        rgba(85,69,55,.57);

    font-size:13px;

    line-height:1;

    text-decoration:
        line-through;

    text-decoration-thickness:
        1.5px;

    text-decoration-color:
        rgba(154,63,50,.70);

}


.cart-item-subtotal{

    color:
        var(--color-texto);

    font-size:18px;

    font-weight:850;

    line-height:1.05;

}


.cart-item-saving{

    color:
        var(--color-acento-oliva);

    font-size:11px;

    font-weight:800;

    line-height:1.15;

    letter-spacing:.15px;

}
/* =========================================================
   RESUMEN DE OFERTA DEL CARRITO
========================================================= */

.cart-summary-prices{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.cart-summary-old-row{

    opacity:.78;

}


.cart-summary-old-row span:first-child{

    font-size:15px;

    font-weight:600;

}


.cart-total-old{

    color:
        rgba(85,69,55,.62);

    font-size:17px;

    font-weight:650;

    text-decoration:
        line-through;

    text-decoration-thickness:
        1.5px;

    text-decoration-color:
        rgba(154,63,50,.72);

}


.cart-summary-current-row{

    align-items:flex-end;

}


.cart-summary-current-row
span:first-child{

    color:
        var(--color-texto);

    font-size:18px;

    font-weight:750;

}


.cart-total{

    color:
        var(--color-texto);

    font-size:29px;

    font-weight:900;

    line-height:1;

    text-shadow:
        0 2px 5px
        rgba(47,36,28,.12);

}


.cart-summary-saving{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-top:4px;

    padding:
        8px 11px;

    border-radius:12px;

    background:
        linear-gradient(
            110deg,
            rgba(89,114,57,.10),
            rgba(213,179,106,.14)
        );

    color:
        var(--color-acento-oliva);

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

}


.cart-summary-saving span{

    font-size:14px;

    font-weight:800;

}


.cart-total-saving{

    font-size:18px;

    font-weight:900;

}


.cart-summary-old-row[hidden],

.cart-summary-saving[hidden]{

    display:none !important;

}
@media (max-width:600px){

    .cart-item-subtotals{

        gap:1px;

    }


    .cart-item-old-subtotal{

        font-size:12px;

    }


    .cart-item-subtotal{

        font-size:16px;

    }


    .cart-item-saving{

        max-width:84px;

        font-size:10px;

        white-space:normal;

        text-align:right;

    }


    .cart-total{

        font-size:26px;

    }

}

/* =========================================================
   SISTEMA MAYORISTA PROGRESIVO — 10 NIVELES
========================================================= */

.wholesale-progress{

    margin-bottom:12px;

    padding:
        11px 12px
        10px;

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(255,248,221,.38),
            rgba(213,179,106,.12),
            rgba(89,114,57,.075)
        );

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.62),
        0 5px 13px rgba(47,36,28,.07);

}


.wholesale-progress-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:8px;

}


.wholesale-level-label{

    color:var(--color-acento-oliva);

    font-size:12px;

    font-weight:900;

    letter-spacing:.65px;

    text-transform:uppercase;

}


.wholesale-next-goal{

    color:var(--color-texto);

    font-size:12px;

    font-weight:800;

    text-align:right;

}


.wholesale-progress-track{

    position:relative;

    width:100%;

    height:8px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(122,96,70,.13);

    box-shadow:
        inset 0 1px 3px rgba(47,36,28,.15);

}


.wholesale-progress-fill{

    position:absolute;

    inset:
        0 auto 0 0;

    width:0;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            var(--color-acento-oliva),
            #82965b,
            var(--color-acento),
            var(--color-acento-claro)
        );

    box-shadow:
        0 0 12px rgba(213,179,106,.44);

    transition:
        width .58s
        cubic-bezier(.22,1,.36,1);

}


.wholesale-level-dots{

    display:grid;

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

    align-items:center;

    gap:5px;

    margin-top:7px;

}


.wholesale-level-dot{

    width:7px;

    height:7px;

    justify-self:center;

    border-radius:50%;

    background:
        rgba(122,96,70,.23);

    box-shadow:
        0 0 0 2px rgba(238,222,192,.72);

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

}


.wholesale-level-dot.is-unlocked{

    background:
        var(--color-acento-oliva);

    box-shadow:
        0 0 0 2px rgba(89,114,57,.12),
        0 0 9px rgba(89,114,57,.34);

}


.wholesale-level-dot.is-current{

    transform:scale(1.38);

    background:
        var(--color-acento);

    box-shadow:
        0 0 0 3px rgba(213,179,106,.16),
        0 0 12px rgba(213,179,106,.60);

}


.wholesale-progress-message{

    margin-top:7px;

    color:var(--color-texto-secundario);

    font-size:12px;

    font-weight:650;

    line-height:1.32;

    text-align:center;

}


/* ===== PRECIOS DE CADA PRODUCTO ===== */

.cart-item-unit-prices{

    gap:3px;

}


.cart-item-old-price{

    font-size:12px;

}


.cart-item-offer-price{

    display:flex;

    align-items:center;

    gap:5px;

    color:rgba(85,69,55,.65);

    font-size:13px;

    line-height:1.15;

    text-decoration:line-through;

    text-decoration-color:
        rgba(154,63,50,.58);

    text-decoration-thickness:1.3px;

}


.cart-item-offer-price small,
.cart-item-new-price small{

    display:inline-flex;

    align-items:center;

    padding:
        2px 5px;

    border-radius:999px;

    font-size:9px;

    font-weight:900;

    letter-spacing:.38px;

    line-height:1;

    text-transform:uppercase;

}


.cart-item-offer-price small{

    background:
        rgba(213,179,106,.14);

    color:var(--color-texto-secundario);

}


.cart-item-new-price{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:5px;

    font-size:15px;

}


.cart-item-new-price small{

    background:
        rgba(89,114,57,.12);

    color:var(--color-acento-oliva);

}


.cart-item.has-wholesale-price
.cart-item-new-price{

    color:#40542f;

    font-size:16px;

    text-shadow:
        0 1px 3px rgba(89,114,57,.13);

}


.cart-item-wholesale-badge{

    display:inline-flex;

    width:max-content;

    margin-top:2px;

    padding:
        3px 7px;

    border-radius:999px;

    background:
        linear-gradient(
            110deg,
            rgba(89,114,57,.14),
            rgba(213,179,106,.16)
        );

    color:var(--color-acento-oliva);

    font-size:10px;

    font-weight:850;

    letter-spacing:.2px;

}


.cart-item.has-wholesale-price{

    border-color:
        rgba(89,114,57,.26);

    box-shadow:
        0 8px 18px rgba(47,36,28,.10),
        inset 3px 0 0 rgba(89,114,57,.42),
        inset 0 1px 2px rgba(255,255,255,.50);

}


/* ===== RESUMEN DE PRECIOS ===== */

.cart-summary{

    padding-top:12px;

}


.cart-summary-prices{

    gap:5px;

}


.cart-summary-offer-row span,
.cart-summary-wholesale-row span{

    font-size:14px;

}


.cart-subtotal-offer{

    color:var(--color-texto-secundario);

    font-size:16px;

    font-weight:750;

}


.cart-summary-wholesale-row{

    padding:
        5px 8px;

    border-radius:10px;

    background:
        rgba(89,114,57,.08);

}


.cart-wholesale-discount{

    color:var(--color-acento-oliva);

    font-size:17px;

    font-weight:900;

}


.cart-summary-current-row{

    margin-top:2px;

    padding-top:6px;

    border-top:
        1px dashed rgba(122,96,70,.20);

}


.cart-summary-current-row
span:first-child{

    font-size:17px;

}


.cart-summary-saving{

    margin-top:3px;

    padding:
        7px 10px;

}


.cart-summary-wholesale-row[hidden]{

    display:none !important;

}


.cart-whatsapp-btn{

    margin-top:12px;

}


@media (max-width:600px){

    .wholesale-progress{

        margin-bottom:9px;

        padding:
            9px 10px
            8px;

    }


    .wholesale-progress-heading{

        align-items:flex-start;

        gap:8px;

    }


    .wholesale-level-label,
    .wholesale-next-goal{

        font-size:10px;

    }


    .wholesale-progress-message{

        font-size:10.5px;

    }


    .wholesale-level-dots{

        gap:3px;

    }


    .cart-item-offer-price{

        font-size:11px;

    }


    .cart-item-new-price{

        gap:3px;

        font-size:13px;

    }


    .cart-item.has-wholesale-price
    .cart-item-new-price{

        font-size:14px;

    }


    .cart-item-offer-price small,
    .cart-item-new-price small{

        padding:
            2px 4px;

        font-size:8px;

    }


    .cart-item-wholesale-badge{

        font-size:8.5px;

    }


    .cart-summary-offer-row span,
    .cart-summary-wholesale-row span{

        font-size:12px;

    }


    .cart-subtotal-offer,
    .cart-wholesale-discount{

        font-size:14px;

    }

}


/* =========================================================
   CARRITO COMPACTO CON DETALLES DESPLEGABLES
========================================================= */

.cart-panel-content{
    flex:1 1 auto;
    min-height:0;
}

.cart-summary{
    padding:9px 0 0 !important;
    border-top:1px solid var(--color-borde-suave);
}

.cart-summary-compact{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:48px;
    padding:7px 8px;
    border-radius:14px;
    background:
        linear-gradient(
            110deg,
            rgba(89,114,57,.09),
            rgba(213,179,106,.12)
        );
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.55),
        0 4px 11px rgba(47,36,28,.07);
}

.cart-summary-compact-saving,
.cart-summary-compact-total{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:1px;
}

.cart-summary-compact-saving span,
.cart-summary-compact-total span{
    color:var(--color-texto-secundario);
    font-size:11px;
    font-weight:750;
    line-height:1;
}

.cart-total-saving-compact{
    overflow:hidden;
    color:var(--color-acento-oliva);
    font-size:19px;
    font-weight:900;
    line-height:1.1;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.cart-total-compact{
    overflow:hidden;
    color:var(--color-texto);
    font-size:21px;
    font-weight:900;
    line-height:1.1;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.cart-summary-toggle{
    min-width:42px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 10px;
    border:1px solid rgba(89,114,57,.22);
    border-radius:999px;
    background:
        linear-gradient(
            180deg,
            #f2e3b6,
            #ddc47f
        );
    color:var(--color-texto);
    box-shadow:
        0 4px 10px rgba(47,36,28,.14),
        inset 0 2px 3px rgba(255,255,255,.75);
    cursor:pointer;
    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.cart-summary-toggle:hover{
    filter:brightness(1.04);
    box-shadow:
        0 6px 13px rgba(47,36,28,.18),
        inset 0 2px 3px rgba(255,255,255,.82);
}

.cart-summary-toggle:active{
    transform:scale(.96);
}

.cart-summary-toggle-label{
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.cart-summary-toggle-arrow{
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-1px,-1px);
    transition:transform .34s cubic-bezier(.22,1,.36,1);
}

.cart-summary.is-expanded .cart-summary-toggle-arrow{
    transform:rotate(225deg) translate(-1px,-1px);
}

.cart-summary-details{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    visibility:hidden;
    margin-top:0;
    transition:
        grid-template-rows .45s cubic-bezier(.22,1,.36,1),
        opacity .25s ease,
        visibility .45s ease,
        margin-top .35s ease;
}

.cart-summary.is-expanded .cart-summary-details{
    grid-template-rows:1fr;
    opacity:1;
    visibility:visible;
    margin-top:9px;
}

.cart-summary-details-inner{
    min-height:0;
    max-height:min(48vh,390px);
    overflow:hidden auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:3px;
}

.cart-summary:not(.is-expanded) .cart-whatsapp-note{
    display:none;
}

.cart-summary .cart-whatsapp-btn{
    min-height:48px;
    margin-top:9px !important;
    padding:10px 15px;
}

.cart-summary .cart-whatsapp-text{
    font-size:16px;
}

.cart-summary .cart-whatsapp-note{
    margin-top:6px;
    font-size:12px;
}

.cart-summary-tools{
    display:flex;
    justify-content:flex-end;
    margin-top:9px;
    padding-top:8px;
    border-top:1px dashed rgba(122,96,70,.20);
}

.cart-clear-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:36px;
    padding:7px 12px;
    border:1px solid rgba(154,63,50,.20);
    border-radius:11px;
    background:rgba(154,63,50,.06);
    color:#875044;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.cart-clear-btn:hover{
    background:rgba(154,63,50,.12);
    color:#9a3f32;
    transform:translateY(-1px);
}

.cart-clear-icon{
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:rgba(154,63,50,.10);
    font-size:16px;
    line-height:1;
}

/* En estado compacto se prioriza la información esencial de cada producto. */
.cart-panel:not(.is-summary-expanded) .cart-item-old-price,
.cart-panel:not(.is-summary-expanded) .cart-item-offer-price,
.cart-panel:not(.is-summary-expanded) .cart-item-wholesale-badge,
.cart-panel:not(.is-summary-expanded) .cart-item-old-subtotal,
.cart-panel:not(.is-summary-expanded) .cart-item-saving{
    display:none !important;
}

.cart-panel:not(.is-summary-expanded) .cart-items{
    gap:10px;
    padding-bottom:12px;
}

.cart-panel:not(.is-summary-expanded) .cart-item{
    grid-template-columns:62px minmax(0,1fr) auto;
    gap:9px;
    padding:9px 10px;
    border-radius:15px;
}

.cart-panel:not(.is-summary-expanded) .cart-item-image{
    width:62px;
    height:62px;
    border-radius:11px;
}

.cart-panel:not(.is-summary-expanded) .cart-item-info h3{
    margin-bottom:3px;
    font-size:16px;
}

.cart-panel:not(.is-summary-expanded) .cart-item-unit-prices{
    gap:0;
}

.cart-panel:not(.is-summary-expanded) .cart-item-new-price,
.cart-panel:not(.is-summary-expanded) .cart-item.has-wholesale-price .cart-item-new-price{
    gap:4px;
    font-size:14px;
}

.cart-panel:not(.is-summary-expanded) .cart-item-new-price small{
    padding:2px 4px;
    font-size:8px;
}

.cart-panel:not(.is-summary-expanded) .cart-item-subtotal{
    font-size:16px;
}

.cart-panel:not(.is-summary-expanded) .cart-item-actions{
    margin-top:0;
}

.cart-panel:not(.is-summary-expanded) .cart-item-quantity{
    gap:7px;
}

.cart-panel:not(.is-summary-expanded) .cart-item-quantity button{
    width:28px;
    height:28px;
    font-size:18px;
}

.cart-panel:not(.is-summary-expanded) .cart-item-quantity span{
    min-width:18px;
    font-size:16px;
}

.cart-panel:not(.is-summary-expanded) .cart-remove-btn{
    padding:4px 6px;
    font-size:12px;
}

@media (max-width:600px){
    .cart-summary-compact{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;
        gap:5px;
        padding:6px;
    }

    .cart-summary-toggle{
        width:38px;
        min-width:38px;
        height:36px;
        padding:0;
    }

    .cart-summary-toggle-label{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
    }

    .cart-total-saving-compact{
        font-size:17px;
    }

    .cart-total-compact{
        font-size:19px;
    }

    .cart-summary-details-inner{
        max-height:45vh;
    }

    .cart-panel:not(.is-summary-expanded) .cart-item{
        grid-template-columns:55px minmax(0,1fr) auto;
        padding:8px;
    }

    .cart-panel:not(.is-summary-expanded) .cart-item-image{
        width:55px;
        height:55px;
    }
}


/* =========================================================
   DESCUENTO MAYORISTA REFLEJADO EN LAS TARJETAS
========================================================= */

.product-wholesale-level{

    display:inline-flex;

    align-items:center;

    width:max-content;

    max-width:100%;

    margin:
        2px 0
        -1px;

    padding:
        5px 10px;

    border-radius:999px;

    background:
        linear-gradient(
            105deg,
            rgba(89,114,57,.16),
            rgba(213,179,106,.24)
        );

    color:
        var(--color-acento-oliva);

    font-size:12px;

    font-weight:850;

    line-height:1;

    letter-spacing:.65px;

    text-transform:uppercase;

    box-shadow:
        inset 0 1px 2px
        rgba(255,255,255,.58),
        0 4px 10px
        rgba(47,36,28,.08);

}


.product-wholesale-level[hidden]{

    display:none !important;

}


.product-card.has-active-wholesale{

    border-color:
        rgba(89,114,57,.34);

    box-shadow:
        0 12px 29px
        rgba(47,36,28,.17),
        0 0 0 1px
        rgba(89,114,57,.08),
        inset 0 2px 4px
        rgba(255,255,255,.65);

}


.product-card.has-active-wholesale
.new-price{

    color:
        #496231;

    text-shadow:
        0 2px 5px
        rgba(89,114,57,.18);

}


.saving.is-wholesale-saving{

    width:100%;

    padding:
        7px 9px;

    border-radius:10px;

    background:
        linear-gradient(
            100deg,
            rgba(89,114,57,.11),
            rgba(213,179,106,.13)
        );

    color:
        #496231;

    font-weight:800;

    text-shadow:none;

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

}


.new-price.is-progressive-updating{

    filter:brightness(1.08);

    transition:
        color .24s ease,
        filter .24s ease;

}


.new-price.progressive-price-pop{

    animation:
        progressiveCardPricePop
        .5s
        cubic-bezier(.22,1,.36,1);

}


@keyframes progressiveCardPricePop{

    0%{

        transform:scale(1);

    }

    45%{

        transform:scale(1.075);

        text-shadow:
            0 0 20px
            rgba(213,179,106,.44),
            0 2px 7px
            rgba(89,114,57,.25);

    }

    100%{

        transform:scale(1);

    }

}


@media (max-width:740px){

    .product-wholesale-level{

        font-size:11px;

        padding:
            5px 8px;

    }


    .saving.is-wholesale-saving{

        font-size:15px;

        line-height:1.3;

    }

}

/* =========================================================
   ESTÉTICA VERDE UNIFICADA PARA TODOS LOS DESCUENTOS
   + TRANSICIÓN ENTRE OFERTA Y NIVELES MAYORISTAS
========================================================= */

/* La oferta semanal adopta la misma identidad verde-dorada
   utilizada por el sistema mayorista. */

.catalog-unified .product-card .offer-badge{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            110deg,
            rgba(89,114,57,.94) 0%,
            #73874d 38%,
            #b69b55 72%,
            #d5b36a 100%
        );

    color:#fff8e5;

    border:
        1px solid rgba(74,96,45,.52);

    font-weight:800;

    text-shadow:
        0 1px 2px rgba(47,36,28,.48);

    box-shadow:
        0 7px 16px rgba(47,36,28,.20),
        0 0 0 1px rgba(89,114,57,.08),
        inset 0 2px 3px rgba(255,255,255,.36),
        inset 0 -2px 4px rgba(47,36,28,.12);

    transition:
        background .38s ease,
        border-color .38s ease,
        box-shadow .38s ease,
        transform .38s cubic-bezier(.22,1,.36,1);

}


.catalog-unified .product-card .offer-badge::before{

    content:"";

    position:absolute;

    z-index:-1;

    top:-45%;
    bottom:-45%;

    left:-42%;

    width:24%;

    opacity:0;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,251,225,.82),
            transparent
        );

}


.catalog-unified .product-card .offer-badge img{

    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 1px 1px rgba(47,36,28,.35));

}


.product-card.has-active-discount{

    border-color:
        rgba(89,114,57,.30);

    box-shadow:
        0 12px 27px rgba(47,36,28,.15),
        0 0 0 1px rgba(89,114,57,.065),
        inset 0 2px 4px rgba(255,255,255,.65);

}


.product-card.has-standard-offer .new-price,
.product-card.has-active-wholesale .new-price{

    color:#496231;

    text-shadow:
        0 2px 5px rgba(89,114,57,.18);

}


.product-card.has-active-discount .old-price::after{

    background:
        linear-gradient(
            90deg,
            #6f4f38,
            var(--color-acento-oliva),
            var(--color-acento)
        );

    box-shadow:
        0 1px 2px rgba(47,36,28,.16);

}


.saving.is-standard-saving,
.saving.is-wholesale-saving{

    width:100%;

    padding:
        7px 9px;

    border-radius:10px;

    background:
        linear-gradient(
            100deg,
            rgba(89,114,57,.115),
            rgba(213,179,106,.145)
        );

    color:#496231;

    font-weight:800;

    line-height:1.32;

    text-shadow:none;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.52),
        0 3px 9px rgba(47,36,28,.045);

    transition:
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}


/* En nivel mayorista el distintivo superior conserva el verde,
   pero gana una profundidad adicional para comunicar el avance. */

.product-card.has-active-wholesale .offer-badge{

    background:
        linear-gradient(
            110deg,
            #43592f 0%,
            var(--color-acento-oliva) 38%,
            #8b874b 69%,
            var(--color-acento) 100%
        );

    border-color:
        rgba(66,88,42,.62);

    box-shadow:
        0 9px 20px rgba(47,36,28,.22),
        0 0 17px rgba(89,114,57,.14),
        inset 0 2px 4px rgba(255,255,255,.38);

}


/* =========================================================
   ANIMACIÓN DE CAMBIO DE DESCUENTO
========================================================= */

.product-card.is-discount-transitioning{

    z-index:4;

    animation:
        discountCardLevelTransition
        1.02s
        cubic-bezier(.22,1,.36,1);

}


.product-card.is-discount-transitioning
.product-price{

    animation:
        discountPriceAreaTransition
        .86s
        cubic-bezier(.22,1,.36,1);

}


.product-card.discount-transition-improves{

    --discount-transition-glow:
        rgba(89,114,57,.32);

}


.product-card.discount-transition-reduces{

    --discount-transition-glow:
        rgba(213,179,106,.27);

}


@keyframes discountCardLevelTransition{

    0%{

        transform:translateY(0) scale(1);

    }

    38%{

        transform:
            translateY(-4px)
            scale(1.012);

        box-shadow:
            0 16px 34px rgba(47,36,28,.19),
            0 0 0 2px var(--discount-transition-glow),
            0 0 28px var(--discount-transition-glow),
            inset 0 2px 5px rgba(255,255,255,.70);

    }

    100%{

        transform:translateY(0) scale(1);

    }

}


@keyframes discountPriceAreaTransition{

    0%{

        filter:brightness(1);

    }

    42%{

        filter:brightness(1.09);

    }

    100%{

        filter:brightness(1);

    }

}


.new-price.is-progressive-updating{

    color:#496231;

    filter:brightness(1.08);

    font-variant-numeric:tabular-nums;

    transition:
        color .24s ease,
        filter .24s ease;

}


.saving.is-discount-updating{

    animation:
        discountSavingTransition
        .92s
        cubic-bezier(.22,1,.36,1);

}


@keyframes discountSavingTransition{

    0%{

        opacity:.72;

        transform:
            translateY(5px)
            scale(.985);

    }

    45%{

        opacity:1;

        transform:
            translateY(-2px)
            scale(1.018);

        box-shadow:
            inset 0 1px 3px rgba(255,255,255,.66),
            0 0 18px rgba(89,114,57,.20);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


.offer-badge.is-discount-updating,
.product-wholesale-level.is-discount-updating{

    animation:
        discountBadgeTransition
        .92s
        cubic-bezier(.22,1,.36,1);

}


.offer-badge.is-discount-updating::before{

    animation:
        discountBadgeShine
        .78s
        ease-out
        forwards;

}


@keyframes discountBadgeTransition{

    0%{

        transform:scale(1);

    }

    44%{

        transform:scale(1.055);

        filter:brightness(1.08);

    }

    100%{

        transform:scale(1);

        filter:brightness(1);

    }

}


@keyframes discountBadgeShine{

    0%{

        left:-42%;

        opacity:0;

    }

    16%{

        opacity:1;

    }

    100%{

        left:122%;

        opacity:0;

    }

}


/* El impacto final del precio acompaña al cambio numérico. */

.new-price.progressive-price-pop{

    animation:
        progressiveCardPricePopEnhanced
        .58s
        cubic-bezier(.22,1,.36,1);

}


@keyframes progressiveCardPricePopEnhanced{

    0%{

        transform:scale(1);

    }

    43%{

        transform:scale(1.09);

        text-shadow:
            0 0 22px rgba(213,179,106,.48),
            0 0 36px rgba(89,114,57,.20),
            0 2px 7px rgba(89,114,57,.26);

    }

    100%{

        transform:scale(1);

    }

}


@media (max-width:740px){

    .catalog-unified .product-card .offer-badge{

        font-size:15px;

        padding:
            7px 12px;

    }


    .saving.is-standard-saving,
    .saving.is-wholesale-saving{

        font-size:15px;

        line-height:1.3;

    }

}


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

    .product-card.is-discount-transitioning,
    .product-card.is-discount-transitioning .product-price,
    .saving.is-discount-updating,
    .offer-badge.is-discount-updating,
    .product-wholesale-level.is-discount-updating,
    .offer-badge.is-discount-updating::before,
    .new-price.progressive-price-pop{

        animation:none !important;

    }

}


/* =========================================================
   TRES IDENTIDADES DE OFERTA EN EL CATÁLOGO
========================================================= */

/* 1. Oferta semanal: verde oliva y dorado clásico. */

.product-card:not(.has-active-wholesale)
.offer-badge--weekly{

    background:
        linear-gradient(
            110deg,
            #526b38 0%,
            #74894e 42%,
            #b89b54 74%,
            #d8b96e 100%
        );

    color:#fff8e5;

    font-family:inherit;

    font-style:normal;

    letter-spacing:.15px;

}


/* 2. Precio especial: tono salvia claro, tipografía editorial. */

.product-card:not(.has-active-wholesale)
.offer-badge--special{

    background:
        linear-gradient(
            112deg,
            #dfe4bf 0%,
            #c5cf93 42%,
            #e5ca83 76%,
            #f0d99e 100%
        );

    color:#3f522f;

    border-color:
        rgba(89,114,57,.42);

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

    font-style:italic;

    font-weight:800;

    letter-spacing:.25px;

    text-shadow:
        0 1px 0 rgba(255,255,255,.48);

}


.catalog-unified
.product-card:not(.has-active-wholesale)
.offer-badge--special img{

    filter:
        sepia(.8)
        saturate(.7)
        brightness(.48)
        hue-rotate(32deg);

}


/* 3. Ahorro destacado: verde bosque, contraste y small-caps. */

.product-card:not(.has-active-wholesale)
.offer-badge--featured{

    background:
        linear-gradient(
            108deg,
            #35492b 0%,
            #4c6738 48%,
            #9b8545 78%,
            #cfae62 100%
        );

    color:#fff7dd;

    border-color:
        rgba(52,73,42,.65);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-variant:small-caps;

    font-weight:900;

    letter-spacing:.75px;

}


/* Al entrar en mayorista, cada tipo conserva un matiz propio. */

.product-card.has-active-wholesale
.offer-badge--weekly{

    background:
        linear-gradient(
            110deg,
            #40562e,
            #5a743d 43%,
            #9a8a48 72%,
            #d0ad62
        );

}


.product-card.has-active-wholesale
.offer-badge--special{

    background:
        linear-gradient(
            110deg,
            #4d6338,
            #76854d 42%,
            #aaa05b 74%,
            #d6b970
        );

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

    font-style:italic;

}


.product-card.has-active-wholesale
.offer-badge--featured{

    background:
        linear-gradient(
            108deg,
            #293d25,
            #425c34 46%,
            #7d783e 75%,
            #c49e55
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-variant:small-caps;

    letter-spacing:.75px;

}


/* =========================================================
   CAMBIO DE NIVEL SUAVE Y DIRECCIONAL
========================================================= */

/* Se elimina el movimiento completo de la tarjeta. */

.product-card.is-discount-transitioning{

    animation:none !important;

    transform:none !important;

}


.product-card.is-discount-transitioning
.product-price{

    animation:none !important;

}


.offer-badge.is-discount-updating,
.product-wholesale-level.is-discount-updating,
.offer-badge.is-discount-updating::before{

    animation:none !important;

}


/* El precio aparece desde arriba y baja suavemente a su lugar. */

.new-price.is-progressive-updating{

    animation:
        progressivePriceDescend
        .72s
        cubic-bezier(.22,1,.36,1)
        both !important;

    will-change:
        transform,
        opacity;

}


@keyframes progressivePriceDescend{

    0%{

        opacity:.68;

        transform:
            translateY(-9px);

        filter:
            brightness(1.14);

    }

    58%{

        opacity:1;

        transform:
            translateY(1px);

        filter:
            brightness(1.07);

    }

    100%{

        opacity:1;

        transform:
            translateY(0);

        filter:
            brightness(1);

    }

}


/* El ahorro nace abajo y sube suavemente. */

.saving.is-discount-updating{

    animation:
        progressiveSavingRise
        .78s
        cubic-bezier(.22,1,.36,1)
        both !important;

    will-change:
        transform,
        opacity;

}


@keyframes progressiveSavingRise{

    0%{

        opacity:.62;

        transform:
            translateY(10px);

    }

    62%{

        opacity:1;

        transform:
            translateY(-1px);

        box-shadow:
            inset 0 1px 3px rgba(255,255,255,.64),
            0 0 16px rgba(89,114,57,.16);

    }

    100%{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* El asentamiento final conserva solo luz, sin salto ni sacudida. */

.new-price.progressive-price-pop{

    animation:
        progressivePriceLightSettle
        .34s
        ease-out
        both !important;

}


@keyframes progressivePriceLightSettle{

    0%{

        filter:brightness(1.12);

        text-shadow:
            0 0 18px rgba(213,179,106,.34),
            0 0 25px rgba(89,114,57,.14);

    }

    100%{

        filter:brightness(1);

    }

}


/* =========================================================
   ESTADO GLOBAL DE MOVIMIENTO RÁPIDO
========================================================= */

html{

    --page-motion-rate:1;

}



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

    .new-price.is-progressive-updating,
    .saving.is-discount-updating,
    .new-price.progressive-price-pop{

        animation:none !important;

    }

}

/* =========================================================
   PROTECCIÓN RESPONSIVE — 412 × 915 Y ANCHOS SIMILARES
========================================================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

@supports not (overflow:clip){

    html,
    body{
        overflow-x:hidden;
    }

}

body,
main,
.site-header,
.site-footer,
main > section{
    min-width:0;
    max-width:100%;
}

img,
svg,
video,
canvas{
    max-width:100%;
}

@media (max-width:540px){

    .site-header{
        width:100%;
        max-width:100%;
        padding-inline:0;
    }

    .header-action{
        width:44px;
        height:44px;
    }

    .header-action img{
        width:25px;
        height:25px;
    }

    .menu-button{
        left:8px;
    }

    .cart-button{
        right:8px;
    }

    .brand-container{
        width:100% !important;
        max-width:100% !important;
        min-width:0;
        padding:
            0 61px;
        gap:0;
    }

    .brand-title{
        max-width:100%;
        overflow:hidden;
        font-size:
            clamp(21px,6vw,26px);
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    #hero{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        padding:
            0 18px;
    }

    .hero-content::before{
        inset:
            -28px 6px;
    }

    .hero-content h2{
        max-width:100%;
        font-size:
            clamp(38px,12vw,52px);
        line-height:1.02;
        overflow-wrap:anywhere;
    }

    .hero-content p{
        max-width:100%;
        font-size:
            clamp(20px,6.5vw,28px);
        line-height:1.22;
        overflow-wrap:anywhere;
    }

    .nosotros-init{
        width:100%;
        max-width:100%;
        padding-inline:12px;
    }

    .nosotros-init > h2,
    .nosotros-init > h3,
    .nosotros-init > p{
        max-width:100%;
    }

    #nosotros .presentation-cards{
        width:
            calc(100% - 12px) !important;
        max-width:
            calc(100% - 12px) !important;
    }

    #entregas.authority{
        width:
            calc(100% - 10px) !important;
        max-width:
            calc(100% - 10px) !important;
    }

    #productos{
        width:100%;
        max-width:100%;
    }

    .catalog-unified{
        width:100% !important;
        max-width:100% !important;
        padding-inline:7px !important;
    }

    .catalog-showcase,
    .catalog-showcase-stage,
    .products-grid{
        width:100% !important;
        max-width:100% !important;
        min-width:0;
    }

    .product-card{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .productos-heading-panel::before,
    .catalog-closing::before{
        width:min(520px,140vw);
    }

}


/* =========================================================
   EXPERIENCIA COMPLETADA — ACCESOS RÁPIDOS
========================================================= */

.experience-return-controls{
    width:min(920px, calc(100% - 28px));
    margin:26px auto 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    flex-wrap:wrap;
}

.experience-return-controls[hidden]{
    display:none !important;
}

.experience-reset-button,
.experience-catalog-button{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:12px 19px;
    border-radius:16px;
    font-family:inherit;
    font-size:15px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform .22s ease,
        box-shadow .24s ease,
        filter .24s ease;
}

.experience-reset-button{
    border:1px solid rgba(115,82,59,.20);
    background:linear-gradient(
        145deg,
        rgba(255,250,229,.76),
        rgba(232,208,154,.48)
    );
    color:var(--color-texto);
    box-shadow:
        0 7px 17px rgba(47,36,28,.10),
        inset 0 1px 2px rgba(255,255,255,.72);
}

.experience-catalog-button{
    border:1px solid rgba(89,114,57,.25);
    background:linear-gradient(
        135deg,
        #536b38,
        #71864a 56%,
        #536b38
    );
    color:var(--color-texto-claro);
    box-shadow:
        0 8px 19px rgba(47,36,28,.17),
        inset 0 1px 2px rgba(255,255,255,.18);
}

.experience-button-icon{
    font-size:21px;
    line-height:1;
}

.experience-reset-button:hover,
.experience-catalog-button:hover{
    transform:translateY(-2px);
    filter:brightness(1.035);
}

.experience-reset-button:active,
.experience-catalog-button:active{
    transform:scale(.975);
}

/* =========================================================
   MENÚ — ZONAS TODAVÍA NO EXPLORADAS
========================================================= */

.menu-link.is-locked{
    opacity:.46;
    filter:saturate(.48);
    cursor:not-allowed;
}

.menu-link.is-locked:hover,
.menu-link.is-locked:focus-visible{
    transform:none;
    border-color:transparent;
    box-shadow:none;
}

.menu-link.is-locked:hover::before,
.menu-link.is-locked:focus-visible::before{
    opacity:0;
}

.menu-link.is-locked .menu-link-arrow{
    position:relative;
    font-size:0;
    transform:none;
    background:rgba(115,82,59,.10);
}

.menu-link.is-locked .menu-link-arrow::before{
    content:"";
    position:absolute;
    left:50%;
    top:51%;
    width:11px;
    height:9px;
    border:1.8px solid currentColor;
    border-radius:3px;
    transform:translate(-50%,-35%);
}

.menu-link.is-locked .menu-link-arrow::after{
    content:"";
    position:absolute;
    left:50%;
    top:30%;
    width:7px;
    height:7px;
    border:1.8px solid currentColor;
    border-bottom:0;
    border-radius:6px 6px 0 0;
    transform:translateX(-50%);
}

.menu-link.is-locked-feedback{
    animation:lockedMenuFeedback .4s ease;
}

@keyframes lockedMenuFeedback{
    0%,100%{ transform:translateX(0); }
    35%{ transform:translateX(3px); }
    70%{ transform:translateX(-2px); }
}

/* =========================================================
   VISITA POSTERIOR — TODO EL RECORRIDO QUEDA VISIBLE
========================================================= */

html.experience-completed .brand-decoration .line{
    opacity:.85 !important;
    transform:scaleX(1) !important;
    animation:none !important;
}

html.experience-completed .brand-decoration .diamond{
    opacity:1 !important;
    transform:rotate(45deg) scale(1) !important;
    animation:none !important;
}

html.experience-completed #nosotros .nosotros-divider,
html.experience-completed .productos-divider{
    opacity:1 !important;
    transform:scaleX(1) !important;
    filter:none !important;
    animation:none !important;
    transition:none !important;
}

html.experience-completed .philosophy-heading,
html.experience-completed .typing-text .word,
html.experience-completed #nosotros .philosophy-continuation,
html.experience-completed #nosotros .presentation-kicker,
html.experience-completed #nosotros .presentation-cards-heading > h2,
html.experience-completed #nosotros .presentation-cards-heading > p,
html.experience-completed #entregas .authority-bridge,
html.experience-completed #entregas .authority-kicker,
html.experience-completed #entregas .authority-live-label,
html.experience-completed #entregas .authority-counter-stage,
html.experience-completed #entregas .authority-title,
html.experience-completed #entregas .authority-description,
html.experience-completed #entregas .authority-value,
html.experience-completed .productos-init .productos-heading-panel > h2,
html.experience-completed .productos-init .productos-heading-panel > p,
html.experience-completed .catalog-closing-kicker,
html.experience-completed .catalog-closing-title,
html.experience-completed .catalog-closing-text,
html.experience-completed .catalog-closing-feature{
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
}

html.experience-completed #nosotros .presentation-card,
html.experience-completed .product-card{
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:none !important;
    animation:none !important;
}

html.experience-completed #entregas .authority-counter{
    animation:none !important;
    filter:none !important;
    transform:none !important;
}

html.experience-completed .authority-live-dot::after{
    display:none !important;
}

html.experience-completed .productos-heading-panel h2::after{
    opacity:1 !important;
    transform:scaleX(1) !important;
    animation:none !important;
}

html.experience-completed .catalog-closing-line{
    opacity:1 !important;
    transform:scaleX(1) !important;
    animation:none !important;
}

html.experience-completed .catalog-closing-diamond{
    opacity:1 !important;
    transform:rotate(45deg) scale(1) !important;
    animation:none !important;
}

@media (max-width:600px){
    .experience-return-controls{
        width:calc(100% - 18px);
        margin-top:18px;
        gap:9px;
    }

    .experience-reset-button,
    .experience-catalog-button{
        flex:1 1 calc(50% - 5px);
        min-width:0;
        padding:11px 12px;
        font-size:13px;
    }
}

/* =========================================================
   AJUSTE EXCLUSIVO DE VELOCIDAD
   Duraciones: 15 % más rápidas.
   Separaciones: 30 % más rápidas.
========================================================= */

/* Corrige la barra que atravesaba la parte superior. */
#nosotros .presentation-card::before{
    display:none !important;
}


/* Filosofía */

#nosotros .nosotros-divider.is-visible{
    animation-duration:.935s !important;
}

#nosotros .nosotros-divider.is-visible::after{
    animation-duration:.795s !important;
    animation-delay:.616s !important;
}

#nosotros .philosophy-heading.is-visible{
    animation-duration:.823s !important;
}

#nosotros .typing-text.is-visible .word{
    animation-duration:.393s !important;
}

#nosotros .philosophy-continuation.is-visible{
    animation-duration:.729s !important;
}

#nosotros .presentation-kicker.is-visible{
    animation-duration:.542s !important;
}

#nosotros .presentation-cards-heading > h2.is-visible{
    animation-duration:.711s !important;
}

#nosotros .presentation-cards-heading > p.is-visible{
    animation-duration:.58s !important;
}

#nosotros .presentation-card.is-revealed{
    animation-duration:.729s !important;
}

#nosotros .presentation-card.is-revealed .presentation-card-icon,
#nosotros .presentation-card.is-revealed .icon-card,
#nosotros .presentation-card.is-revealed .icon-cardP,
#nosotros .presentation-card.is-revealed .icon-cardPP{
    animation-duration:.654s !important;
    animation-delay:.07s !important;
}


/* Authority */

#entregas .authority-bridge.is-visible{
    animation-duration:.729s !important;
}

#entregas .authority-kicker.is-visible,
#entregas .authority-live-label.is-visible{
    animation-duration:.542s !important;
}

#entregas .authority-counter-stage.is-visible{
    animation-duration:.767s !important;
}

#entregas .authority-title.is-visible{
    animation-duration:.729s !important;
}

#entregas .authority-description.is-visible{
    animation-duration:.617s !important;
}

#entregas .authority-value.is-visible{
    animation-duration:.673s !important;
}


/* Entrada del catálogo */

.productos-init .productos-heading-panel > h2,
.productos-init .productos-heading-panel > p{
    transition-duration:.608s, .608s !important;
}

.section-flow-divider.visible{
    animation-duration:.889s !important;
}

.section-flow-divider.visible::after{
    animation-duration:.795s !important;
    animation-delay:.574s !important;
}

.product-card.visible{
    animation-duration:1.141s !important;
    transition-duration:.328s !important;
}


/* Precio y ahorro inicial */

.old-price::after{
    transition-duration:.468s !important;
}

.old-price.fade{
    transition-duration:.561s !important;
}

.old-price.shrink{
    transition-duration:.355s !important;
}

.new-price.shine::before{
    animation-duration:.515s !important;
}

.new-price.show{
    transition-duration:.281s, .337s, .281s !important;
}

.new-price.finish{
    animation-duration:.206s !important;
}

.saving.show{
    transition-duration:.234s, .234s !important;
}


/* Transición entre descuentos mayoristas */

.new-price.is-progressive-updating{
    animation-duration:.673s !important;
}

.saving.is-discount-updating{
    animation-duration:.729s !important;
}

.new-price.progressive-price-pop{
    animation-duration:.318s !important;
}


/* Cierre del catálogo */

.catalog-closing.is-visible .catalog-closing-line-left{
    animation-duration:.748s !important;
}

.catalog-closing.is-visible .catalog-closing-line-right{
    animation-duration:.748s !important;
    animation-delay:.07s !important;
}

.catalog-closing.is-visible .catalog-closing-diamond{
    animation-duration:.608s !important;
    animation-delay:.336s !important;
}

.catalog-closing.is-visible .catalog-closing-kicker{
    animation-duration:.542s !important;
    animation-delay:.504s !important;
}

.catalog-closing.is-visible .catalog-closing-title{
    animation-duration:.608s !important;
    animation-delay:.588s !important;
}

.catalog-closing.is-visible .catalog-closing-text{
    animation-duration:.608s !important;
    animation-delay:.672s !important;
}

.catalog-closing.is-visible .catalog-closing-feature:nth-child(1){
    animation-duration:.468s !important;
    animation-delay:.77s !important;
}

.catalog-closing.is-visible .catalog-closing-feature:nth-child(2){
    animation-duration:.468s !important;
    animation-delay:.847s !important;
}

.catalog-closing.is-visible .catalog-closing-feature:nth-child(3){
    animation-duration:.468s !important;
    animation-delay:.924s !important;
}

/* =========================================================
   AUTHORITY MÓVIL — LÍNEA IZQUIERDA Y CONTENIDO A LA DERECHA
========================================================= */

@media (max-width:740px){

    #entregas .authority-values{

        position:relative;

        width:min(
            390px,
            100%
        ) !important;

        display:flex;

        flex-direction:column;

        gap:7px !important;

        margin:
            26px auto
            0 !important;

    }


    /*
    La línea permanece en su posición original,
    detrás de los rombos y separada del texto.
    */

    #entregas .authority-values::before{

        display:block !important;

        content:"";

        position:absolute;

        z-index:0;

        top:19px;

        bottom:26px;

        left:25px;

        right:auto;

        width:2px;

        height:auto;

        border-radius:999px;

        pointer-events:none;

        background:
            linear-gradient(
                180deg,
                transparent,
                var(--color-acento-oliva) 10%,
                var(--color-acento) 90%,
                transparent
            );

        opacity:.58;

    }


    #entregas .authority-value{

        position:relative;

        z-index:1;

        width:100%;

        min-height:91px !important;

        padding:
            10px 8px
            14px 61px !important;

        text-align:left !important;

        isolation:isolate;

    }


    /*
    Cada rombo queda centrado sobre la línea vertical.
    El halo opaco impide que la línea lo atraviese.
    */

    #entregas .authority-value::before{

        top:15px !important;

        left:19px !important;

        z-index:3;

        transform:
            rotate(45deg)
            !important;

        box-shadow:
            0 3px 8px rgba(47,36,28,.17),
            0 0 0 6px rgba(238,222,192,.92)
            !important;

    }


    /*
    Los conectores individuales anteriores ya no son
    necesarios porque se conserva una única línea limpia.
    */

    #entregas .authority-value::after{

        display:none !important;

    }


    #entregas .authority-value-index,
    #entregas .authority-value strong,
    #entregas .authority-value p{

        position:relative;

        z-index:2;

        width:100%;

        margin-left:0 !important;

        text-align:left !important;

    }


    #entregas .authority-value-index{

        margin-bottom:4px;

    }


    #entregas .authority-value strong{

        margin-bottom:5px;

        font-size:21px;

    }


    #entregas .authority-value p{

        max-width:none;

        margin:
            0 !important;

        line-height:1.42;

    }

}

/* =========================================================
   ANIMACIÓN DE ENTRADA DEL MENÚ
   Único cambio agregado en esta versión.
========================================================= */

@media (prefers-reduced-motion:no-preference){

    /*
    Entrada principal del panel desde el lateral.
    */

    .menu-panel.is-open{

        animation:
            menuPanelEntrance
            .64s
            cubic-bezier(.22,1,.36,1)
            both;

    }


    /*
    Oscurecimiento progresivo del fondo.
    */

    .menu-overlay.is-visible{

        animation:
            menuOverlayEntrance
            .38s
            ease-out
            both;

    }


    /*
    Aparición interna escalonada.
    */

    .menu-panel.is-open
    > .menu-panel-header{

        animation:
            menuSectionEntrance
            .46s
            cubic-bezier(.22,1,.36,1)
            .12s
            backwards;

    }


    .menu-panel.is-open
    > .menu-panel-divider{

        animation:
            menuDividerEntrance
            .48s
            cubic-bezier(.22,1,.36,1)
            .18s
            backwards;

    }


    .menu-panel.is-open
    > .menu-navigation{

        animation:
            menuNavigationEntrance
            .54s
            cubic-bezier(.22,1,.36,1)
            .23s
            backwards;

    }


    .menu-panel.is-open
    > .menu-panel-contact{

        animation:
            menuSectionEntrance
            .48s
            cubic-bezier(.22,1,.36,1)
            .31s
            backwards;

    }


    .menu-panel.is-open
    > .menu-panel-location{

        animation:
            menuLocationEntrance
            .42s
            cubic-bezier(.22,1,.36,1)
            .36s
            backwards;

    }


    .menu-panel.is-open
    .menu-close-button{

        animation:
            menuCloseButtonEntrance
            .48s
            cubic-bezier(.22,1,.36,1)
            .18s
            backwards;

    }


    @keyframes menuPanelEntrance{

        0%{

            opacity:0;

            transform:
                translate3d(-104%,0,0)
                scale(.985);

        }


        72%{

            opacity:1;

            transform:
                translate3d(1.4%,0,0)
                scale(1);

        }


        100%{

            opacity:1;

            transform:
                translate3d(0,0,0)
                scale(1);

        }

    }


    @keyframes menuOverlayEntrance{

        from{

            opacity:0;

        }


        to{

            opacity:1;

        }

    }


    @keyframes menuSectionEntrance{

        0%{

            opacity:0;

            filter:blur(4px);

            transform:
                translateX(-18px);

        }


        100%{

            opacity:1;

            filter:blur(0);

            transform:
                translateX(0);

        }

    }


    @keyframes menuDividerEntrance{

        0%{

            opacity:0;

            transform:
                scaleX(0);

            transform-origin:left center;

        }


        100%{

            opacity:1;

            transform:
                scaleX(1);

            transform-origin:left center;

        }

    }


    @keyframes menuNavigationEntrance{

        0%{

            opacity:0;

            filter:blur(4px);

            transform:
                translateX(-22px)
                scale(.985);

        }


        100%{

            opacity:1;

            filter:blur(0);

            transform:
                translateX(0)
                scale(1);

        }

    }


    @keyframes menuLocationEntrance{

        0%{

            opacity:0;

            transform:
                translateY(8px);

        }


        100%{

            opacity:1;

            transform:
                translateY(0);

        }

    }


    @keyframes menuCloseButtonEntrance{

        0%{

            opacity:0;

            transform:
                rotate(-35deg)
                scale(.72);

        }


        72%{

            opacity:1;

            transform:
                rotate(4deg)
                scale(1.06);

        }


        100%{

            opacity:1;

            transform:
                rotate(0)
                scale(1);

        }

    }

}

/* =========================================================
   AJUSTE EXCLUSIVO — IMAGEN DE PRODUCTO EN CELULAR
   Reduce el zoom para mostrar completa la imagen y su título.
========================================================= */

@media (max-width:740px){

    .catalog-unified
    .product-card
    .product-image{

        display:flex;

        justify-content:center;

        padding:
            14px 12px
            0;

    }


    .catalog-unified
    .product-card
    .product-image img{

        width:92%;

        height:128px;

        object-fit:contain;

        object-position:center;

    }

}

/* =========================================================
   CORRECCIÓN EXCLUSIVA — ANIMACIÓN DEL MENÚ
   Fuerza la transición incluso cuando una regla anterior
   desactiva las animaciones del panel.
========================================================= */

/*
Se desactivan únicamente los keyframes agregados anteriormente
para que no compitan con las transiciones originales del menú.
*/

.menu-panel,
.menu-overlay,
.menu-panel > .menu-panel-header,
.menu-panel > .menu-panel-divider,
.menu-panel > .menu-navigation,
.menu-panel > .menu-panel-contact,
.menu-panel > .menu-panel-location,
.menu-panel .menu-close-button{

    animation:none !important;

}


/* Movimiento principal del panel */

.menu-panel{

    will-change:
        transform,
        opacity;

    transition:
        transform .62s cubic-bezier(.22,1,.36,1),
        opacity .30s ease,
        visibility 0s linear .62s
        !important;

}


.menu-panel.is-open{

    transition-delay:
        0s,
        0s,
        0s
        !important;

}


/* Fondo oscuro */

.menu-overlay{

    transition:
        opacity .38s ease,
        visibility .38s ease
        !important;

}


/* Entrada interna escalonada */

.menu-panel > .menu-panel-header,
.menu-panel > .menu-panel-divider,
.menu-panel > .menu-navigation,
.menu-panel > .menu-panel-contact,
.menu-panel > .menu-panel-location{

    transition:
        opacity .42s ease,
        translate .48s cubic-bezier(.22,1,.36,1)
        !important;

}


.menu-panel.is-open > .menu-panel-header{

    transition-delay:
        .14s,
        .14s
        !important;

}


.menu-panel.is-open > .menu-panel-divider{

    transition-delay:
        .20s,
        .20s
        !important;

}


.menu-panel.is-open > .menu-navigation{

    transition-delay:
        .26s,
        .26s
        !important;

}


.menu-panel.is-open > .menu-panel-contact{

    transition-delay:
        .33s,
        .33s
        !important;

}


.menu-panel.is-open > .menu-panel-location{

    transition-delay:
        .38s,
        .38s
        !important;

}


/* =========================================================
   CATÁLOGO POR METRO Y CAMIONADA
========================================================= */

.catalog-volume-group{

    grid-column:1 / -1;

    width:min(820px, 100%);

    margin:
        26px auto
        2px;

    padding:
        22px 24px;

    text-align:center;

    border:
        1px solid
        rgba(89,114,57,.23);

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(232,208,154,.42),
            rgba(235,206,160,.72)
        );

    box-shadow:
        0 10px 24px
        rgba(47,36,28,.09);

}


.catalog-volume-group:first-of-type{

    margin-top:8px;

}


.catalog-volume-group-kicker{

    display:block;

    margin-bottom:5px;

    color:
        var(--color-acento-oliva);

    font-size:13px;

    font-weight:800;

    letter-spacing:1.8px;

    text-transform:uppercase;

}


.catalog-volume-group h3{

    margin:0;

    color:
        var(--color-texto);

    font-size:
        clamp(24px, 3vw, 34px);

    line-height:1.1;

}


.catalog-volume-group p{

    max-width:640px;

    margin:
        9px auto
        0;

    color:
        var(--color-texto-secundario);

    font-size:16px;

    line-height:1.45;

}


.product-card-volume{

    border-color:
        rgba(89,114,57,.25);

}


.product-card-volume
.product-info{

    padding:
        10px 12px
        14px;

}


.product-format-title{

    display:inline-flex;

    align-self:flex-start;

    margin-bottom:5px;

    padding:
        5px 9px;

    border-radius:999px;

    background:
        rgba(89,114,57,.10);

    color:
        var(--color-acento-oliva);

    font-size:12px;

    font-weight:850;

    letter-spacing:1.1px;

}


.product-card-volume
.product-description{

    min-height:78px;

    font-size:17px;

}


.product-card-volume
.product-weight{

    margin-bottom:3px;

    font-size:16px;

    font-weight:700;

}


.product-equivalence{

    display:block;

    margin-bottom:8px;

    color:
        var(--color-texto-secundario);

    font-size:14px;

    font-weight:650;

    line-height:1.35;

}


.equivalent-price-label{

    display:block;

    margin-bottom:-2px;

    color:
        var(--color-texto-secundario);

    font-size:12px;

    font-weight:750;

    letter-spacing:.3px;

}


.product-card-volume
.old-price{

    font-size:23px;

}


.product-card-volume
.new-price{

    min-width:180px;

    font-size:34px;

}


.product-card-volume
.saving{

    min-height:42px;

    line-height:1.35;

}


.product-card-volume
.quantity-selector{

    margin-top:auto;

}


.cart-item-old-price small{

    display:block;

    max-width:190px;

    margin-bottom:2px;

    font-size:10px;

    font-weight:750;

    line-height:1.2;

    text-transform:none;

}


img.image-not-found{

    visibility:hidden;

}


@media (max-width:740px){

    .catalog-volume-group{

        margin-top:18px;

        padding:
            18px 16px;

    }


    .catalog-volume-group h3{

        font-size:25px;

    }


    .catalog-volume-group p{

        font-size:14px;

    }


    .product-card-volume
    .product-description{

        min-height:0;

    }


    .product-card-volume
    .new-price{

        min-width:0;

        font-size:32px;

    }

}

/* =========================================================
   CARRUSELES DEFINITIVOS POR MATERIAL
   Construidos desde la versión anterior a los carruseles.
   Las tarjetas conservan su estética original.
========================================================= */

.catalog-showcase
.products-grid.material-carousel-list{

    display:flex !important;

    flex-direction:column;

    align-items:center;

    width:100%;

    max-width:none;

    gap:
        clamp(
            22px,
            3vw,
            34px
        );

    padding:0 !important;

}


.material-carousel{

    --carousel-gap:14px;
    --carousel-card-width:340px;
    --carousel-card-height:auto;
    --carousel-track-x:0px;

    position:relative;

    width:
        min(
            100%,
            566px
        );

    margin:0 auto;

    padding:12px;

    overflow:hidden;

    border:
        1px solid
        rgba(115,82,59,.18);

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,251,238,.48),
            rgba(232,208,154,.40)
        );

    box-shadow:
        inset 0 2px 5px
        rgba(255,255,255,.48),
        0 12px 26px
        rgba(47,36,28,.09);

}


.material-carousel-shell{

    position:relative;

    width:100%;

}


.material-carousel-viewport{

    position:relative;

    width:
        min(
            100%,
            538px
        );

    margin:0 auto;

    overflow:hidden;

    border-radius:25px;

    touch-action:pan-y;

    user-select:none;

    -webkit-user-select:none;

    outline:none;

}


.material-carousel-track{

    display:flex;

    align-items:flex-start;

    gap:
        var(--carousel-gap);

    width:max-content;

    transform:
        translate3d(
            var(--carousel-track-x),
            0,
            0
        );

    will-change:transform;

}


.material-carousel-slide{

    --carousel-scale:1;
    --carousel-y:0px;
    --carousel-opacity:1;
    --carousel-saturation:1;
    --carousel-brightness:1;
    --carousel-blur:0px;
    --carousel-fog:0;

    position:relative;

    flex:
        0 0
        var(--carousel-card-width);

    width:
        var(--carousel-card-width);

    padding:
        12px 0
        16px;

    z-index:1;

    opacity:
        var(--carousel-opacity);

    translate:
        0
        var(--carousel-y);

    scale:
        var(--carousel-scale);

    filter:
        saturate(
            var(--carousel-saturation)
        )
        brightness(
            var(--carousel-brightness)
        )
        blur(
            var(--carousel-blur)
        );

    transform-origin:center center;

    will-change:
        translate,
        scale,
        filter,
        opacity;

    transition:
        opacity .25s ease,
        filter .25s ease;

}


.material-carousel-slide::after{

    content:"";

    position:absolute;

    z-index:30;

    inset:
        12px 0
        16px;

    border-radius:26px;

    opacity:
        var(--carousel-fog);

    pointer-events:none;

    background:
        linear-gradient(
            145deg,
            rgba(243,230,202,.74),
            rgba(231,210,170,.52)
        );

    box-shadow:
        inset 0 0 36px
        rgba(249,240,220,.70);

}


.material-carousel-slide.is-center{

    z-index:8;

    pointer-events:auto;

}


.material-carousel-slide:not(.is-center),
.material-carousel.is-moving
.material-carousel-slide{

    pointer-events:none;

}


.material-carousel-slide
.product-card{

    display:flex;

    flex-direction:column;

    width:100% !important;

    max-width:none !important;

    height:
        var(
            --carousel-card-height
        )
        !important;

    min-height:0 !important;

    margin:0 !important;

    box-sizing:border-box;

}


.material-carousel-slide
.product-info{

    flex:1 1 auto;

    min-height:0;

}


.material-carousel-slide
.quantity-selector,
.material-carousel-slide
.add-cart-btn{

    flex-shrink:0;

}


.material-carousel-slide
.add-cart-btn{

    min-height:46px;

}


/*
Las tarjetas laterales nunca reaccionan a hover o foco.
Solo la presentación central conserva las interacciones
originales de la tarjeta.
*/

.material-carousel-slide:not(.is-center)
.product-card,
.material-carousel.is-moving
.product-card{

    translate:0 0 !important;

}


@media (hover:hover) and (pointer:fine){

    .material-carousel-slide:not(.is-center)
    .product-card:hover,

    .material-carousel-slide:not(.is-center)
    .product-card:focus-within,

    .material-carousel.is-moving
    .product-card:hover,

    .material-carousel.is-moving
    .product-card:focus-within{

        translate:0 0 !important;

        border-color:
            rgba(115,82,59,.25)
            !important;

        box-shadow:
            0 13px 28px
            rgba(47,36,28,.16),
            inset 0 1px 2px
            rgba(255,255,255,.40)
            !important;

        filter:none !important;

    }

}


/*
Flechas superpuestas: no agrandan el carrusel ni
crean espacios laterales.
*/

.material-carousel-arrow{

    position:absolute;

    z-index:50;

    top:50%;

    display:grid;

    place-items:center;

    width:46px;

    height:46px;

    padding:0;

    border:
        1px solid
        rgba(89,114,57,.26);

    border-radius:50%;

    background:
        rgba(255,250,238,.94);

    color:
        var(--color-acento-oliva);

    font-size:20px;

    font-weight:900;

    line-height:1;

    cursor:pointer;

    box-shadow:
        0 8px 18px
        rgba(47,36,28,.14),
        inset 0 1px 0
        rgba(255,255,255,.90);

    transform:
        translateY(-50%);

    transition:
        transform .18s ease,
        box-shadow .24s ease,
        filter .20s ease;

}


.material-carousel-arrow--prev{

    left:6px;

}


.material-carousel-arrow--next{

    right:6px;

}


.material-carousel-arrow:hover{

    transform:
        translateY(
            calc(-50% - 2px)
        );

    filter:brightness(1.04);

    box-shadow:
        0 11px 22px
        rgba(47,36,28,.18),
        inset 0 1px 0
        rgba(255,255,255,.95);

}


.material-carousel-arrow:active{

    transform:
        translateY(-50%)
        scale(.95);

}


.material-carousel-arrow:focus-visible,
.material-carousel-viewport:focus-visible{

    outline:
        3px solid
        rgba(89,114,57,.34);

    outline-offset:3px;

}


.material-carousel-announcer{

    position:absolute !important;

    width:1px !important;

    height:1px !important;

    padding:0 !important;

    margin:-1px !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;

    clip-path:inset(50%) !important;

    white-space:nowrap !important;

    border:0 !important;

}


/* =========================================================
   COMPACTACIÓN DE METROS Y CAMIONADAS
   Conserva toda la información comercial y permite que
   las tres variantes compartan una altura uniforme.
========================================================= */

.material-carousel
.product-card-volume
.product-info{

    padding:
        8px 10px
        10px;

}


.material-carousel
.product-card-volume
.product-format-title{

    margin-bottom:3px;

    padding:
        4px 8px;

    font-size:11px;

    line-height:1.1;

}


.material-carousel
.product-card-volume
.product-info h3{

    margin-bottom:2px;

    font-size:28px;

    line-height:1.04;

}


.material-carousel
.product-card-volume
.product-description{

    display:-webkit-box;

    min-height:0;

    max-height:40px;

    margin-bottom:3px;

    overflow:hidden;

    font-size:15px;

    line-height:1.28;

    -webkit-box-orient:vertical;
    line-clamp: 2;
    -webkit-line-clamp:2;

}


.material-carousel
.product-card-volume
.product-weight{

    margin-bottom:1px;

    font-size:14px;

    line-height:1.18;

}


.material-carousel
.product-card-volume
.product-equivalence{

    display:block;

    max-width:100%;

    margin-bottom:4px;

    overflow:hidden;

    font-size:12.5px;

    line-height:1.2;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.material-carousel
.product-card-volume
.equivalent-price-label{

    display:none;

}


.material-carousel
.product-card-volume
.product-price{

    gap:2px;

}


.material-carousel
.product-card-volume
.old-price{

    font-size:20px;

    line-height:1;

}


.material-carousel
.product-card-volume
.new-price{

    min-width:0;

    font-size:31px;

    line-height:1.04;

}


.material-carousel
.product-card-volume
.saving{

    display:-webkit-box;

    min-height:32px;

    max-height:39px;

    padding:
        5px 7px;

    overflow:hidden;

    font-size:13px;

    line-height:1.22;

    -webkit-box-orient:vertical;
    line-clamp: 2;

    -webkit-line-clamp:2;

}


.material-carousel
.product-card-volume
.quantity-selector{

    gap:22px;

    margin:
        auto 0
        10px;

}


.material-carousel
.product-card-volume
.quantity-value{

    margin:
        0 10px;

    font-size:34px;

}


.material-carousel
.product-card-volume
.add-cart-btn{

    margin:
        0 0 7px;

    padding:
        10px 11px;

    font-size:16px;

}


.material-carousel
.product-card-volume.is-carousel-extra-compact
.product-description{

    max-height:20px;
    line-clamp: 1;
    -webkit-line-clamp:1;

}


.material-carousel
.product-card-volume.is-carousel-extra-compact
.product-equivalence{

    font-size:11.5px;

}


.material-carousel
.product-card-volume.is-carousel-extra-compact
.saving{

    min-height:29px;

    max-height:33px;

    font-size:12px;

}


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

@media (max-width:740px){

    .catalog-showcase
    .products-grid.material-carousel-list{

        gap:18px;

    }


    .material-carousel{

        width:100%;

        padding:7px;

        border-radius:23px;

    }


    .material-carousel-viewport{

        width:100%;

        border-radius:21px;

    }


    .material-carousel-slide{

        padding:
            8px 0
            11px;

    }


    .material-carousel-slide::after{

        inset:
            8px 0
            11px;

        border-radius:23px;

    }


    .material-carousel-arrow{

        width:39px;

        height:39px;

        font-size:17px;

    }


    .material-carousel-arrow--prev{

        left:2px;

    }


    .material-carousel-arrow--next{

        right:2px;

    }


    .material-carousel-slide
    .add-cart-btn{

        min-height:42px;

    }


    .material-carousel
    .product-card-volume
    .product-info{

        padding:
            6px 9px
            9px;

    }


    .material-carousel
    .product-card-volume
    .product-format-title{

        padding:
            3px 7px;

        font-size:10px;

    }


    .material-carousel
    .product-card-volume
    .product-info h3{

        font-size:24px;

    }


    .material-carousel
    .product-card-volume
    .product-description{

        max-height:33px;

        font-size:12.5px;

        line-height:1.28;

    }


    .material-carousel
    .product-card-volume
    .product-weight{

        font-size:12px;

    }


    .material-carousel
    .product-card-volume
    .product-equivalence{

        font-size:10.8px;

    }


    .material-carousel
    .product-card-volume
    .old-price{

        font-size:17px;

    }


    .material-carousel
    .product-card-volume
    .new-price{

        font-size:27px;

    }


    .material-carousel
    .product-card-volume
    .saving{

        min-height:28px;

        max-height:33px;

        padding:
            4px 6px;

        font-size:10.8px;

        line-height:1.18;

    }


    .material-carousel
    .product-card-volume
    .quantity-selector{

        gap:17px;

        margin:
            auto 0
            7px;

    }


    .material-carousel
    .product-card-volume
    .quantity-value{

        margin:
            0 6px;

        font-size:29px;

    }


    .material-carousel
    .product-card-volume
    .add-cart-btn{

        padding:
            8px 9px;

        font-size:14px;

    }

}


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

    .material-carousel-slide{

        transition:none !important;

    }


    .material-carousel-arrow{

        transition:none !important;

    }

}

/* =========================================================
   AJUSTE EXCLUSIVO DEL CATÁLOGO
   Distribución de tarjetas por volumen en computadora
   y renovación visual de las flechas.
========================================================= */

/*
En computadora, las tarjetas de metro y camionada utilizan
el espacio vertical disponible de forma equilibrada.

La altura de la tarjeta, los tamaños, los textos y el
funcionamiento del carrusel permanecen sin cambios.
*/

@media (min-width:981px){

    .material-carousel
    .product-card-volume
    .product-info{

        justify-content:
            space-between;

    }


    /*
    Se elimina el margen automático que concentraba todo
    el espacio sobrante encima del selector de cantidad.
    */

    .material-carousel
    .product-card-volume
    .quantity-selector{

        margin:
            8px 0
            10px;

    }


    .material-carousel
    .product-card-volume
    .add-cart-btn{

        margin:
            0 0
            7px;

    }

}


/* =========================================================
   FLECHAS DEL CARRUSEL
========================================================= */

.material-carousel-arrow{

    width:
        48px;

    height:
        48px;

    font-size:
        0;

    color:
        transparent;

    border:
        1px solid
        rgba(89,114,57,.38);

    background:
        linear-gradient(
            145deg,
            rgba(255,253,246,.98),
            rgba(224,201,143,.96)
        );

    box-shadow:
        0 9px 20px
        rgba(47,36,28,.17),
        inset 0 1px 0
        rgba(255,255,255,.95),
        inset 0 -3px 7px
        rgba(164,120,63,.10);


}


/*
Chevron dibujado con CSS para reemplazar la flecha de texto,
manteniendo intactas las etiquetas accesibles del botón.
*/

.material-carousel-arrow::before{

    content:"";

    width:
        11px;

    height:
        11px;

    border-top:
        3px solid
        var(--color-acento-oliva);

    border-right:
        3px solid
        var(--color-acento-oliva);

    filter:
        drop-shadow(
            0 1px 0
            rgba(255,255,255,.75)
        );

}


.material-carousel-arrow::after{

    content:"";

    position:
        absolute;

    inset:
        5px;

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

    border-radius:
        50%;

    pointer-events:
        none;

}


.material-carousel-arrow--prev::before{

    transform:
        rotate(-135deg)
        translate(-1px,-1px);

}


.material-carousel-arrow--next::before{

    transform:
        rotate(45deg)
        translate(-1px,-1px);

}


.material-carousel-arrow:hover{

    transform:
        translateY(
            calc(-50% - 2px)
        )
        scale(1.055);

    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #ead49b
        );

    filter:
        none;

    box-shadow:
        0 13px 27px
        rgba(47,36,28,.22),
        0 0 0 4px
        rgba(89,114,57,.08),
        inset 0 1px 0
        rgba(255,255,255,.98);

}


.material-carousel-arrow:active{

    transform:
        translateY(-50%)
        scale(.94);

    box-shadow:
        0 5px 12px
        rgba(47,36,28,.16),
        inset 0 2px 6px
        rgba(115,82,59,.14);

}

/* =========================================================
   UNIFICACIÓN EXCLUSIVA DE CONTROLES DEL CATÁLOGO
   Todos los carruseles comparten exactamente los mismos
   botones de cantidad, compra y navegación.
========================================================= */

/* Controles de cantidad idénticos para bolsa, metro y camionada. */

.material-carousel
.material-carousel-slide
.quantity-selector{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:28px !important;

    min-height:58px;

    margin:
        auto 0
        10px !important;

}


.material-carousel
.material-carousel-slide
.quantity-btn,
.material-carousel
.material-carousel-slide
.quantity-selector button{

    flex:
        0 0 46px !important;

    width:
        46px !important;

    min-width:
        46px !important;

    max-width:
        46px !important;

    height:
        46px !important;

    min-height:
        46px !important;

    max-height:
        46px !important;

    padding:
        0 !important;

    border-radius:
        50% !important;

}


.material-carousel
.material-carousel-slide
.quantity-value{

    flex:
        0 0 48px;

    width:
        48px;

    min-width:
        48px !important;

    margin:
        0 !important;

    font-size:
        44px !important;

    line-height:
        1 !important;

    text-align:
        center;

}


.material-carousel
.material-carousel-slide
.plus-symbol{

    margin-top:
        5px !important;

    font-size:
        46px !important;

    line-height:
        .65 !important;

    transform:
        translateY(-1px) !important;

}


.material-carousel
.material-carousel-slide
.minus-symbol{

    margin-top:
        5px !important;

    font-size:
        52px !important;

    line-height:
        1 !important;

    transform:
        translateY(-3px) !important;

}


/* Botón de compra idéntico en las doce tarjetas. */

.material-carousel
.material-carousel-slide
.add-cart-btn{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex:
        0 0 48px !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        48px !important;

    min-height:
        48px !important;

    max-height:
        48px !important;

    margin:
        0 0 7px !important;

    padding:
        11px 13px !important;

    gap:
        10px !important;

    border-radius:
        16px !important;

    font-size:
        18px !important;

    font-weight:
        600 !important;

    line-height:
        1.1 !important;

    white-space:
        nowrap;

}


.material-carousel
.material-carousel-slide
.add-cart-btn img,
.material-carousel
.material-carousel-slide
.add-cart-icon{

    flex:
        0 0 22px !important;

    width:
        22px !important;

    height:
        22px !important;

}


/* =========================================================
   FLECHAS LIMPIAS Y PROPORCIONADAS
========================================================= */

.material-carousel-arrow{

    display:grid !important;

    place-items:center !important;

    width:
        44px !important;

    min-width:
        44px !important;

    height:
        44px !important;

    min-height:
        44px !important;

    padding:
        0 !important;

    overflow:
        visible;

    border:
        1px solid
        rgba(89,114,57,.32) !important;

    border-radius:
        50% !important;

    background:
        #fffaf0 !important;

    color:
        var(--color-acento-oliva) !important;

    font-size:
        0 !important;

    line-height:
        0 !important;

    box-shadow:
        0 7px 16px
        rgba(47,36,28,.16),
        inset 0 1px 0
        rgba(255,255,255,.95) !important;

}


/*
Chevron geométrico único: elimina el texto, el aro interior
y las transformaciones que deformaban las flechas anteriores.
*/

.material-carousel-arrow::before{

    content:"" !important;

    position:absolute;

    top:
        50%;

    left:
        50%;

    width:
        10px;

    height:
        10px;

    border-left:
        3px solid
        var(--color-acento-oliva);

    border-bottom:
        3px solid
        var(--color-acento-oliva);

    border-radius:
        1px;

    filter:
        none !important;

    transform-origin:
        center;

}


.material-carousel-arrow::after{

    display:
        none !important;

    content:
        none !important;

}


.material-carousel-arrow--prev::before{

    transform:
        translate(-38%,-50%)
        rotate(45deg) !important;

}


.material-carousel-arrow--next::before{

    transform:
        translate(-62%,-50%)
        rotate(225deg) !important;

}


.material-carousel-arrow:hover{

    transform:
        translateY(
            calc(-50% - 2px)
        )
        scale(1.04) !important;

    background:
        #fffdf7 !important;

    box-shadow:
        0 10px 22px
        rgba(47,36,28,.21),
        0 0 0 3px
        rgba(89,114,57,.07),
        inset 0 1px 0
        rgba(255,255,255,.98) !important;

}


.material-carousel-arrow:active{

    transform:
        translateY(-50%)
        scale(.94) !important;

}


@media (max-width:740px){

    .material-carousel
    .material-carousel-slide
    .quantity-selector{

        gap:
            20px !important;

        min-height:
            50px;

        margin:
            auto 0
            8px !important;

    }


    .material-carousel
    .material-carousel-slide
    .quantity-btn,
    .material-carousel
    .material-carousel-slide
    .quantity-selector button{

        flex-basis:
            40px !important;

        width:
            40px !important;

        min-width:
            40px !important;

        max-width:
            40px !important;

        height:
            40px !important;

        min-height:
            40px !important;

        max-height:
            40px !important;

    }


    .material-carousel
    .material-carousel-slide
    .quantity-value{

        flex-basis:
            42px;

        width:
            42px;

        min-width:
            42px !important;

        font-size:
            34px !important;

    }


    .material-carousel
    .material-carousel-slide
    .plus-symbol{

        font-size:
            40px !important;

    }


    .material-carousel
    .material-carousel-slide
    .minus-symbol{

        font-size:
            45px !important;

    }


    .material-carousel
    .material-carousel-slide
    .add-cart-btn{

        flex-basis:
            44px !important;

        height:
            44px !important;

        min-height:
            44px !important;

        max-height:
            44px !important;

        padding:
            9px 10px !important;

        font-size:
            15px !important;

        gap:
            8px !important;

    }


    .material-carousel
    .material-carousel-slide
    .add-cart-btn img,
    .material-carousel
    .material-carousel-slide
    .add-cart-icon{

        flex-basis:
            20px !important;

        width:
            20px !important;

        height:
            20px !important;

    }


    .material-carousel-arrow{

        width:
            40px !important;

        min-width:
            40px !important;

        height:
            40px !important;

        min-height:
            40px !important;

    }


    .material-carousel-arrow::before{

        width:
            9px;

        height:
            9px;

        border-left-width:
            2.5px;

        border-bottom-width:
            2.5px;

    }

}

/* =========================================================
   FLECHAS PREMIUM Y DESTELLO CENTRAL
   Único ajuste visual agregado en esta versión.
========================================================= */

/*
La pista permanece por delante del destello.
*/

.material-carousel-viewport{

    isolation:isolate;

}


.material-carousel-track{

    position:relative;

    z-index:2;

}


/*
Luz veloz detrás de toda la tarjeta central.
Permanece invisible mientras el carrusel está quieto.
*/

.material-carousel-viewport::before{

    content:"";

    position:absolute;

    z-index:0;

    top:50%;

    left:50%;

    width:
        calc(
            var(--carousel-card-width) + 58px
        );

    height:
        calc(100% - 10px);

    border-radius:38px;

    opacity:0;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,248,199,.98) 0%,
            rgba(223,185,91,.78) 27%,
            rgba(133,156,76,.39) 52%,
            rgba(255,255,255,0) 76%
        );

    filter:
        blur(14px);

    transform:
        translate(-50%,-50%)
        scale(.82);

    will-change:
        opacity,
        transform,
        filter;

}


.material-carousel.is-center-flashing
.material-carousel-viewport::before{

    animation:
        carouselBackFlash
        .52s
        cubic-bezier(.16,1,.3,1)
        both;

}


.material-carousel.is-center-flashing
.material-carousel-slide.is-center
.product-card{

    animation:
        carouselCenterLight
        .48s
        cubic-bezier(.16,1,.3,1)
        both;

}


@keyframes carouselBackFlash{

    0%{

        opacity:0;

        filter:
            blur(19px);

        transform:
            translate(-50%,-50%)
            scale(.76);

    }


    22%{

        opacity:1;

        filter:
            blur(12px);

        transform:
            translate(-50%,-50%)
            scale(1.045);

    }


    58%{

        opacity:.68;

        filter:
            blur(15px);

        transform:
            translate(-50%,-50%)
            scale(1.10);

    }


    100%{

        opacity:0;

        filter:
            blur(20px);

        transform:
            translate(-50%,-50%)
            scale(1.16);

    }

}


@keyframes carouselCenterLight{

    0%{

        box-shadow:
            0 13px 28px
            rgba(47,36,28,.16),
            inset 0 1px 2px
            rgba(255,255,255,.40);

    }


    28%{

        box-shadow:
            0 18px 38px
            rgba(47,36,28,.20),
            0 0 0 3px
            rgba(255,240,174,.72),
            0 0 34px 10px
            rgba(218,184,91,.50),
            inset 0 1px 3px
            rgba(255,255,255,.78);

    }


    100%{

        box-shadow:
            0 13px 28px
            rgba(47,36,28,.16),
            inset 0 1px 2px
            rgba(255,255,255,.40);

    }

}


/* =========================================================
   NUEVO BOTÓN DE FLECHA
========================================================= */

.material-carousel-arrow{

    isolation:isolate;

    overflow:hidden !important;

    width:
        46px !important;

    min-width:
        46px !important;

    height:
        46px !important;

    min-height:
        46px !important;

    border:
        1px solid
        rgba(87,111,54,.42)
        !important;

    background:
        radial-gradient(
            circle at 34% 26%,
            rgba(255,255,255,.98),
            rgba(255,251,237,.96) 32%,
            rgba(232,208,151,.96) 100%
        )
        !important;

    box-shadow:
        0 8px 18px
        rgba(47,36,28,.18),
        0 2px 5px
        rgba(47,36,28,.11),
        inset 0 1px 0
        rgba(255,255,255,.98),
        inset 0 -3px 7px
        rgba(137,105,53,.12)
        !important;

    scale:1;

    transition:
        scale .22s
        cubic-bezier(.22,1,.36,1),
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        filter .22s ease
        !important;

}


/*
Aro interior preciso, sin deformar el botón.
*/

.material-carousel-arrow::after{

    display:block !important;

    content:"" !important;

    position:absolute;

    z-index:0;

    inset:4px;

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

    border-radius:50%;

    opacity:.86;

    pointer-events:none;

    transform:none !important;

}


/*
Chevron por encima del aro.
*/

.material-carousel-arrow::before{

    z-index:2;

    border-left-color:
        var(--color-acento-oliva)
        !important;

    border-bottom-color:
        var(--color-acento-oliva)
        !important;

    filter:
        drop-shadow(
            0 1px 0
            rgba(255,255,255,.88)
        )
        !important;

    transition:
        filter .20s ease
        !important;

}


@media (hover:hover) and (pointer:fine){

    .material-carousel-arrow:hover{

        transform:
            translateY(-50%)
            !important;

        scale:
            1.085;

        border-color:
            rgba(77,105,45,.68)
            !important;

        background:
            radial-gradient(
                circle at 34% 24%,
                #ffffff,
                #fff8df 34%,
                #dfc477 100%
            )
            !important;

        box-shadow:
            0 12px 25px
            rgba(47,36,28,.23),
            0 0 0 4px
            rgba(91,126,50,.09),
            0 0 19px
            rgba(214,181,91,.25),
            inset 0 1px 0
            rgba(255,255,255,1)
            !important;

    }


    .material-carousel-arrow:hover::before{

        filter:
            drop-shadow(
                0 0 4px
                rgba(82,117,42,.28)
            )
            !important;

    }

}


/*
Respuesta profesional al clic:
compresión corta, rebote mínimo y onda interior.
*/

.material-carousel-arrow.is-arrow-pressed{

    animation:
        carouselArrowPress
        .34s
        cubic-bezier(.22,1,.36,1)
        both;

}


.material-carousel-arrow.is-arrow-pressed::after{

    animation:
        carouselArrowRing
        .34s
        ease-out
        both;

}


@keyframes carouselArrowPress{

    0%{

        scale:1;

        filter:
            brightness(1);

    }


    28%{

        scale:.84;

        filter:
            brightness(.95);

        box-shadow:
            0 3px 8px
            rgba(47,36,28,.18),
            inset 0 3px 8px
            rgba(115,82,59,.18)
            !important;

    }


    66%{

        scale:1.075;

        filter:
            brightness(1.055);

    }


    100%{

        scale:1;

        filter:
            brightness(1);

    }

}


@keyframes carouselArrowRing{

    0%{

        opacity:.90;

        scale:.72;

    }


    55%{

        opacity:.18;

        scale:1.34;

    }


    100%{

        opacity:.70;

        scale:1;

    }

}


@media (max-width:740px){

    .material-carousel-arrow{

        width:
            42px !important;

        min-width:
            42px !important;

        height:
            42px !important;

        min-height:
            42px !important;

    }

}


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

    .material-carousel.is-center-flashing
    .material-carousel-viewport::before,

    .material-carousel.is-center-flashing
    .material-carousel-slide.is-center
    .product-card,

    .material-carousel-arrow.is-arrow-pressed,

    .material-carousel-arrow.is-arrow-pressed::after{

        animation:none !important;

    }

}

/* =========================================================
   CORRECCIÓN REAL DE ANIMACIONES DEL CARRUSEL
   Capa física de destello controlada por JavaScript.
========================================================= */

.material-carousel-viewport{

    isolation:isolate;

}


.material-carousel-center-flash{

    position:absolute;

    z-index:1;

    top:50%;

    left:50%;

    display:block;

    width:
        calc(
            var(--carousel-card-width) + 72px
        );

    height:
        calc(
            var(--carousel-card-height) + 46px
        );

    max-height:
        calc(100% - 4px);

    border-radius:42px;

    opacity:0;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.68) 0%,
            rgba(255,255,255,.32) 20%,
            rgba(245,241,231,.18) 38%,
            rgba(255,255,255,0) 60%
        );

    transform:
        translate(-50%,-50%)
        scale(.70);

    filter:
        blur(20px);

    will-change:
        opacity,
        transform,
        filter;

}


.material-carousel-track{

    position:relative;

    z-index:2;

}


/*
Las animaciones explícitas del usuario quedan habilitadas
aunque el sistema operativo tenga reducción de movimiento.
No se altera ninguna animación automática de la página.
*/

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

    .material-carousel-center-flash{

        display:block !important;

    }

}


/* =========================================================
   COMPACTACIÓN MÓVIL FINAL DE TARJETAS DEL CARRUSEL
========================================================= */
@media (max-width:740px){

    .material-carousel{
        padding:6px;
    }

    .material-carousel-slide{
        padding:6px 0 8px;
    }

    .material-carousel-slide::after{
        inset:6px 0 8px;
    }

    .material-carousel .product-card .offer-badge{
        margin:8px auto 2px 10px;
        padding:5px 10px;
        font-size:13px;
        line-height:1.05;
    }

    .material-carousel .product-card .offer-badge img{
        width:18px;
        height:18px;
        margin-left:5px;
    }

    .material-carousel .product-card .product-image{
        padding:9px 10px 0;
    }

    .material-carousel .product-card .product-image img{
        width:94%;
        height:118px;
    }

    .material-carousel .product-card .product-info{
        padding:5px 8px 7px;
    }

    .material-carousel .product-card:not(.product-card-volume) .product-info h3{
        margin-bottom:2px;
        font-size:24px;
        line-height:1.04;
    }

    .material-carousel .product-card:not(.product-card-volume) .product-description{
        display:-webkit-box;
        min-height:0;
        max-height:33px;
        margin-bottom:2px;
        overflow:hidden;
        font-size:12.5px;
        line-height:1.28;
        -webkit-box-orient:vertical;
        line-clamp:2;
        -webkit-line-clamp:2;
    }

    .material-carousel .product-card:not(.product-card-volume) .product-weight{
        margin-bottom:2px;
        font-size:12px;
        line-height:1.18;
    }

    .material-carousel .product-card:not(.product-card-volume) .product-price{
        gap:2px;
    }

    .material-carousel .product-card:not(.product-card-volume) .old-price{
        font-size:17px;
        line-height:1;
    }

    .material-carousel .product-card:not(.product-card-volume) .new-price{
        min-width:0;
        font-size:27px;
        line-height:1.04;
    }

    .material-carousel .product-card:not(.product-card-volume) .saving{
        display:-webkit-box;
        min-height:28px;
        max-height:33px;
        padding:4px 6px;
        overflow:hidden;
        font-size:10.8px;
        line-height:1.18;
        -webkit-box-orient:vertical;
        line-clamp:2;
        -webkit-line-clamp:2;
    }

    .material-carousel .product-card-volume .product-info{
        padding:5px 8px 7px;
    }

    .material-carousel .product-card-volume .product-format-title{
        margin-bottom:2px;
        padding:3px 7px;
    }

    .material-carousel .product-card-volume .product-info h3{
        margin-bottom:1px;
        font-size:23px;
    }

    .material-carousel .product-card-volume .product-description{
        margin-bottom:2px;
    }

    .material-carousel .product-card-volume .product-equivalence{
        margin-bottom:2px;
    }

    .material-carousel .material-carousel-slide .quantity-selector{
        min-height:44px;
        margin:auto 0 6px !important;
    }

    .material-carousel .material-carousel-slide .add-cart-btn{
        margin:0 0 5px !important;
    }
}

@media (max-width:740px){
    .material-carousel .product-card .product-info h3{
        font-size:21.5px !important;
    }
}

/* El nivel mayorista usa el espacio horizontal del bloque de precio.
   Así no altera la altura de la tarjeta al aparecer. */
.material-carousel .product-price{
    position:relative;
}

.material-carousel .product-wholesale-level{
    position:absolute;
    top:0;
    right:0;
    margin:0;
    z-index:2;
}

@media (max-width:740px){
    .material-carousel .product-wholesale-level{
        max-width:calc(100% - 62px);
        padding:3px 6px;
        font-size:9.5px;
        line-height:1;
        white-space:nowrap;
    }
}

/* =========================================================
   CORRECCIÓN EXCLUSIVA — CENTRADO DEL SÍMBOLO + EN MÓVIL
   No modifica dimensiones, espaciado ni otros controles.
========================================================= */

@media (max-width:740px){

    .material-carousel
    .material-carousel-slide
    .plus-symbol{

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        width:100% !important;

        height:100% !important;

        margin:0 !important;

        line-height:1 !important;

        transform:
            translateY(-1px)
            !important;

    }

}

/* =========================================================
   IDENTIDAD OFICIAL — LOGO ÁRIDOS QUILES · V1.0.4
   Aplicación estratégica: hero, catálogo, menú y footer.
========================================================= */

.brand-logo-frame{
    position:relative;
    display:inline-grid;
    place-items:center;
    flex:0 0 auto;
    overflow:hidden;
    border-radius:50%;
    background:#2f241c;
    border:1px solid rgba(232,208,154,.72);
    box-shadow:
        0 9px 22px rgba(47,36,28,.25),
        0 0 0 4px rgba(89,114,57,.11),
        inset 0 1px 2px rgba(255,255,255,.34);
}

.brand-logo-frame img{
    display:block;
    width:106%;
    height:106%;
    max-width:none;
    object-fit:cover;
    transform:scale(1.035);
}

/* Punto de decisión comercial */
.productos-kicker::before{
    display:none !important;
}

.catalog-kicker-logo{
    width:27px;
    height:27px;
    flex:0 0 27px;
    margin:-4px 1px -4px -6px;
    border-radius:50%;
    object-fit:cover;
    transform:scale(1.035);
    box-shadow:
        0 3px 8px rgba(47,36,28,.19),
        0 0 0 2px rgba(89,114,57,.10);
}

/* Menú lateral */
.menu-panel-brand{
    flex-direction:row;
    align-items:center;
    gap:12px;
}

.menu-panel-brand-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.menu-logo-seal{
    width:49px;
    height:49px;
    box-shadow:
        0 7px 16px rgba(47,36,28,.20),
        0 0 0 3px rgba(89,114,57,.10);
}

/* Cierre institucional */
.footer-brand-heading{
    display:flex;
    align-items:flex-start;
    gap:17px;
    margin-bottom:15px;
}

.footer-brand-heading-copy{
    min-width:0;
}

.footer-logo-seal{
    width:74px;
    height:74px;
    margin-top:1px;
    border-color:rgba(232,208,154,.58);
    box-shadow:
        0 12px 26px rgba(0,0,0,.25),
        0 0 0 4px rgba(213,179,106,.10);
}

.footer-brand-heading .footer-eyebrow{
    margin-bottom:8px;
}

.footer-brand-heading h2{
    margin-bottom:0;
}

@media (max-width:740px){
    .catalog-kicker-logo{
        width:24px;
        height:24px;
        flex-basis:24px;
    }

    .menu-logo-seal{
        width:44px;
        height:44px;
    }

    .menu-panel-brand{
        gap:10px;
    }

    .footer-brand-heading{
        align-items:center;
        gap:13px;
    }

    .footer-logo-seal{
        width:62px;
        height:62px;
    }
}

@media (max-width:390px){
    .menu-logo-seal{
        width:40px;
        height:40px;
    }

    .menu-panel-brand h2{
        font-size:29px;
    }

    .footer-logo-seal{
        width:56px;
        height:56px;
    }
}

/* =========================================================
   V1.0.7 FINAL — MENSAJE MAYORISTA Y CATÁLOGO COMPACTO
========================================================= */

.wholesale-progress[hidden],
.wholesale-progress-message[hidden]{
    display:none !important;
}

.wholesale-progress-message:not([hidden]){
    margin-top:8px;
    padding:7px 9px;
    border-radius:11px;
    background:rgba(89,114,57,.085);
    color:var(--color-acento-oliva);
    font-weight:800;
}

@media (min-width:741px){

    .material-carousel{
        padding:8px;
    }

    .material-carousel-slide{
        padding:8px 0 10px;
    }

    .material-carousel-slide::after{
        inset:8px 0 10px;
    }

    .material-carousel .product-card .offer-badge{
        margin:9px auto 2px 11px;
        padding:5px 11px;
        font-size:13px;
        line-height:1.05;
    }

    .material-carousel .product-card .offer-badge img{
        width:18px;
        height:18px;
        margin-left:5px;
    }

    .material-carousel .product-card .product-image{
        padding:9px 11px 0;
    }

    .material-carousel .product-card .product-image img{
        width:94%;
        height:clamp(118px,9.4vw,128px);
    }

    .material-carousel .product-card .product-info{
        padding:5px 9px 7px;
    }

    .material-carousel
    .product-card:not(.product-card-volume)
    .product-info h3{
        margin-bottom:2px;
        font-size:clamp(23px,1.9vw,26px);
        line-height:1.04;
    }

    .material-carousel
    .product-card:not(.product-card-volume)
    .product-description{
        display:-webkit-box;
        min-height:0;
        max-height:36px;
        margin-bottom:2px;
        overflow:hidden;
        font-size:clamp(13px,1.05vw,14px);
        line-height:1.27;
        -webkit-box-orient:vertical;
        line-clamp:2;
        -webkit-line-clamp:2;
    }

    .material-carousel
    .product-card:not(.product-card-volume)
    .product-weight{
        margin-bottom:2px;
        font-size:13.5px;
        line-height:1.18;
    }

    .material-carousel
    .product-card:not(.product-card-volume)
    .product-price{
        gap:2px;
    }

    .material-carousel
    .product-card:not(.product-card-volume)
    .old-price{
        font-size:19px;
        line-height:1;
    }

    .material-carousel
    .product-card:not(.product-card-volume)
    .new-price{
        min-width:0;
        font-size:clamp(28px,2.3vw,31px);
        line-height:1.03;
    }

    .material-carousel
    .product-card:not(.product-card-volume)
    .saving{
        display:-webkit-box;
        min-height:29px;
        max-height:34px;
        padding:4px 7px;
        overflow:hidden;
        font-size:12px;
        line-height:1.18;
        -webkit-box-orient:vertical;
        line-clamp:2;
        -webkit-line-clamp:2;
    }

    .material-carousel
    .product-card-volume
    .product-info{
        justify-content:flex-start !important;
        padding:5px 9px 7px;
    }

    .material-carousel
    .product-card-volume
    .product-format-title{
        margin-bottom:2px;
        padding:3px 7px;
        font-size:10.5px;
        line-height:1.05;
    }

    .material-carousel
    .product-card-volume
    .product-info h3{
        margin-bottom:1px;
        font-size:clamp(22.5px,1.8vw,25px);
        line-height:1.03;
    }

    .material-carousel
    .product-card-volume
    .product-description{
        max-height:34px;
        margin-bottom:2px;
        font-size:13px;
        line-height:1.25;
    }

    .material-carousel
    .product-card-volume
    .product-weight{
        margin-bottom:1px;
        font-size:12.5px;
        line-height:1.16;
    }

    .material-carousel
    .product-card-volume
    .product-equivalence{
        margin-bottom:2px;
        font-size:11.5px;
        line-height:1.16;
    }

    .material-carousel
    .product-card-volume
    .product-price{
        gap:2px;
    }

    .material-carousel
    .product-card-volume
    .old-price{
        font-size:18px;
    }

    .material-carousel
    .product-card-volume
    .new-price{
        min-width:0;
        font-size:clamp(27px,2.2vw,30px);
        line-height:1.03;
    }

    .material-carousel
    .product-card-volume
    .saving{
        min-height:29px;
        max-height:34px;
        padding:4px 7px;
        font-size:11.7px;
        line-height:1.17;
    }

    .material-carousel
    .material-carousel-slide
    .quantity-selector{
        gap:22px !important;
        min-height:48px;
        margin:auto 0 7px !important;
    }

    .material-carousel
    .material-carousel-slide
    .quantity-btn,
    .material-carousel
    .material-carousel-slide
    .quantity-selector button{
        flex-basis:42px !important;
        width:42px !important;
        min-width:42px !important;
        max-width:42px !important;
        height:42px !important;
        min-height:42px !important;
        max-height:42px !important;
    }

    .material-carousel
    .material-carousel-slide
    .quantity-value{
        flex-basis:44px;
        width:44px;
        min-width:44px !important;
        font-size:36px !important;
    }

    .material-carousel
    .material-carousel-slide
    .plus-symbol{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        height:100% !important;
        margin:0 !important;
        font-size:40px !important;
        line-height:1 !important;
        transform:translateY(-1px) !important;
    }

    .material-carousel
    .material-carousel-slide
    .minus-symbol{
        margin:0 !important;
        font-size:45px !important;
        transform:translateY(-3px) !important;
    }

    .material-carousel
    .material-carousel-slide
    .add-cart-btn{
        flex-basis:44px !important;
        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;
        margin:0 0 5px !important;
        padding:9px 10px !important;
        gap:8px !important;
        font-size:15px !important;
    }

    .material-carousel
    .material-carousel-slide
    .add-cart-btn img,
    .material-carousel
    .material-carousel-slide
    .add-cart-icon{
        flex-basis:20px !important;
        width:20px !important;
        height:20px !important;
    }

}

@media (min-width:741px) and (max-width:980px){

    .material-carousel .product-card .product-image img{
        height:116px;
    }

    .material-carousel
    .product-card:not(.product-card-volume)
    .product-info h3{
        font-size:23px;
    }

    .material-carousel
    .product-card-volume
    .product-info h3{
        font-size:22.5px;
    }

}


/* =========================================================
   AJUSTE EXTRA DEFINITIVO V1.0.7 — CENTRADO DEL SIGNO MENOS
   Corrección óptica de 1 px hacia arriba, sin mover el botón.
========================================================= */

.minus-symbol,
.material-carousel
.material-carousel-slide
.minus-symbol {

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

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding-bottom: 1px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;

    transform: translateY(-1px) !important;

}