/* ============================================================
   CHICHARRONERÍA DON OSKAR — HOME REDESIGN
   Dark Cinematic Premium · Delivery-first
   Author: redesign 2026-06-29
   Scope: homepage sections only (prefix .dh-).
   Header (.doh-) and footer are NOT affected.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
    --do-bg:        #0b0907;   /* near-black, warm */
    --do-bg-2:      #15100d;   /* charcoal brown   */
    --do-bg-3:      #1f1714;   /* raised surface   */
    --do-ink:       #f6efe3;   /* cream text       */
    --do-ink-soft:  rgba(246, 239, 227, 0.66);
    --do-ink-faint: rgba(246, 239, 227, 0.40);
    --do-line:      rgba(245, 198, 96, 0.16); /* hairline gold */
    --do-line-soft: rgba(255, 255, 255, 0.07);

    --do-gold:      #f5c660;   /* amber gold       */
    --do-gold-deep: #e0a13a;
    --do-ember:     #ef4444;   /* ember red        */
    --do-ember-deep:#b91c1c;
    --do-green:     #34d399;   /* fresh / abierto  */

    --do-grad-gold:  linear-gradient(135deg, #f7d488 0%, #f5c660 40%, #e0a13a 100%);
    --do-grad-ember: linear-gradient(135deg, #f97316 0%, #ef4444 55%, #b91c1c 100%);
    --do-grad-glass: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));

    --do-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --do-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --do-poetic:'Cormorant Garamond', 'Playfair Display', Georgia, serif; /* nav / editorial */

    --do-radius:   20px;
    --do-radius-sm:14px;
    --do-shadow:   0 24px 60px -20px rgba(0, 0, 0, 0.7);
    --do-shadow-gold: 0 18px 50px -16px rgba(245, 198, 96, 0.35);
    --do-ease:     cubic-bezier(0.22, 1, 0.36, 1);
    --do-maxw:     1240px;
}

/* ---------- Page base (overrides Tailwind bg) ---------- */
body.index-page {
    background: var(--do-bg) !important;
    color: var(--do-ink);
}
body.index-page #main-content { background: var(--do-bg); }

/* film-grain + ember vignette behind the whole main */
#main-content::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(239, 68, 68, 0.10), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(245, 198, 96, 0.08), transparent 60%);
}
#main-content::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
body.index-page main > section { position: relative; z-index: 1; }

/* ---------- Shared section shell ---------- */
.dh-section {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 9vw, 8rem) 0;
    background: var(--do-bg);
}
.dh-section--alt { background: linear-gradient(180deg, var(--do-bg) 0%, var(--do-bg-2) 100%); }
.dh-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--do-maxw);
    margin: 0 auto;
    padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}

/* soft ember glow blobs for sections */
.dh-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.dh-glow--gold  { background: radial-gradient(circle, rgba(245,198,96,0.5), transparent 70%); }
.dh-glow--ember { background: radial-gradient(circle, rgba(239,68,68,0.45), transparent 70%); }

