/* =========================================================
   YOGURT DE JOSUÉ
   ESTILOS COMPLETOS
   PARTE 1
========================================================= */


/* =========================================================
   FUENTE
========================================================= */

@import url(
    "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
);


/* =========================================================
   VARIABLES
========================================================= */

:root{

    --morado:
        #4b186e;

    --morado-oscuro:
        #2d0b45;

    --morado-claro:
        #f3eaf8;

    --amarillo:
        #ffc93c;

    --amarillo-oscuro:
        #f3b800;

    --verde:
        #25d366;

    --blanco:
        #ffffff;

    --negro:
        #18131b;

    --gris:
        #6f6873;

    --gris-claro:
        #f7f5f8;

    --fondo:
        #faf9fb;

    --borde:
        #ebe4ee;

    --rojo:
        #d74343;

    --sombra-suave:
        0 12px 30px
        rgba(31,10,43,.07);

    --sombra-media:
        0 20px 48px
        rgba(31,10,43,.13);

}


/* =========================================================
   RESET GENERAL
========================================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

    scroll-padding-top:105px;

}


body{

    min-height:100vh;

    overflow-x:hidden;

    background:var(--fondo);

    color:var(--negro);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

}


body.modal-abierto{

    overflow:hidden;

}


button,
input,
textarea,
select{

    font:inherit;

}


button{

    border:none;

    cursor:pointer;

}


a{

    color:inherit;

    text-decoration:none;

}


img{

    display:block;

    max-width:100%;

}


section{

    width:100%;

}


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

.encabezado{

    width:100%;

    position:sticky;

    top:0;

    z-index:1000;

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

    border-bottom:
        1px solid
        rgba(75,24,110,.08);

    box-shadow:
        0 8px 26px
        rgba(31,10,43,.07);

    backdrop-filter:
        blur(14px);

}


.encabezado-contenido{

    width:100%;

    max-width:1380px;

    min-height:86px;

    margin:auto;

    padding:
        8px
        35px;

    display:grid;

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

    align-items:center;

    gap:28px;

}


/* =========================================================
   MARCA DEL ENCABEZADO
========================================================= */

.marca{

    display:flex;

    align-items:center;

    gap:14px;

}


.nombre-marca{

    display:flex;

    flex-direction:column;

}


.nombre-marca strong{

    color:var(--morado-oscuro);

    font-size:19px;

    line-height:1.2;

}


.nombre-marca small{

    margin-top:3px;

    color:var(--gris);

    font-size:11px;

}


/* =========================================================
   LOGOS CIRCULARES
========================================================= */

.logo-circular{

    flex-shrink:0;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--blanco);

    box-shadow:
        0 12px 28px
        rgba(31,10,43,.14);

}


.logo-circular img{

    width:100%;

    height:10%;

    object-fit:contain;

    object-position:center;

}


.logo-circular-pequeno{

    width:64px;

    height:64px;

    padding:0px;

    border:
        4px solid
        var(--amarillo);

}


.logo-circular-grande{

    width:330px;

    height:330px;

    padding:14px;

    border:
        9px solid
        var(--amarillo);

}


.logo-circular-historia{

    width:265px;

    height:265px;

    padding:13px;

    border:
        8px solid
        var(--amarillo);

}


.logo-circular-ubicacion{

    width:170px;

    height:170px;

    padding:9px;

    border:
        6px solid
        var(--blanco);

}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.navegacion{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

}


.navegacion a{

    position:relative;

    padding:
        11px
        0;

    color:#514958;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

    transition:
        color .25s ease;

}


.navegacion a::after{

    content:"";

    width:0;

    height:3px;

    position:absolute;

    left:50%;

    bottom:2px;

    border-radius:20px;

    background:var(--amarillo);

    transform:
        translateX(-50%);

    transition:
        width .25s ease;

}


.navegacion a:hover{

    color:var(--morado);

}


.navegacion a:hover::after{

    width:100%;

}


/* =========================================================
   ACCIONES DEL ENCABEZADO
========================================================= */

.acciones-encabezado{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:11px;

}


.boton-carrito{

    min-height:49px;

    padding:
        10px
        16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:50px;

    background:var(--morado);

    color:var(--blanco);

    font-weight:800;

    box-shadow:
        0 10px 23px
        rgba(75,24,110,.20);

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

}


.boton-carrito:hover{

    background:var(--morado-oscuro);

    transform:
        translateY(-2px);

}


.boton-carrito strong{

    min-width:27px;

    height:27px;

    padding:
        0
        7px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--amarillo);

    color:var(--morado-oscuro);

    font-size:11px;

}


.boton-menu-movil{

    width:44px;

    height:44px;

    display:none;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--morado);

    color:var(--blanco);

    font-size:19px;

}


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

.portada{

    position:relative;

    overflow:hidden;

    padding:
        90px
        35px
        120px;

    background:

        radial-gradient(
            circle at 85% 25%,
            rgba(255,201,60,.28),
            transparent 28%
        ),

        radial-gradient(
            circle at 8% 90%,
            rgba(255,255,255,.07),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            var(--morado),
            var(--morado-oscuro)
        );

}


.portada::before{

    content:"";

    width:430px;

    height:430px;

    position:absolute;

    top:-210px;

    left:-180px;

    border-radius:50%;

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

}


.portada::after{

    content:"";

    width:520px;

    height:520px;

    position:absolute;

    right:-240px;

    bottom:-290px;

    border-radius:50%;

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

}


.portada-contenido{

    width:100%;

    max-width:1320px;

    margin:auto;

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(410px,.85fr);

    align-items:center;

    gap:70px;

}


/* =========================================================
   ESTADO DEL NEGOCIO
========================================================= */

.estado-negocio{

    width:max-content;

    max-width:100%;

    margin-bottom:23px;

    padding:
        10px
        15px;

    display:flex;

    align-items:center;

    gap:10px;

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

    border-radius:50px;

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

    color:var(--blanco);

    backdrop-filter:
        blur(10px);

}


.punto-estado{

    width:11px;

    height:11px;

    flex-shrink:0;

    border-radius:50%;

    background:#31d279;

    box-shadow:
        0 0 0 5px
        rgba(49,210,121,.15);

}


.estado-negocio.cerrado .punto-estado{

    background:#ff6666;

    box-shadow:
        0 0 0 5px
        rgba(255,102,102,.15);

}


.estado-negocio div{

    display:flex;

    flex-direction:column;

}


.estado-negocio strong{

    font-size:13px;

}


.estado-negocio small{

    margin-top:2px;

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

    font-size:10px;

}


/* =========================================================
   TEXTO DE LA PORTADA
========================================================= */

.portada-texto{

    min-width:0;

}


.etiqueta-portada{

    margin-bottom:14px;

    color:var(--amarillo);

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.portada-texto h1{

    max-width:720px;

    margin-bottom:24px;

    color:var(--blanco);

    font-size:
        clamp(
            52px,
            6vw,
            80px
        );

    line-height:.99;

    letter-spacing:-2px;

}


.portada-texto h1 span{

    display:block;

    color:var(--amarillo);

}


.descripcion-portada{

    max-width:650px;

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

    font-size:17px;

    line-height:1.78;

}


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

.botones-portada{

    margin-top:33px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:13px;

}


.boton{

    min-height:52px;

    padding:
        13px
        23px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:50px;

    font-weight:800;

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

}


.boton:hover{

    transform:
        translateY(-3px);

}


.boton-amarillo{

    background:var(--amarillo);

    color:var(--morado-oscuro);

    box-shadow:
        0 12px 27px
        rgba(255,201,60,.20);

}


.boton-amarillo:hover{

    background:var(--amarillo-oscuro);

}


.boton-whatsapp{

    border:
        2px solid
        rgba(255,255,255,.66);

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

    color:var(--blanco);

}


.boton-whatsapp:hover{

    border-color:var(--verde);

    background:var(--verde);

}


/* =========================================================
   DATOS DE PORTADA
========================================================= */

.datos-portada{

    max-width:650px;

    margin-top:32px;

    display:grid;

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

    gap:13px;

}


.datos-portada > div{

    min-width:0;

    padding:15px;

    display:grid;

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

    align-items:center;

    column-gap:11px;

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

    border-radius:16px;

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

    color:var(--blanco);

}


.datos-portada i{

    width:44px;

    height:44px;

    grid-row:
        1 / 3;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--amarillo);

    font-size:18px;

}


.datos-portada span{

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

    font-size:10px;

}


.datos-portada strong{

    font-size:12px;

    line-height:1.4;

}


/* =========================================================
   LOGO DE PORTADA
========================================================= */

.portada-logo{

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:22px;

}


.circulo-exterior-logo{

    width:430px;

    height:430px;

    max-width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.18),
            rgba(255,255,255,.06)
        );

    box-shadow:
        0 30px 80px
        rgba(20,5,28,.34);

    backdrop-filter:
        blur(10px);

}


.tarjeta-experiencia{

    width:min(100%,370px);

    padding:
        16px
        20px;

    display:grid;

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

    align-items:center;

    gap:14px;

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

    border-radius:19px;

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

    box-shadow:
        0 18px 42px
        rgba(20,5,28,.24);

}


.tarjeta-experiencia strong{

    min-width:82px;

    min-height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:var(--amarillo);

    color:var(--morado-oscuro);

    font-size:30px;

}


.tarjeta-experiencia span{

    color:var(--gris);

    font-size:13px;

    font-weight:600;

    line-height:1.55;

}/* =========================================================
   AVISO DE HORARIO
========================================================= */

.aviso-horario{

    display:none;

    padding:
        22px
        35px;

    border-top:
        1px solid
        #ffdada;

    border-bottom:
        1px solid
        #ffdada;

    background:
        #fff5f5;

}


.aviso-horario.visible{

    display:block;

}


.aviso-horario-contenido{

    width:100%;

    max-width:1300px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:17px;

}


.aviso-horario-contenido > span{

    width:58px;

    height:58px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--blanco);

    color:var(--rojo);

    font-size:22px;

    box-shadow:
        0 8px 22px
        rgba(215,67,67,.12);

}


.aviso-horario strong{

    display:block;

    margin-bottom:5px;

    color:#8f2222;

    font-size:16px;

}


.aviso-horario p{

    color:#7d5555;

    font-size:13px;

    line-height:1.65;

}


/* =========================================================
   BENEFICIOS
========================================================= */

.beneficios{

    width:100%;

    max-width:1320px;

    margin:
        -58px
        auto
        0;

    padding:
        0
        35px;

    position:relative;

    z-index:10;

    display:grid;

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

    gap:20px;

}


.beneficio{

    min-width:0;

    padding:25px;

    display:flex;

    align-items:flex-start;

    gap:15px;

    border:
        1px solid
        rgba(75,24,110,.08);

    border-radius:22px;

    background:var(--blanco);

    box-shadow:var(--sombra-suave);

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

}


.beneficio:hover{

    transform:
        translateY(-6px);

    box-shadow:var(--sombra-media);

}


.beneficio > span{

    width:56px;

    height:56px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:17px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:21px;

}


.beneficio strong{

    display:block;

    margin-bottom:6px;

    color:var(--morado-oscuro);

    font-size:16px;

}


.beneficio p{

    color:var(--gris);

    font-size:12px;

    line-height:1.65;

}


/* =========================================================
   SUBTÍTULOS GENERALES
========================================================= */

.subtitulo-seccion{

    color:var(--morado);

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.subtitulo-claro{

    color:var(--amarillo);

}


/* =========================================================
   HISTORIA
========================================================= */

.historia{

    padding:
        120px
        35px;

    background:var(--blanco);

}


.historia-contenido{

    width:100%;

    max-width:1280px;

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(390px,.9fr)
        minmax(0,1.1fr);

    align-items:center;

    gap:75px;

}


/* =========================================================
   LOGO DE HISTORIA
========================================================= */

.historia-logo{

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:27px;

}


.circulo-historia{

    width:420px;

    height:420px;

    max-width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,201,60,.28),
            transparent 62%
        ),

        linear-gradient(
            145deg,
            #f8f1fb,
            #ffffff
        );

    box-shadow:
        0 24px 58px
        rgba(75,24,110,.15);

}


.logo-circular-historia{

    width:260px;

    height:260px;

    padding:13px;

    border:
        8px solid
        var(--amarillo);

    background:var(--blanco);

    box-shadow:

        inset 0 0 0 7px
        rgba(75,24,110,.06),

        0 18px 40px
        rgba(0,0,0,.14);

}


.historia-estadisticas{

    width:100%;

    display:grid;

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

    gap:15px;

}


.historia-estadisticas > div{

    padding:
        21px
        17px;

    border-radius:18px;

    background:var(--morado);

    color:var(--blanco);

    text-align:center;

    box-shadow:
        0 14px 31px
        rgba(75,24,110,.15);

}


.historia-estadisticas strong{

    display:block;

    margin-bottom:5px;

    color:var(--amarillo);

    font-size:30px;

}


.historia-estadisticas span{

    font-size:12px;

    line-height:1.45;

}


/* =========================================================
   TEXTO DE HISTORIA
========================================================= */

.historia-texto{

    min-width:0;

}


.historia-texto h2{

    margin:
        15px
        0
        26px;

    color:var(--morado-oscuro);

    font-size:
        clamp(
            39px,
            4.5vw,
            55px
        );

    line-height:1.1;

    letter-spacing:-1px;

}


.historia-texto > p{

    margin-bottom:16px;

    color:var(--gris);

    font-size:15px;

    line-height:1.82;

}


.historia-texto blockquote{

    margin-top:29px;

    padding:
        21px
        23px;

    border-left:
        6px solid
        var(--amarillo);

    border-radius:15px;

    background:#fff8df;

    color:var(--morado-oscuro);

    font-size:16px;

    font-weight:700;

    line-height:1.55;

}


/* =========================================================
   ENCABEZADOS DE SECCIONES
========================================================= */

.encabezado-seccion{

    max-width:760px;

    margin:
        0
        auto
        60px;

    text-align:center;

}


.encabezado-seccion h2{

    margin:
        14px
        0
        16px;

    color:var(--morado-oscuro);

    font-size:
        clamp(
            37px,
            4.6vw,
            52px
        );

    line-height:1.1;

}


.encabezado-seccion > p:last-child{

    color:var(--gris);

    font-size:15px;

    line-height:1.72;

}


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

.destacados{

    padding:
        115px
        35px;

    background:var(--fondo);

}


.destacados-grid{

    width:100%;

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:25px;

}


.producto-destacado{

    min-width:0;

    position:relative;

    overflow:hidden;

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

    border-radius:26px;

    background:var(--blanco);

    box-shadow:var(--sombra-suave);

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

}


.producto-destacado:hover{

    transform:
        translateY(-7px);

    box-shadow:var(--sombra-media);

}


.etiqueta-destacado{

    position:absolute;

    top:17px;

    left:17px;

    z-index:4;

    padding:
        7px
        13px;

    border-radius:40px;

    background:var(--amarillo);

    color:var(--morado-oscuro);

    font-size:10px;

    font-weight:800;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.10);

}


.imagen-destacado{

    height:235px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        radial-gradient(
            circle,
            rgba(255,201,60,.23),
            transparent 58%
        ),

        linear-gradient(
            145deg,
            #f7f0fa,
            #ffffff
        );

}


