:root{
      /* México palette */
      --verde:#0aa65a;
      --rojo:#e43a2f;
      --crema:#f4efe6;
      --maiz:#f2c14e;
      --chile:#ff7a18;

      --bg:#07070a;
      --ink:#15151c;
      --text:#f7f5ef;
      --muted: rgba(247,245,239,.78);

      --panel: rgba(18,18,24,.62);
      --border: rgba(255,255,255,.12);
      --shadow: 0 18px 60px rgba(0,0,0,.45);

      --max: 1120px;
      --radius: 18px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--text);
      line-height: 1.5;

      /* Background: dark + mexican accents + subtle “paper” */
      background:
        radial-gradient(900px 520px at 12% 0%, rgba(10,166,90,.20), transparent 60%),
        radial-gradient(900px 520px at 88% 0%, rgba(228,58,47,.18), transparent 60%),
        radial-gradient(900px 520px at 50% 10%, rgba(242,193,78,.12), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75)),
        var(--bg);
    }

    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    .container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

    /* ===== NAVBAR ===== */
    header.navbar{
      position: sticky;
      top:0;
      z-index: 50;
      backdrop-filter: blur(12px);
      background: rgba(7,7,10,.58);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 12px 0;
      gap: 18px;
    }
    .brand{ display:flex; align-items:center; gap: 12px; }
    .logo{
      width: 52px; height: 52px;
      object-fit: contain;
      border-radius: 14px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      padding: 6px;
    }
    .nav-links{ display:flex; gap: 14px; flex-wrap:wrap; }
    .nav-links a{
      font-size: 14px;
      color: rgba(247,245,239,.82);
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid transparent;
      transition: .2s ease;
    }
    .nav-links a:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.10);
      transform: translateY(-1px);
    }

    /* Papel picado */
    .papel-picado{
      height: 36px;
      overflow:hidden;
      border-top: 1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.18);
    }
    .papel-picado svg{ width:100%; height:100%; display:block; }
    .pp.rojo{ fill: var(--rojo); }
    .pp.verde{ fill: var(--verde); }
    .pp.crema{ fill: var(--crema); }
    .pp-hole{ fill: rgba(0,0,0,.25); }

    /* ===== HERO MENU ===== */
    .hero{
      padding: 34px 0 12px;
    }

    .hero-card{
    display: flex;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      background: rgba(18,18,24,.55);
    }

    .hero-img{
        width: 50vh;
        height: auto;
    }

    /* Greca (mex pattern) overlay */
    .hero-card::after{
      content:"";
      position:absolute; inset:0;
      opacity:.20;
      background-image:
        repeating-linear-gradient(90deg,
          rgba(255,255,255,.12) 0 10px,
          transparent 10px 26px);
      mix-blend-mode: overlay;
      pointer-events:none;
    }

    .hero-card::before{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.22)),
        url("./img/menu-hero.jpg");
      background-size: cover;
      background-position:center;
      filter: saturate(1.10) contrast(1.05);
    }

    .hero-inner{
      position:relative;
      z-index:1;
      padding: 28px;
      display:grid;
      gap: 12px;
      max-width: 820px;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,.30);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--muted);
      width: fit-content;
      font-size: 13px;
    }
    .dot{
      width: 10px; height: 10px; border-radius: 999px;
      background: linear-gradient(90deg, var(--verde), var(--crema), var(--rojo));
      box-shadow: 0 0 0 3px rgba(255,255,255,.06);
    }

    h1{
      margin:0;
      font-size: clamp(30px, 3.6vw, 46px);
      letter-spacing: -.6px;
    }
    .sub{
      margin:0;
      color: var(--muted);
      max-width: 78ch;
      font-size: 15px;
    }

    /* quick category chips */
    .chips{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin-top: 6px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--text);
      font-weight: 900;
      font-size: 13px;
      transition: .2s ease;
    }
    .chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

    /* ===== SECTION TITLES ===== */
    section{ padding: 26px 0; }
    .section-title{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 14px;
    }
    .section-title h2{
      margin:0;
      font-size: 22px;
      letter-spacing:-.2px;
    }
    .section-title p{
      margin:0;
      color: var(--muted);
      max-width: 72ch;
      font-size: 14px;
    }

    /* ===== CORNER CARDS ===== */
    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .corner{
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(900px 220px at 10% 0%, rgba(10,166,90,.10), transparent 60%),
        radial-gradient(900px 220px at 90% 0%, rgba(228,58,47,.10), transparent 60%),
        rgba(18,18,24,.62);
      position:relative;
    }

    /* Talavera-ish border */
    .corner::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.14;
      background-image:
        repeating-linear-gradient(45deg,
          rgba(242,193,78,.55) 0 6px,
          transparent 6px 16px);
      mix-blend-mode: overlay;
    }

    .corner-head{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 16px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      position:relative;
      z-index:1;
    }

    .corner-name{
      display:flex;
      flex-direction:column;
      gap: 6px;
    }
    .corner-name h3{ margin:0; font-size: 18px; }
    .corner-name span{ color: var(--muted); font-size: 13px; }

    .corner-badges{
      display:flex;
      gap: 8px;
      justify-content:flex-end;
      flex-wrap:wrap;
      align-items:flex-start;
    }

    .badge{
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(244,239,230,.95);
      white-space:nowrap;
    }
    .badge.pina{
      border-color: rgba(242,193,78,.35);
      background: linear-gradient(90deg, rgba(242,193,78,.22), rgba(255,122,24,.14));
    }
    .badge.parrilla{
      border-color: rgba(255,122,24,.30);
      background: linear-gradient(90deg, rgba(255,122,24,.20), rgba(228,58,47,.12));
    }
    .badge.trad{
      border-color: rgba(10,166,90,.30);
      background: linear-gradient(90deg, rgba(10,166,90,.18), rgba(244,239,230,.10));
    }

    .items{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 16px;
      position:relative;
      z-index:1;
    }

    .item{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      padding: 14px;
      display:grid;
      gap: 10px;
      transition: .2s ease;
    }
    .item:hover{ transform: translateY(-2px); background: rgba(255,255,255,.07); }

    .item-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
    }
    .item-title{
      display:grid;
      gap: 4px;
    }
    .item-title b{ font-size: 15px; }
    .item-title small{ color: var(--muted); font-size: 12.5px; line-height: 1.35; }

    .price{
      font-weight: 1000;
      letter-spacing:.2px;
      background: rgba(0,0,0,.30);
      border: 1px solid rgba(255,255,255,.12);
      padding: 7px 10px;
      border-radius: 12px;
      white-space:nowrap;
    }

    .item-meta{
      display:flex;
      gap: 8px;
      flex-wrap:wrap;
    }
    .pill{
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      color: rgba(244,239,230,.92);
    }

    /* ===== NOTE / DISCLAIMER ===== */
    .notice{
      margin-top: 14px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(18,18,24,.55);
      padding: 16px;
      color: var(--muted);
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .notice::before{
      content:"";
      position:absolute; inset:0;
      opacity:.18;
      background:
        radial-gradient(400px 220px at 10% 20%, rgba(10,166,90,.22), transparent 60%),
        radial-gradient(400px 220px at 90% 20%, rgba(228,58,47,.20), transparent 60%);
      pointer-events:none;
    }
    .notice b{ color: var(--text); position:relative; z-index:1; }
    .notice span{ position:relative; z-index:1; }

    /* ===== FOOTER ===== */
    footer{ padding: 30px 0 44px; color: var(--muted); }
    .footer-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(18,18,24,.55);
      padding: 18px;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      box-shadow: var(--shadow);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 11px 16px;
      border-radius: 14px;
      font-weight: 1000;
      border: 1px solid rgba(255,255,255,.14);
      background: linear-gradient(135deg, rgba(228,58,47,.30), rgba(10,166,90,.22));
      box-shadow: 0 12px 34px rgba(0,0,0,.35);
      transition: .2s ease;
    }
    .btn:hover{ transform: translateY(-1px); }

    /* Responsive */
    @media (max-width: 920px){
      .corner-head{ grid-template-columns: 1fr; }
      .corner-badges{ justify-content:flex-start; }
      .items{ grid-template-columns: 1fr; }
    }
    @media (max-width: 680px){
      .container{ width: min(var(--max), calc(100% - 26px)); }
      .hero-inner{ padding: 18px; }
    }