/* ---------- Section heading kit ---------- */
.dh-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2.2rem, 5vw, 3.5rem); }
.dh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--do-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--do-gold);
    padding: 0.45rem 1rem;
    border: 1px solid var(--do-line);
    border-radius: 999px;
    background: rgba(245, 198, 96, 0.05);
    margin-bottom: 1.3rem;
}
.dh-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--do-gold); opacity: 0.7; }
.dh-title {
    font-family: var(--do-serif);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--do-ink);
    margin: 0;
}
.dh-title .gold {
    background: var(--do-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}
.dh-subtitle {
    margin: 1.1rem auto 0;
    max-width: 56ch;
    font-family: var(--do-sans);
    font-size: clamp(0.98rem, 1.6vw, 1.12rem);
    line-height: 1.6;
    color: var(--do-ink-soft);
}

/* ---------- Buttons ---------- */
.dh-btn {
    --b: var(--do-grad-ember);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--do-sans);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--do-ease), box-shadow 0.4s var(--do-ease), background 0.3s ease, color 0.3s ease;
}
.dh-btn i { transition: transform 0.4s var(--do-ease); }
.dh-btn--primary {
    background: var(--do-grad-ember);
    color: #fff;
    box-shadow: 0 14px 34px -12px rgba(239, 68, 68, 0.7);
}
.dh-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -14px rgba(239, 68, 68, 0.85); color: #fff; }
.dh-btn--gold {
    background: var(--do-grad-gold);
    color: #2a1c08;
    box-shadow: var(--do-shadow-gold);
}
.dh-btn--gold:hover { transform: translateY(-3px); color: #2a1c08; }
.dh-btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--do-ink);
    border-color: var(--do-line);
    backdrop-filter: blur(8px);
}
.dh-btn--ghost:hover { background: rgba(245, 198, 96, 0.1); border-color: var(--do-gold); color: var(--do-ink); transform: translateY(-3px); }
.dh-btn:hover i.dh-arrow { transform: translateX(4px); }
/* sweep shine */
.dh-btn::after {
    content: "";
    position: absolute;
    top: 0; left: -130%;
    width: 70%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--do-ease);
}
.dh-btn:hover::after { left: 130%; }

/* ---------- Glass card base ---------- */
.dh-card {
    position: relative;
    background: var(--do-grad-glass);
    border: 1px solid var(--do-line-soft);
    border-radius: var(--do-radius);
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.5s var(--do-ease), border-color 0.5s var(--do-ease), box-shadow 0.5s var(--do-ease);
}
.dh-card:hover {
    transform: translateY(-8px);
    border-color: var(--do-line);
    box-shadow: var(--do-shadow);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity 0.9s var(--do-ease), transform 0.9s var(--do-ease);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-dh-reveal="left"]  { transform: translateX(-46px); }
.reveal[data-dh-reveal="right"] { transform: translateX(46px); }
.reveal[data-dh-reveal="zoom"]  { transform: scale(0.92); }
.reveal[data-dh-reveal="left"].is-visible,
.reveal[data-dh-reveal="right"].is-visible,
.reveal[data-dh-reveal="zoom"].is-visible { transform: none; }
/* stagger via inline --i */
.reveal[style*="--i"] { transition-delay: calc(var(--i) * 90ms); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
    * { scroll-behavior: auto !important; }
}

/* ============================================================
   SKELETON LOADER (shimmer)
   ============================================================ */
.dh-skel {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
}
.dh-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(245, 198, 96, 0.12), transparent);
    animation: dh-shimmer 1.4s infinite;
}
@keyframes dh-shimmer { 100% { transform: translateX(100%); } }
/* hidden once the real content is ready */
.dh-skel-wrap.is-ready .dh-skel { display: none; }
.dh-skel-wrap:not(.is-ready) .dh-skel-real { visibility: hidden; }

/* ============================================================
   HERO — full-bleed cinematic
   ============================================================ */
.dh-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    /* push content below the fixed header (135px desktop) */
    padding: clamp(150px, 18vh, 220px) 1.2rem clamp(4rem, 9vh, 7rem);
    background: #000;
}
.dh-hero__media { position: absolute; inset: 0; z-index: -3; }
.dh-hero__media img,
.dh-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transform: scale(1.06);
    will-change: transform;
}
/* parallax + slow ken-burns on the image */
.dh-hero__media img { animation: dh-kenburns 22s ease-in-out infinite alternate; }
@keyframes dh-kenburns {
    from { transform: scale(1.06); }
    to   { transform: scale(1.16); }
}
/* cinematic overlays */
.dh-hero__scrim {
    position: absolute; inset: 0; z-index: -2;
    background:
        linear-gradient(180deg, rgba(8,6,5,0.72) 0%, rgba(8,6,5,0.35) 35%, rgba(8,6,5,0.55) 70%, rgba(8,6,5,0.95) 100%),
        radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.dh-hero__ember {
    position: absolute; z-index: -1; pointer-events: none;
    width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
    left: 50%; top: 42%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(239,68,68,0.28), rgba(245,198,96,0.12) 45%, transparent 70%);
    filter: blur(40px);
    animation: dh-pulse 6s ease-in-out infinite;
}
@keyframes dh-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

