*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --red: #C7352F;
      --yellow: #E2B83F;
      --orange: #D76532;
      --cream: #F5E5C5;
      --cream-dark: #E8D5A8;
      --navy: #193B4A;
      --olive: #596044;
      --navy-deep: #0d2330;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Lato', sans-serif; background: var(--cream); color: var(--navy); overflow-x: hidden; }
    [data-netlify-badge], #netlify-badge, .netlify-badge { display: none !important; }

    /* ── NAVBAR ── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: var(--cream);
      border-bottom: 3px solid var(--red);
      transition: box-shadow .3s;
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 2.5rem; height: 72px;
      max-width: 1400px; margin: 0 auto; width: 100%;
    }
    .nav.scrolled { box-shadow: 0 4px 24px rgba(25,59,74,.2); }

    .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .nav-logo img { height: 68px; width: auto; display: block; mix-blend-mode: multiply; }
    .nav-logo-text {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px; letter-spacing: .06em;
      color: var(--red); line-height: 1;
    }
    .nav-logo-text span { color: var(--navy); }

    .nav-links { display: flex; gap: 2.5rem; list-style: none; }
    .nav-links a {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px; letter-spacing: .12em;
      color: var(--navy); text-decoration: none;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--red); }

    .nav-order {
      background: var(--red); color: var(--cream);
      border: none; padding: 10px 24px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 16px; letter-spacing: .12em;
      border-radius: 3px; cursor: pointer;
      transition: background .2s, transform .15s;
      text-decoration: none;
    }
    .nav-order:hover { background: #a8291e; transform: translateY(-1px); }

    .nav-cart {
      position: relative; background: none; border: none; cursor: pointer;
      color: var(--navy); padding: 6px; display: flex; align-items: center;
      transition: color .2s;
    }
    .nav-cart:hover { color: var(--red); }
    .nav-cart-badge {
      position: absolute; top: 0; right: 0;
      background: var(--red); color: #fff;
      font-size: 10px; font-weight: 700; font-family: 'Lato', sans-serif;
      width: 16px; height: 16px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      line-height: 1;
    }

    .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
    .hamburger span { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s, background .15s; }
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile menu */
    #mobMenu { display: none; }
    #mobMenu.open {
      display: flex; flex-direction: column;
      position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
      background: var(--cream); z-index: 99;
      padding: 1.5rem 2rem; gap: 0; overflow-y: auto;
    }
    .mob-link {
      display: block; padding: .9rem 0;
      border-bottom: 2px solid var(--cream-dark);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px; letter-spacing: .1em;
      color: var(--navy); text-decoration: none;
      transition: color .2s;
    }
    .mob-link:hover { color: var(--red); }

    /* ── HERO ── */
    .hero {
      min-height: 100vh; position: relative;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; padding-top: 72px;
    }

    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('images/hero-road.png');
      background-size: cover;
      background-position: center 40%;
      filter: saturate(.6) sepia(.3);
      transform: scale(1.08);
      will-change: transform;
    }
    .hero-bg::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(150deg,
        rgba(10,4,2,.82) 0%,
        rgba(25,14,6,.75) 40%,
        rgba(15,30,42,.80) 100%);
    }
    /* Scanline texture */
    .hero-bg::before {
      content: ''; position: absolute; inset: 0; z-index: 1;
      background-image: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(245,229,197,.025) 3px, rgba(245,229,197,.025) 4px
      );
    }

    /* Vintage sunburst */
    .hero-rays {
      position: absolute; inset: 0; z-index: 2;
      display: flex; align-items: center; justify-content: center;
      opacity: .07; pointer-events: none;
      will-change: transform;
    }

    .hero-content {
      position: relative; z-index: 3;
      max-width: 1280px; padding: 2rem 2rem;
      display: flex; align-items: center; gap: 3rem;
      width: 100%;
    }
    .hero-text {
      flex: 1; text-align: left; min-width: 0;
    }
    .hero-visual {
      flex: 0 0 clamp(340px, 50%, 680px); position: relative;
      display: flex; flex-direction: column; align-items: center;
    }

    /* Floating burger */
    .hero-burger {
      width: 100%;
      max-width: clamp(380px, 50vw, 720px);
      filter: drop-shadow(0 28px 40px rgba(0,0,0,.65)) drop-shadow(0 8px 18px rgba(199,53,47,.3));
      will-change: transform;
    }

    @media (max-width: 860px) {
      .hero-content { flex-direction: column; text-align: center; }
      .hero-text { text-align: center; }
      .hero-visual { flex: none; width: 100%; max-width: 360px; order: -1; }
      .hero-burger { width: 100%; max-width: 360px; }
      .hero-sub { margin-left: auto; margin-right: auto; }
      .hero-badge { font-size: 10px; letter-spacing: .15em; padding: 4px 12px; white-space: nowrap; }
    }

    .hero-badge {
      display: inline-block;
      border: 2px solid var(--yellow);
      color: var(--yellow);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 12px; letter-spacing: .3em;
      padding: 5px 20px; border-radius: 2px;
      margin-bottom: 1.75rem;
    }

    .hero h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3.5rem, 7vw, 6.5rem);
      color: var(--cream); line-height: .9;
      letter-spacing: .02em;
      text-shadow: 4px 4px 0 var(--red), 7px 7px 0 rgba(0,0,0,.25);
      margin-bottom: .4rem;
    }
    .hero h1 em {
      font-style: normal; color: var(--yellow);
      display: inline;
      text-shadow: 3px 3px 0 var(--orange), 6px 6px 0 rgba(0,0,0,.2);
    }

    .hero-sub {
      font-size: clamp(.9rem, 2vw, 1.1rem);
      color: rgba(245,229,197,.82);
      max-width: 520px; margin: 1.75rem 0 2.75rem;
      line-height: 1.75; font-weight: 300;
    }

    .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

    .btn-primary {
      background: var(--red); color: var(--cream);
      border: 3px solid var(--red); padding: 14px 38px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px; letter-spacing: .14em;
      border-radius: 3px; cursor: pointer;
      transition: background .18s, border-color .18s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s; text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-primary:hover { background: #a8291e; border-color: #a8291e; transform: translateY(-2px); }

    .btn-outline {
      background: transparent; color: var(--cream);
      border: 3px solid rgba(245,229,197,.7); padding: 14px 38px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px; letter-spacing: .14em;
      border-radius: 3px; cursor: pointer;
      transition: all .2s; text-decoration: none;
    }
    .btn-outline:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); transform: translateY(-2px); }

    .hero-scroll {
      position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
      z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px;
      color: rgba(245,229,197,.45); font-size: 10px; letter-spacing: .25em;
      text-transform: uppercase; font-weight: 700;
      animation: bob 2.2s ease-in-out infinite;
    }
    @keyframes bob {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(7px); }
    }

    /* ── HERO ANIMATIONS ── */
    @keyframes heroUp {
      from { opacity: 0; transform: translateY(40px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes heroSlideIn {
      from { opacity: 0; transform: translateX(60px) scale(.96); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes heroFloat {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50%       { transform: translateY(-16px) rotate(1deg); }
    }
    @keyframes raysRotate {
      to { transform: rotate(360deg); }
    }
    @keyframes badgePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(226,184,63,0); }
      50%       { box-shadow: 0 0 18px rgba(226,184,63,.28), 0 0 0 4px rgba(226,184,63,.08); }
    }

    .hero .hero-badge  { animation: heroUp .65s cubic-bezier(.23,1,.32,1) .05s both,
                                    badgePulse 3.5s ease-in-out 1.5s infinite; }
    .hero h1           { animation: heroUp .8s  cubic-bezier(.22,1,.36,1) .18s both; }
    .hero .hero-sub    { animation: heroUp .7s  cubic-bezier(.23,1,.32,1) .40s both; }
    .hero .hero-btns   { animation: heroUp .7s  cubic-bezier(.23,1,.32,1) .58s both; }
    .hero .hero-visual { animation: heroSlideIn .9s cubic-bezier(.22,1,.36,1) .22s both; }
    .hero-burger       { animation: heroFloat 4.5s ease-in-out infinite; }
    .hero-rays         { animation: raysRotate 90s linear infinite; transform-origin: center; }

    /* ── SECTION COMMON ── */
    section { padding: 5rem 2rem; }

    .section-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 16px; letter-spacing: .25em;
      color: var(--orange); text-align: center; margin-bottom: .4rem;
    }
    .section-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.4rem, 6vw, 4.5rem);
      letter-spacing: .05em; text-align: center;
      color: var(--navy); margin-bottom: 3rem; line-height: 1;
    }
    .section-title span { color: var(--red); }

    .divider {
      display: flex; align-items: center; gap: 1rem;
      max-width: 320px; margin: 0 auto 3rem;
    }
    .divider-line { flex: 1; height: 2px; background: var(--red); opacity: .5; }
    .divider-star { color: var(--red); font-size: 18px; }

    /* ── NUESTRA CARTA ── */
    #menu { background: var(--cream); padding: 0 0 4rem; }
    .menu-top { padding: 4.5rem 2rem 0; text-align: center; }

    .menu-stripe {
      background: var(--navy);
      padding: .75rem 0;
      display: flex; justify-content: center;
      overflow-x: auto; gap: 0;
      -webkit-overflow-scrolling: touch;
    }
    .menu-stripe::-webkit-scrollbar { height: 3px; }
    .menu-stripe::-webkit-scrollbar-thumb { background: var(--yellow); }

    .menu-tab {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px; letter-spacing: .12em;
      color: rgba(245,229,197,.55);
      background: none; border: none;
      border-bottom: 3px solid transparent;
      padding: 10px 36px; cursor: pointer;
      white-space: nowrap; transition: all .2s;
    }
    .menu-tab:hover { color: var(--cream); }
    .menu-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }

    .menu-panel { display: none; }
    .menu-panel.active { display: block; }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 1.5rem;
      max-width: 1120px; margin: 0 auto;
      padding: 3rem 1.5rem;
    }

    /* Cards */
    .flip-card { height: 350px; cursor: pointer; border-radius: 6px; overflow: hidden; }
    .flip-inner { position: relative; width: 100%; height: 100%; }
    .flip-front {
      position: absolute; inset: 0;
      background: #fff;
      border: 2px solid #e8d5a8;
      border-radius: 6px; overflow: hidden;
      display: flex; flex-direction: column;
      transition: border-color .2s, box-shadow .2s;
    }
    .flip-card:hover .flip-front { border-color: var(--red); box-shadow: 0 8px 28px rgba(199,53,47,.18); }

    .card-img {
      height: 195px; flex-shrink: 0;
      background: linear-gradient(135deg, #2a1208, #3a1a0e);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .card-placeholder {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      opacity: .35;
    }
    .card-placeholder svg { width: 44px; height: 44px; stroke: var(--cream); }
    .card-placeholder span { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--cream); }
    .card-badge {
      position: absolute; top: 10px; left: 10px;
      background: var(--red); color: var(--cream);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 11px; letter-spacing: .1em;
      padding: 3px 10px; border-radius: 2px;
    }

    .card-body { padding: 1rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
    .card-origin { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: .2rem; }
    .card-name { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; color: var(--navy); margin-bottom: .3rem; }
    .card-desc { font-size: 12.5px; color: #777; line-height: 1.5; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .card-footer { display: flex; align-items: flex-end; justify-content: space-between; margin-top: .75rem; }
    .card-price { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--red); }
    .card-hint { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); font-weight: 700; }

    .flip-back { display: none; }
    .back-origin { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); font-weight: 700; margin-bottom: .5rem; }
    .back-name { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .04em; color: var(--cream); margin-bottom: 1rem; }
    .back-text { font-size: 13px; line-height: 1.65; color: rgba(245,229,197,.8); flex: 1; }
    .back-ingredients {
      margin-top: 1rem; padding-top: 1rem;
      border-top: 1px solid rgba(245,229,197,.15);
      font-size: 11.5px; color: rgba(245,229,197,.55); line-height: 1.65;
    }
    .back-price { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--yellow); margin-top: .75rem; }
    .back-hint { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,229,197,.35); margin-top: .3rem; cursor: pointer; }

    /* ── HISTORIA ── */
    #historia { background: var(--navy); color: var(--cream); }
    #historia .section-title { color: var(--cream); }
    #historia .section-title span { color: var(--yellow); }
    #historia .divider-line { background: var(--yellow); opacity: .4; }
    #historia .divider-star { color: var(--yellow); }

    .historia-wrap { max-width: 900px; margin: 0 auto; text-align: center; }
    .historia-body { display: flex; align-items: center; gap: 3rem; text-align: left; margin-top: 2rem; }
    .historia-text { flex: 1; }
    .historia-img-wrap { flex: 0 0 auto; }
    .historia-img {
      width: 280px; height: 280px;
      object-fit: cover; object-position: center;
      border-radius: 50%;
      border: 5px solid var(--yellow);
      box-shadow: 0 8px 32px rgba(0,0,0,.4);
    }
    @media(max-width: 640px) {
      .historia-body { flex-direction: column; text-align: center; }
      .historia-img { width: 220px; height: 220px; }
    }
    .historia-p { font-size: 1.05rem; line-height: 1.9; color: rgba(245,229,197,.82); margin-bottom: 1.5rem; }

    .historia-quote {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 1.35rem; color: var(--yellow);
      border-left: 4px solid var(--red);
      padding: 1rem 1.75rem;
      margin: 2rem 0; text-align: left;
      line-height: 1.6;
    }

    .social-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; }
    .social-btn {
      display: flex; align-items: center; gap: 9px;
      padding: 11px 22px; border-radius: 5px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 16px; letter-spacing: .12em;
      border: 2px solid; cursor: pointer;
      text-decoration: none; transition: all .2s;
    }
    .social-btn svg { width: 18px; height: 18px; }
    .social-btn.instagram { color: #E1306C; border-color: #E1306C; }
    .social-btn.instagram:hover { background: #E1306C; color: #fff; }
    .social-btn.facebook { color: #1877F2; border-color: #1877F2; }
    .social-btn.facebook:hover { background: #1877F2; color: #fff; }
    .social-btn.tiktok { color: var(--cream); border-color: rgba(245,229,197,.5); }
    .social-btn.tiktok:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

    /* ── ORDER CTA ── */
    #order { background: var(--red); padding: 4.5rem 2rem; text-align: center; }
    #order h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      color: var(--cream); letter-spacing: .07em; margin-bottom: 1rem;
    }
    #order p { color: rgba(245,229,197,.8); margin: 0 auto 2.5rem; max-width: 480px; font-size: 1rem; line-height: 1.7; }
    .order-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--cream); color: var(--red);
      border: 3px solid var(--cream); padding: 15px 44px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px; letter-spacing: .14em;
      border-radius: 3px; cursor: pointer;
      text-decoration: none; transition: all .2s;
    }
    .order-btn:hover { background: transparent; color: var(--cream); transform: scale(1.04); }

    /* ── FOOTER ── */
    footer {
      background: var(--navy-deep); color: rgba(245,229,197,.55);
      padding: 3rem 2rem; text-align: center;
    }
    .footer-brand {
      display: flex; justify-content: center;
      margin-bottom: .75rem;
    }
    .footer-brand img { height: 56px; width: auto; }
    footer p { font-size: 13px; line-height: 1.9; }
    footer a { color: var(--yellow); text-decoration: none; }
    footer a:hover { text-decoration: underline; }

    /* ── MODAL RESERVAS ── */
    .modal-bg {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(13,35,48,.88);
      backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem;
      opacity: 0; pointer-events: none;
      transition: opacity .3s;
    }
    .modal-bg.open { opacity: 1; pointer-events: all; }

    .modal {
      background: var(--cream); border-radius: 8px;
      max-width: 480px; width: 100%; padding: 2.5rem;
      border-top: 6px solid var(--red);
      position: relative;
      transform: translateY(18px);
      transition: transform .3s;
      max-height: 90vh; overflow-y: auto;
    }
    .modal-bg.open .modal { transform: translateY(0); }

    .modal-x {
      position: absolute; top: 1rem; right: 1rem;
      background: none; border: none; cursor: pointer;
      font-size: 22px; color: #999; line-height: 1;
      padding: 8px; margin: -8px;
      transition: color .2s;
    }
    .modal-x:hover { color: var(--red); }
    .modal-x:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px; }

    .modal h2 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: .08em; color: var(--navy); }
    .modal-sub { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 1.75rem; margin-top: .2rem; }

    .fg { margin-bottom: 1rem; }
    .fg label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--navy); margin-bottom: .35rem; }
    .fg textarea { resize: vertical; min-height: 64px; }
    .fg input, .fg select, .fg textarea {
      width: 100%; border: 2px solid var(--cream-dark);
      border-radius: 3px; padding: 10px 12px;
      font-size: 14px; color: var(--navy);
      background: #fff; font-family: 'Lato', sans-serif;
      transition: border-color .2s;
    }
    .fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: var(--red); }
    .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

    .btn-submit {
      width: 100%; padding: 14px;
      background: var(--red); color: var(--cream);
      border: none; border-radius: 3px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px; letter-spacing: .14em;
      cursor: pointer; margin-top: .5rem;
      transition: background .2s;
    }
    .btn-submit:hover { background: #a8291e; }

    .modal-success { display: none; text-align: center; padding: 1.5rem 0; }
    .modal-success svg { width: 60px; height: 60px; stroke: var(--olive); margin-bottom: 1rem; }
    .modal-success h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: var(--navy); margin-bottom: .5rem; }
    .modal-success p { color: #666; font-size: 14px; line-height: 1.6; }

    /* ── SCROLL FADE ── */
    .fade { opacity: 0; transform: translateY(28px); transition: opacity .65s cubic-bezier(.23,1,.32,1), transform .65s cubic-bezier(.22,1,.36,1); }
    .fade.on { opacity: 1; transform: translateY(0); }
    .fade.d1 { transition-delay: .1s; }
    .fade.d2 { transition-delay: .2s; }
    .fade.d3 { transition-delay: .3s; }
    .menu-grid .flip-card:nth-child(2) { transition-delay: 50ms; }
    .menu-grid .flip-card:nth-child(3) { transition-delay: 100ms; }
    .menu-grid .flip-card:nth-child(4) { transition-delay: 120ms; }

    /* ── RESPONSIVE ── */
    @media(max-width: 860px) {
      .nav-inner { padding: 0 1.25rem; }
      .nav-links, .nav-order { display: none; }
      .nav-cart { display: none; }
      .hamburger { display: flex; }
      .nav-logo img { height: 52px; }

      /* Hero */
      .hero { padding-top: 64px; min-height: auto; }
      .hero-content { gap: 1.5rem; padding: 2rem 1.5rem; }
      .hero-text { text-align: center; }
      .hero-visual { max-width: 300px; }
      .hero-sub { margin-left: auto; margin-right: auto; font-size: .95rem; }
      .hero-btns { justify-content: center; flex-wrap: wrap; gap: .75rem; }
      .btn-primary, .btn-outline { font-size: 14px; padding: .7rem 1.4rem; }

      /* Menu tabs */
      .menu-stripe { gap: .5rem; padding: 1rem; overflow-x: auto; flex-wrap: nowrap; justify-content: center; }
      .menu-tab { font-size: 14px; padding: .7rem 1rem; white-space: nowrap; }

      /* Menu grid */
      .menu-grid { grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.5rem 1rem; }
      .flip-card { height: 300px; }
      .card-img { height: 155px; }

      /* Historia */
      .hist-body { padding: 3rem 1.5rem; }
      .hist-text { font-size: .95rem; }
      .hist-quote { font-size: 1.1rem; padding-left: 1rem; }
      .soc-btns { flex-wrap: wrap; gap: .6rem; justify-content: center; }

      /* Uber Eats CTA */
      .ue-section { padding: 3rem 1.5rem; }
      .ue-title { font-size: clamp(2rem, 8vw, 3rem); }

      /* Reservas modal */
      .res-modal { padding: 2rem 1.25rem; margin: 1rem; max-width: calc(100vw - 2rem); }

      /* Footer */
      .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
      .footer-links { justify-content: center; }
    }

    @media(max-width: 640px) {
      .menu-grid { grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1.25rem .75rem; }
      .flip-card { height: 290px; }
      .card-img { height: 150px; }
      .card-name { font-size: 18px; }
      .card-price { font-size: 20px; }
      .fg-row { grid-template-columns: 1fr; }

      /* Section titles */
      .section-title { font-size: clamp(2rem, 9vw, 3.5rem); }

      /* Hero */
      .hero-visual { max-width: 260px; }
      .hero-burger { max-width: 260px; }
    }

    @media(max-width: 420px) {
      .menu-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
      .flip-card { height: 310px; }
      .card-img { height: 170px; }
      .card-desc { flex: 0 0 auto; -webkit-line-clamp: 2; }
      .card-footer { margin-top: .5rem; }
      .nav-logo img { height: 44px; }
    }

    /* ── CARRITO FLOTANTE ── */
    .cart-float {
      position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 500;
      width: 58px; height: 58px; border-radius: 50%;
      background: var(--navy); color: #fff; border: none;
      box-shadow: 0 4px 18px rgba(25,59,74,.5);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: transform .2s, box-shadow .2s;
    }
    .cart-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(25,59,74,.7); }
    .cart-float svg { width: 24px; height: 24px; }
    .cart-badge {
      position: absolute; top: -4px; right: -4px;
      background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
      width: 20px; height: 20px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 2px solid #fff;
    }

    /* Botón + en tarjeta */
    .add-to-cart-btn {
      background: var(--red); color: #fff; border: none;
      width: 36px; height: 36px; border-radius: 50%;
      font-size: 20px; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: background .15s, transform .15s;
    }
    .add-to-cart-btn:hover { background: #a82a25; transform: scale(1.12); }
    .add-to-cart-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

    /* ── CART DRAWER ── */
    .cart-overlay {
      position: fixed; inset: 0; z-index: 800;
      background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
      opacity: 0; pointer-events: none; transition: opacity .25s;
    }
    .cart-overlay.open { opacity: 1; pointer-events: all; }
    .cart-drawer {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(380px, 100vw);
      background: #fff; display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
      box-shadow: -4px 0 30px rgba(0,0,0,.15);
    }
    .cart-overlay.open .cart-drawer { transform: translateX(0); }

    .cart-dheader {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid #eee;
      background: var(--navy);
    }
    .cart-dtitle { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .05em; color: var(--cream); }
    .cart-dclose { background: transparent; border: none; color: rgba(245,229,197,.7); font-size: 26px; cursor: pointer; line-height: 1; }
    .cart-dclose:hover { color: var(--cream); }

    .cart-dbody { flex: 1; overflow-y: auto; padding: .75rem 1rem; }

    .cart-item {
      display: flex; align-items: center; gap: .75rem;
      padding: .65rem 0; border-bottom: 1px solid #f0ebe0;
    }
    .cart-item:last-child { border-bottom: none; }
    .cart-item-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--navy); }
    .cart-item-price { font-size: 12px; color: var(--orange); font-weight: 600; min-width: 52px; text-align: right; }
    .cart-qty { display: flex; align-items: center; gap: .3rem; }
    .cart-qty-btn {
      background: #f5efe0; border: none; width: 26px; height: 26px;
      border-radius: 50%; font-size: 16px; cursor: pointer; line-height: 1;
      display: flex; align-items: center; justify-content: center; color: var(--navy);
    }
    .cart-qty-btn:hover { background: #e8dcc8; }
    .cart-qty-num { font-size: 13px; font-weight: 700; min-width: 18px; text-align: center; color: var(--navy); }

    .cart-dempty {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: .5rem; color: #aaa; font-size: 14px; padding: 2rem;
    }
    .cart-dempty div { font-size: 40px; }
    .cart-dempty p { text-align: center; }

    .cart-dfooter { padding: 1rem; border-top: 2px solid #f0ebe0; background: #fdf8f0; }
    .cart-pickup {
      background: #fff8e1; border: 1px solid #f0d060; border-radius: 6px;
      padding: .5rem .75rem; font-size: 11px; color: #7a5c00;
      font-weight: 600; margin-bottom: .75rem; line-height: 1.4;
    }
    .cart-total-row {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 15px; color: var(--navy); margin-bottom: .75rem;
    }
    .cart-total-row strong { font-size: 20px; font-family: 'Bebas Neue', sans-serif; color: var(--red); }
    .cart-wa-btn {
      width: 100%; padding: .85rem; background: #25D366; color: #fff; border: none;
      border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
      letter-spacing: .3px; transition: background .15s;
    }
    .cart-wa-btn:hover { background: #1da854; }

    @media(max-width: 480px) {
      .cart-float { width: 52px; height: 52px; bottom: 1.2rem; left: 1.2rem; }
      .cart-drawer { width: 100vw; }
    }

    /* ── WHATSAPP FLOAT ── */
    .wa-float {
      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 500;
      width: 58px; height: 58px; border-radius: 50%;
      background: #25D366; box-shadow: 0 4px 18px rgba(37,211,102,.45);
      display: flex; align-items: center; justify-content: center;
      transition: transform .2s, box-shadow .2s;
    }
    .wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,.6); }
    .wa-float svg { width: 34px; height: 34px; }

    @media(prefers-reduced-motion: reduce) {
      .fade { transition: none; }
      .hero-burger { animation: none; }
      .hero-rays { animation: none; }
      .hero .hero-badge, .hero h1, .hero .hero-sub, .hero .hero-btns, .hero .hero-visual {
        animation: none; opacity: 1; transform: none;
      }
      .ruta-card, .ruta-photo, .feat-item, .flip-front, .flip-inner {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
      .ruta-hint svg { animation: none; }
      .hero-scroll { animation: none; }
      #moto { transition: none; }
      .modal, .modal-bg, .cmodal, .cmodal-overlay, .cart-overlay, .cart-drawer {
        transition-duration: 0.01ms !important;
      }
    }

    /* ── CARD DETAIL MODAL ── */
    .cmodal-overlay {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(10,5,2,.82); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem; cursor: pointer;
      opacity: 0; pointer-events: none;
      transition: opacity .3s;
    }
    .cmodal { cursor: default; }
    .cmodal-overlay.open { opacity: 1; pointer-events: all; }

    .cmodal {
      background: #fff; border-radius: 10px; overflow: hidden;
      max-width: 820px; width: 100%;
      display: flex;
      transform: translateY(24px) scale(.97);
      transition: transform .35s cubic-bezier(.2,0,.2,1);
      max-height: 90vh;
    }
    .cmodal-overlay.open .cmodal { transform: translateY(0) scale(1); }

    .cmodal-img {
      flex: 0 0 340px; position: relative;
      background: #1a0d06; overflow: hidden;
    }
    .cmodal-img img {
      width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
    }
    .cmodal-img-placeholder {
      width: 100%; height: 100%; min-height: 320px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg,#1a0d06,#2d1208);
      color: var(--yellow); font-family: 'Bebas Neue',sans-serif;
      font-size: 22px; letter-spacing: .1em;
    }

    .cmodal-body {
      flex: 1; padding: 2.25rem 2rem; overflow-y: auto;
      display: flex; flex-direction: column; justify-content: center;
    }
    .cmodal-origin {
      font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
      color: var(--orange); font-weight: 700; margin-bottom: .4rem;
    }
    .cmodal-name {
      font-family: 'Bebas Neue',sans-serif; font-size: 36px;
      color: var(--navy); letter-spacing: .04em; line-height: 1;
      margin-bottom: 1rem;
    }
    .cmodal-desc {
      font-size: 14px; color: #555; line-height: 1.7;
      margin-bottom: 1.25rem;
      font-style: italic;
    }
    .cmodal-ing-label {
      font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
      color: var(--red); font-weight: 700; margin-bottom: .5rem;
    }
    .cmodal-ing {
      font-size: 13px; color: #444; line-height: 1.8;
      border-left: 3px solid var(--yellow);
      padding-left: .85rem; margin-bottom: 1.5rem;
    }
    .cmodal-footer {
      display: flex; align-items: center; justify-content: space-between;
      border-top: 1px solid #f0e8d4; padding-top: 1.25rem;
    }
    .cmodal-price {
      font-family: 'Bebas Neue',sans-serif; font-size: 36px; color: var(--red);
    }
    .cmodal-actions { display: flex; gap: .6rem; align-items: center; }
    .cmodal-add {
      background: var(--red); color: #fff;
      border: none; border-radius: 4px; cursor: pointer;
      font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: .08em;
      padding: 10px 18px; transition: background .2s;
    }
    .cmodal-add:hover { background: #a8291e; }
    .cmodal-close {
      background: var(--navy); color: var(--cream);
      border: none; border-radius: 4px; cursor: pointer;
      font-family: 'Bebas Neue',sans-serif; font-size: 15px;
      letter-spacing: .15em; padding: .55rem 1.4rem;
      transition: background .2s;
    }
    .cmodal-close:hover { background: var(--red); }

    @media(max-width: 640px) {
      .cmodal { flex-direction: column; max-height: 92vh; }
      .cmodal-img { flex: none; height: 220px; }
      .cmodal-body { padding: 1.5rem 1.25rem; }
    }