.imagen-destacado > i{

    color:var(--morado);

    font-size:88px;

}


.contenido-destacado{

    padding:27px;

}


.contenido-destacado h3{

    margin-bottom:10px;

    color:var(--morado-oscuro);

    font-size:22px;

    line-height:1.35;

}


.contenido-destacado p{

    min-height:56px;

    color:var(--gris);

    font-size:13px;

    line-height:1.68;

}


.pie-destacado{

    margin-top:23px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.pie-destacado > strong{

    color:var(--morado);

    font-size:26px;

}


.boton-agregar-destacado{

    min-height:45px;

    padding:
        10px
        16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:13px;

    background:var(--morado);

    color:var(--blanco);

    font-size:12px;

    font-weight:800;

    box-shadow:
        0 10px 21px
        rgba(75,24,110,.18);

    transition:
        transform .23s ease,
        background .23s ease;

}


.boton-agregar-destacado:hover{

    background:var(--morado-oscuro);

    transform:
        translateY(-2px);

}


/* =========================================================
   RESPONSIVE DE ESTA PARTE
========================================================= */

@media(max-width:1100px){

    .beneficios{

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

    }


    .historia-contenido{

        grid-template-columns:1fr;

        gap:52px;

    }


    .historia-logo{

        width:min(100%,640px);

        margin:auto;

    }


    .historia-texto{

        text-align:center;

    }


    .historia-texto > p,
    .historia-texto blockquote{

        text-align:left;

    }


    .destacados-grid{

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

    }

}


@media(max-width:700px){

    .beneficios{

        margin-top:-34px;

        padding:
            0
            18px;

        grid-template-columns:1fr;

    }


    .historia,
    .destacados{

        padding:
            88px
            18px;

    }

    .historia{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

.historia-contenido{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.historia-texto{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:0;
}

.historia-texto h2{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;

    font-size:clamp(28px,8vw,35px);
    overflow-wrap:break-word;
}

.historia-texto > p,
.historia-texto blockquote{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
}


    .circulo-historia{

        width:295px;

        height:295px;

    }


    .logo-circular-historia{

        width:205px;

        height:205px;

    }


    .historia-estadisticas{

        grid-template-columns:1fr;

    }


    .destacados-grid{

        grid-template-columns:1fr;

    }


    .pie-destacado{

        align-items:stretch;

        flex-direction:column;

    }


    .boton-agregar-destacado{

        width:100%;

    }

}/* =========================================================
   MENÚ COMPLETO
========================================================= */

.menu{

    padding:
        115px
        35px;

    background:var(--blanco);

}


.menu-encabezado{

    width:100%;

    max-width:1320px;

    margin:
        0 auto
        45px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:35px;

}


.menu-encabezado > div:first-child{

    max-width:730px;

}


.menu-encabezado h2{

    margin:
        12px
        0
        14px;

    color:var(--morado-oscuro);

    font-size:
        clamp(
            38px,
            4.5vw,
            54px
        );

    line-height:1.08;

}


.menu-encabezado p{

    color:var(--gris);

    line-height:1.75;

}


/* =========================================================
   BUSCADOR
========================================================= */

.buscador{

    width:400px;

    max-width:100%;

    min-height:58px;

    padding:
        0
        18px;

    display:flex;

    align-items:center;

    gap:12px;

    border:
        1px solid
        #e9e1ed;

    border-radius:16px;

    background:var(--blanco);

    box-shadow:
        0 10px 30px
        rgba(45,11,69,.07);

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

}


.buscador:focus-within{

    border-color:var(--morado);

    box-shadow:
        0 0 0 4px
        rgba(75,24,110,.08);

}


.buscador i{

    color:var(--morado);

    font-size:17px;

}


.buscador input{

    width:100%;

    min-width:0;

    padding:
        16px
        0;

    border:none;

    outline:none;

    background:transparent;

    color:var(--negro);

}


/* =========================================================
   CATEGORÍAS ANTIGUAS
========================================================= */

.categorias{

    display:none;

}


/* =========================================================
   CONTENEDOR DEL MENÚ
========================================================= */

.menu-contenido{

    width:100%;

    max-width:1320px;

    margin:auto;

}


/* =========================================================
   GRUPOS DE CATEGORÍAS
========================================================= */

.grupo-menu{

    margin-bottom:72px;

    scroll-margin-top:110px;

}


.titulo-grupo-menu{

    margin-bottom:24px;

    padding-bottom:13px;

    position:relative;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    border-bottom:
        1px solid
        #eee8f1;

}


.titulo-grupo-menu::after{

    content:"";

    width:72px;

    height:5px;

    position:absolute;

    left:0;

    bottom:-1px;

    border-radius:30px;

    background:var(--amarillo);

}


.titulo-grupo-menu h2{

    padding-bottom:5px;

    color:var(--morado-oscuro);

    font-size:
        clamp(
            29px,
            3vw,
            38px
        );

    line-height:1.15;

}


/* =========================================================
   REJILLA DEL MENÚ
========================================================= */

.rejilla-menu{

    display:grid;

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

    gap:20px;

}


/* =========================================================
   TARJETA HORIZONTAL
========================================================= */

.producto-menu{

    min-width:0;

    min-height:180px;

    overflow:hidden;

    display:grid;

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

    align-items:stretch;

    border:
        1px solid
        #ece6ef;

    border-radius:20px;

    background:var(--blanco);

    box-shadow:
        0 10px 28px
        rgba(27,9,37,.055);

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

}


.producto-menu:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(75,24,110,.20);

    box-shadow:
        0 18px 42px
        rgba(27,9,37,.10);

}


/* =========================================================
   INFORMACIÓN DEL PRODUCTO
========================================================= */

.producto-menu-informacion{

    min-width:0;

    padding:
        24px
        21px
        22px
        24px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.producto-menu-informacion h3{

    margin-bottom:8px;

    color:var(--morado-oscuro);

    font-size:18px;

    font-weight:700;

    line-height:1.35;

}


.producto-menu-precio{

    display:block;

    margin-bottom:10px;

    color:var(--morado);

    font-size:19px;

    font-weight:800;

}


.producto-menu-informacion p{

    color:#6f6873;

    font-size:13px;

    line-height:1.62;

}


/* =========================================================
   IMAGEN DEL PRODUCTO
========================================================= */

.producto-menu-imagen{
    --espacio-imagen: 12px;

    min-width: 0;
    position: relative;

    padding: var(--espacio-imagen);
}


.producto-imagen-fondo{

    width:100%;

    height:100%;

    min-height:156px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:

        radial-gradient(
            circle at center,
            rgba(255,201,60,.25),
            transparent 58%
        ),

        linear-gradient(
            145deg,
            #f7effa,
            #fffdf7
        );

}


.producto-imagen-fondo img{

    width:100%;

    height:100%;

    position:relative;

    z-index:2;

    object-fit:cover;

    object-position:center;

}


.icono-producto-respaldo{

    width:100%;

    height:100%;

    position:absolute;

    inset:0;

    z-index:1;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--morado);

    font-size:60px;

}


/* =========================================================
   BOTÓN + CIRCULAR
========================================================= */

.boton-sumar-producto{

    width:48px;

    height:48px;

    position:absolute;

    right:22px;

    bottom:22px;

    z-index:4;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        4px solid
        var(--blanco);

    border-radius:50%;

    background:var(--morado);

    color:var(--blanco);

    font-size:18px;

    box-shadow:
        0 12px 27px
        rgba(75,24,110,.28);

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

}


.boton-sumar-producto:hover{

    background:var(--morado-oscuro);

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

    box-shadow:
        0 16px 34px
        rgba(75,24,110,.35);

}


.boton-sumar-producto:active{

    transform:scale(.95);

}


/* =========================================================
   SIN RESULTADOS
========================================================= */

.sin-resultados-menu{

    padding:
        70px
        25px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border:
        2px dashed
        #e5dce9;

    border-radius:22px;

    background:#faf8fb;

    text-align:center;

}


.sin-resultados-menu > span{

    width:72px;

    height:72px;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:#f1e8f5;

    color:var(--morado);

    font-size:26px;

}


.sin-resultados-menu h3{

    margin-bottom:8px;

    color:var(--morado-oscuro);

    font-size:21px;

}


.sin-resultados-menu p{

    max-width:460px;

    color:var(--gris);

    line-height:1.65;

}


/* =========================================================
   RESPONSIVE DEL MENÚ
========================================================= */

@media(max-width:1100px){

    .menu-encabezado{

        align-items:stretch;

        flex-direction:column;

    }


    .buscador{

        width:100%;

    }


    .producto-menu{

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

    }

}


@media(max-width:850px){

    .rejilla-menu{

        grid-template-columns:1fr;

    }


    .producto-menu{

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

    }

}


@media(max-width:600px){

    .menu{

        padding:
            85px
            16px;

    }


    .menu-encabezado{

        margin-bottom:35px;

    }


    .grupo-menu{

        margin-bottom:58px;

    }


    .titulo-grupo-menu{

        margin-bottom:18px;

    }


    .titulo-grupo-menu h2{

        font-size:28px;

    }


    .producto-menu{

        min-height:155px;

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

        border-radius:17px;

    }


    .producto-menu-informacion{

        padding:
            19px
            12px
            18px
            18px;

    }


    .producto-menu-informacion h3{

        font-size:15px;

        line-height:1.3;

    }


    .producto-menu-precio{

        margin-bottom:7px;

        font-size:17px;

    }


    .producto-menu-informacion p{

        font-size:11px;

        line-height:1.5;

    }


    .producto-menu-imagen{

        padding:8px;

    }


    .producto-imagen-fondo{

        min-height:138px;

        border-radius:13px;

    }


    .icono-producto-respaldo{

        font-size:43px;

    }


    .boton-sumar-producto{

        width:42px;

        height:42px;

        right:14px;

        bottom:14px;

        border-width:3px;

        font-size:15px;

    }

}


@media(max-width:390px){

    .producto-menu{

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

    }


    .producto-menu-informacion{

        padding:
            17px
            9px
            16px
            14px;

    }


    .producto-menu-informacion h3{

        font-size:14px;

    }


    .producto-menu-informacion p{

        font-size:10px;

    }


    .producto-imagen-fondo{

        min-height:125px;

    }

}/* =========================================================
   CÓMO PEDIR
========================================================= */

.como-pedir{

    padding:
        115px
        35px;

    background:var(--fondo);

}


.pasos-grid{

    width:100%;

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:22px;

}


.paso{

    min-width:0;

    padding:
        31px
        23px;

    position:relative;

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

    border-radius:22px;

    background:var(--blanco);

    text-align:center;

    box-shadow:var(--sombra-suave);

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

}


.paso:hover{

    transform:
        translateY(-6px);

    box-shadow:var(--sombra-media);

}


.numero-paso{

    width:36px;

    height:36px;

    position:absolute;

    top:17px;

    right:17px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--amarillo);

    color:var(--morado-oscuro);

    font-size:13px;

    font-weight:800;

}


.icono-paso{

    width:76px;

    height:76px;

    margin:
        10px
        auto
        21px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:29px;

}


.paso h3{

    margin-bottom:11px;

    color:var(--morado-oscuro);

    font-size:18px;

    line-height:1.35;

}


.paso p{

    color:var(--gris);

    font-size:13px;

    line-height:1.68;

}


/* =========================================================
   UBICACIÓN
========================================================= */

.ubicacion{

    padding:40px 35px;
    margin-top: -165px;

    background:var(--blanco);

}


.ubicacion-contenido{

    width:100%;

    max-width:1260px;

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(380px,.86fr);

    align-items:center;

    gap:65px;

}


.ubicacion-texto h2{

    margin:
        14px
        0
        28px;

    color:var(--morado-oscuro);

    font-size:
        clamp(
            39px,
            4.7vw,
            54px
        );

    line-height:1.1;

}


.ubicacion-datos{

    margin-bottom:28px;

    display:grid;

    gap:14px;

}


.dato-ubicacion{

    padding:18px;

    display:flex;

    align-items:flex-start;

    gap:13px;

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

    border-radius:17px;

    background:var(--fondo);

}


.dato-ubicacion > span{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:19px;

}


.dato-ubicacion strong{

    display:block;

    margin-bottom:5px;

    color:var(--morado-oscuro);

}


.dato-ubicacion p{

    color:var(--gris);

    font-size:13px;

    line-height:1.6;

}


/* =========================================================
   TARJETA DE UBICACIÓN
========================================================= */

.ubicacion-tarjeta{

    min-height:460px;

    padding:
        35px
        30px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-radius:28px;

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(255,201,60,.25),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            var(--morado),
            var(--morado-oscuro)
        );

    color:var(--blanco);

    text-align:center;

    box-shadow:var(--sombra-media);

}


.ubicacion-tarjeta h3{

    margin-top:20px;

    color:var(--amarillo);

    font-size:28px;

}


.ubicacion-tarjeta > p{

    margin-top:7px;

    font-size:16px;

    font-weight:700;

}


.ubicacion-tarjeta small{

    display:block;

    margin:
        8px
        0
        21px;

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

    font-size:12px;

}


.ubicacion-tarjeta > a{

    padding:
        12px
        19px;

    border-radius:50px;

    background:var(--amarillo);

    color:var(--morado-oscuro);

    font-size:13px;

    font-weight:800;

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

}


.ubicacion-tarjeta > a:hover{

    background:var(--amarillo-oscuro);

    transform:
        translateY(-2px);

}


/* =========================================================
   OPINIONES
========================================================= */

.opiniones{

    padding:
        115px
        35px;

    background:var(--fondo);

}


.opiniones-grid{

    width:100%;

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:22px;

}


.opinion{

    min-width:0;

    padding:28px;

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

    border-radius:22px;

    background:var(--blanco);

    box-shadow:var(--sombra-suave);

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

}


.opinion:hover{

    transform:
        translateY(-5px);

    box-shadow:var(--sombra-media);

}


.estrellas{

    margin-bottom:17px;

    color:#f4b400;

    font-size:19px;

    letter-spacing:3px;

}


.opinion > p{

    min-height:90px;

    color:var(--gris);

    font-size:13px;

    line-height:1.72;

}


.cliente-opinion{

    margin-top:21px;

    display:flex;

    align-items:center;

    gap:12px;

}


.cliente-opinion > span{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--morado);

    color:var(--blanco);

    font-weight:800;

}


.cliente-opinion strong{

    display:block;

    margin-bottom:3px;

    color:var(--morado-oscuro);

    font-size:13px;

}


.cliente-opinion small{

    color:var(--gris);

    font-size:11px;

}


/* =========================================================
   CONTACTO
========================================================= */

.contacto{

    padding:
        88px
        35px;

    background:

        radial-gradient(
            circle at 90% 20%,
            rgba(255,201,60,.24),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            var(--morado),
            var(--morado-oscuro)
        );

}


.contacto-contenido{

    width:100%;

    max-width:1250px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:42px;

}


.contacto h2{

    margin:
        12px
        0;

    color:var(--blanco);

    font-size:
        clamp(
            36px,
            4.8vw,
            50px
        );

    line-height:1.1;

}


.contacto span{

    display:block;

    max-width:700px;

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

    font-size:14px;

    line-height:1.7;

}


/* =========================================================
   RESPONSIVE DE ESTA PARTE
========================================================= */