.dh-hero__inner { position: relative; z-index: 2; max-width: 900px; }
.dh-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: var(--do-sans);
    font-size: clamp(0.66rem, 1.4vw, 0.8rem);
    font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--do-gold);
    margin-bottom: 1.6rem;
}
.dh-hero__eyebrow span { display: inline-block; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--do-gold)); }
.dh-hero__eyebrow span:last-child { background: linear-gradient(90deg, var(--do-gold), transparent); }

.dh-hero__title {
    font-family: var(--do-serif);
    font-weight: 800;
    font-size: clamp(2.7rem, 8.5vw, 6.4rem);
    line-height: 0.96;
    letter-spacing: -0.02em;
    margin: 0;
    color: #fff;
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.dh-hero__title .line { display: block; overflow: hidden; }
.dh-hero__title .gold {
    background: var(--do-grad-gold);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}
.dh-hero__lede {
    margin: 1.7rem auto 0;
    max-width: 46ch;
    font-family: var(--do-sans);
    font-size: clamp(1rem, 2vw, 1.22rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}
.dh-hero__lede .pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-weight: 600; color: var(--do-gold);
}
.dh-hero__cta {
    margin-top: 2.4rem;
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
/* status + trust row */
.dh-hero__meta {
    margin-top: 2.4rem;
    display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--do-sans);
    font-size: 0.86rem;
}
.dh-hero__meta-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.dh-hero__meta-item i { color: var(--do-gold); }
.dh-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--do-green);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2);
    animation: dh-pulse 2.4s infinite;
}
.dh-dot--closed { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,0.2); }

/* scroll cue */
.dh-hero__scroll {
    position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%);
    z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
    text-decoration: none;
}
.dh-hero__mouse {
    width: 24px; height: 40px; border: 2px solid rgba(255,255,255,0.4); border-radius: 14px;
    display: flex; justify-content: center; padding-top: 7px;
}
.dh-hero__mouse i { width: 3px; height: 7px; background: var(--do-gold); border-radius: 2px; animation: dh-scroll 1.8s infinite; }
@keyframes dh-scroll { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(11px); opacity: 0; } }

/* hero entrance */
.dh-hero__inner > * { opacity: 0; transform: translateY(28px); animation: dh-rise 1s var(--do-ease) forwards; }
.dh-hero__eyebrow { animation-delay: 0.15s; }
.dh-hero__title   { animation-delay: 0.30s; }
.dh-hero__lede    { animation-delay: 0.55s; }
.dh-hero__cta     { animation-delay: 0.72s; }
.dh-hero__meta    { animation-delay: 0.88s; }
@keyframes dh-rise { to { opacity: 1; transform: none; } }

/* ============================================================
   MENU (delivery) — categories rail + featured dishes
   ============================================================ */
.dh-menu__filters {
    display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
    margin-bottom: 2.6rem;
}
.dh-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--do-line-soft);
    background: rgba(255, 255, 255, 0.03);
    color: var(--do-ink-soft);
    font-family: var(--do-sans); font-size: 0.86rem; font-weight: 500;
    text-decoration: none;
    transition: all 0.35s var(--do-ease);
}
.dh-chip i { color: var(--do-gold); }
.dh-chip:hover { color: var(--do-ink); border-color: var(--do-gold); transform: translateY(-2px); }
.dh-chip .dh-chip__count { color: var(--do-ink-faint); font-size: 0.78rem; }

