/* La Boutique Gourmet | Identidad visual v1 */
:root {
    --lbg-forest: #243b2a;
    --lbg-forest-dark: #17251c;
    --lbg-olive: #5f6b3d;
    --lbg-olive-dark: #36442d;
    --lbg-cream: #f6ebc8;
    --lbg-warm-white: #fffdf7;
    --lbg-gold: #d2a94f;
    --lbg-terracotta: #b85f3d;
    --lbg-ink: #17251c;
    --lbg-border: rgba(95, 107, 61, 0.18);
    --lbg-shadow: 0 12px 32px rgba(36, 59, 42, 0.1);
}

body {
    color: var(--lbg-ink);
    background:
        radial-gradient(circle at 0 0, rgba(246, 235, 200, 0.3), transparent 30rem),
        #f8f7f3;
}

::selection {
    color: var(--lbg-warm-white);
    background: var(--lbg-olive);
}

.lbg-focus:focus-visible {
    outline: 3px solid rgba(210, 169, 79, 0.48);
    outline-offset: 2px;
}

.lbg-header {
    background: rgba(255, 253, 247, 0.96);
    border-color: rgba(210, 169, 79, 0.28);
}

.lbg-logo-horizontal {
    display: block;
    width: auto;
    height: 68px;
    max-width: 330px;
    object-fit: contain;
    object-position: left center;
}

.lbg-logo-mobile {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    object-fit: contain;
}

.lbg-search {
    background: #ffffff;
    color: var(--lbg-ink);
    border: 1px solid rgba(95, 107, 61, 0.28);
    box-shadow: 0 4px 16px rgba(36, 59, 42, 0.06);
}

.lbg-search:focus {
    background: var(--lbg-warm-white);
    border-color: var(--lbg-olive);
    box-shadow: 0 0 0 4px rgba(210, 169, 79, 0.2);
}

.marquee-container {
    background: linear-gradient(90deg, var(--lbg-forest), var(--lbg-olive-dark), var(--lbg-forest));
    color: var(--lbg-warm-white);
    border-top: 1px solid rgba(246, 235, 200, 0.12);
    border-bottom: 2px solid var(--lbg-gold);
    box-shadow: 0 5px 14px rgba(36, 59, 42, 0.14);
}

.marquee-item {
    color: var(--lbg-warm-white);
}

.marquee-separator {
    color: var(--lbg-gold);
    filter: drop-shadow(0 0 4px rgba(210, 169, 79, 0.28));
}

.lbg-footer {
    background: var(--lbg-forest-dark);
    border-color: rgba(210, 169, 79, 0.3);
}

.lbg-footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.lbg-footer-isologo {
    width: 86px;
    height: 86px;
    flex: 0 0 auto;
    border-radius: 9999px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.lbg-footer-name {
    margin: 0;
    color: var(--lbg-warm-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.08;
}

.lbg-footer-tagline {
    margin: 7px 0 0;
    color: var(--lbg-cream);
    font-size: 0.92rem;
    font-weight: 800;
}

.lbg-footer-data {
    color: rgba(246, 235, 200, 0.78);
}

.lbg-footer-data strong {
    color: var(--lbg-warm-white);
}

.lbg-footer-data a:hover {
    color: var(--lbg-gold);
}

.lbg-footer-legal {
    color: var(--lbg-warm-white);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(210, 169, 79, 0.25);
}

.lbg-footer-legal:hover {
    color: var(--lbg-cream);
    border-color: var(--lbg-gold);
    background: rgba(210, 169, 79, 0.08);
}

.lbg-footer-bottom {
    color: rgba(246, 235, 200, 0.5);
    border-color: rgba(210, 169, 79, 0.18);
}

@media (max-width: 767px) {
    .lbg-logo-horizontal {
        display: none;
    }

    .lbg-logo-mobile {
        display: block;
    }

    .lbg-footer-brand {
        align-items: center;
    }

    .lbg-footer-isologo {
        width: 72px;
        height: 72px;
    }

    .lbg-footer-name {
        font-size: 1.12rem;
    }
}


:root {
    --lbg-font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lbg-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body,
button,
input,
select,
textarea {
    font-family: var(--lbg-font-ui);
}

h1,
h2,
h3,
h4,
h5,
h6,
.lbg-heading,
.lbg-footer-name,
.lbg-footer-tagline {
    font-family: var(--lbg-font-ui);
}

/* Jerarquia moderna y consistente */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: -0.025em;
}

.lbg-footer-name {
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1.02;
}

.lbg-footer-tagline {
    letter-spacing: 0;
}

/* Ningun componente operativo debe volver a la serif */
#drawer-carrito,
#modal-checkout,
#modal-fraccion,
#modal-terminos,
#modal-whatsapp,
#modal-exito-pago,
.tarjeta-producto,
#contenedor-filtros-desktop,
#contenedor-filtros-movil {
    font-family: var(--lbg-font-ui);
}

#drawer-carrito h1,
#drawer-carrito h2,
#drawer-carrito h3,
#modal-checkout h1,
#modal-checkout h2,
#modal-checkout h3,
#modal-fraccion h1,
#modal-fraccion h2,
#modal-fraccion h3,
#modal-terminos h1,
#modal-terminos h2,
#modal-terminos h3,
#modal-whatsapp h1,
#modal-whatsapp h2,
#modal-whatsapp h3,
#modal-exito-pago h1,
#modal-exito-pago h2,
#modal-exito-pago h3 {
    font-family: var(--lbg-font-ui);
    letter-spacing: -0.025em;
}