@media(max-width:1050px){

    .pasos-grid{

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

    }


    .ubicacion-contenido{

        grid-template-columns:1fr;

    }


    .ubicacion-tarjeta{

        width:min(100%,620px);

        margin:auto;

    }


    .opiniones-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:700px){

    .como-pedir,
    .ubicacion,
    .opiniones{

        padding:
            88px
            18px;

    }


    .pasos-grid{

        grid-template-columns:1fr;

    }


    .ubicacion-tarjeta{

        min-height:auto;

        padding:
            32px
            19px;

    }


    .contacto{

        padding:
            68px
            18px;

    }


    .contacto-contenido{

        align-items:stretch;

        flex-direction:column;

        text-align:center;

    }


    .contacto-contenido .boton{

        width:100%;

    }

}/* =========================================================
   MODALES
========================================================= */

.modal{

    position:fixed;

    inset:0;

    z-index:5000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
        rgba(20,8,28,.78);

    backdrop-filter:
        blur(8px);

}


.modal.visible{

    display:flex;

}


.contenido-modal{

    width:min(100%,680px);

    max-height:92vh;

    position:relative;

    overflow-y:auto;

    padding:34px;

    border-radius:28px;

    background:var(--blanco);

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

    animation:
        aparecerModal
        .28s ease;

}


.contenido-modal-pago{

    width:min(100%,760px);

}


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

.cerrar-modal{

    width:44px;

    height:44px;

    position:absolute;

    top:18px;

    right:18px;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:20px;

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

}


.cerrar-modal:hover{

    background:var(--morado);

    color:var(--blanco);

    transform:rotate(4deg);

}


/* =========================================================
   ENCABEZADO DEL MODAL
========================================================= */

.encabezado-modal{

    padding-right:55px;

    display:flex;

    align-items:center;

    gap:16px;

}


.icono-modal{

    width:62px;

    height:62px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:24px;

}


.subtitulo-modal{

    margin-bottom:5px;

    color:var(--morado);

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.encabezado-modal h2{

    color:var(--morado-oscuro);

    font-size:28px;

    line-height:1.25;

}


.precio-modal{

    display:block;

    margin-top:7px;

    color:var(--morado);

    font-size:21px;

    font-weight:800;

}


.descripcion-modal-pago{

    margin-top:6px;

    color:var(--gris);

    font-size:13px;

    line-height:1.55;

}


/* =========================================================
   BLOQUES DE OPCIONES
========================================================= */

.bloque-opciones{

    margin-top:26px;

    padding-top:24px;

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

}


.titulo-opciones{

    margin-bottom:15px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:14px;

}


.titulo-opciones h3,
.bloque-opciones > h3{

    color:var(--morado-oscuro);

    font-size:18px;

}


.titulo-opciones p{

    margin-top:5px;

    color:var(--gris);

    font-size:13px;

    line-height:1.5;

}


.etiqueta-obligatoria,
.etiqueta-opcional{

    flex-shrink:0;

    padding:
        6px
        10px;

    border-radius:40px;

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

}


.etiqueta-obligatoria{

    background:#fff0f0;

    color:var(--rojo);

}


.etiqueta-opcional{

    background:#f2edf5;

    color:#736b77;

}


/* =========================================================
   SABORES Y PRESAS
========================================================= */

.opciones-grid{

    display:grid;

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

    gap:10px;

}


.opcion-seleccion{

    min-height:50px;

    padding:
        13px
        14px;

    border:
        2px solid
        var(--borde);

    border-radius:14px;

    background:var(--blanco);

    color:var(--negro);

    font-weight:700;

    text-align:left;

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

}


.opcion-seleccion:hover{

    border-color:var(--morado);

    background:#fcf9fd;

    transform:translateY(-1px);

}


.opcion-seleccion.seleccionada{

    border-color:var(--morado);

    background:var(--amarillo);

    color:var(--morado-oscuro);

}


/* =========================================================
   EXTRAS
========================================================= */

.extras-lista{

    display:grid;

    gap:10px;

}


.extra-opcion{

    min-height:54px;

    padding:
        13px
        15px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

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

    border-radius:14px;

    background:var(--blanco);

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

}


.extra-opcion:hover{

    border-color:var(--morado);

}


.extra-opcion.seleccionada{

    border-color:var(--morado);

    background:#fcf8fe;

}


.extra-opcion span{

    display:flex;

    align-items:center;

    gap:8px;

}


.extra-opcion input{

    accent-color:var(--morado);

}


.extra-opcion strong{

    color:var(--morado);

    font-size:13px;

}


/* =========================================================
   OBSERVACIONES
========================================================= */

.contenedor-observaciones{

    position:relative;

}


textarea{

    width:100%;

    min-height:110px;

    padding:
        14px
        15px;

    resize:vertical;

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

    border-radius:14px;

    outline:none;

    background:var(--blanco);

    color:var(--negro);

    line-height:1.55;

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

}


textarea:focus{

    border-color:var(--morado);

    box-shadow:
        0 0 0 4px
        rgba(75,24,110,.08);

}


.contador-texto{

    display:block;

    margin-top:7px;

    color:var(--gris);

    font-size:12px;

    text-align:right;

}


/* =========================================================
   MENSAJES DE ERROR
========================================================= */

.mensaje-error{

    display:none;

    margin-top:10px;

    color:var(--rojo);

    font-size:13px;

    font-weight:700;

}


.mensaje-error.visible{

    display:block;

}


/* =========================================================
   PIE DEL MODAL DE PRODUCTO
========================================================= */

.pie-modal-producto{

    margin-top:28px;

    padding-top:24px;

    display:grid;

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

    align-items:end;

    gap:15px;

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

}


.selector-cantidad{

    display:grid;

    gap:7px;

}


.selector-cantidad > span{

    color:var(--gris);

    font-size:12px;

    font-weight:700;

}


.control-cantidad{

    display:flex;

    align-items:center;

    overflow:hidden;

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

    border-radius:14px;

}


.control-cantidad button{

    width:46px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--morado-claro);

    color:var(--morado);

    transition:
        background .22s ease,
        color .22s ease;

}


.control-cantidad button:hover{

    background:var(--morado);

    color:var(--blanco);

}


.control-cantidad strong{

    min-width:46px;

    text-align:center;

}


/* =========================================================
   BOTÓN AGREGAR AL PEDIDO
========================================================= */

.boton-agregar-modal{

    min-height:54px;

    padding:
        12px
        18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-radius:14px;

    background:var(--amarillo);

    color:var(--morado-oscuro);

    font-weight:800;

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

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

}


.boton-agregar-modal:hover{

    background:var(--amarillo-oscuro);

    transform:translateY(-2px);

    box-shadow:
        0 16px 30px
        rgba(255,201,60,.28);

}


.boton-agregar-modal > span{

    display:flex;

    align-items:center;

    gap:9px;

}


/* =========================================================
   CAMPOS DEL MODAL DE PAGO
========================================================= */

.grupo-campos{

    display:grid;

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

    gap:13px;

}


.grupo-campo{

    display:grid;

    gap:8px;

}


.grupo-campo > span{

    color:var(--morado-oscuro);

    font-size:12px;

    font-weight:700;

}


.campo-con-icono{

    position:relative;

}


.campo-con-icono > i{

    position:absolute;

    left:15px;

    top:50%;

    z-index:2;

    color:var(--morado);

    transform:translateY(-50%);

}


.campo{

    width:100%;

    padding:
        14px
        15px;

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

    border-radius:14px;

    outline:none;

    background:var(--blanco);

    color:var(--negro);

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

}


.campo-con-icono .campo{

    padding-left:44px;

}


.campo:focus{

    border-color:var(--morado);

    box-shadow:
        0 0 0 4px
        rgba(75,24,110,.08);

}


.mensaje-horario{

    margin-top:9px;

    padding:
        12px
        14px;

    border-radius:12px;

    background:#f8f4fa;

    color:var(--gris);

    font-size:12px;

    line-height:1.5;

}


/* =========================================================
   RESUMEN DE RETIRO
========================================================= */

.resumen-retiro{

    margin-top:24px;

    padding:17px;

    display:flex;

    align-items:flex-start;

    gap:14px;

    border-radius:16px;

    background:#f5eff8;

}


.icono-resumen-retiro{

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:var(--blanco);

    color:var(--morado);

    font-size:20px;

}


.resumen-retiro strong{

    display:block;

    margin-bottom:5px;

    color:var(--morado-oscuro);

}


.resumen-retiro p{

    color:var(--gris);

    line-height:1.5;

}


.resumen-retiro small{

    display:block;

    margin-top:5px;

    color:#8c838f;

    line-height:1.5;

}


/* =========================================================
   ANIMACIÓN DEL MODAL
========================================================= */

