:root{
    --orange:#f59b1e;
    --orange-light:#ffb84d;
    --black:#0a0906;
    --panel:#15120f;
    --cream:#fff8ef;
    --muted:#a89f92;
    --danger:#e5484d;
    --line:rgba(255,248,239,.1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--black);
    color:var(--cream);
    font-family:'Kanit',system-ui,sans-serif;
}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 18px;
    background:linear-gradient(to bottom,rgba(10,9,6,.98),rgba(10,9,6,.7),transparent);
}

.brand{display:flex;flex-direction:column;line-height:.85}
.brand span,.brand strong{font-family:'Anton',sans-serif}
.brand span{font-size:19px}
.brand strong{font-size:25px;color:var(--orange);transform:rotate(-2deg)}
.brand small{margin-top:6px;color:var(--muted);letter-spacing:.25em;font-size:8px}

.header-actions{display:flex;align-items:center;gap:14px;font-weight:700}
.primary-link,.cart-trigger{
    padding:10px 16px;
    border-radius:999px;
    background:var(--orange);
    color:var(--black);
    font-weight:800;
    border:0;
}

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    padding:120px 22px 70px;
    background:
        radial-gradient(circle at 70% 30%,rgba(245,155,30,.2),transparent 35%),
        linear-gradient(145deg,#21130a 0%,#0a0906 66%);
}
.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(10,9,6,.98),rgba(10,9,6,.1));
}
.hero-content{position:relative;z-index:2;max-width:820px}
.eyebrow{
    margin:0 0 8px;
    color:var(--orange);
    text-transform:uppercase;
    letter-spacing:.28em;
    font-size:11px;
    font-weight:800;
}
.hero h1,.story h2,.category-heading h1,.order-card h1{
    margin:0;
    font-family:'Anton',sans-serif;
    text-transform:uppercase;
    line-height:1;
}
.hero h1{font-size:clamp(54px,10vw,110px);max-width:950px}
.hero p{max-width:620px;color:var(--muted);font-size:18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border-radius:999px;
    font-weight:800;
    border:1px solid transparent;
}
.btn-primary{background:var(--orange);color:var(--black)}
.btn-secondary{border-color:rgba(255,248,239,.35)}
.btn.full{width:100%}

.story{max-width:1100px;margin:auto;padding:70px 22px 120px}
.story-block{
    display:grid;
    grid-template-columns:minmax(120px,240px) 1fr;
    gap:36px;
    align-items:center;
    padding:80px 0;
    border-bottom:1px solid var(--line);
}
.story-block.reverse{direction:rtl}
.story-block.reverse > *{direction:ltr}
.year{
    font-family:'Anton';
    font-size:clamp(70px,14vw,180px);
    color:rgba(245,155,30,.16);
}
.story h2{font-size:clamp(42px,7vw,78px)}
.story p{color:var(--muted);font-size:17px;line-height:1.7}
.site-footer{padding:28px 22px;display:flex;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted)}

.menu-page{padding-top:128px}
.menu-header{background:rgba(10,9,6,.95);backdrop-filter:blur(12px)}
.cart-trigger{display:flex;gap:8px;align-items:center}
.cart-trigger span{
    min-width:22px;height:22px;border-radius:999px;
    display:grid;place-items:center;background:var(--black);color:var(--cream)
}

.category-tabs{
    position:fixed;
    top:74px;
    left:0;
    right:0;
    z-index:90;
    display:flex;
    gap:8px;
    overflow:auto;
    padding:10px 16px 14px;
    background:rgba(10,9,6,.94);
    scrollbar-width:none;
}
.category-tabs::-webkit-scrollbar{display:none}
.category-tab{
    flex:0 0 auto;
    border:1px solid rgba(255,248,239,.18);
    background:transparent;
    color:var(--muted);
    border-radius:999px;
    padding:9px 15px;
    font-weight:700;
}
.category-tab.active{background:var(--orange);border-color:var(--orange);color:var(--black)}

.menu-shell{padding:28px 18px 100px;max-width:1200px;margin:auto}
.category-panel{display:none}
.category-panel.active{display:block}
.category-heading{margin-bottom:28px}
.category-heading h1{font-size:clamp(44px,8vw,82px)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.product-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:26px;
    overflow:hidden;
    transform-style:preserve-3d;
    transition:transform .3s ease,border-color .3s ease;
}
.product-card:hover{transform:translateY(-5px) rotateX(1deg);border-color:rgba(245,155,30,.45)}
.product-media{height:240px;background:#211a14;overflow:hidden}
.product-media img{width:100%;height:100%;object-fit:cover;display:block}
.image-placeholder{height:100%;display:grid;place-items:center;color:var(--muted)}
.product-content{padding:18px;display:flex;flex-direction:column;gap:24px}
.product-content h2{margin:0;font-size:21px}
.product-content p{margin:7px 0 0;color:var(--muted);font-size:14px;min-height:42px}
.product-bottom{display:flex;align-items:center;justify-content:space-between}
.product-bottom strong{font-family:'Anton';font-size:27px;color:var(--orange)}
.add-button{
    border:0;border-radius:999px;background:var(--orange);color:var(--black);
    padding:10px 17px;font-weight:800
}
.add-button:disabled{opacity:.4;cursor:not-allowed}

.cart-overlay{
    position:fixed;inset:0;z-index:120;
    background:rgba(0,0,0,.65);
    opacity:0;pointer-events:none;transition:.3s
}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
    position:fixed;top:0;right:0;bottom:0;z-index:130;
    width:min(460px,100%);
    background:var(--panel);
    transform:translateX(105%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line)}