#drawer-carrito h2 {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.05;
}

#modal-checkout h2,
#modal-checkout h3,
#modal-fraccion h3,
#modal-terminos h2,
#modal-terminos h3,
#modal-whatsapp h2 {
    font-weight: 800;
}

/* El encabezado del producto sigue siendo compacto y legible */
.tarjeta-producto h2 {
    font-family: var(--lbg-font-ui);
    letter-spacing: -0.025em;
}

/* Sidebar institucional */
#contenedor-filtros-desktop {
    padding: 0.35rem;
}

#contenedor-filtros-desktop .filtro-btn-desktop,
#contenedor-filtros-desktop .filtro-ofertas-desktop {
    min-height: 2.65rem;
    border-radius: 0.85rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

#contenedor-filtros-desktop .filtro-btn-desktop {
    position: relative;
}

#contenedor-filtros-desktop .filtro-btn-desktop:not(.bg-\[\#243B2A\]):hover {
    transform: translateX(2px);
}

#contenedor-filtros-desktop .contador-filtro {
    min-width: 1.75rem;
    padding: 0.2rem 0.42rem;
    border-radius: 9999px;
    text-align: center;
    background: rgba(95, 107, 61, 0.08);
    color: #73805a;
}

#contenedor-filtros-desktop .bg-\[\#243B2A\] .contador-filtro {
    background: rgba(255, 253, 247, 0.14);
    color: rgba(255, 253, 247, 0.78);
}

#contenedor-filtros-desktop > div {
    margin-top: 0.65rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(210, 169, 79, 0.22);
}

#contenedor-filtros-desktop > div span {
    color: #8a9573;
    letter-spacing: 0.16em;
}

/* Fondo y panel del modal de fraccionamiento */
#modal-fraccion {
    opacity: 0;
    background: rgba(23, 37, 28, 0.58);
    transition: opacity 220ms ease;
}

#modal-fraccion.modal-fraccion-visible {
    opacity: 1;
}

#modal-fraccion > div {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.975);
    transform-origin: center bottom;
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 200ms ease;
}

#modal-fraccion.modal-fraccion-visible > div {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#modal-fraccion .opcion-fraccion {
    border-color: rgba(95, 107, 61, 0.16);
    background: #fffdf7;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

#modal-fraccion .opcion-fraccion:hover {
    border-color: rgba(210, 169, 79, 0.65);
    transform: translateY(-1px);
}

#modal-fraccion .opcion-fraccion-seleccionada {
    border-color: #5f6b3d;
    background: rgba(246, 235, 200, 0.48);
    box-shadow: 0 0 0 1px rgba(95, 107, 61, 0.08);
}

#modal-fraccion input[type="radio"] {
    accent-color: #5f6b3d;
}

#modal-fraccion #frac-titulo {
    font-family: var(--lbg-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

@media (max-width: 640px) {
    #modal-fraccion > div {
        transform: translateY(100%);
        border-radius: 1.6rem 1.6rem 0 0;
    }

    #modal-fraccion.modal-fraccion-visible > div {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #modal-fraccion,
    #modal-fraccion > div,
    #modal-fraccion .opcion-fraccion {
        transition: none !important;
        transform: none !important;
    }
}


#modal-whatsapp,
#modal-terminos {
    opacity: 0;
    transition: opacity 220ms ease;
}

#modal-whatsapp.modal-whatsapp-visible,
#modal-terminos.modal-terminos-visible {
    opacity: 1;
}

#modal-whatsapp > div,
#modal-terminos > div {
    opacity: 0;
    transform: translateY(1rem) scale(0.985);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

#modal-whatsapp.modal-whatsapp-visible > div,
#modal-terminos.modal-terminos-visible > div {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (max-width: 640px) {
    #modal-whatsapp > div,
    #modal-terminos > div {
        transform: translateY(100%);
    }

    #modal-whatsapp.modal-whatsapp-visible > div,
    #modal-terminos.modal-terminos-visible > div {
        transform: translateY(0);
    }
}