:root{
    --color-primary:#D9710B;
    --color-primary-dark:#dd4210;
    --color-secondary:#9E4F09;
    --color-accent:#ffd166;
    --color-bg:#f5f5f3;
    --color-surface:#ffffff;
    --color-text:#171717;
    --color-muted:#747474;
    --color-border:#e6e4df;
    --color-success:#14804a;
    --color-danger:#c62828;
    --color-whatsapp:#1f9d55;
    --btn-primary-bg:var(--color-primary);
    --btn-primary-text:#fff;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:28px;
    --shadow:0 16px 50px rgba(0,0,0,.12);
    --max-width:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}button,input,textarea{font:inherit}button{cursor:pointer}
.hero{
    position:relative;
    min-height:420px;
    padding:24px 20px 34px;
    color:#fff;
    background:#0A0A0A;
    overflow:hidden}

.hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;bottom:-80px;background:var(--color-primary);opacity:.22}.brand,.hero-copy,.hero-contact{position:relative;z-index:2}.brand{display:flex;align-items:center;gap:12px;max-width:var(--max-width);margin:auto}.logo-mark{width:54px;height:54px;border-radius:16px;background:var(--color-primary);display:grid;place-items:center;font-weight:900;font-size:18px;box-shadow:0 10px 25px rgba(255,90,31,.28)}.brand span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#bdbdbd}.brand h1{font-size:22px;margin:2px 0 0}.hero-copy{max-width:var(--max-width);margin:54px auto 0}.eyebrow{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--color-accent)}.hero-copy h2{font-size:clamp(44px,11vw,76px);line-height:.93;margin:10px 0 18px;max-width:700px}.hero-copy em{font-style:normal;color:var(--color-primary)}.hero-copy>p:last-child{max-width:520px;color:#d7d7d7;line-height:1.6}.hero-contact{display:inline-flex;margin:14px max(20px,calc((100% - var(--max-width))/2));text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 14px;border-radius:999px;font-size:13px}.search-wrap{max-width:var(--max-width);margin:-24px auto 0;padding:0 14px;position:relative;z-index:5}.search-box{background:#fff;border-radius:18px;padding:15px 17px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px}.search-box input{width:100%;border:0;outline:0;font-size:16px}.category-scroll{position:sticky;top:0;z-index:20;display:flex;gap:9px;overflow:auto;padding:14px;background:rgba(245,245,243,.95);backdrop-filter:blur(10px);scrollbar-width:none}.category-scroll::-webkit-scrollbar{display:none}.cat-btn{flex:0 0 auto;border:1px solid var(--color-border);background:#fff;border-radius:999px;padding:10px 14px;font-weight:800;color:var(--color-text)}.cat-btn.active{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}
.menu,.contact
{max-width:var(--max-width);margin:auto;padding:24px 14px 80px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.section-head small{color:var(--color-primary);font-weight:900;letter-spacing:.12em}.section-head h3{font-size:28px;margin:6px 0}.section-head>span{font-size:13px;color:var(--color-muted)}.product-grid{display:grid;grid-template-columns:1fr;gap:14px}.product-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;display:grid;grid-template-columns:112px 1fr;min-height:140px}.product-image{width:100%;height:100%;min-height:140px;object-fit:cover;background:linear-gradient(135deg,#eee,#ddd)}.product-placeholder{display:grid;place-items:center;font-size:38px;color:#999}.product-info{padding:15px;display:flex;flex-direction:column}.product-info small{color:var(--color-primary);font-weight:900}.product-info h4{font-size:18px;margin:5px 0}.product-info p{font-size:13px;line-height:1.45;color:var(--color-muted);margin:0 0 12px}.product-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px}.product-price{font-weight:900;font-size:18px}.add-btn{border:0;background:var(--btn-primary-bg);color:var(--btn-primary-text);font-weight:900;border-radius:12px;padding:9px 13px}

.cart-fab{position:fixed;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:40;border:0;border-radius:999px;background:var(--color-secondary);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:8px;box-shadow:0 14px 32px rgba(0,0,0,.28)}


.cart-fab b{background:var(--color-primary);width:25px;height:25px;border-radius:50%;display:grid;place-items:center}


.overlay{position:fixed;inset:0;background:rgba(0,0,0,.52);opacity:0;pointer-events:none;transition:.25s;z-index:50}.overlay.show{opacity:1;pointer-events:auto}.cart{position:fixed;z-index:60;inset:auto 0 0 0;max-height:88vh;background:#fff;border-radius:28px 28px 0 0;transform:translateY(105%);transition:.3s ease;display:flex;flex-direction:column;box-shadow:var(--shadow)}.cart.open{transform:translateY(0)}.cart-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--color-border)}.cart-head small,.modal-kicker{color:var(--color-primary);font-weight:900;letter-spacing:.12em}.cart-head h3{margin:3px 0 0}.icon-btn,.modal-x{border:0;background:#f1f1ef;border-radius:50%;width:40px;height:40px;font-size:24px}.cart-items{padding:10px 18px;overflow:auto}.cart-empty{text-align:center;color:var(--color-muted);padding:44px 12px}.cart-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid var(--color-border)}.cart-item h4{margin:0 0 4px}.cart-item small{color:var(--color-muted)}.qty{display:flex;align-items:center;gap:8px}.qty button{border:0;border-radius:9px;width:31px;height:31px}.cart-summary{border-top:1px solid var(--color-border);padding:18px 20px 22px;background:#fff}.cart-summary>div{display:flex;justify-content:space-between;margin:5px 0}.grand{font-size:21px;padding-top:8px}.send-btn,.paid-btn,.transfer-btn{width:100%;border:0;border-radius:14px;padding:14px;font-weight:900;margin-top:14px}.send-btn{background:var(--btn-primary-bg);color:#fff}.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:none;align-items:flex-end}.modal.show{display:flex}.modal-card{width:100%;max-height:94vh;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:25px 18px 28px;position:relative}.modal-card h3{font-size:28px;margin:8px 0}.modal-card>p{color:var(--color-muted);line-height:1.5}.modal-x{position:absolute;right:16px;top:16px}.form-grid,.delivery-fields{display:grid;gap:13px}.modal-card label{display:grid;gap:7px;font-size:13px;font-weight:800}.modal-card input,.modal-card textarea{width:100%;border:1px solid var(--color-border);border-radius:12px;padding:13px;outline:0;background:#fff}.modal-card input:focus,.modal-card textarea:focus{border-color:var(--color-primary)}.modal-card textarea{resize:vertical;min-height:82px}.delivery-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.delivery-choice label{display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);padding:13px;border-radius:13px}.delivery-choice input{width:auto}.hidden{display:none!important}.notes-label{margin-top:14px}.payment-section{margin-top:22px;border-top:1px solid var(--color-border);padding-top:18px}.payment-title,.timer-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.transfer-btn{background:#f3f0ea;color:var(--color-secondary)}.bank-box{margin-top:13px;padding:16px;background:#f8f8f6;border:1px solid var(--color-border);border-radius:16px}.timer-row strong{font-size:22px;color:var(--color-danger)}.bank-box dl{margin:13px 0}.bank-box dl div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid #e7e5e0}.bank-box dt{color:var(--color-muted)}.bank-box dd{font-weight:800;margin:0;text-align:right}.payment-note{font-size:13px;line-height:1.55;background:#fff;padding:12px;border-radius:12px}.paid-btn{background:var(--color-whatsapp);color:#fff}.contact{padding-top:18px}.contact-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border)}.contact-info{padding:20px}.contact-info h4{font-size:22px;margin:0 0 12px}.contact-info p{color:var(--color-muted);line-height:1.5}.contact iframe{width:100%;height:320px;border:0;display:block}.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#111;color:#fff;padding:11px 15px;border-radius:999px;z-index:100;transition:.25s;max-width:88%;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:700px){.hero{min-height:510px;padding-left:30px;padding-right:30px}.product-grid{grid-template-columns:repeat(2,1fr)}.product-card{grid-template-columns:150px 1fr}.modal{align-items:center;justify-content:center;padding:22px}.modal-card{max-width:680px;border-radius:28px}.form-grid,.delivery-fields{grid-template-columns:1fr 1fr}.cart{inset:0 0 0 auto;width:min(460px,100%);max-height:none;border-radius:28px 0 0 28px;transform:translateX(105%)}.cart.open{transform:translateX(0)}.contact-card{display:grid;grid-template-columns:.75fr 1.25fr}.contact iframe{height:100%;min-height:360px}}
@media (min-width:1050px){.product-grid{grid-template-columns:repeat(3,1fr)}.product-card{grid-template-columns:1fr;min-height:0}.product-image{height:190px}.product-placeholder{height:190px}.product-info{min-height:200px}.category-scroll{justify-content:center}.search-wrap{padding:0 20px}.menu,.contact{padding-left:20px;padding-right:20px}}

/* =========================================================
   HERO - LOGO + TEXTO
========================================================= */

.hero-layout {
    width: 100%;

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

    gap: 16px;
}


/* =========================================================
   LOGO
========================================================= */

.hero-logo-wrap {
    flex: 0 0 auto;

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


.hero-logo {
    display: block;

    width: 300px;
    height: auto;

    object-fit: contain;
}


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

.hero-copy {
    flex: 1;
    min-width: 0;

    margin: 0;
    padding: 0;
}


.hero-copy h2 {
    margin: 0 0 10px 0;
}


.hero-copy p {
    margin: 0 0 14px 0;
    max-width: 520px;
}


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

@media (max-width: 900px) {

    .hero-layout {
        gap: 12px;
    }

    .hero-logo {
        width: 240px;
    }

}


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

@media (max-width: 768px) {

    .hero-layout {
        display: flex;
        flex-direction: column;

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

        width: 100%;

        gap: 4px;
    }


    .hero-logo-wrap {
        width: 100%;

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

        margin: 0;
        padding: 0;
    }


    .hero-logo {
        width: 88vw;
        max-width: 360px;

        height: auto;

        margin: 0;
        padding: 0;

        object-fit: contain;
    }


    .hero-copy {
        width: 100%;

        margin: 0;
        padding: 0;

        text-align: left;
    }


    .hero-copy h2 {
        margin: 0 0 8px 0;

        font-size: clamp(30px, 9vw, 42px);
        line-height: 1.05;
    }


    .hero-copy p {
        margin: 0 0 12px 0;

        max-width: 100%;

        font-size: 15px;
        line-height: 1.5;
    }


    .hero-contact {
        margin-top: 4px;
    }

}


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

@media (max-width: 420px) {

    .hero-logo {
        width: 92vw;
        max-width: 340px;
    }

}
.product-grid {
    background-color: #D5A55A;
    padding: 20px;
    border-radius: 20px;
}
main {
     background-color: #7A451F;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 2px,
            rgba(0,0,0,0.035) 3px,
            rgba(0,0,0,0.035) 5px
        ),
        linear-gradient(
            90deg,
            #4F2B16 0%,
            #8A5228 25%,
            #6B3B1D 50%,
            #9A5C2B 75%,
            #5A3018 100%
        );

    border-top: 3px solid #D5A55A;
    border-bottom: 3px solid #3E2111;

    padding: 14px 12px;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.12),
        inset 0 -4px 8px rgba(0,0,0,0.25),
        0 4px 12px rgba(0,0,0,0.20);
   
}
.category-scroll {

    background-color: #D5A55A;
}

/* =========================================================
   PRODUCTOS - FOTO COMPLETA SOLO EN CELULAR
========================================================= */

@media (max-width: 699px) {

    .product-card {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100%;
        min-height: 0 !important;
    }

    .product-image {
        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

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

        display: block !important;
    }

}
/* =========================================================
   RESUMEN CHECKOUT
========================================================= */

.checkout-totals {
    margin-top: 20px;

    padding: 16px;

    background: #f7f5f0;

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

    border-radius: 16px;
}

.checkout-totals > div {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    padding: 7px 0;
}

.checkout-totals span {
    color: var(--color-muted);
}

.checkout-totals strong {
    font-weight: 900;
}

.checkout-grand-total {
    margin-top: 8px;

    padding-top: 14px !important;

    border-top: 2px solid var(--color-border);

    font-size: 20px;
}

.checkout-grand-total span {
    color: var(--color-text);
    font-weight: 900;
}

.checkout-grand-total strong {
    font-size: 27px;

    color: var(--color-primary);
}
/* =========================================================
   SELECT COMUNA - SOLO CELULAR
========================================================= */

@media (max-width: 699px) {

    #customerCommune {
        width: 100%;

        min-height: 52px;

        padding: 0 45px 0 15px;

        border: 2px solid var(--color-primary);
        border-radius: 14px;

        background-color: #fff;

        color: var(--color-text);

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

        outline: none;

        cursor: pointer;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

        /* Quitar flecha predeterminada */
        appearance: none;
        -webkit-appearance: none;

        /* Nueva flecha */
        background-image:
            linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
            linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);

        background-position:
            calc(100% - 20px) 22px,
            calc(100% - 14px) 22px;

        background-size:
            6px 6px,
            6px 6px;

        background-repeat: no-repeat;
    }


    #customerCommune:focus {
        border-color: var(--color-primary-dark);

        box-shadow:
            0 0 0 3px rgba(217, 113, 11, 0.15);
    }


    #customerCommune option {
        background: #fff;
        color: #171717;

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

}
/* =========================================================
   NUESTRO LOCAL - VIDEO
========================================================= */

.local-video {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 14px 80px;
}

.local-video h3 {
    margin: 0 0 16px;

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

    color: #fff;
}

.local-video-box {
    width: 100%;

    overflow: hidden;

    border-radius: var(--radius-lg);

    background: #000;

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

.local-video-box video {
    display: block;

    width: 100%;
    height: 320px;

    object-fit: cover;

    background: #000;
}


/* =========================================================
   VIDEO - CELULAR
========================================================= */

@media (max-width: 699px) {

    .local-video {
        width: 100%;

        padding:
            0
            14px
            60px;

        margin: 0;
    }

    .local-video h3 {
        font-size: 26px;

        margin-bottom: 12px;
    }

    .local-video-box {
        width: 100%;

        border-radius: 18px;
    }

    .local-video-box video {
        width: 100%;
        height: auto;

        max-height: none;

        object-fit: contain;
    }

}