@keyframes aparecerModal{

    from{

        opacity:0;

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

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* =========================================================
   RESPONSIVE DEL MODAL
========================================================= */

@media(max-width:700px){

    .modal{

        padding:8px;

        align-items:flex-end;

    }


    .contenido-modal{

        width:100%;

        max-height:95vh;

        padding:
            28px
            18px
            22px;

        border-radius:
            24px
            24px
            8px
            8px;

    }


    .encabezado-modal h2{

        font-size:23px;

    }


    .opciones-grid{

        grid-template-columns:1fr;

    }


    .pie-modal-producto{

        grid-template-columns:1fr;

    }


    .grupo-campos{

        grid-template-columns:1fr;

    }

}/* =========================================================
   CARRITO LATERAL
========================================================= */

.fondo-carrito{

    position:fixed;

    inset:0;

    z-index:3990;

    visibility:hidden;

    background:
        rgba(20,8,28,.60);

    opacity:0;

    backdrop-filter:
        blur(4px);

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

}


.fondo-carrito.visible{

    visibility:visible;

    opacity:1;

}


.carrito-lateral{

    width:min(430px,100%);

    height:100vh;

    position:fixed;

    top:0;

    right:0;

    z-index:4000;

    display:flex;

    flex-direction:column;

    background:var(--blanco);

    box-shadow:
        -20px 0 55px
        rgba(20,8,28,.22);

    transform:
        translateX(105%);

    transition:
        transform .35s
        cubic-bezier(.22,.8,.35,1);

}


.carrito-lateral.visible{

    transform:
        translateX(0);

}


/* =========================================================
   CABECERA DEL CARRITO
========================================================= */

.encabezado-carrito{

    padding:
        22px
        21px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-bottom:
        1px solid
        var(--borde);

}


.titulo-carrito{

    display:flex;

    align-items:center;

    gap:13px;

}


.icono-carrito{

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:19px;

}


.titulo-carrito h2{

    color:var(--morado-oscuro);

    font-size:21px;

}


.titulo-carrito p{

    margin-top:3px;

    color:var(--gris);

    font-size:11px;

}


.cerrar-carrito{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f5f1f7;

    color:var(--morado);

    font-size:18px;

    transition:
        background .22s ease,
        color .22s ease;

}


.cerrar-carrito:hover{

    background:var(--morado);

    color:var(--blanco);

}


/* =========================================================
   CUERPO DEL CARRITO
========================================================= */

.cuerpo-carrito{

    min-height:0;

    flex:1;

    overflow-y:auto;

    padding:
        20px;

}


.lista-carrito{

    display:grid;

    gap:13px;

}


/* =========================================================
   CARRITO VACÍO
========================================================= */

.carrito-vacio{

    min-height:390px;

    padding:30px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}


.carrito-vacio > span{

    width:88px;

    height:88px;

    margin-bottom:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:28px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:34px;

}


.carrito-vacio h3{

    margin-bottom:8px;

    color:var(--morado-oscuro);

    font-size:20px;

}


.carrito-vacio p{

    max-width:280px;

    color:var(--gris);

    font-size:13px;

    line-height:1.65;

}


/* =========================================================
   PRODUCTO DENTRO DEL CARRITO
========================================================= */

.item-carrito{

    padding:16px;

    position:relative;

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

    border-radius:17px;

    background:#ffffff;

}


.item-carrito-superior{

    padding-right:34px;

}


.item-carrito h3{

    margin-bottom:4px;

    color:var(--morado-oscuro);

    font-size:14px;

    line-height:1.4;

}


.item-carrito-precio{

    color:var(--morado);

    font-size:14px;

    font-weight:800;

}


.detalles-item-carrito{

    margin-top:10px;

    display:grid;

    gap:4px;

    color:var(--gris);

    font-size:11px;

    line-height:1.5;

}


.eliminar-item-carrito{

    width:31px;

    height:31px;

    position:absolute;

    top:12px;

    right:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff0f0;

    color:var(--rojo);

    font-size:12px;

    transition:
        background .2s ease,
        color .2s ease;

}


.eliminar-item-carrito:hover{

    background:var(--rojo);

    color:#ffffff;

}


/* =========================================================
   CANTIDAD DEL PRODUCTO EN CARRITO
========================================================= */

.item-carrito-inferior{

    margin-top:14px;

    padding-top:13px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    border-top:
        1px solid
        #f0ebf2;

}


.cantidad-carrito{

    display:flex;

    align-items:center;

    overflow:hidden;

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

    border-radius:10px;

}


.cantidad-carrito button{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f6f1f8;

    color:var(--morado);

    font-weight:800;

}


.cantidad-carrito strong{

    min-width:34px;

    text-align:center;

    font-size:12px;

}


.total-item-carrito{

    color:var(--morado-oscuro);

    font-size:15px;

    font-weight:800;

}


/* =========================================================
   PIE DEL CARRITO
========================================================= */

.pie-carrito{

    padding:
        19px
        20px
        22px;

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

    background:#ffffff;

    box-shadow:
        0 -12px 30px
        rgba(30,10,40,.05);

}


.resumen-carrito{

    margin-bottom:15px;

    display:grid;

    gap:8px;

}


.fila-resumen-carrito{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    color:var(--gris);

    font-size:12px;

}


.fila-resumen-carrito.total{

    margin-top:5px;

    padding-top:12px;

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

    color:var(--morado-oscuro);

    font-size:17px;

    font-weight:800;

}


.fila-resumen-carrito.total strong{

    color:var(--morado);

    font-size:22px;

}


/* =========================================================
   BOTÓN CONTINUAR PEDIDO
========================================================= */

.boton-continuar-pedido{

    width:100%;

    min-height:55px;

    padding:
        13px
        18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:15px;

    background:var(--amarillo);

    color:var(--morado-oscuro);

    font-weight:800;

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

    transition:
        transform .22s ease,
        background .22s ease;

}


.boton-continuar-pedido:hover{

    background:var(--amarillo-oscuro);

    transform:
        translateY(-2px);

}


.boton-continuar-pedido:disabled{

    cursor:not-allowed;

    opacity:.5;

    transform:none;

}


/* =========================================================
   MÉTODOS DE PAGO
========================================================= */

.metodos-pago{

    margin-top:15px;

    display:grid;

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

    gap:11px;

}


.metodo-pago{

    min-height:74px;

    padding:
        13px;

    display:flex;

    align-items:center;

    gap:11px;

    border:
        2px solid
        var(--borde);

    border-radius:15px;

    background:#ffffff;

    text-align:left;

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

}


.metodo-pago:hover{

    border-color:var(--morado);

    transform:
        translateY(-1px);

}


.metodo-pago.seleccionado,
.metodo-pago.seleccionada{

    border-color:var(--morado);

    background:#faf6fc;

}


.metodo-pago > span{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:17px;

}


.metodo-pago strong{

    display:block;

    color:var(--morado-oscuro);

    font-size:12px;

}


.metodo-pago small{

    display:block;

    margin-top:3px;

    color:var(--gris);

    font-size:10px;

}


/* =========================================================
   INFORMACIÓN DE TRANSFERENCIA
========================================================= */

.datos-transferencia{

    margin-top:17px;

    padding:18px;

    border:
        1px solid
        #e5d9ea;

    border-radius:17px;

    background:#faf6fc;

}


.datos-transferencia h3{

    margin-bottom:13px;

    color:var(--morado-oscuro);

    font-size:16px;

}


.fila-dato-transferencia{

    padding:
        9px
        0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-bottom:
        1px solid
        #eae1ee;

}


.fila-dato-transferencia:last-child{

    border-bottom:none;

}


.fila-dato-transferencia span{

    color:var(--gris);

    font-size:11px;

}


.fila-dato-transferencia strong{

    color:var(--morado-oscuro);

    font-size:12px;

    text-align:right;

}


/* =========================================================
   QR
========================================================= */

.contenedor-qr{

    margin-top:17px;

    padding:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

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

    border-radius:18px;

    background:#ffffff;

    text-align:center;

}


.contenedor-qr img{

    width:190px;

    height:190px;

    max-width:100%;

    padding:7px;

    object-fit:contain;

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

    border-radius:14px;

    background:#ffffff;

}


.contenedor-qr strong{

    margin-top:13px;

    color:var(--morado-oscuro);

    font-size:13px;

}


.contenedor-qr p{

    margin-top:5px;

    color:var(--gris);

    font-size:11px;

    line-height:1.55;

}


/* =========================================================
   BOTÓN FINAL WHATSAPP
========================================================= */

.boton-final-whatsapp{

    width:100%;

    min-height:57px;

    margin-top:21px;

    padding:
        13px
        18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:15px;

    background:var(--verde);

    color:#ffffff;

    font-size:14px;

    font-weight:800;

    box-shadow:
        0 13px 28px
        rgba(37,211,102,.22);

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

}


.boton-final-whatsapp:hover{

    transform:
        translateY(-2px);

    filter:
        brightness(.95);

}


/* =========================================================
   TOAST / MENSAJE FLOTANTE
========================================================= */

.toast{

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

    position:fixed;

    left:50%;

    bottom:28px;

    z-index:9000;

    visibility:hidden;

    padding:
        13px
        19px;

    display:flex;

    align-items:center;

    gap:10px;

    border-radius:50px;

    background:var(--morado-oscuro);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    box-shadow:
        0 15px 38px
        rgba(0,0,0,.25);

    opacity:0;

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

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

}


.toast.visible{

    visibility:visible;

    opacity:1;

    transform:
        translate(-50%,0);

}


.toast i{

    color:var(--amarillo);

}


/* =========================================================
   ANIMACIONES AL HACER SCROLL
========================================================= */

.revelar{

    opacity:0;

    transform:
        translateY(24px);

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

}


.revelar.visible{

    opacity:1;

    transform:none;

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#f3eff5;

}


::-webkit-scrollbar-thumb{

    border:
        2px solid
        #f3eff5;

    border-radius:20px;

    background:#bba9c5;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--morado);

}


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

.footer{

    padding:
        58px
        35px
        25px;

    background:#1d0829;

    color:#ffffff;

}


.footer-contenido{

    width:100%;

    max-width:1280px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1.3fr
        .8fr
        .8fr;

    gap:50px;

}


.footer-marca{

    max-width:430px;

}


.footer-logo{

    display:flex;

    align-items:center;

    gap:13px;

}


.footer-logo .logo-circular{

    width:62px;

    height:62px;

    padding:4px;

    border:
        3px solid
        var(--amarillo);

}


.footer-logo strong{

    color:var(--amarillo);

    font-size:18px;

}


.footer-marca p{

    margin-top:17px;

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

    font-size:12px;

    line-height:1.7;

}


.footer h3{

    margin-bottom:15px;

    color:var(--amarillo);

    font-size:15px;

}


.footer-enlaces{

    display:grid;

    gap:9px;

}


.footer-enlaces a{

    width:max-content;

    max-width:100%;

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

    font-size:12px;

    transition:
        color .2s ease;

}


.footer-enlaces a:hover{

    color:var(--amarillo);

}


.footer-inferior{

    width:100%;

    max-width:1280px;

    margin:
        38px
        auto
        0;

    padding-top:21px;

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

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

    font-size:11px;

    text-align:center;

}


/* =========================================================
   RESPONSIVE CARRITO / FOOTER
========================================================= */

@media(max-width:800px){

    .footer-contenido{

        grid-template-columns:1fr;

        gap:32px;

    }

}


@media(max-width:600px){

    .carrito-lateral{

        width:100%;

    }


    .cuerpo-carrito{

        padding:15px;

    }


    .pie-carrito{

        padding:
            16px
            15px
            20px;

    }


    .metodos-pago{

        grid-template-columns:1fr;

    }


    .footer{

        padding:
            50px
            18px
            22px;

    }


    .toast{

        width:
            calc(100% - 28px);

        justify-content:center;

        border-radius:15px;

        text-align:center;

    }

}/* =========================================================
   AJUSTES FINALES GENERALES
========================================================= */

button,
a{

    -webkit-tap-highlight-color:transparent;

}


button:active{

    transform:scale(.98);

}


/* =========================================================
   CORRECCIONES DEL LOGO CIRCULAR
========================================================= */

.logo-circular{

    position:relative;

    flex-shrink:0;

}


.logo-circular img{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    object-position:center;

}


.logo-circular-pequeno img{

    padding:4px;

}


.logo-circular-grande img{

    padding:4px;

}


.logo-circular-historia img{

    padding:0px;

}


.logo-circular-ubicacion img{

    padding:0px;

}


/* =========================================================
   COMPUTADORAS PEQUEÑAS
========================================================= */

@media(max-width:1180px){

    .encabezado-contenido{

        padding:
            8px
            24px;

        gap:20px;

    }


    .nombre-marca strong{

        font-size:17px;

    }


    .navegacion{

        gap:18px;

    }


    .navegacion a{

        font-size:12px;

    }


    .portada{

        padding:
            80px
            28px
            105px;

    }


    .portada-contenido{

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

        gap:45px;

    }


    .circulo-exterior-logo{

        width:385px;

        height:385px;

    }


    .logo-circular-grande{

        width:290px;

        height:290px;

    }

}


/* =========================================================
   TABLETS
========================================================= */

@media(max-width:1000px){

    .encabezado-contenido{

        min-height:76px;

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

    }


    .navegacion{

        width:100%;

        max-height:0;

        padding:
            0
            22px;

        position:absolute;

        top:76px;

        left:0;

        overflow:hidden;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:8px;

        background:var(--blanco);

        box-shadow:
            0 18px 35px
            rgba(0,0,0,.12);

        transition:
            max-height .30s ease,
            padding .30s ease;

    }


    .navegacion.abierta{

        max-height:470px;

        padding:
            18px
            22px
            24px;

    }


    .navegacion a{

        width:100%;

        padding:
            13px
            14px;

        border-radius:12px;

        background:#f8f5fa;

        color:var(--morado-oscuro);

        font-size:14px;

    }


    .navegacion a::after{

        display:none;

    }


    .navegacion a:hover{

        background:var(--amarillo);

        color:var(--morado-oscuro);

    }


    .boton-menu-movil{

        display:flex;

    }


    .logo-circular-pequeno{

        width:56px;

        height:56px;

        border-width:3px;

    }


    .nombre-marca strong{

        font-size:16px;

    }


    .portada{

        padding:
            65px
            24px
            100px;

    }


    .portada-contenido{

        grid-template-columns:1fr;

        gap:52px;

        text-align:center;

    }


    .estado-negocio{

        margin-left:auto;

        margin-right:auto;

    }


    .portada-texto h1{

        margin-left:auto;

        margin-right:auto;

    }


    .descripcion-portada{

        margin-left:auto;

        margin-right:auto;

    }


    .botones-portada{

        justify-content:center;

    }


    .datos-portada{

        margin-left:auto;

        margin-right:auto;

    }


    .portada-logo{

        justify-self:center;

    }


    .circulo-exterior-logo{

        width:400px;

        height:400px;

    }


    .logo-circular-grande{

        width:305px;

        height:305px;

    }


    .historia-contenido{

        grid-template-columns:1fr;

    }


    .ubicacion-contenido{

        grid-template-columns:1fr;

    }

}


/* =========================================================
   CELULARES
========================================================= */

@media(max-width:700px){

    html{

        scroll-padding-top:82px;

    }


    .encabezado-contenido{

        min-height:70px;

        padding:
            7px
            14px;

        gap:8px;

    }


    .marca{

        min-width:0;

        gap:9px;

    }


    .logo-circular-pequeno{

        width:48px;

        height:48px;

        border-width:3px;

    }


    .nombre-marca{

        min-width:0;

    }


    .nombre-marca strong{

        max-width:135px;

        overflow:hidden;

        font-size:13px;

        line-height:1.2;

        text-overflow:ellipsis;

        white-space:nowrap;

    }


    .nombre-marca small{

        font-size:9px;

    }


    .acciones-encabezado{

        gap:7px;

    }


    .boton-carrito{

        width:43px;

        height:43px;

        min-height:43px;

        padding:0;

        position:relative;

        border-radius:50%;

    }


    .boton-carrito span{

        display:none;

    }


    .boton-carrito strong{

        min-width:20px;

        width:auto;

        height:20px;

        padding:
            0
            5px;

        position:absolute;

        top:-4px;

        right:-4px;

        border:
            2px solid
            var(--blanco);

        font-size:9px;

    }


    .boton-menu-movil{

        width:43px;

        height:43px;

    }


    .navegacion{

        top:70px;

    }


    .portada{

        padding:
            47px
            18px
            78px;

    }


    .portada-contenido{

        gap:40px;

    }


    .estado-negocio{

        border-radius:18px;

    }


    .portada-texto h1{

        font-size:
            clamp(
                39px,
                12vw,
                53px
            );

        line-height:1.02;

        letter-spacing:-1px;

    }


    .descripcion-portada{

        font-size:15px;

        line-height:1.7;

    }


    .botones-portada{

        width:100%;

        flex-direction:column;

    }


    .botones-portada .boton{

        width:100%;

    }


    .datos-portada{

        width:100%;

        grid-template-columns:1fr;

    }


    .circulo-exterior-logo{

        width:300px;

        height:300px;

    }


    .logo-circular-grande{

        width:225px;

        height:225px;

        padding:10px;

        border-width:7px;

    }


    .tarjeta-experiencia{

        width:100%;

        max-width:330px;

        padding:14px;

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

    }


    .tarjeta-experiencia strong{

        min-width:75px;

        min-height:66px;

        font-size:25px;

    }


    .tarjeta-experiencia span{

        font-size:12px;

    }


    .aviso-horario{

        padding:
            18px
            17px;

    }


    .aviso-horario-contenido{

        align-items:flex-start;

    }


    .aviso-horario-contenido > span{

        width:48px;

        height:48px;

        font-size:19px;

    }


    .circulo-historia{

        width:290px;

        height:290px;

    }


    .logo-circular-historia{

        width:202px;

        height:202px;

        border-width:7px;

    }


    .historia-estadisticas{

        width:100%;

        grid-template-columns:1fr;

    }


    .ubicacion-tarjeta{

        padding:
            34px
            19px;

    }


    .logo-circular-ubicacion{

        width:145px;

        height:145px;

    }


    .contacto-contenido{

        align-items:stretch;

    }


    .contacto-contenido .boton{

        width:100%;

    }


    .cabecera-panel,
    .productos-pedido,
    .pie-pedido{

        padding-left:17px;

        padding-right:17px;

    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media(max-width:390px){

    .nombre-marca{

        display:none;

    }


    .portada-texto h1{

        font-size:36px;

    }


    .circulo-exterior-logo{

        width:262px;

        height:262px;

    }


    .logo-circular-grande{

        width:192px;

        height:192px;

    }


    .tarjeta-experiencia{

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

    }


    .tarjeta-experiencia strong{

        min-width:66px;

        min-height:60px;

        font-size:21px;

    }


    .circulo-historia{

        width:252px;

        height:252px;

    }


    .logo-circular-historia{

        width:177px;

        height:177px;

    }


    .contenido-modal{

        padding:
            27px
            15px
            20px;

    }


    .encabezado-modal{

        align-items:flex-start;

    }


    .icono-modal{

        width:52px;

        height:52px;

    }


    .encabezado-modal h2{

        font-size:21px;

    }

}


/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */

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

    html{

        scroll-behavior:auto;

    }


    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }


    .revelar{

        opacity:1;

        transform:none;

    }

}/* =========================================================
   CORRECCIÓN DEFINITIVA DEL CARRITO LATERAL
========================================================= */

/* Fondo oscuro detrás del carrito */

.fondo-panel{

    position:fixed;

    inset:0;

    z-index:3990;

    visibility:hidden;

    opacity:0;

    background:
        rgba(20,8,28,.60);

    backdrop-filter:
        blur(4px);

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

}


.fondo-panel.visible{

    visibility:visible;

    opacity:1;

}


/* Panel que aparece desde la derecha */

.panel-pedido{

    width:min(450px,100%);

    height:100vh;

    position:fixed;

    top:0;

    right:-480px;

    z-index:4000;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:var(--blanco);

    box-shadow:
        -20px 0 55px
        rgba(20,8,28,.22);

    transition:
        right .35s ease;

}


/* Esta clase la agrega JavaScript al abrirlo */

.panel-pedido.abierto{

    right:0;

}


/* =========================================================
   CABECERA DEL CARRITO
========================================================= */

.cabecera-panel{

    padding:
        22px
        23px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-bottom:
        1px solid
        var(--borde);

    background:var(--blanco);

}


.cabecera-panel h2{

    margin-top:3px;

    color:var(--morado-oscuro);

    font-size:25px;

    line-height:1.2;

}


.cabecera-panel > button{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:19px;

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

}


.cabecera-panel > button:hover{

    background:var(--morado);

    color:var(--blanco);

    transform:rotate(5deg);

}


/* =========================================================
   ÁREA DE PRODUCTOS
========================================================= */

.productos-pedido{

    min-height:0;

    flex:1;

    padding:
        20px
        22px;

    overflow-y:auto;

    background:#fcfbfd;

}


/* =========================================================
   CARRITO VACÍO
========================================================= */

.pedido-vacio{

    min-height:390px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:25px;

    text-align:center;

}


.icono-carrito-vacio{

    width:88px;

    height:88px;

    margin-bottom:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:28px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:35px;

}


.pedido-vacio h3{

    margin-bottom:8px;

    color:var(--morado-oscuro);

    font-size:20px;

}


.pedido-vacio p{

    max-width:280px;

    color:var(--gris);

    font-size:13px;

    line-height:1.65;

}


.boton-explorar-menu{

    margin-top:19px;

    padding:
        11px
        18px;

    border-radius:13px;

    background:var(--amarillo);

    color:var(--morado-oscuro);

    font-size:12px;

    font-weight:800;

}


/* =========================================================
   TARJETA DE PRODUCTO EN EL CARRITO
========================================================= */

.item-pedido{

    margin-bottom:13px;

    padding:17px;

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

    border-radius:18px;

    background:var(--blanco);

    box-shadow:
        0 8px 23px
        rgba(31,10,43,.055);

}


.item-pedido-superior{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:15px;

}


.item-pedido-superior > div{

    min-width:0;

    flex:1;

}


.item-pedido h4{

    margin-bottom:7px;

    color:var(--morado-oscuro);

    font-size:15px;

    line-height:1.4;

}


.detalles-item-pedido{

    display:grid;

    gap:4px;

}


.detalles-item-pedido span{

    display:block;

    color:var(--gris);

    font-size:11px;

    line-height:1.5;

}


.detalles-item-pedido strong{

    color:var(--morado-oscuro);

}


/* =========================================================
   BOTÓN ELIMINAR
========================================================= */

.boton-eliminar-item{

    width:34px;

    height:34px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff0f0;

    color:var(--rojo);

    font-size:13px;

    transition:
        background .22s ease,
        color .22s ease;

}


.boton-eliminar-item:hover{

    background:var(--rojo);

    color:var(--blanco);

}


/* =========================================================
   PARTE INFERIOR DEL PRODUCTO
========================================================= */

.item-pedido-inferior{

    margin-top:14px;

    padding-top:13px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-top:
        1px solid
        #f0ebf2;

}


/* =========================================================
   CONTROL DE CANTIDAD
========================================================= */

.control-cantidad-carrito{

    display:flex;

    align-items:center;

    overflow:hidden;

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

    border-radius:11px;

}


.control-cantidad-carrito button{

    width:36px;

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:12px;

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

}


.control-cantidad-carrito button:hover{

    background:var(--morado);

    color:var(--blanco);

}


.control-cantidad-carrito strong{

    min-width:38px;

    text-align:center;

    color:var(--morado-oscuro);

    font-size:12px;

}


.precio-item-carrito{

    color:var(--morado);

    font-size:17px;

    font-weight:800;

}


/* =========================================================
   PIE DEL CARRITO
========================================================= */

.pie-pedido{

    padding:
        19px
        22px
        22px;

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

    background:var(--blanco);

    box-shadow:
        0 -10px 28px
        rgba(31,10,43,.05);

}


.resumen-total{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.resumen-total span{

    color:var(--gris);

    font-size:13px;

}


.resumen-total strong{

    color:var(--morado);

    font-size:25px;

    font-weight:800;

}


.nota-total-pedido{

    margin:
        7px
        0
        15px;

    color:#8b838f;

    font-size:10px;

    line-height:1.5;

}


/* =========================================================
   BOTONES DEL PIE
========================================================= */

.boton-vaciar,
.boton-continuar{

    width:100%;

    min-height:50px;

    padding:
        12px
        15px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:13px;

    font-weight:800;

    transition:
        background .22s ease,
        transform .22s ease;

}


.boton-vaciar{

    margin-bottom:10px;

    border:
        1px solid
        #eadfe3;

    background:var(--blanco);

    color:var(--rojo);

}


.boton-vaciar:hover{

    background:#fff2f2;

}


.boton-continuar{

    background:var(--morado);

    color:var(--blanco);

}


.boton-continuar:hover{

    background:var(--morado-oscuro);

    transform:translateY(-2px);

}


/* =========================================================
   EVITAR QUE EL CARRITO APAREZCA DENTRO DE LA PÁGINA
========================================================= */

.panel-pedido:not(.abierto){

    pointer-events:none;

}


.panel-pedido.abierto{

    pointer-events:auto;

}


@media(max-width:600px){

    .panel-pedido{
        width:100%;
        right:-105%;

        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
    }

    .panel-pedido.abierto{
        right:0;
    }

    .cabecera-panel{
        padding:19px 17px;
    }

    .productos-pedido{
        padding:16px 15px;

        overflow:visible;
        height:auto;
        max-height:none;
        flex:none;
    }

    .pie-pedido{
    padding:
        16px
        15px
        calc(90px + env(safe-area-inset-bottom));
}

}

/* =========================================================
   MODAL DE PAGO
========================================================= */

#modalPago{

    position:fixed;

    inset:0;

    z-index:7000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(20,8,28,.78);

    backdrop-filter:blur(8px);

}


#modalPago.visible{

    display:flex;

}


#modalPago .contenido-modal-pago{

    width:min(760px,100%);

    max-height:92vh;

    position:relative;

    overflow-y:auto;

    padding:34px;

    border-radius:28px;

    background:#ffffff;

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

}