.dh-dishes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(1rem, 2.2vw, 1.6rem);
}
.dh-dish { display: flex; flex-direction: column; }
.dh-dish__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.dh-dish__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s var(--do-ease);
}
.dh-dish:hover .dh-dish__media img { transform: scale(1.08); }
.dh-dish__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(11,9,7,0.85) 100%);
}
.dh-dish__badges { position: absolute; top: 0.8rem; left: 0.8rem; right: 0.8rem; display: flex; justify-content: space-between; z-index: 2; }
.dh-badge {
    font-family: var(--do-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
    padding: 0.32rem 0.7rem; border-radius: 999px; color: #fff;
    display: inline-flex; align-items: center; gap: 0.3rem;
    backdrop-filter: blur(6px);
}
.dh-badge--rank   { background: rgba(245, 198, 96, 0.92); color: #2a1c08; }
.dh-badge--off    { background: var(--do-grad-ember); box-shadow: 0 6px 16px -6px rgba(239,68,68,0.7); }
.dh-badge--top    { background: rgba(17, 17, 17, 0.55); border: 1px solid var(--do-line); color: var(--do-gold); }
.dh-dish__cat {
    position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 2;
    font-family: var(--do-sans); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--do-gold);
}
.dh-dish__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.dh-dish__name {
    font-family: var(--do-serif); font-size: 1.22rem; font-weight: 700; line-height: 1.2;
    color: var(--do-ink); margin: 0 0 0.4rem;
}
.dh-dish__desc {
    font-family: var(--do-sans); font-size: 0.86rem; line-height: 1.5; color: var(--do-ink-soft);
    margin: 0 0 0.9rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dh-dish__rating { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; font-size: 0.82rem; color: var(--do-ink-soft); }
.dh-dish__rating .stars i { color: var(--do-gold); font-size: 0.76rem; }
.dh-dish__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.dh-price { display: flex; flex-direction: column; line-height: 1.1; }
.dh-price__old { font-size: 0.78rem; color: var(--do-ink-faint); text-decoration: line-through; }
.dh-price__now { font-family: var(--do-serif); font-size: 1.4rem; font-weight: 700; color: var(--do-gold); }
.dh-add {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(245, 198, 96, 0.12);
    border: 1px solid var(--do-line);
    color: var(--do-gold);
    font-family: var(--do-sans); font-weight: 600; font-size: 0.86rem;
    padding: 0.62rem 1.1rem; border-radius: 999px; cursor: pointer;
    transition: all 0.35s var(--do-ease);
}
.dh-add:hover { background: var(--do-grad-gold); color: #2a1c08; transform: translateY(-2px); border-color: transparent; }
.dh-dish__out {
    margin-top: auto; text-align: center; padding: 0.6rem;
    background: rgba(255,255,255,0.04); border-radius: 10px;
    color: var(--do-ink-faint); font-size: 0.84rem; font-weight: 600;
}
.dh-menu__cta { text-align: center; margin-top: clamp(2.4rem, 5vw, 3.4rem); }

/* ============================================================
   OFFERS
   ============================================================ */
.dh-offers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(1rem, 2.2vw, 1.5rem);
}
.dh-codes {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
}
.dh-code {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.3rem; border-radius: var(--do-radius-sm);
    border: 1px dashed var(--do-gold);
    background: rgba(245, 198, 96, 0.06);
    cursor: pointer; transition: all 0.35s var(--do-ease);
}
.dh-code:hover { background: rgba(245, 198, 96, 0.12); transform: translateY(-3px); }
.dh-code__val { font-family: var(--do-serif); font-size: 1.3rem; font-weight: 700; color: var(--do-gold); }
.dh-code__txt { display: flex; flex-direction: column; font-family: var(--do-sans); }
.dh-code__code { font-weight: 700; letter-spacing: 0.12em; color: var(--do-ink); font-family: 'Courier New', monospace; }
.dh-code__min { font-size: 0.74rem; color: var(--do-ink-faint); }
.dh-code i { color: var(--do-gold); margin-left: 0.3rem; }

/* ============================================================
   BENEFITS
   ============================================================ */
.dh-benefits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(1rem, 2.2vw, 1.5rem);
}
.dh-benefit { padding: 1.8rem 1.6rem; }
.dh-benefit__icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #2a1c08;
    background: var(--do-grad-gold);
    box-shadow: var(--do-shadow-gold);
    margin-bottom: 1.2rem;
    transition: transform 0.5s var(--do-ease);
}
.dh-benefit:hover .dh-benefit__icon { transform: rotate(-8deg) scale(1.06); }
.dh-benefit--ember .dh-benefit__icon { background: var(--do-grad-ember); color: #fff; box-shadow: 0 16px 40px -14px rgba(239,68,68,0.6); }
.dh-benefit__title { font-family: var(--do-serif); font-size: 1.25rem; font-weight: 700; color: var(--do-ink); margin: 0 0 0.5rem; }
.dh-benefit__desc { font-family: var(--do-sans); font-size: 0.9rem; line-height: 1.55; color: var(--do-ink-soft); margin: 0 0 1rem; }
.dh-benefit__metric { display: flex; align-items: baseline; gap: 0.45rem; }
.dh-benefit__metric b { font-family: var(--do-serif); font-size: 1.6rem; color: var(--do-gold); }
.dh-benefit__metric span { font-size: 0.78rem; color: var(--do-ink-faint); text-transform: uppercase; letter-spacing: 0.1em; }

/* trust stats strip */
.dh-stats {
    margin-top: clamp(2.4rem, 5vw, 3.4rem);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    border-top: 1px solid var(--do-line-soft);
    padding-top: clamp(1.8rem, 4vw, 2.6rem);
}
.dh-stat { text-align: center; }
.dh-stat__num { font-family: var(--do-serif); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--do-ink); line-height: 1; }
.dh-stat__num .suffix { color: var(--do-gold); }
.dh-stat__label { margin-top: 0.4rem; font-size: 0.82rem; color: var(--do-ink-soft); }
.dh-stat__stars { color: var(--do-gold); letter-spacing: 2px; }