.cart-head h2{margin:0;font-family:'Anton';font-size:34px}
.cart-head button{border:0;background:rgba(255,255,255,.08);color:var(--cream);width:38px;height:38px;border-radius:999px}
.cart-list{flex:1;overflow:auto;padding:14px 20px}
.empty-cart{padding:50px 10px;text-align:center;color:var(--muted)}
.cart-line{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px dashed var(--line)}
.cart-line strong,.cart-line span{display:block}
.cart-line span{color:var(--muted);font-size:13px}
.quantity-control{display:flex;align-items:center;gap:9px}
.quantity-control button{border:0;width:29px;height:29px;border-radius:50%;font-weight:800}
.checkout-form{padding:18px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.checkout-form h3{margin:0 0 12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
input,textarea{
    width:100%;
    background:#0f0d0b;
    border:1px solid rgba(255,248,239,.12);
    color:var(--cream);
    border-radius:13px;
    padding:12px 13px;
    outline:none;
}
textarea{margin-top:9px;min-height:72px;resize:vertical}
.cart-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.cart-total strong{font-family:'Anton';font-size:30px;color:var(--orange)}
.form-message{min-height:20px;margin:8px 0 0;color:var(--danger);font-size:13px}

.packing-animation{
    position:fixed;
    z-index:200;
    width:74px;height:74px;
    pointer-events:none;
    transform:translate(-50%,-50%);
    opacity:0;
}
.packing-box{
    width:74px;height:56px;
    border:4px solid var(--orange);
    border-top-width:12px;
    border-radius:8px;
    background:#3a2412;
    transform-style:preserve-3d;
}
.packing-animation.run{
    animation:flyToCart .9s cubic-bezier(.2,.75,.2,1) forwards
}
@keyframes flyToCart{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotateX(50deg)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotateX(0)}
    45%{transform:translate(-50%,-50%) scale(.85) rotateY(180deg)}
    100%{opacity:0;left:calc(100% - 58px);top:38px;transform:translate(-50%,-50%) scale(.15) rotate(540deg)}
}

.order-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.order-card{
    width:min(620px,100%);
    background:var(--panel);
    border:1px solid rgba(245,155,30,.25);
    border-radius:30px;
    padding:28px;
}
.order-card h1{font-size:52px}
.status-pill{display:inline-flex;margin:15px 0;padding:8px 13px;border-radius:999px;background:rgba(245,155,30,.12);color:var(--orange);font-weight:800}
.order-code{font-family:'Anton';font-size:31px;margin:15px 0}
.customer-summary{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.customer-summary span{color:var(--muted)}
.order-items{padding:14px 0}
.order-item-row,.order-total{display:flex;justify-content:space-between;gap:18px;padding:9px 0}
.order-total{font-size:20px;border-top:1px solid var(--line)}
.order-total strong{font-family:'Anton';font-size:31px;color:var(--orange)}
.qr-box{text-align:center;padding:22px 0}
.qr-box img{width:min(280px,100%);background:#fff;padding:12px;border-radius:18px}
.qr-box p{color:var(--muted)}

@media(max-width:700px){
    .header-actions a:first-child{display:none}
    .hero{padding-bottom:54px}
    .hero h1{font-size:58px}
    .hero p{font-size:16px}
    .story-block,.story-block.reverse{grid-template-columns:1fr;direction:ltr;gap:10px}
    .year{font-size:84px}
    .form-grid{grid-template-columns:1fr}
    .site-footer{flex-direction:column;gap:6px}
}


/* =========================================================
   LANDING DINÁMICA — SIN INDICADOR DE SCROLL NI CAJAS
   ========================================================= */

.scroll-indicator,
.scroll-down,
.mouse-scroll,
.mouse-icon,
.scroll-mouse,
[data-scroll-indicator],
.hero::after,
.hero-content::after {
    display: none !important;
    content: none !important;
}

.hero {
    overflow: hidden;
    align-items: center;
    min-height: 100svh;
}

.hero-content {
    width: min(940px, 100%);
    padding-top: 60px;
}

.hero-content > p,
.hero-content > h1,
.hero-content > .hero-actions {
    position: relative;
    z-index: 2;
}

.story {
    max-width: 1240px;
    padding-top: 90px;
    overflow: hidden;
}

.story-block,
.story-block.reverse {
    min-height: 78vh;
    padding: 110px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.story-block::before,
.story-block::after {
    display: none;
}

.story-copy {
    max-width: 720px;
}

.story-block.reverse .story-copy {
    margin-left: auto;
}

.story h2 {
    text-wrap: balance;
}

.story p {
    max-width: 660px;
}

.year {
    background: transparent;
    border: 0;
    box-shadow: none;
    user-select: none;
}

.reveal-item,
.reveal-section {
    opacity: 0;
    transform: translate3d(0, 58px, 0);
    filter: blur(12px);
    transition:
        opacity .95s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms),
        transform .95s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms),
        filter .95s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

.reveal-section {
    transform: translate3d(0, 90px, 0);
}

.reveal-item.is-visible,
.reveal-section.is-visible,
.reveal-section.is-visible .reveal-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.hero .reveal-item:nth-child(2) {
    transition-delay: 100ms;
}

.hero .reveal-item:nth-child(3) {
    transition-delay: 210ms;
}

.hero .reveal-item:nth-child(4) {
    transition-delay: 320ms;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-item,
    .reveal-section {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

@media(max-width:700px) {
    .hero {
        align-items: flex-end;
        min-height: 100svh;
        padding-bottom: 70px;
    }

    .story {
        padding-top: 40px;
    }

    .story-block,
    .story-block.reverse {
        min-height: 72svh;
        padding: 85px 0;
    }

    .story-copy,
    .story-block.reverse .story-copy {
        margin: 0;
    }

    .reveal-item,
    .reveal-section {
        transform: translate3d(0, 42px, 0);
    }
}