/* =========================================================
   MÉTODOS DE PAGO
========================================================= */

.metodos-pago{

    display:grid;

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

    gap:12px;

}


.metodo-pago{

    min-height:120px;

    padding:15px;

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:2px solid var(--borde);

    border-radius:17px;

    background:#ffffff;

    color:var(--negro);

    text-align:center;

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

}


.metodo-pago:hover{

    border-color:var(--morado);

    transform:translateY(-2px);

}


.metodo-pago.seleccionado{

    border-color:var(--morado);

    background:#faf6fc;

}


.icono-metodo-pago{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:var(--morado-claro);

    color:var(--morado);

    font-size:20px;

}


.metodo-pago div{

    display:flex;

    flex-direction:column;

}


.metodo-pago strong{

    color:var(--morado-oscuro);

    font-size:13px;

}


.metodo-pago small{

    margin-top:4px;

    color:var(--gris);

    font-size:10px;

}


.check-metodo{

    position:absolute;

    top:11px;

    right:11px;

    color:#d5cdd9;

}


.metodo-pago.seleccionado .check-metodo{

    color:var(--morado);

    font-weight:900;

}


/* =========================================================
   ZONA PEYGO Y DEUNA
========================================================= */

.zona-transferencia{

    display:none;

    margin-top:26px;

    padding-top:24px;

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

}


.zona-transferencia.visible{

    display:block;

}


.contenedor-qr{

    display:grid;

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

    gap:16px;

}


.tarjeta-qr{

    min-width:0;

    padding:18px;

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

    border-radius:19px;

    background:#ffffff;

    box-shadow:
        0 10px 26px
        rgba(31,10,43,.06);

}


.encabezado-tarjeta-qr{

    display:flex;

    align-items:center;

    gap:12px;

}


.icono-peygo,
.icono-deuna{

    width:47px;

    height:47px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    color:#ffffff;

    font-size:19px;

}


.icono-peygo{

    background:var(--morado);

}


.icono-deuna{

    background:#1ea45e;

}


.encabezado-tarjeta-qr strong{

    display:block;

    color:var(--morado-oscuro);

    font-size:15px;

}


.encabezado-tarjeta-qr small{

    color:var(--gris);

    font-size:11px;

}


/* =========================================================
   IMÁGENES QR
========================================================= */

.imagen-qr{

    width:100%;

    height:225px;

    margin:16px 0;

    padding:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

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

    border-radius:15px;

    background:#f8f6f9;

}


.imagen-qr img{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    object-position:center;

}


/* =========================================================
   BOTONES PEYGO Y DEUNA
========================================================= */

.opcion-qr{

    width:100%;

    min-height:46px;

    padding:11px 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:2px solid var(--borde);

    border-radius:13px;

    background:#ffffff;

    color:var(--morado-oscuro);

    font-size:12px;

    font-weight:800;

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

}


.opcion-qr:hover{

    border-color:var(--morado);

}


.opcion-qr.seleccionada{

    border-color:var(--morado);

    background:var(--amarillo);

    color:var(--morado-oscuro);

}


/* =========================================================
   AVISO DE PAGO Y CONFIRMACIÓN
========================================================= */

.aviso-pago-seguro{

    margin-top:17px;

    padding:17px;

    display:flex;

    align-items:flex-start;

    gap:13px;

    border:1px solid #bee7cf;

    border-radius:15px;

    background:#edf9f2;

}


.aviso-pago-seguro > span{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#ffffff;

    color:#148c50;

    font-size:19px;

}


.aviso-pago-seguro strong{

    display:block;

    margin-bottom:5px;

    color:#126b40;

}


.aviso-pago-seguro p{

    margin-top:4px;

    color:#47705d;

    font-size:12px;

    line-height:1.55;

}


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

.resumen-final-pedido{

    margin-top:25px;

    padding:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

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

    border-radius:16px;

    background:#faf8fb;

}


.resumen-final-pedido span{

    display:block;

    color:var(--morado-oscuro);

    font-size:13px;

    font-weight:800;

}


.resumen-final-pedido small{

    display:block;

    margin-top:4px;

    color:var(--gris);

    font-size:10px;

    line-height:1.45;

}


.resumen-final-pedido > strong{

    flex-shrink:0;

    color:var(--morado);

    font-size:27px;

}


/* =========================================================
   BOTÓN ENVIAR PEDIDO POR WHATSAPP
========================================================= */

.boton-enviar-whatsapp{

    width:100%;

    min-height:58px;

    margin-top:16px;

    padding:14px 19px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border:none;

    border-radius:15px;

    background:#25d366;

    color:#ffffff;

    font-size:14px;

    font-weight:800;

    box-shadow:
        0 14px 29px
        rgba(37,211,102,.24);

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

}


.boton-enviar-whatsapp > span{

    display:flex;

    align-items:center;

    gap:10px;

}


.boton-enviar-whatsapp:hover{

    transform:translateY(-2px);

    filter:brightness(.95);

}


.boton-enviar-whatsapp:disabled{

    cursor:not-allowed;

    opacity:.48;

    box-shadow:none;

    transform:none;

}


.nota-confirmacion-final{

    margin-top:11px;

    color:var(--gris);

    font-size:11px;

    line-height:1.55;

    text-align:center;

}


/* =========================================================
   WHATSAPP FLOTANTE
========================================================= */

.whatsapp-flotante{

    min-height:62px;

    position:fixed !important;

    right:24px !important;

    bottom:24px !important;

    left:auto !important;

    top:auto !important;

    z-index:6500 !important;

    padding:14px 20px;

    display:flex !important;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:50px;

    background:#25d366;

    color:#ffffff;

    font-size:15px;

    font-weight:800;

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.25);

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

}


.whatsapp-flotante:hover{

    color:#ffffff;

    transform:translateY(-5px);

    box-shadow:
        0 20px 44px
        rgba(0,0,0,.30);

}


.whatsapp-flotante i{

    font-size:30px;

}


.whatsapp-flotante strong{

    color:#ffffff;

}


/* =========================================================
   EVITAR QUE WHATSAPP APAREZCA COMO TEXTO NORMAL
========================================================= */

body > .whatsapp-flotante{

    position:fixed !important;

    margin:0 !important;

}


/* =========================================================
   CELULARES
========================================================= */

@media(max-width:700px){

    #modalPago{

        padding:8px;

        align-items:flex-end;

    }


    #modalPago .contenido-modal-pago{

        width:100%;

        max-height:95vh;

        padding:28px 18px 22px;

        border-radius:
            24px
            24px
            8px
            8px;

    }


    .metodos-pago{

        grid-template-columns:1fr;

    }


    .contenedor-qr{

        grid-template-columns:1fr;

    }


    .imagen-qr{

        height:240px;

    }


    .resumen-final-pedido{

        align-items:flex-start;

        flex-direction:column;

    }


    .whatsapp-flotante{

        width:62px;

        height:62px;

        min-height:62px;

        right:15px !important;

        bottom:15px !important;

        padding:0;

        border-radius:50%;

    }


    .whatsapp-flotante strong{

        display:none;

    }


    .whatsapp-flotante i{

        font-size:32px;

    }

}/* =========================================================
   MEJORA DEL AVISO DE HORARIO CERRADO
   PEGAR AL FINAL DE estilos.css
========================================================= */

.aviso-horario{

    display:none;

    padding:
        30px
        20px
        18px;

    border:none;

    background:transparent;

}


.aviso-horario.visible{

    display:block;

}


/* Tarjeta compacta */

.aviso-horario-contenido{

    width:min(100%,760px);

    margin:auto;

    padding:
        18px
        20px;

    display:flex;

    align-items:center;

    gap:15px;

    border:
        1px solid
        #ffd3d3;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #fff7f7,
            #fffdfd
        );

    box-shadow:
        0 14px 35px
        rgba(190,46,46,.10);

}


/* Ícono */

.aviso-horario-contenido > span{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#ffffff;

    color:#e14545;

    font-size:21px;

    box-shadow:
        0 8px 20px
        rgba(225,69,69,.12);

}


/* Texto principal */

.aviso-horario strong{

    display:block;

    margin-bottom:4px;

    color:#a52a2a;

    font-size:15px;

    line-height:1.35;

}


/* Texto secundario */

.aviso-horario p{

    margin:0;

    color:#7f5b5b;

    font-size:12px;

    line-height:1.55;

}


/* =========================================================
   SEPARACIÓN CON LAS TARJETAS DE BENEFICIOS
========================================================= */

.aviso-horario.visible + .beneficios{

    margin-top:18px;

}


/* Cuando el aviso no esté visible */

.aviso-horario:not(.visible) + .beneficios{

    margin-top:-58px;

}


/* =========================================================
   CELULARES
========================================================= */

@media(max-width:700px){

    .aviso-horario{

        padding:
            20px
            14px
            12px;

    }


    .aviso-horario-contenido{

        width:100%;

        padding:
            15px;

        align-items:flex-start;

        border-radius:16px;

    }


    .aviso-horario-contenido > span{

        width:44px;

        height:44px;

        border-radius:13px;

        font-size:18px;

    }


    .aviso-horario strong{

        font-size:14px;

    }


    .aviso-horario p{

        font-size:11px;

    }


    .aviso-horario.visible + .beneficios{

        margin-top:12px;

    }

}/* =========================================================
   POSICIÓN FINAL DEL AVISO DE HORARIO
   MITAD MORADO / MITAD BLANCO
========================================================= */

.aviso-horario{

    position:relative;

    z-index:20;

    display:none;

    padding:0 20px;

    margin-top:0;

    background:transparent;

    transform:translateY(-50%);

    margin-bottom:-35px;

}


.aviso-horario.visible{

    display:block;

}


/* Tarjeta del aviso */

.aviso-horario-contenido{

    width:min(100%,760px);

    min-height:86px;

    margin:0 auto;

    padding:16px 20px;

    display:flex;

    align-items:center;

    gap:15px;

    border:1px solid #ffd0d0;

    border-radius:18px;

    background:#fffafa;

    box-shadow:
        0 15px 38px
        rgba(70,20,50,.13);

}


/* Icono */

.aviso-horario-contenido > span{

    width:50px;

    height:50px;

    flex:0 0 50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:#ffffff;

    color:#e53d3d;

    font-size:20px;

    box-shadow:
        0 6px 18px
        rgba(220,50,50,.10);

}


/* Texto */

.aviso-horario strong{

    display:block;

    margin-bottom:4px;

    color:#a51f1f;

    font-size:15px;

    font-weight:800;

    line-height:1.3;

}


.aviso-horario p{

    margin:0;

    color:#795a5a;

    font-size:12px;

    line-height:1.5;

}


/* =========================================================
   SUBIR LAS TARJETAS QUE VIENEN DESPUÉS
========================================================= */

.aviso-horario.visible + .beneficios{

    margin-top:0 !important;

}


/* Más separación limpia después de beneficios */

