:root{
    --ink:#f4ece1;
    --ink-dim:#c9bdae;
    --ink-faint:#8d8175;
    --bg:#161210;
    --bg-raised:#211a16;
    --bg-card:#231c18;
    --ember:#c1440e;
    --ember-bright:#e2622a;
    --copper:#c9a15a;
    --line:rgba(244,236,225,0.09);
    --shadow: 0 18px 40px rgba(0,0,0,0.45);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,.serif{font-family:'Fraunces', serif;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:64px 24px 40px;
    text-align:center;
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(193,68,14,0.28), transparent 60%),
      linear-gradient(180deg, #1c1613 0%, #161210 100%);
    border-bottom:1px solid var(--line);
  }
  .hero .mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;height:64px;
    border-radius:50%;
    border:1.5px solid var(--copper);
    margin-bottom:18px;
    position:relative;
  }
  .hero .mark svg{width:30px;height:30px;}
  .hero h1{
    font-size:clamp(2.4rem, 9vw, 3.6rem);
    font-weight:600;
    letter-spacing:0.01em;
    margin:0 0 6px;
    color:var(--ink);
  }
  .hero .tagline{
    font-style:italic;
    font-size:1.05rem;
    color:var(--copper);
    margin:0 0 18px;
    font-family:'Fraunces', serif;
    font-weight:400;
  }
  .hero .locale{
    font-size:0.82rem;
    color:var(--ink-faint);
    letter-spacing:0.03em;
    margin:0;
  }
  .hero .locale span{color:var(--ink-dim);}
  .hero .divider{
    width:46px;height:2px;background:var(--ember);
    margin:22px auto 0;border:none;border-radius:2px;
  }

  /* ---------- CATEGORY NAV ---------- */
  .cat-nav-wrap{
    position:sticky;top:0;z-index:40;
    background:rgba(22,18,16,0.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .cat-nav{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:14px 16px;
    scrollbar-width:none;
  }
  .cat-nav::-webkit-scrollbar{display:none;}
  .cat-pill{
    flex:0 0 auto;
    padding:9px 18px;
    border-radius:999px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--ink-dim);
    font-family:'Work Sans', sans-serif;
    font-size:0.86rem;
    font-weight:500;
    cursor:pointer;
    white-space:nowrap;
    transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  }
  .cat-pill:active{transform:scale(0.95);}
  .cat-pill.active{
    background:var(--ember);
    border-color:var(--ember);
    color:#fff5ec;
  }

  /* ---------- MAIN / SECTIONS ---------- */
  main{max-width:1180px;margin:0 auto;padding:0 16px 60px;}

  .category-section{padding-top:44px;scroll-margin-top:66px;}
  .category-head{margin-bottom:22px;}
  .category-head h2{
    font-size:clamp(1.6rem,5vw,2.1rem);
    font-weight:600;
    margin:0 0 8px;
    color:var(--ink);
  }
  .category-head p{
    margin:0;
    color:var(--ink-faint);
    font-size:0.95rem;
    max-width:60ch;
    line-height:1.5;
  }

  .grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }
  @media (min-width:640px){ .grid{grid-template-columns:repeat(2,1fr);} }
  @media (min-width:1020px){ .grid{grid-template-columns:repeat(3,1fr);} }

  .dish{
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .dish.in-view{opacity:1;transform:translateY(0);}
  .dish:hover{border-color:rgba(201,161,90,0.35);box-shadow:var(--shadow);}
  .dish .photo{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#2a221d;
  }
  .dish .photo img{
    width:100%;height:100%;object-fit:cover;
    transform:scale(1.02);
    transition:transform 0.7s cubic-bezier(.2,.7,.3,1);
  }
  .dish:hover .photo img{transform:scale(1.12);}
  .dish .body{padding:16px 16px 18px;}
  .dish .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
  .dish .name{
    font-family:'Fraunces', serif;
    font-size:1.12rem;
    font-weight:600;
    color:var(--ink);
    margin:0;
    line-height:1.25;
  }
  .dish .price{
    font-family:'Fraunces', serif;
    font-weight:600;
    color:var(--copper);
    font-size:1.08rem;
    white-space:nowrap;
    flex-shrink:0;
  }
  .dish .desc{
    margin:8px 0 0;
    color:var(--ink-dim);
    font-size:0.88rem;
    line-height:1.5;
  }

  /* Featured styling for Carnes y Parrilla */
  .featured .grid{grid-template-columns:1fr;}
  @media (min-width:760px){ .featured .grid{grid-template-columns:repeat(2,1fr);} }
  .featured .dish{border-top:2px solid var(--ember);}
  .featured .dish .photo{aspect-ratio:16/10;}
  .featured .dish .name{font-size:1.28rem;}
  .featured .dish .price{font-size:1.22rem;}
  .featured .dish .body{padding:20px 20px 22px;}
  .featured .category-head p{color:var(--ember-bright);}

  footer{
    border-top:1px solid var(--line);
    padding:36px 24px 48px;
    text-align:center;
    color:var(--ink-faint);
    font-size:0.82rem;
  }
  footer .fname{font-family:'Fraunces', serif;color:var(--ink-dim);font-size:1rem;margin-bottom:4px;}