/* ============================================================
   STEPS (how to order)
   ============================================================ */
.dh-steps__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem);
    counter-reset: step;
}
.dh-step { padding: 1.8rem 1.4rem; text-align: center; }
.dh-step__num {
    counter-increment: step;
    width: 44px; height: 44px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: var(--do-serif); font-weight: 700; font-size: 1.1rem;
    color: var(--do-gold);
    border: 1px solid var(--do-line);
    background: rgba(245, 198, 96, 0.06);
}
.dh-step__num::before { content: counter(step); }
.dh-step__icon { font-size: 1.7rem; color: var(--do-gold); margin-bottom: 0.8rem; }
.dh-step__title { font-family: var(--do-serif); font-size: 1.18rem; color: var(--do-ink); margin: 0 0 0.4rem; }
.dh-step__desc { font-size: 0.86rem; color: var(--do-ink-soft); line-height: 1.5; margin: 0 0 1rem; }
.dh-step__link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.84rem; font-weight: 600; color: var(--do-gold); text-decoration: none;
}
.dh-step__link:hover i { transform: translateX(3px); }
.dh-step__pays { display: flex; gap: 0.4rem; justify-content: center; }
.dh-pay { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; color: #fff; }
.dh-pay--yape { background: #6c1d96; } .dh-pay--plin { background: #00d4aa; }
.dh-pay--card { background: #3b82f6; } .dh-pay--cash { background: #10b981; }
.dh-step__done { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--do-green); font-weight: 600; font-size: 0.84rem; }

.dh-fulfil { margin-top: clamp(2.2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.dh-fulfil__card { display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem; }
.dh-fulfil__icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #2a1c08; background: var(--do-grad-gold); }
.dh-fulfil__card.ember .dh-fulfil__icon { background: var(--do-grad-ember); color: #fff; }
.dh-fulfil__t { font-family: var(--do-serif); font-size: 1.1rem; color: var(--do-ink); margin: 0; }
.dh-fulfil__p { font-size: 0.82rem; color: var(--do-ink-soft); margin: 0.2rem 0 0; }

/* ============================================================
   REVIEWS / TESTIMONIALS
   ============================================================ */
.dh-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.5rem); }
.dh-review { padding: 1.7rem 1.6rem; display: flex; flex-direction: column; }
.dh-review__quote { font-family: var(--do-serif); font-size: 3rem; line-height: 0.6; color: var(--do-gold); opacity: 0.5; height: 1.2rem; }
.dh-review__text { font-family: var(--do-sans); font-size: 0.96rem; line-height: 1.65; color: var(--do-ink); font-style: italic; margin: 0.6rem 0 1.2rem; flex: 1; }
.dh-review__foot { display: flex; align-items: center; gap: 0.8rem; }
.dh-review__avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--do-serif); font-weight: 700; color: #2a1c08; background: var(--do-grad-gold); }
.dh-review__who { flex: 1; }
.dh-review__name { font-weight: 600; color: var(--do-ink); font-size: 0.92rem; }
.dh-review__tag { font-size: 0.74rem; color: var(--do-gold); }
.dh-review__stars { color: var(--do-gold); font-size: 0.8rem; }

.dh-platforms { margin-top: clamp(2rem, 4vw, 3rem); display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.dh-platform { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.4rem; border-radius: var(--do-radius-sm); border: 1px solid var(--do-line-soft); background: rgba(255,255,255,0.03); }
.dh-platform i { font-size: 1.4rem; }
.dh-platform .g { color: #4285F4; } .dh-platform .f { color: #1877F2; } .dh-platform .d { color: var(--do-gold); }
.dh-platform b { font-family: var(--do-serif); color: var(--do-ink); font-size: 1.1rem; }
.dh-platform small { display: block; color: var(--do-ink-faint); font-size: 0.74rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.dh-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: stretch; }
.dh-contact__panel { padding: clamp(1.6rem, 3vw, 2.4rem); }
.dh-contact__methods { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.4rem 0; }
.dh-cm { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--do-line-soft); background: rgba(255,255,255,0.03); text-decoration: none; transition: all 0.35s var(--do-ease); }
.dh-cm:hover { border-color: var(--do-gold); transform: translateX(4px); }
.dh-cm__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex-shrink: 0; }
.dh-cm--wa .dh-cm__icon { background: #25D366; } .dh-cm--tel .dh-cm__icon { background: var(--do-grad-ember); } .dh-cm--mail .dh-cm__icon { background: var(--do-grad-gold); color: #2a1c08; }
.dh-cm > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.dh-cm__t { display: block; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--do-ink-faint); }
.dh-cm__v { display: block; font-weight: 600; color: var(--do-ink); font-size: 0.95rem; }
.dh-branch {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.2rem; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--do-line); background: rgba(245,198,96,0.05);
    transition: all 0.35s var(--do-ease);
}
.dh-branch:hover { background: rgba(245,198,96,0.1); transform: translateY(-2px); }
.dh-branch h5 { font-family: var(--do-serif); color: var(--do-ink); margin: 0 0 0.2rem; font-size: 1rem; }
.dh-branch p { font-size: 0.82rem; color: var(--do-ink-soft); margin: 0; }
.dh-branch small { font-size: 0.74rem; color: var(--do-ink-faint); }
.dh-branch__go { text-align: center; color: var(--do-gold); font-size: 0.7rem; }
.dh-branch__go i { font-size: 1.2rem; display: block; margin-bottom: 0.2rem; }
.dh-sched { margin-top: 1.2rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--do-ink-soft); }
.dh-sched i { color: var(--do-gold); }
.dh-socials { margin-top: 1.3rem; display: flex; gap: 0.6rem; }
.dh-social { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--do-ink); border: 1px solid var(--do-line-soft); background: rgba(255,255,255,0.03); text-decoration: none; transition: all 0.3s var(--do-ease); }
.dh-social:hover { transform: translateY(-3px); border-color: var(--do-gold); color: var(--do-gold); }