.beneficios{

    position:relative;

    z-index:10;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .aviso-horario{

        padding:
            0
            18px;

        margin-bottom:-30px;

    }


    .aviso-horario-contenido{

        width:min(100%,680px);

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:700px){

    .aviso-horario{

        padding:
            0
            14px;

        transform:
            translateY(-42%);

        margin-bottom:-25px;

    }


    .aviso-horario-contenido{

        width:100%;

        min-height:auto;

        padding:
            14px
            15px;

        gap:12px;

        border-radius:16px;

    }


    .aviso-horario-contenido > span{

        width:43px;

        height:43px;

        flex-basis:43px;

        border-radius:13px;

        font-size:18px;

    }


    .aviso-horario strong{

        font-size:13px;

    }


    .aviso-horario p{

        font-size:10.5px;

        line-height:1.45;

    }


    .aviso-horario.visible + .beneficios{

        margin-top:0 !important;

    }

}/* =========================================================
   LOGO PRINCIPAL - GRANDE + EFECTO 3D
   PEGAR AL FINAL DE estilos.css
========================================================= */

.portada-logo{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:1000px;

}


/* Círculo exterior decorativo */

.circulo-exterior-logo{

    width:430px;

    height:430px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    border:

        1px solid
        rgba(255,255,255,.28);

    border-radius:50%;

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.16),
            rgba(255,255,255,.05) 45%,
            rgba(0,0,0,.08) 100%
        );

    box-shadow:

        inset 0 0 45px
        rgba(255,255,255,.05),

        0 30px 60px
        rgba(20,0,35,.20);

}


/* =========================================================
   CÍRCULO BLANCO DEL LOGO
========================================================= */

.logo-circular-grande{

    width:330px;

    height:330px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:0 !important;

    border:

        9px solid
        var(--amarillo);

    border-radius:50%;

    background:#ffffff;

    box-shadow:

        0 8px 0
        #d99c00,

        0 18px 25px
        rgba(0,0,0,.22),

        0 35px 55px
        rgba(0,0,0,.20),

        inset 0 4px 10px
        rgba(255,255,255,.90),

        inset 0 -8px 15px
        rgba(80,30,100,.08);

    transform:

        rotateX(2deg)
        rotateY(-2deg);

}


/* =========================================================
   AGRANDAR LA IMAGEN DEL LOGO
========================================================= */

.logo-circular-grande img{

    width:100% !important;

    height:100% !important;

    max-width:none !important;

    display:block;

    object-fit:cover !important;

    object-position:center !important;

    transform:scale(1.05);

    filter:

        drop-shadow(
            0 7px 7px
            rgba(35,5,55,.22)
        );

}


/* =========================================================
   BRILLO 3D
========================================================= */

.logo-circular-grande::before{

    content:"";

    position:absolute;

    top:5%;

    left:12%;

    z-index:3;

    width:65%;

    height:35%;

    pointer-events:none;

    border-radius:50%;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,0)
        );

    transform:rotate(-15deg);

    opacity:.55;

}


/* =========================================================
   SOMBRA DEBAJO
========================================================= */

.logo-circular-grande::after{

    content:"";

    position:absolute;

    left:15%;

    bottom:-20px;

    z-index:-1;

    width:70%;

    height:35px;

    border-radius:50%;

    background:
        rgba(15,0,25,.35);

    filter:blur(15px);

}


/* =========================================================
   EFECTO AL PASAR EL MOUSE
========================================================= */

.logo-circular-grande{

    transition:

        transform .35s ease,
        box-shadow .35s ease;

}