.dh-form { display: flex; flex-direction: column; gap: 0.8rem; }
.dh-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.dh-input {
    width: 100%; padding: 0.85rem 1rem; border-radius: 12px;
    border: 1px solid var(--do-line-soft); background: rgba(0,0,0,0.25);
    color: var(--do-ink); font-family: var(--do-sans); font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.dh-input::placeholder { color: var(--do-ink-faint); }
.dh-input:focus { outline: none; border-color: var(--do-gold); box-shadow: 0 0 0 3px rgba(245,198,96,0.12); background: rgba(0,0,0,0.35); }
textarea.dh-input { resize: vertical; min-height: 90px; }
.dh-form__ok { text-align: center; color: var(--do-green); font-weight: 600; font-size: 0.86rem; padding: 0.6rem; border-radius: 10px; background: rgba(52,211,153,0.1); }

/* ============================================================
   HOME-ONLY HEADER  →  transparent over hero, dark glass on scroll
   Scoped to body.index-page so every OTHER page keeps the solid
   red header untouched. Uses !important to win over the header's
   own !important declarations.
   ============================================================ */

/* hero rises to the very top, behind the fixed header */
body.index-page .doh-header-spacer { display: none !important; }

/* --- transparent state (over the hero) --- */
body.index-page .doh-container .doh-header {
    background: linear-gradient(180deg, rgba(8,6,5,0.62) 0%, rgba(8,6,5,0.22) 55%, rgba(8,6,5,0) 100%) !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* drop the heavy gastronomic background noise (meat texture, steam,
   glassmorphism) — this is the "código de más" over the video */
body.index-page .doh-bg-effects { display: none !important; }
/* calm the logo rings so they don't fight the cinematic backdrop */
body.index-page .doh-logo-pulse { opacity: 0.35 !important; }

body.index-page .doh-container .doh-info-bar {
    background: transparent !important;
    backdrop-filter: none !important;
    border-top: 1px solid rgba(245, 198, 96, 0.14) !important;
}

/* --- scrolled state (dark glass, set by JS on home) --- */
body.index-page .doh-container .doh-header.doh-scrolled {
    background: rgba(14, 11, 9, 0.82) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-bottom: 1px solid rgba(245, 198, 96, 0.20) !important;
    box-shadow: 0 14px 44px -16px rgba(0, 0, 0, 0.8) !important;
}
body.index-page .doh-container .doh-header.doh-scrolled .doh-info-bar {
    background: rgba(0, 0, 0, 0.28) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* --- POETIC EDITORIAL NAV (home only) — serif, un-boxed, ink underline --- */
/* drop the decorative leading icons; keep text + the dropdown caret */
body.index-page .doh-container .doh-nav-item > i.fas:not(.doh-nav-chevron) { display: none !important; }
body.index-page .doh-container .doh-nav { gap: 2.3rem !important; }

body.index-page .doh-container .doh-nav-item {
    font-family: var(--do-poetic) !important;
    font-size: 1.42rem !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
    color: rgba(246, 239, 227, 0.92) !important;
    padding: 6px 0 !important;
    gap: 6px !important;
    transition: color 0.45s var(--do-ease), font-style 0.2s ease, text-shadow 0.45s var(--do-ease) !important;
}
/* poetic microinteraction: turns italic + gold on hover/active */
body.index-page .doh-container .doh-nav-item:hover,
body.index-page .doh-container .doh-nav-item.doh-active {
    color: var(--do-gold) !important;
    font-style: italic !important;
    text-shadow: 0 0 26px rgba(245, 198, 96, 0.35) !important;
}
/* ink underline that draws in from the left */
body.index-page .doh-container .doh-nav-glow {
    left: 0 !important; right: auto !important; bottom: -1px !important;
    width: 100% !important; height: 1px !important;
    transform: scaleX(0) !important; transform-origin: left center !important;
    background: linear-gradient(90deg, var(--do-gold), rgba(245, 198, 96, 0)) !important;
    box-shadow: 0 0 10px rgba(245, 198, 96, 0.5) !important;
    transition: transform 0.5s var(--do-ease) !important;
    animation: none !important;
}
body.index-page .doh-container .doh-nav-item:hover .doh-nav-glow,
body.index-page .doh-container .doh-nav-item.doh-active .doh-nav-glow { transform: scaleX(1) !important; }
/* thin, quiet caret for the Menú dropdown */
body.index-page .doh-container .doh-nav-chevron { font-size: 9px !important; opacity: 0.55 !important; }
/* mega-menu heading in the same poetic voice */
body.index-page .doh-container .doh-mega-title { font-family: var(--do-poetic) !important; }

/* --- UN-BOXED actions + search (open, editorial) --- */
/* search → minimalist underline field, no box */
body.index-page .doh-container .doh-search-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(245, 198, 96, 0.32) !important;
    border-radius: 0 !important;
    width: 200px !important;
    height: 38px !important;
    padding: 0 26px 0 2px !important;
    font-family: var(--do-poetic) !important;
    font-size: 1.1rem !important;
    box-shadow: none !important;
}
body.index-page .doh-container .doh-search-input::placeholder { font-style: italic !important; }
body.index-page .doh-container .doh-search-input:focus {
    background: transparent !important;
    border-bottom-color: var(--do-gold) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.index-page .doh-container .doh-search-icon { right: 2px !important; }

/* action buttons → text + icon, no chip box */
body.index-page .doh-container .doh-cart,
body.index-page .doh-container .doh-login-btn,
body.index-page .doh-container .doh-user-current {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 2px !important;
    font-family: var(--do-poetic) !important;
    font-size: 1.18rem !important;
    color: rgba(246, 239, 227, 0.92) !important;
    box-shadow: none !important;
}
body.index-page .doh-container .doh-cart:hover,
body.index-page .doh-container .doh-login-btn:hover,
body.index-page .doh-container .doh-user-current:hover {
    background: transparent !important;
    border: none !important;
    color: var(--do-gold) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* info bar → un-boxed plain text + hairline separators */
body.index-page .doh-container .doh-language-current,
body.index-page .doh-container .doh-branch-current {
    background: transparent !important;
    border: none !important;
    padding: 4px 4px !important;
}
body.index-page .doh-container .doh-language-current:hover,
body.index-page .doh-container .doh-branch-current:hover {
    background: transparent !important;
    transform: none !important;
    color: var(--do-gold) !important;
}

/* nav entrance stagger on load */
@keyframes dh-nav-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
body.index-page .doh-container .doh-nav .doh-nav-item,
body.index-page .doh-container .doh-nav .doh-mega-container { animation: dh-nav-in 0.6s var(--do-ease) backwards; }
body.index-page .doh-container .doh-nav > *:nth-child(1) { animation-delay: 0.15s; }
body.index-page .doh-container .doh-nav > *:nth-child(2) { animation-delay: 0.24s; }
body.index-page .doh-container .doh-nav > *:nth-child(3) { animation-delay: 0.33s; }
body.index-page .doh-container .doh-nav > *:nth-child(4) { animation-delay: 0.42s; }
body.index-page .doh-container .doh-nav > *:nth-child(5) { animation-delay: 0.51s; }

/* magnetic offset applied by JS */
body.index-page .doh-container .doh-nav-item { will-change: transform; }

/* --- MOBILE header: transparent scrim over the hero --- */
@media (max-width: 768px) {
    body.index-page #doh-mobile-header-modern,
    body.index-page .doh-mobile-header-modern {
        background: linear-gradient(180deg, rgba(8,6,5,0.78) 0%, rgba(8,6,5,0.40) 60%, rgba(8,6,5,0.04) 100%) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-bottom: 1px solid rgba(245, 198, 96, 0.12) !important;
        box-shadow: none !important;
    }
    body.index-page #doh-mobile-header-modern.dh-msolid {
        background: rgba(14, 11, 9, 0.92) !important;
        border-bottom-color: rgba(245, 198, 96, 0.2) !important;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .dh-steps__grid { grid-template-columns: repeat(2, 1fr); }
    .dh-reviews__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    :root { --do-radius: 16px; }
    .dh-hero { padding-top: clamp(130px, 22vh, 170px); min-height: 100svh; }
    .dh-contact__grid { grid-template-columns: 1fr; }
    .dh-reviews__grid,
    .dh-steps__grid,
    .dh-fulfil,
    .dh-stats { grid-template-columns: 1fr; }
    .dh-stats { gap: 1.5rem; }
    .dh-form__row { grid-template-columns: 1fr; }
    .dh-hero__meta { gap: 1rem; }
}
@media (max-width: 480px) {
    .dh-dishes,
    .dh-offers__grid { grid-template-columns: 1fr; }
    .dh-hero__cta { flex-direction: column; }
    .dh-hero__cta .dh-btn { width: 100%; }
}