.logo-circular-grande:hover{

    transform:

        rotateX(0deg)
        rotateY(0deg)
        translateY(-7px)
        scale(1.025);

    box-shadow:

        0 9px 0
        #d99c00,

        0 25px 35px
        rgba(0,0,0,.24),

        0 45px 70px
        rgba(0,0,0,.22),

        inset 0 4px 10px
        rgba(255,255,255,.9);

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .circulo-exterior-logo{

        width:390px;

        height:390px;

    }


    .logo-circular-grande{

        width:300px;

        height:300px;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:700px){

    .circulo-exterior-logo{

        width:300px;

        height:300px;

    }


    .logo-circular-grande{

        width:235px;

        height:235px;

        border-width:7px;

    }


    .logo-circular-grande img{

        transform:scale(1.55);

    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media(max-width:390px){

    .circulo-exterior-logo{

        width:265px;

        height:265px;

    }


    .logo-circular-grande{

        width:205px;

        height:205px;

    }

}/* =========================================================
   QUITAR BRILLO / REFLEJO DEL LOGO
========================================================= */

.logo-circular-grande::before{
    display:none !important;
    content:none !important;
}/* =========================================================
   INFORMACIÓN RÁPIDA DE LA PORTADA
========================================================= */

.info-rapida-portada{

    width:100%;
    max-width:790px;

    margin-top:25px;

    padding:
        15px
        18px;

    display:grid;

    grid-template-columns:
        1fr
        1px
        1fr
        1px
        1fr;

    align-items:center;

    gap:15px;

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

    border-radius:20px;

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

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        0 15px 35px
        rgba(15,0,25,.12);

}


/* =========================================================
   CADA INFORMACIÓN
========================================================= */

.info-rapida-item{

    min-width:0;

    display:flex;

    align-items:center;

    gap:12px;

}


/* =========================================================
   ICONOS
========================================================= */

.info-rapida-icono{

    width:43px;

    height:43px;

    flex:
        0
        0
        43px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:
        rgba(255,196,35,.16);

    color:var(--amarillo);

    font-size:17px;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,196,35,.12);

}


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

.info-rapida-item strong{

    display:block;

    margin-bottom:3px;

    color:#ffffff;

    font-size:12px;

    font-weight:800;

    line-height:1.25;

}


.info-rapida-item span{

    display:block;

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

    font-size:9.5px;

    line-height:1.35;

}


/* =========================================================
   LÍNEAS SEPARADORAS
========================================================= */

.info-rapida-separador{

    width:1px;

    height:37px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

}


/* =========================================================
   EFECTO SUAVE
========================================================= */

.info-rapida-item{

    transition:
        transform .25s ease;

}


.info-rapida-item:hover{

    transform:
        translateY(-2px);

}


.info-rapida-item:hover
.info-rapida-icono{

    background:
        var(--amarillo);

    color:
        var(--morado-oscuro);

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .info-rapida-portada{

        max-width:680px;

        margin-left:auto;

        margin-right:auto;

        text-align:left;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:700px){

    .info-rapida-portada{

        margin-top:20px;

        padding:
            13px
            14px;

        grid-template-columns:1fr;

        gap:11px;

        border-radius:17px;

    }


    .info-rapida-separador{

        width:100%;

        height:1px;

        background:
            linear-gradient(
                to right,
                transparent,
                rgba(255,255,255,.20),
                transparent
            );

    }


    .info-rapida-item{

        padding:
            3px
            2px;

    }


    .info-rapida-icono{

        width:40px;

        height:40px;

        flex-basis:40px;

        border-radius:12px;

        font-size:15px;

    }


    .info-rapida-item strong{

        font-size:12px;

    }


    .info-rapida-item span{

        font-size:9px;

    }

}/* =========================================================
   HORARIO COMPACTO DE PORTADA
========================================================= */

.horario-portada-compacto{

    width:max-content;

    max-width:100%;

    margin-top:24px;

    padding:12px 17px;

    display:flex;

    align-items:center;

    gap:12px;

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

    border-radius:16px;

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

    color:#ffffff;

}


.horario-portada-icono{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

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

    color:var(--amarillo);

    font-size:17px;

}


.horario-portada-compacto div:last-child{

    display:flex;

    flex-direction:column;

}


.horario-portada-compacto span{

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

    font-size:10px;

}


.horario-portada-compacto strong{

    margin-top:2px;

    color:#ffffff;

    font-size:12px;

}


/* CELULAR */

@media(max-width:700px){

    .horario-portada-compacto{

        width:100%;

        justify-content:flex-start;

        text-align:left;

    }

}/* =========================================================
   BARRA FIJA DE CATEGORÍAS
========================================================= */

.barra-categorias-menu{

    width:100%;

    position:sticky;

    top:86px;

    z-index:900;

    margin-bottom:34px;

    padding:
        10px
        0;

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

    border-top:
        1px solid
        rgba(75,24,110,.06);

    border-bottom:
        1px solid
        rgba(75,24,110,.10);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

}


.barra-categorias-contenido{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:
        0
        8px;

    display:flex;

    align-items:center;

    gap:9px;

    overflow-x:auto;

    scrollbar-width:none;

}


.barra-categorias-contenido::-webkit-scrollbar{

    display:none;

}


/* =========================================================
   BOTONES DE CATEGORÍA
========================================================= */

.boton-categoria-menu{

    flex-shrink:0;

    min-height:42px;

    padding:
        10px
        16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    border:
        1px solid
        #e8dfea;

    border-radius:50px;

    background:#ffffff;

    color:var(--morado-oscuro);

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

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

}


.boton-categoria-menu:hover{

    border-color:var(--morado);

    color:var(--morado);

    transform:translateY(-1px);

}


.boton-categoria-menu.activo{

    border-color:var(--morado);

    background:var(--morado);

    color:#ffffff;

    box-shadow:
        0 8px 20px
        rgba(75,24,110,.18);

}


.boton-categoria-menu i{

    font-size:10px;

}


/* =========================================================
   COMPENSAR HEADER + BARRA FIJA
========================================================= */

.grupo-menu{

    scroll-margin-top:155px;

}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:1000px){

    .barra-categorias-menu{

        top:76px;

    }

}


@media(max-width:700px){

    .barra-categorias-menu{

        top:70px;
        margin-left:0;
        width:100%;

        padding:9px 10px;

    }


    .barra-categorias-contenido{

        padding:
            0
            5px;

    }


    .boton-categoria-menu{

        min-height:39px;

        padding:
            9px
            14px;

        font-size:10px;

    }


    .grupo-menu{

        scroll-margin-top:135px;

    }

}/* =========================================================
   IMÁGENES DE PRODUCTOS DEL MENÚ
========================================================= */

.producto-imagen{
    width: 160px;
    height: 160px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 0 16px 16px 0;

    background: #f5f5f5;
}

.producto-imagen img{
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform .35s ease;
}


/* Efecto profesional al pasar el mouse */

.producto:hover .producto-imagen img{
    transform: scale(1.04);
}


/* CELULAR */

@media(max-width:700px){

    .producto-imagen{
        width: 125px;
        height: 125px;
    }

}/* ==========================================
   AJUSTE DE IMÁGENES PARA CELULARES
   Evita que las fotos del menú se recorten
   ========================================== */

@media (max-width: 600px) {

    .menu-item img,
    .product-card img,
    .menu-card img,
    .product-image {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 1 / 1;

        object-fit: contain !important;
        object-position: center !important;

        display: block;
    }

}

/* =========================================================
   CORREGIR TAMAÑO DE PRODUCTOS DESTACADOS
   TODAS LAS FOTOS DEL MISMO TAMAÑO
========================================================= */

.producto-destacado{
    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    border-radius:28px !important;

    background:#ffffff;
}


/* ÁREA DE LA FOTO */

.producto-destacado .imagen-destacado{
    position:relative !important;

    width:100% !important;
    height:320px !important;

    min-height:320px !important;
    max-height:320px !important;

    flex:0 0 320px !important;

    overflow:hidden !important;

    background:#f7f4f8;
}


/* FOTO */

.producto-destacado .imagen-destacado img{
    position:absolute !important;

    top:0 !important;
    left:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:0 !important;
}


/* =========================================================
   CONTENIDO DEBAJO DE LA FOTO
========================================================= */

.producto-destacado .contenido-destacado{
    position:relative !important;

    z-index:5 !important;

    width:100% !important;

    flex:1 !important;

    padding:28px 34px 30px !important;

    background:#ffffff !important;
}


/* EL TÍTULO NO SE PUEDE SUBIR SOBRE LA FOTO */

.producto-destacado .contenido-destacado h3{
    position:relative !important;

    margin:
        0
        0
        12px
        0 !important;

    padding:0 !important;

    transform:none !important;
}


/* DESCRIPCIÓN */

.producto-destacado .contenido-destacado p{
    position:relative !important;

    margin:0 !important;

    transform:none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .producto-destacado .imagen-destacado{
        height:260px !important;
        min-height:260px !important;
        max-height:260px !important;

        flex-basis:260px !important;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:600px){

    .producto-destacado .imagen-destacado{
        height:230px !important;
        min-height:230px !important;
        max-height:230px !important;

        flex-basis:230px !important;
    }


    .producto-destacado .contenido-destacado{
        padding:22px 22px 25px !important;
    }

}/* =========================================================
   NUEVA PORTADA FINAL
========================================================= */

.hero-nuevo-final{
    position:relative;
    width:100%;
    min-height:720px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(124,58,150,.35),
            transparent 40%
        ),
        linear-gradient(
            110deg,
            #260039 0%,
            #3e075d 48%,
            #180024 100%
        );

    color:#fff;
}


.hero-final-contenido{
    width:min(1500px,92%);
    min-height:720px;

    margin:auto;

    display:grid;
    grid-template-columns:1fr 1.25fr;

    align-items:center;

    gap:35px;
}


.hero-final-texto{
    padding:45px 0;
}


.hero-final-estado{
    width:max-content;
    max-width:100%;

    padding:11px 18px;
    margin-bottom:28px;

    display:flex;
    align-items:center;

    gap:12px;

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

    border-radius:40px;

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


.hero-final-estado > span{
    width:12px;
    height:12px;

    flex-shrink:0;

    border-radius:50%;

    background:#ff4d5a;
}


.hero-final-estado strong{
    display:block;

    color:#fff;

    font-size:14px;
}


.hero-final-estado small{
    display:block;

    margin-top:2px;

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

    font-size:10px;
}


.hero-final-etiqueta{
    margin:0 0 16px;

    color:#ffc62e;

    font-size:12px;

    font-weight:900;

    letter-spacing:1.5px;
}


.hero-final-texto h1{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            48px,
            5vw,
            82px
        );

    font-weight:900;

    line-height:.96;

    letter-spacing:-2px;
}


.hero-final-texto h1 span{
    color:#ffc62e;
}


.hero-final-descripcion{
    max-width:610px;

    margin:
        24px
        0
        28px;

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

    font-size:16px;

    line-height:1.6;
}


.hero-final-botones{
    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-bottom:26px;
}


.hero-final-btn-principal,
.hero-final-btn-secundario{
    min-height:54px;

    padding:
        0
        25px;

    display:inline-flex;

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

    gap:10px;

    border-radius:50px;

    font-size:13px;

    font-weight:900;

    text-decoration:none;

    transition:.2s ease;
}


.hero-final-btn-principal{
    background:#ffc62e;

    color:#2d0644;
}


.hero-final-btn-secundario{
    border:
        1.5px solid
        rgba(255,255,255,.7);

    color:#fff;

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


.hero-final-btn-principal:hover,
.hero-final-btn-secundario:hover{
    transform:translateY(-2px);
}


.hero-final-info{
    max-width:720px;

    display:grid;

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

    padding:16px;

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

    border-radius:18px;

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


.hero-final-info > div{
    padding:
        0
        15px;

    display:grid;

    grid-template-columns:
        42px
        1fr;

    column-gap:10px;

    align-items:center;
}


.hero-final-info > div:not(:last-child){
    border-right:
        1px solid
        rgba(255,255,255,.1);
}


.hero-final-info i{
    grid-row:
        1 / 3;

    width:42px;
    height:42px;

    display:flex;

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

    border-radius:13px;

    color:#ffc62e;

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

    background:
        rgba(255,198,46,.07);
}


.hero-final-info strong{
    color:#fff;

    font-size:12px;
}


.hero-final-info small{
    color:
        rgba(255,255,255,.65);

    font-size:9px;
}


.hero-final-imagen{
    min-height:680px;

    display:flex;

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


.hero-final-imagen img{
    width:115%;
    max-width:none;

    max-height:720px;

    display:block;

    object-fit:contain;
    

    object-position:
        center
        bottom;
    transform: translateY(-80px);

    filter:
        drop-shadow(
            0 25px 35px
            rgba(0,0,0,.3)
        );
}


/* TABLET */

@media(max-width:1000px){

    .hero-final-contenido{
        grid-template-columns:1fr;

        text-align:center;
    }


    .hero-final-estado{
        margin-left:auto;
        margin-right:auto;
    }


    .hero-final-descripcion{
        margin-left:auto;
        margin-right:auto;
    }


    .hero-final-botones{
        justify-content:center;
    }


    .hero-final-info{
        margin:auto;
    }


    .hero-final-imagen{
        min-height:430px;
    }


    .hero-final-imagen img{
        width:min(100%,850px);
        max-height:480px;
    }

}


/* CELULAR */

@media(max-width:650px){

    .hero-nuevo-final{
        min-height:auto;
    }


    .hero-final-contenido{
        width:92%;
        min-height:auto;
    }


    .hero-final-texto{
        padding:
            28px
            0
            10px;
    }


    .hero-final-texto h1{
        font-size:42px;
    }


    .hero-final-descripcion{
        font-size:13px;
    }


    .hero-final-botones{
        flex-direction:column;
    }


    .hero-final-btn-principal,
    .hero-final-btn-secundario{
        width:100%;
    }


    .hero-final-info{
        grid-template-columns:1fr;

        gap:12px;
    }


    .hero-final-info > div{
        padding:
            8px
            4px;
    }


    .hero-final-info > div:not(:last-child){
        border-right:none;

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


    .hero-final-imagen{
        min-height:300px;
    }


    .hero-final-imagen img{
        width:120%;

        max-height:340px;
    }

}/* =========================================
   ILUMINACIÓN ELEGANTE DE LA PORTADA
========================================= */

.hero-nuevo-final{
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 72% 42%,
            rgba(157, 67, 190, .30) 0%,
            rgba(105, 34, 139, .18) 25%,
            transparent 52%
        ),
        radial-gradient(
            circle at 20% 70%,
            rgba(255, 193, 35, .07) 0%,
            transparent 35%
        ),
        linear-gradient(
            115deg,
            #250038 0%,
            #40065d 50%,
            #21002f 100%
        );
}.hero-final-imagen::after{
    content:"";

    position:absolute;

    width:65%;
    height:100px;

    left:50%;
    bottom:90px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(255,190,30,.16) 0%,
            rgba(255,190,30,.06) 35%,
            transparent 70%
        );

    filter:blur(18px);

    pointer-events:none;

    z-index:1;
}

.hero-final-imagen img{
    position:relative;
    z-index:2;
}/* =====================================================
   PORTADA OFICIAL
===================================================== */

.portada-oficial{
    width:100%;
    min-height:720px;
    padding:40px 6%;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(150,80,95,.45) 0%,
            rgba(85,35,100,.20) 35%,
            transparent 60%
        ),
        linear-gradient(
            110deg,
            #351047 0%,
            #4b1664 48%,
            #290a36 100%
        );
}

.portada-oficial-contenedor{
    width:100%;
    max-width:1750px;
    margin:auto;

    display:grid;
    grid-template-columns:46% 54%;
    align-items:center;
}


/* =========================
   LADO IZQUIERDO
========================= */

.portada-oficial-info{
    position:relative;
    z-index:3;
}

.estado-negocio-portada{
    width:max-content;

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

    padding:12px 22px;
    margin-bottom:38px;

    color:white;

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

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

.punto-estado-portada{
    width:13px;
    height:13px;

    border-radius:50%;

    background:#ff4d5f;

    box-shadow:
        0 0 0 7px rgba(255,77,95,.12);
}

.estado-negocio-portada div{
    display:flex;
    flex-direction:column;
}

.estado-negocio-portada strong{
    font-size:16px;
}

.estado-negocio-portada small{
    margin-top:3px;

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

    font-size:12px;
}


/* TEXTO PEQUEÑO */

.portada-tradicion{
    margin:0 0 18px;

    color:#ffc62f;

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

    letter-spacing:2px;
}


/* TÍTULO */

.portada-titulo{
    margin:0;

    color:white;

    font-size:clamp(55px,5vw,88px);

    line-height:.98;

    font-weight:900;

    letter-spacing:-3px;
}

.portada-titulo span{
    color:#ffc62f;
}


/* DESCRIPCIÓN */

.portada-descripcion{
    max-width:650px;

    margin-top:30px;

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

    font-size:19px;

    line-height:1.65;
}


/* BOTONES */

.portada-botones{
    display:flex;
    align-items:center;

    gap:20px;

    margin-top:30px;
}

.boton-menu-portada,
.boton-ubicacion-portada{
    min-height:62px;

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

    gap:12px;

    padding:0 30px;

    border-radius:34px;

    text-decoration:none;

    font-weight:900;

    transition:.25s ease;
}

.boton-menu-portada{
    color:#321044;

    background:#ffc62f;

    box-shadow:
        0 12px 30px rgba(255,198,47,.18);
}

.boton-menu-portada:hover{
    transform:translateY(-3px);
}

.boton-ubicacion-portada{
    color:white;

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

    border:1.5px solid rgba(255,255,255,.75);
}

.boton-ubicacion-portada:hover{
    color:#351047;
    background:white;
}


/* =========================
   DATOS INFERIORES
========================= */

.datos-portada{
    width:100%;
    max-width:760px;

    margin-top:32px;

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

    padding:17px 12px;

    border-radius:22px;

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

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

.dato-portada{
    display:flex;
    align-items:center;

    gap:13px;

    padding:0 18px;

    color:white;
}

.dato-portada:not(:last-child){
    border-right:
        1px solid rgba(255,255,255,.14);
}

.dato-icono{
    width:48px;
    height:48px;

    flex-shrink:0;

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

    border-radius:14px;

    color:#ffc62f;

    font-size:20px;

    background:rgba(255,198,47,.13);

    border:
        1px solid rgba(255,198,47,.24);
}

.dato-portada div:last-child{
    display:flex;
    flex-direction:column;
}

.dato-portada strong{
    font-size:14px;
}

.dato-portada small{
    margin-top:4px;

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

    font-size:11px;
}


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

.portada-oficial-productos{
    position:relative;

    width:100%;
    height:690px;

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

.resplandor-productos{
    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,188,130,.18),
            rgba(132,51,105,.10) 45%,
            transparent 70%
        );
        
}

.imagen-productos-portada{
    position:relative;
    z-index:2;

    width:118%;
    max-width:1000px;

    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(
            0 28px 26px rgba(0,0,0,.34)
        );
}


/* =========================
   CELULAR
========================= */

@media (max-width:768px){

    .portada-oficial{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 35px 20px;
    box-sizing: border-box;
}

.portada-oficial-contenedor{
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.portada-oficial-info{
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.portada-oficial-productos{
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.imagen-productos-portada{
    width: 100%;
    max-width: 100%;
}

    .portada-oficial{
        min-height:auto;
        padding:35px 20px;
    }

    .portada-oficial-contenedor{
        display:flex;
        flex-direction:column;
    }

    .portada-titulo{
        font-size:clamp(46px,14vw,68px);
        letter-spacing:-2px;
    }

    .portada-descripcion{
        font-size:16px;
    }

    .portada-botones{
        flex-direction:column;
        align-items:stretch;
    }

    .boton-menu-portada,
    .boton-ubicacion-portada{
        width:100%;
    }

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

    .dato-portada{
        padding:10px;
    }

    .dato-portada:not(:last-child){
        border-right:none;

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

    .portada-oficial-productos{
        height:auto;
        margin-top:20px;
    }

    .imagen-productos-portada{
        width:115%;
    }

    .resplandor-productos{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    max-width:360px;
}

.portada-oficial-productos{
    overflow:hidden;
}
}/* =========================================
   FORZAR BARRA DE INFORMACIÓN MÁS FINA
========================================= */

.datos-portada{
    width: 100% !important;
    max-width: 900px !important;

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

    padding: 5px 10px !important;
    margin-top: 22px !important;

    min-height: 0 !important;
    height: auto !important;

    border-radius: 15px !important;

    background: rgba(255,255,255,0.06) !important;
}


/* CADA BLOQUE */

.datos-portada .dato-portada{
    height: 48px !important;
    min-height: 48px !important;

    padding: 0 16px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    background: transparent !important;

    border-radius: 0 !important;
    box-shadow: none !important;
}


/* SEPARADORES */

.datos-portada .dato-portada:not(:last-child){
    border-right: 1px solid rgba(255,255,255,0.15) !important;
}


/* ICONO */

.datos-portada .dato-icono{
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    padding: 0 !important;

    border-radius: 10px !important;

    font-size: 15px !important;
}


/* TÍTULO */

.datos-portada .dato-portada strong{
    font-size: 12px !important;
    line-height: 1.1 !important;

    margin: 0 !important;

    white-space: nowrap !important;
}


/* TEXTO PEQUEÑO */

.datos-portada .dato-portada small{
    font-size: 9px !important;
    line-height: 1.1 !important;

    margin-top: 2px !important;

    white-space: nowrap !important;
}/* =====================================================
   FRANJA PREMIUM BRILLANTE
===================================================== */

.franja-premium {
    width: min(94%, 1650px);
    margin: 24px auto 0;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;

    padding: 10px 14px;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.09),
            rgba(255,255,255,0.025)
        );

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border: 1px solid rgba(226, 120, 255, 0.55);

    box-shadow:
        0 0 8px rgba(217, 90, 255, 0.18),
        0 0 24px rgba(170, 50, 230, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.12);

    position: relative;
}


/* BRILLO SUPERIOR */

.franja-premium::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 5%;
    right: 5%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #ffc62f,
        #ec8cff,
        #ffffff,
        #ec8cff,
        transparent
    );

    box-shadow:
        0 0 6px rgba(232,140,255,.8),
        0 0 12px rgba(232,140,255,.45);
}


/* CADA BLOQUE */

.franja-item {
    min-width: 0;
    height: 56px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 14px;

    position: relative;

    color: white;
}


/* SEPARADORES */

.franja-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 10px;
    bottom: 10px;

    width: 1px;

    background: linear-gradient(
        transparent,
        rgba(255,255,255,.28),
        transparent
    );
}


/* ICONOS */

.franja-icono {
    width: 40px;
    height: 40px;

    min-width: 40px;

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

    border-radius: 12px;

    color: #ffc62f;

    font-size: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,198,47,.18),
            rgba(255,198,47,.06)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 10px rgba(255,198,47,.08);
}


.franja-icono.morado {
    color: #ef96ff;

    background:
        linear-gradient(
            145deg,
            rgba(221,112,255,.18),
            rgba(221,112,255,.05)
        );

    border-color: rgba(225,130,255,.30);
}


/* TEXTO */

.franja-item > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.franja-item strong {
    color: white;

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

    line-height: 1.15;

    white-space: nowrap;
}

.franja-item span {
    margin-top: 3px;

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

    font-size: 9.5px;

    line-height: 1.2;

    white-space: nowrap;
}


/* HOVER */

.franja-item {
    transition: .25s ease;
}

.franja-item:hover {
    transform: translateY(-2px);

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

    border-radius: 12px;
}


/* TABLET */

@media (max-width: 1200px) {

    .franja-premium {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .franja-item:nth-child(3)::after {
        display: none;
    }
}


/* CELULAR */

@media (max-width: 700px) {

    .franja-premium {
        width: calc(100% - 26px);

        grid-template-columns: 1fr 1fr;

        padding: 8px;

        border-radius: 20px;
    }

    .franja-item {
        height: 50px;

        padding: 0 8px;

        gap: 7px;
    }

    .franja-icono {
        width: 34px;
        height: 34px;

        min-width: 34px;

        font-size: 14px;
    }

    .franja-item strong {
        font-size: 10.5px;
    }

    .franja-item span {
        font-size: 8px;
        white-space: normal;
    }

    .franja-item::after {
        display: none !important;
    }
}


/* CADA ELEMENTO */

.franja-item{
    min-width: 0 !important;
    width: auto !important;

    height: 58px !important;

    padding: 0 14px !important;

    gap: 10px !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;
}


/* ICONOS */

.franja-icono{
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;

    font-size: 16px !important;
}


/* TEXTO PRINCIPAL */

.franja-item strong{
    font-size: 12px !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
}


/* TEXTO SECUNDARIO */

.franja-item span{
    font-size: 9px !important;

    margin-top: 3px !important;

    white-space: nowrap !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}/* =========================================================
   FRANJA PREMIUM COMPLETA
   YOGURT DE JOSUÉ
   PC + TABLET + CELULAR
========================================================= */


/* =========================
   PC
========================= */

.franja-premium {
    width: 100%;
    max-width: 1500px;

    margin: 24px auto 0;

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

    align-items: center;

    padding: 8px 12px;

    box-sizing: border-box;

    border-radius: 22px;

    position: relative;
    z-index: 5;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(220, 120, 255, 0.55);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 0 10px rgba(214, 83, 255, 0.18),
        0 0 25px rgba(170, 50, 220, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.15);
}


/* BRILLO DE ARRIBA */

.franja-premium::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 5%;
    right: 5%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #ffc62f,
        #e989ff,
        #ffffff,
        #e989ff,
        transparent
    );

    box-shadow:
        0 0 7px rgba(232,140,255,.8);

    pointer-events: none;
}


/* =========================
   CADA ELEMENTO
========================= */

.franja-item {
    min-width: 0;

    height: 52px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 0 12px;

    box-sizing: border-box;

    position: relative;
}


/* LÍNEAS SEPARADORAS */

.franja-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    top: 9px;
    bottom: 9px;

    width: 1px;

    background: linear-gradient(
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
}


/* =========================
   ICONOS
========================= */

.franja-icono {
    width: 36px;
    height: 36px;

    min-width: 36px;

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

    border-radius: 11px;

    font-size: 15px;

    color: #ffc62f;

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

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 8px rgba(255,198,47,.08);
}


.franja-icono.morado {
    color: #ec94ff;

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

    border-color: rgba(220,110,255,.28);
}


/* =========================
   CONTENEDOR DEL TEXTO
========================= */

.franja-item > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* TÍTULO */

.franja-item strong {
    display: block;

    color: #ffffff;

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

    line-height: 1.15;

    white-space: nowrap;
}


/* TEXTO PEQUEÑO */

.franja-item span {
    display: block;

    margin-top: 3px;

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

    font-size: 8px;

    line-height: 1.15;

    white-space: nowrap;
}


/* =========================
   EFECTO MOUSE
========================= */

.franja-item {
    transition:
        transform .2s ease,
        background .2s ease;
}


.franja-item:hover {
    transform: translateY(-2px);

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

    border-radius: 11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .franja-premium {

        width: calc(100% - 30px);

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

        padding: 8px;

        gap: 3px;

        border-radius: 20px;
    }


    .franja-item {

        height: 50px;

        padding: 0 9px;
    }


    .franja-item strong {

        font-size: 10px;
    }


    .franja-item span {

        font-size: 7.5px;
    }


    /* quitamos separadores al final de cada fila */

    .franja-item:nth-child(3)::after,
    .franja-item:nth-child(6)::after {

        display: none;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .franja-premium {

        width: calc(100% - 20px);

        margin: 16px auto 0;

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

        padding: 7px;

        gap: 3px;

        border-radius: 18px;
    }


    .franja-item {

        width: 100%;

        height: 48px;

        padding: 0 6px;

        gap: 6px;
    }


    /* SIN SEPARADORES EN CELULAR */

    .franja-item::after {

        display: none !important;
    }


    /* ICONOS */

    .franja-icono {

        width: 30px;
        height: 30px;

        min-width: 30px;

        border-radius: 9px;

        font-size: 12px;
    }


    /* TÍTULO */

    .franja-item strong {

        font-size: 9px;

        white-space: normal;
    }


    /* DESCRIPCIÓN */

    .franja-item span {

        margin-top: 2px;

        font-size: 7px;

        white-space: normal;
    }
}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 380px) {

    .franja-premium {

        width: calc(100% - 14px);

        padding: 6px;
    }


    .franja-item {

        height: 46px;

        padding: 0 4px;

        gap: 5px;
    }


    .franja-icono {

        width: 27px;
        height: 27px;

        min-width: 27px;

        font-size: 11px;
    }


    .franja-item strong {

        font-size: 8px;
    }


    .franja-item span {

        font-size: 6.5px;
    }
}/* =========================================================
   MÉTODOS DE PAGO - FORZAR 3 BOTONES GRANDES
========================================================= */

.bloque-opciones .metodos-pago{
    width: 100% !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: row !important;

    gap: 16px !important;
}

.bloque-opciones .metodos-pago .metodo-pago{
    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 150px !important;

    padding: 20px 15px !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;
}/* =========================================================
   ZONA QR DE PAGO
========================================================= */

.zona-qr-pago{
    display: none;

    margin-top: 25px;
    padding: 25px;

    width: 100%;
    max-width: 520px;

    background: #ffffff;

    border: 2px solid #eee4f3;
    border-radius: 20px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(70, 15, 95, 0.10);
}


/* Cuando el QR esté activo */

.zona-qr-pago.activo{
    display: block;
}


/* Título */

.zona-qr-pago h3{
    margin: 0 0 8px;

    color: #3b075c;

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


/* Texto */

.zona-qr-pago p{
    margin: 0 0 20px;

    color: #746b78;

    font-size: 15px;
}


/* Imagen del QR */

.zona-qr-pago img{
    display: block;

    width: 230px;
    height: 230px;

    margin: 0 auto;

    object-fit: contain;

    border-radius: 15px;

    background: white;
    padding: 10px;
}


/* Celulares */

@media (max-width: 600px){

    .zona-qr-pago{
        padding: 20px 15px;
    }

    .zona-qr-pago img{
        width: 200px;
        height: 200px;
    }

}/* =========================================================
   CORRECCIÓN FINAL - MÉTODOS DE PAGO + QR ABAJO
========================================================= */

/* Los 3 botones arriba */
.metodos-pago{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

/* El cuadro QR SIEMPRE debajo de los botones */
.zona-qr-pago{
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;

    margin-top: 20px !important;

    box-sizing: border-box;
}

/* Oculto normalmente */
.zona-qr-pago:not(.activo){
    display: none !important;
}

/* Visible al seleccionar QR */
.zona-qr-pago.activo{
    display: block !important;
}/* =========================================================
   ARREGLO DEFINITIVO: QR DEBAJO DE LOS 3 MÉTODOS
========================================================= */

.metodos-pago{
    display: grid !important;

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

    gap: 16px !important;

    width: 100% !important;
}


/* LOS 3 BOTONES */

.metodos-pago > .metodo-pago{
    width: 100% !important;

    min-height: 190px !important;
    height: 190px !important;

    box-sizing: border-box !important;
}


/* CUADRO DEL QR */

.metodos-pago > .zona-qr-pago{

    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;

    margin-top: 10px !important;

    box-sizing: border-box !important;
}


/* CUANDO ESTÁ OCULTO */

.metodos-pago > .zona-qr-pago:not(.activo){
    display: none !important;
}


/* CUANDO APARECE */

.metodos-pago > .zona-qr-pago.activo{
    display: block !important;
}


/* =========================================================
   FORZAR QR DEBAJO DE LOS 3 MÉTODOS DE PAGO
========================================================= */

.metodos-pago{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}


/* BOTONES */

.metodo-pago{
    width: 100% !important;
}


/* QR ABAJO */

#zonaQrPago{
    display: none !important;

    width: 100% !important;
    max-width: none !important;

    margin-top: 20px !important;

    clear: both !important;

    position: relative !important;

    box-sizing: border-box !important;
}


/* CUANDO SE ACTIVA */

#zonaQrPago.activo{
    display: block !important;
}


/* EVITAR QUE ALGÚN CONTENEDOR LO PONGA AL LADO */

#zonaQrPago{
    grid-column: 1 / -1 !important;
    flex-basis: 100% !important;
}.bloque-opciones > #zonaQrPago{
    width: 100% !important;
    display: none !important;
}

.bloque-opciones > #zonaQrPago.activo{
    display: block !important;
}/* =========================================================
   MÉTODO DE PAGO - ORDEN CORRECTO
   3 botones arriba + QR debajo
========================================================= */

/* =========================================================
   MÉTODO DE PAGO - VERSIÓN FINAL
   3 botones grandes arriba + QR debajo
========================================================= */

#bloqueMetodoPago{
    display:block !important;
    width:100% !important;
}


/* CONTENEDOR DE LOS 3 BOTONES */

#bloqueMetodoPago .metodos-pago{
    width:100% !important;
    max-width:none !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;

    gap:16px !important;

    margin-top:20px !important;
}


/* LOS 3 BOTONES */

#bloqueMetodoPago .metodos-pago > .metodo-pago{
    flex:1 1 0 !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:auto !important;
    min-height:150px !important;

    padding:20px 15px !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:10px !important;
}


/* =========================================
   QR DEBAJO DE LOS 3 BOTONES
========================================= */

#bloqueMetodoPago #zonaQrPago{
    width:100% !important;
    max-width:none !important;

    margin:22px 0 0 0 !important;

    box-sizing:border-box !important;

    position:relative !important;
    clear:both !important;
}


/* OCULTO AL PRINCIPIO */

#bloqueMetodoPago #zonaQrPago:not(.activo){
    display:none !important;
}


/* MOSTRAR CUANDO SELECCIONAN PEYGO O DEUNA */

#bloqueMetodoPago #zonaQrPago.activo{
    display:block !important;
}


/* =========================================
   CELULAR
========================================= */

@media(max-width:600px){

    #bloqueMetodoPago .metodos-pago{
        gap:8px !important;
    }

    #bloqueMetodoPago .metodos-pago > .metodo-pago{
        min-height:130px !important;
        padding:14px 7px !important;
    }

}/* =========================================================
   ARREGLO DEFINITIVO MÉTODOS DE PAGO
   Botones arriba / QR abajo
========================================================= */

/* El contenedor que tenga directamente la zona QR
   debe trabajar VERTICALMENTE */
#bloqueMetodoPago:has(#zonaQrPago),
#bloqueMetodoPago *:has(> #zonaQrPago){
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    width:100% !important;
    max-width:none !important;

    grid-template-columns:none !important;
}


/* =========================================
   LOS 3 MÉTODOS ARRIBA
========================================= */

#bloqueMetodoPago .metodos-pago{
    width:100% !important;
    max-width:100% !important;

    display:grid !important;

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

    gap:16px !important;

    margin:20px 0 0 !important;
}


/* LOS 3 BOTONES IGUALES */

#bloqueMetodoPago .metodos-pago .metodo-pago{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    height:auto !important;
    min-height:150px !important;

    padding:18px 12px !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;
}


/* =========================================
   QR ABAJO
========================================= */

#bloqueMetodoPago #zonaQrPago{
    width:100% !important;
    max-width:100% !important;

    flex:none !important;

    margin:22px 0 0 !important;

    box-sizing:border-box !important;

    position:relative !important;
}


/* OCULTO */

#bloqueMetodoPago #zonaQrPago:not(.activo){
    display:none !important;
}


/* MOSTRAR */

#bloqueMetodoPago #zonaQrPago.activo{
    display:block !important;
}


/* =========================================
   CELULAR
========================================= */

@media(max-width:600px){

    #bloqueMetodoPago .metodos-pago{
        gap:8px !important;
    }

    #bloqueMetodoPago .metodos-pago .metodo-pago{
        min-height:135px !important;
        padding:12px 6px !important;
    }

}/* =========================================================
   SUBIR COMPROBANTE DE PAGO
========================================================= */

.subir-comprobante{
    margin-top: 22px;
    padding: 22px;

    background: #ffffff;

    border: 1px solid #eadff0;
    border-radius: 18px;

    box-shadow: 0 8px 24px rgba(61, 10, 80, 0.06);
}


.subir-comprobante-cabecera{
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;
}


.subir-comprobante-cabecera > i{
    width: 46px;
    height: 46px;

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

    border-radius: 12px;

    background: #f5eafa;
    color: #5b0875;

    font-size: 19px;
}


.subir-comprobante-cabecera div{
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.subir-comprobante-cabecera strong{
    color: #2d083c;
    font-size: 16px;
}


.subir-comprobante-cabecera span{
    color: #7e7182;
    font-size: 13px;
}


/* BOTÓN SUBIR */

.boton-subir-comprobante{
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 13px 16px;

    background: #5b0875;
    color: #ffffff;

    border-radius: 12px;

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

    cursor: pointer;

    transition: 0.2s ease;
}


.boton-subir-comprobante:hover{
    background: #47065c;
    transform: translateY(-1px);
}


/* VISTA PREVIA */

.vista-comprobante{
    margin-top: 18px;

    padding: 14px;

    background: #faf7fb;

    border: 1px solid #e9e0ec;
    border-radius: 14px;
}


.vista-comprobante img{
    display: block;

    width: 100%;
    max-height: 280px;

    object-fit: contain;

    border-radius: 10px;

    background: #ffffff;
}


.datos-comprobante{
    margin-top: 12px;

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

    color: #16803a;
    font-weight: 700;
    font-size: 13px;
}


.datos-comprobante i{
    color: #22c55e;
}/* =========================================================
   BOTÓN ENVIAR COMPROBANTE Y PEDIDO
========================================================= */

.boton-enviar-comprobante{
    width: 100%;
    margin-top: 18px;
    padding: 17px 22px;

    border: none;
    border-radius: 14px;

    background: #25d366;
    color: #ffffff;

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

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(91, 8, 117, 0.18);

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

.boton-enviar-comprobante i{
    font-size: 16px;
}

.boton-enviar-comprobante:hover:not(:disabled){
    background: #25d366;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(91, 8, 117, 0.25);
}

.boton-enviar-comprobante:active:not(:disabled){
    transform: translateY(0);
}

/* BOTÓN BLOQUEADO HASTA SUBIR COMPROBANTE */

.boton-enviar-comprobante:disabled{
    background: #ded6e2;
    color: #968b9b;

    box-shadow: none;

    cursor: not-allowed;
    opacity: 0.85;
}
/* =========================================================
   PRODUCTOS AGOTADOS
========================================================= */

.producto-agotado{
    opacity: .55;
}

.producto-agotado .boton-sumar-producto{
    cursor: not-allowed;
}

.boton-agregar-destacado.destacado-agotado{
    background: #e9e9e9;
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
}
/* =========================================================
   ETIQUETA VISUAL - PRODUCTO AGOTADO
========================================================= */

.producto-agotado{
    position: relative;
    opacity: .58;
}

.producto-agotado{
    position: relative;
    opacity: .62;
}

.producto-agotado{
    position: relative;
    opacity: .62;
}

.producto-agotado::after{
    content: "AGOTADO";

    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;

    background: #ef7f78;
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;

    padding: 6px 10px;
    border-radius: 999px;

    z-index: 8;

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


/* PRODUCTOS DESTACADOS AGOTADOS */

.boton-agregar-destacado.destacado-agotado{
    background: #eeeeee;
    color: #777777;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}


/* =========================================================
   RESPONSIVE - CELULAR
========================================================= */

@media (max-width: 768px){

    .producto-agotado::after{
        top: 8px;
        right: 8px;

        font-size: 9px;

        padding:
            5px 7px;
    }

    .boton-agregar-destacado.destacado-agotado{
        min-height: 42px;
        font-size: 13px;
    }

}
.producto-agotado::after{
    content: "AGOTADO";

    position: absolute;
    top: 10px;
    right: 10px;

    padding: 5px 9px;

    background: #fff0f0;
    color: #d95353;

    border: 1px solid #f2caca;
    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;

    box-shadow: none;
    z-index: 8;
}
.producto-menu-agotado{
    display: none !important;
}
/* =========================================================
   DISEÑO FINAL - PRODUCTO AGOTADO
========================================================= */

/* Quitamos la etiqueta flotante de arriba */
.producto-agotado::after{
    display: none !important;
}

/* Estado visual de la tarjeta */
.producto-agotado{
    position: relative;
}

/* Contenedor de la imagen */
.producto-agotado .producto-menu-imagen{
    position: relative;
}

/* La imagen mantiene sus bordes y contiene la franja */
.producto-agotado .producto-imagen-fondo{
    position: relative;
    overflow: hidden;
}

/* Ocultamos el icono */
.producto-agotado .boton-sumar-producto i{
    display: none;
}

/* Convertimos el botón en la franja AGOTADO */
.producto-agotado .boton-sumar-producto{
    position: absolute;

    left: var(--espacio-imagen);
    right: var(--espacio-imagen);
    bottom: var(--espacio-imagen);

    width: auto;
    height: 34px;

    margin: 0;
    padding: 0;

    background: #ef6f6f !important;
    color: #ffffff !important;

    border: none;
    border-radius: 0 0 14px 14px;

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

    transform: none !important;
    box-shadow: none !important;

    cursor: not-allowed;
    pointer-events: none;
}

/* Texto AGOTADO */
.producto-agotado .boton-sumar-producto::after{
    content: "AGOTADO";

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
}

/* =========================================================
   CENTRAR TEXTO AGOTADO
========================================================= */

.producto-agotado .boton-sumar-producto::after{
    content: "AGOTADO";

    display: block;

    margin: 0;
    padding: 0;

    line-height: 1;
    transform: translateY(1px);

    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px;
}
/* =========================================================
   AGOTADO - AJUSTE MÓVIL
========================================================= */

@media (max-width: 600px){

    .producto-agotado .boton-sumar-producto::after{
        font-size: 10px;
        line-height: 1;
        transform: translateY(1px);
    }

}