:root{
    --bg: #0a0a0a;
    --bg-alt: #111111;
    --surface: #181818;
    --surface-2: #222222;
    --line: #2d2d2d;
    --gold: #f6c928;
    --gold-deep: #d9a90f;
    --chili: #d6402d;
    --leaf: #5fa85d;
    --cream: #f8f5ea;
    --muted: #b3b0a3;
    --muted-2: #9f9c8f;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --container: 1180px;
    --font-display: 'Anton', 'Arial Narrow', sans-serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mark: 'Permanent Marker', cursive;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:400; letter-spacing: 0.01em; }
  p{ margin:0; }
  button{ font-family: inherit; }

  .skip-link{
    position:absolute; left:-9999px; top:0; background:var(--gold); color:#0a0a0a;
    padding:12px 18px; z-index:200; border-radius:0 0 8px 0; font-weight:700;
  }
  .skip-link:focus{ left:0; }

  :focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }

  .wrap{ max-width: var(--container); margin:0 auto; padding:0 24px; }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 14px 26px; border-radius: 10px; font-weight:700; font-size: 0.98rem;
    border: 2px solid transparent; cursor:pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
    white-space: nowrap;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-solid{ background: var(--gold); color:#0a0a0a; }
  
  .btn-outline{ background: transparent; color: var(--cream); border-color: rgba(248,245,234,0.55); }
  
  .btn-dark{ background:#0a0a0a; color: var(--cream); }
  
  .btn-ghost-dark{ background:transparent; color:#0a0a0a; border-color: rgba(10,10,10,0.55); }
  
  .btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

  .tag-mark{
    font-family: var(--font-mark); color: var(--gold); font-size: 1.15rem;
    display:inline-block; transform: rotate(-3deg);
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- Nav ---------- */
  .nav{
    position: fixed; top:0; left:0; right:0; z-index:100;
    padding: 20px 0; background: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent);
    transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease;
  }
  .nav.is-scrolled{
    background: rgba(10,10,10,0.94); backdrop-filter: blur(6px);
    padding: 12px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  }
  .nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 20px; }
  .brand{ display:flex; flex-direction:column; line-height:1; }
  .brand-top{ font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); letter-spacing: 0.02em; }
  .brand-bottom{ font-family: var(--font-body); font-weight:800; font-size: 0.72rem; letter-spacing: 0.2em; color: var(--cream); margin-top:2px; }
  .nav-links{ display:flex; align-items:center; gap: 30px; }
  .nav-links a{
    font-weight:600; font-size:0.95rem; position:relative; padding:6px 0;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--gold);
    transition: width .2s ease;
  }
  
  .nav-actions{ display:flex; gap:10px; }
  .nav-actions .btn{ padding:10px 16px; font-size:0.88rem; }
  .nav-burger{
    display:none; width:44px; height:44px; border-radius:8px; border:1px solid var(--line);
    background: rgba(255,255,255,0.04); position:relative; cursor:pointer;
  }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after{
    content:""; position:absolute; left:11px; right:11px; height:2px; background: var(--cream);
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav-burger span::before, .nav-burger span::after{ left:0; right:0; }
  .nav-burger span{ top:21px; }
  .nav-burger span::before{ top:-7px; }
  .nav-burger span::after{ top:7px; }
  .nav-burger[aria-expanded="true"] span{ background: transparent; }
  .nav-burger[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); }

  .mobile-panel{
    position:fixed; inset:0; top:0; z-index:99; background: #0a0a0a;
    display:flex; flex-direction:column; justify-content:safe center; align-items:center; gap: 28px;
    padding: 96px 24px 40px; overflow-y:auto; overscroll-behavior: contain;
    transform: translateY(-100%); transition: transform .3s ease, visibility 0s linear .3s;
    visibility:hidden;
  }
  .mobile-panel.is-open{ transform: translateY(0); visibility:visible; transition-delay: 0s; }
  html.menu-open, html.menu-open body{ overflow:hidden; }
  .mobile-panel a{ font-family: var(--font-display); font-size: 2rem; color: var(--cream); }
  
  
  .mobile-panel .btn-row{ justify-content:center; }
  .mobile-panel a.btn{ font-family: var(--font-body); font-size: 0.98rem; }
  .mobile-panel .btn-row{ margin-top: 10px; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; min-height: 100svh; display:flex; align-items:center; overflow:hidden;
    background: radial-gradient(ellipse 70% 60% at 76% 42%, #1c1c1c 0%, var(--bg) 70%);
  }
  .hero::before{
    content:""; position:absolute; inset:0; opacity:0.1; pointer-events:none;
    background-image: radial-gradient(circle, var(--cream) 1px, transparent 1.3px);
    background-size: 18px 18px;
  }
  .hero .wrap{ position:relative; z-index:2; width:100%; padding-top: 104px; padding-bottom: 116px; }
  .hero-grid{ display:grid; gap: 56px; align-items:center; }
  .hero-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 22px; }
  .hero-pill{
    display:inline-flex; align-items:center; gap:8px; background: rgba(248,245,234,0.06);
    border:1px solid rgba(248,245,234,0.22); padding: 8px 16px; border-radius: 999px;
    font-size: 0.85rem; font-weight:700;
  }
  .hero-pill-link{ transition: border-color .2s ease, background-color .2s ease; }
  
  .hero-pill-link:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
  .hero-pill svg{ width:16px; height:16px; color: var(--gold); flex:none; }
  .hero-pill .dot{ width:8px; height:8px; border-radius:50%; background: var(--muted-2); flex:none; }
  .hero-pill.is-open .dot{ background: var(--leaf); }
  .hero-pill.is-closed .dot{ background: var(--chili); }
  .hero h1{
    font-size: clamp(2.9rem, 5.6vw, 5.6rem); line-height: 0.94; color: var(--gold);
    text-shadow: 0 6px 24px rgba(0,0,0,0.35);
  }
  .hero h1 span{ display:block; color: var(--cream); }
  .hero-tagline{
    font-family: var(--font-mark); color: var(--cream); font-size: 1.7rem; margin-top: 20px;
    display:inline-block; transform: rotate(-2deg); max-width: 520px;
  }
  .hero .btn-row{ margin-top: 38px; }

  .hero-badge{ position:relative; justify-self:center; width: min(58vw, 220px); }
  .hero-badge img{
    position:relative; display:block; width:100%; height:auto; transform: rotate(-5deg);
    filter: drop-shadow(0 18px 26px rgba(0,0,0,0.6));
  }
  .hero-rings{
    position:absolute; top:50%; left:50%; width: 128%; height:auto; transform: translate(-50%,-50%);
    color: var(--gold); opacity:0.3; pointer-events:none;
  }

  .hero-strip{
    position:absolute; left:-3%; right:-3%; bottom: 30px; z-index:3; transform: rotate(-1.4deg);
    background: var(--gold); color:#0a0a0a; padding: 13px 0;
  }
  .hero-strip ul{
    list-style:none; margin:0; padding:0 16px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap: 4px 18px; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .hero-strip li{ display:flex; align-items:center; gap:18px; }
  .hero-strip li + li::before{
    content:""; width:12px; height:12px; flex:none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230a0a0a' d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.5l-6.4 3.6L7 14l-5.3-5 7.2-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  }

  @media (min-width: 900px){
    .hero-grid{ grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
    .hero-badge{ width: min(100%, 400px); }
    .hero-rings{ width: 150%; }
    .hero .wrap{ padding-top: 116px; padding-bottom: 128px; }
    .hero-strip ul{ font-size: 1.2rem; gap: 4px 26px; }
    .hero-strip li{ gap: 26px; }
    .hero-strip li + li::before{ width:14px; height:14px; }
  }
  @media (max-width: 480px){
    .hero-chips{ gap:8px; margin-bottom: 18px; }
    .hero-pill{ font-size: 0.8rem; padding: 7px 13px; }
    .hero-strip ul{ font-size: 0.9rem; letter-spacing: 0.06em; gap: 4px 12px; }
    .hero-strip li{ gap: 12px; }
    .hero-strip li + li::before{ width:10px; height:10px; }
  }

  /* Entrada única al cargar */
  @media (prefers-reduced-motion: no-preference){
    .hero [data-in]{ animation: heroIn .9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
    .hero-badge img{ animation: badgeIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) .3s both; }
  }
  @keyframes heroIn{ from{ opacity:0; transform: translateY(18px); filter: blur(6px); } }
  @keyframes badgeIn{ from{ opacity:0; transform: rotate(-12deg) scale(0.9); } }

  /* ---------- Section shells ---------- */
  section{ scroll-margin-top: 90px; }
  .section-pad{ padding: 100px 0; }
  .section-alt{ background: var(--bg-alt); }
  .section-head{ max-width: 640px; margin-bottom: 56px; }
  .section-head h1, .section-head h2{ font-size: clamp(2.1rem, 4.5vw, 3.1rem); color: var(--cream); margin-top: 10px; }
  .section-head p{ color: var(--muted); margin-top: 14px; font-size: 1.05rem; }

  /* ---------- Menu ---------- */
  .menu-nav{
    display:flex; gap:12px; margin-bottom: 60px; overflow-x:auto; padding-bottom: 6px;
    scrollbar-width: none;
  }
  .menu-nav::-webkit-scrollbar{ display:none; }
  .menu-pill{
    flex:0 0 auto; padding: 10px 20px; border-radius: 999px; border:1px solid var(--line);
    background: var(--surface); color: var(--muted); font-weight:700; font-size:0.92rem;
    transition: all .2s ease;
  }
  
  .menu-pill.active{ background: var(--gold); color:#0a0a0a; border-color: var(--gold); }

  .menu-group{ margin-bottom: 76px; }
  .menu-group:last-of-type{ margin-bottom: 0; }
  .group-head{ display:flex; align-items:baseline; gap:14px; margin-bottom: 30px; }
  .group-head h2{ font-size: 1.9rem; color: var(--gold); }
  .group-head .count{ color: var(--muted-2); font-size:0.9rem; }

  .burger-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .burger-card{
    position:relative; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
    padding: 32px 28px 26px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  
  .card-badge{
    position:absolute; top:-12px; left:26px; padding: 5px 14px; border-radius: 6px;
    font-size:0.72rem; font-weight:800; letter-spacing:0.06em; transform: rotate(-4deg);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  }
  .card-badge.new{ background: var(--gold); color:#0a0a0a; }
  .card-badge.hot{ background:#b8321f; color:#fff2ee; }
  .burger-card h3{ font-size: 1.5rem; color: var(--cream); margin-bottom: 12px; }
  .burger-card-img {
    width: 100%;
    height: 250px; /* Mantén la altura que te haya gustado */
    object-fit: contain; 
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    
  }
  .small-card-img {
    width: 100%;
    height: 90px; /* Más bajita para que encaje bien en la tarjeta pequeña */
    object-fit: contain; /* Mantiene la foto entera sin recortes */
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
  }
  .burger-card .ingredients{ color: var(--muted); font-size:0.96rem; line-height:1.6; }
  .burger-card .divider{ height:1px; background: var(--line); margin: 20px 0 16px; }
  .price-row{ display:flex; align-items:center; gap: 22px; }
  .price-item{ display:flex; flex-direction:column; }
  .price-item .label{ font-size:0.72rem; color: var(--muted-2); text-transform:none; letter-spacing:0.03em; }
  .price-item .value{ font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); }

  .small-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .small-card{
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-md);
    padding: 22px 20px; text-align:center; transition: transform .2s ease, border-color .2s ease;
    position:relative;
  }
  
  .small-card .emoji{ font-size: 1.9rem; display:block; margin-bottom: 10px; }
  .small-card h3{ font-size: 1.05rem; color: var(--cream); font-family: var(--font-body); font-weight:700; margin-bottom: 8px; }
  .small-card .price{ color: var(--gold); font-weight:800; }

  .menu-note{
    margin-top: 34px; border:1px dashed var(--line); border-radius: var(--radius-md);
    padding: 22px 26px; background: rgba(248,245,234,0.03);
  }
  .menu-note p{ color: var(--cream); font-weight:700; margin-bottom: 10px; }
  .menu-note ul li{ color: var(--muted); font-size:0.95rem; padding: 3px 0; }

  .drinks-list{ max-width: 620px; }
  .drinks-list li{
    display:flex; align-items:baseline; gap:10px; padding: 12px 0; border-bottom:1px dashed var(--line);
  }
  .drinks-list li .name{ font-weight:600; color:var(--cream); }
  .drinks-list li .fill{ flex:1; border-bottom: 1px dotted var(--muted-2); transform: translateY(-4px); opacity:0.5; }
  .drinks-list li .price{ font-weight:800; color: var(--gold); }
  .allergen-note{ margin-top: 22px; font-size:0.88rem; color: var(--muted-2); font-style: italic; }

  /* ---------- About ---------- */
  .about-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items:start; }
  .about-statement{ font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--cream); line-height:1.28; }
  .about-body p{ color: var(--muted); font-size: 1.05rem; margin-bottom: 22px; }
  .about-facts{ display:flex; gap: 22px; flex-wrap:wrap; margin-top: 26px; }
  .fact{ display:flex; align-items:center; gap:10px; background: var(--surface); border:1px solid var(--line); padding: 12px 18px; border-radius: 999px; }
  .fact .emoji{ font-size:1.2rem; }
  .fact span.txt{ font-weight:700; font-size:0.92rem; }

  /* ---------- Hours ---------- */
  .hours-layout{ display:grid; grid-template-columns: 1fr 320px; gap: 50px; align-items:start; }
  .hours-list{ border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
  .hour-row{
    display:flex; justify-content:space-between; align-items:center; gap:16px; padding: 18px 26px;
    border-bottom:1px solid var(--line); background: var(--surface);
  }
  .hour-row:last-child{ border-bottom:none; }
  .hour-row .day{ font-weight:700; color: var(--cream); }
  .hour-row .time{ color: var(--muted); font-weight:600; }
  .hour-row.closed .time{ color: var(--muted-2); }
  .hour-row.is-today{ background: var(--surface-2); }
  .hour-row.is-today .day{ color: var(--gold); display:inline-flex; align-items:center; gap:10px; }
  .hour-row.is-today .day::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--gold); flex:none; }

  .status-card{
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
    padding: 30px 26px; text-align:center; position:sticky; top:110px;
  }
  .status-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:8px; }
  .status-badge{
    display:inline-flex; align-items:center; padding: 10px 18px; border-radius: 999px; font-weight:800;
    font-size:0.95rem; margin-bottom: 14px;
  }
  .status-badge.open{ background: rgba(95,168,93,0.15); color: var(--leaf); }
  .status-badge.open .status-dot{ background: var(--leaf); }
  .status-badge.closed{ background: rgba(214,64,45,0.15); color: #ef7b6a; }
  .status-badge.closed .status-dot{ background: var(--chili); }
  .status-card p{ color: var(--muted); font-size:0.9rem; }

  /* ---------- Location ---------- */
  .location-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; }
  .contact-block h3{ font-size: 1.6rem; color: var(--gold); margin-bottom: 18px; }
  .contact-line{ margin-bottom: 14px; color: var(--cream); }
  .contact-line .lbl{ display:block; font-size:0.78rem; color: var(--muted-2); margin-bottom:3px; }
  .contact-line a{ font-weight:700; }
  
  .contact-block .btn-row{ margin-top: 26px; }
  .map-frame{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); background: var(--surface); aspect-ratio: 4/3.4; max-width: 520px; }
  .map-frame img{ display:block; width:100%; height:100%; object-fit: contain; padding: 32px; }
  .map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(0.15) contrast(1.05); }

  /* ---------- CTA band ---------- */
  .cta-band{ background: linear-gradient(120deg, var(--gold-deep), var(--gold)); padding: 90px 0; text-align:center; }
  .cta-band h2{ font-size: clamp(2.2rem, 5vw, 3.4rem); color:#0a0a0a; }
  .cta-band p{ color:#0a0a0a; margin-top:14px; font-size:1.15rem; font-weight:600; }
  .cta-band .btn-row{ justify-content:center; margin-top: 32px; }

  /* ---------- Footer ---------- */
  .site-footer{ background:#050505; border-top: 3px solid var(--gold); padding: 64px 0 26px; }
  .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; margin-bottom: 44px; }
  .footer-brand .brand-top{ font-size:1.8rem; }
  .footer-brand p{ color: var(--muted); margin-top: 14px; max-width: 320px; }
  .footer-col h3{ font-family: var(--font-body); font-size:0.8rem; letter-spacing:0.1em; color: var(--muted-2); margin-bottom: 16px; }
  .footer-col li{ margin-bottom: 10px; }
  .footer-col a{ color: var(--cream); font-weight:600; }
  
  .footer-socials{ display:flex; gap:12px; margin-top: 6px; }
  .footer-socials a{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:flex;
    align-items:center; justify-content:center; font-size:1.05rem; transition: border-color .2s ease, transform .2s ease;
  }
  
  .footer-bottom{ border-top:1px solid var(--line); padding-top: 22px; color: var(--muted-2); font-size:0.85rem; text-align:center; }
  .footer-bottom p{ margin:0; }
  .footer-bottom p + p{ margin-top: 6px; }
  .footer-bottom a{ color: var(--cream); font-weight:700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); transition: color .2s ease, text-decoration-color .2s ease; }
  
  .drinks-columns { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 50px; 
    max-width: 800px; 
  }
  .drinks-list-col h3 { 
    font-size: 1.15rem; 
    color: var(--gold); 
    font-family: var(--font-body); 
    font-weight: 700; 
    margin-bottom: 16px; 
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
  }
  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .about-grid, .location-grid, .hours-layout{ grid-template-columns: 1fr; gap: 40px; }
    .status-card{ position:static; }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
  }
  
  @media (max-width: 860px){
    .nav-links, .nav-actions{ display:none; }
    .nav-burger{ display:block; }
    .burger-grid{ grid-template-columns: 1fr; }
    .small-grid{ grid-template-columns: repeat(2, 1fr); }
    .drinks-columns { grid-template-columns: 1fr; gap: 30px; }
  }
  @media (max-width: 600px){
    .section-pad{ padding: 72px 0; }
    .small-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr; gap: 36px; }
    .price-row{ gap:14px; }
    .hour-row{ padding: 16px 18px; }
  }

  /* ---------- Página de carta ---------- */
  .carta-top{ padding-top: 140px; }
  @media (max-width: 600px){ .carta-top{ padding-top: 112px; } }
  .nav-links a[aria-current="page"]::after{ width:100%; }

  /* ---------- Formulario de reservas ---------- */
  .res-card{ max-width: 600px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; }
  .res-form{ display:flex; flex-direction:column; gap: 20px; }
  .res-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .res-label{ display:block; font-size:0.85rem; color: var(--muted); margin-bottom: 8px; font-weight:700; }
  .res-control{
    width:100%; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--bg); color: var(--cream); font-family: inherit; font-size: 1rem;
  }
  .res-control:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
  select.res-control, input#resDate{ cursor:pointer; }
  .res-control option, .res-control optgroup{ background: var(--bg); color: var(--cream); }
  textarea.res-control{ resize: vertical; }
  .res-hint{ font-size:0.85rem; color: var(--muted); margin-top: 14px; }
  .res-consent{ display:flex; align-items:center; gap:10px; }
  .res-consent input{ width:18px; height:18px; cursor:pointer; accent-color: var(--gold); flex:none; }
  .res-consent label{ font-size:0.85rem; color: var(--muted); cursor:pointer; }
  .res-consent a{ color: var(--gold); text-decoration: underline; }
  .res-notice{
    border:1px solid var(--gold-deep); background: var(--surface-2); border-radius: var(--radius-md);
    padding: 14px 16px; font-size:0.92rem; color: var(--cream);
  }
  .res-notice a{ color: var(--gold); font-weight:700; text-decoration: underline; }
  .res-notice[hidden]{ display:none; }
  .res-submit{ width:100%; }
  .res-submit:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }
  @media (max-width: 480px){
    .res-card{ padding: 24px; }
    .res-row{ grid-template-columns: 1fr; }
  }

  /* ---------- Selector de fecha ---------- */
  .res-field{ min-width:0; }
  .date-strip{
    display:flex; gap:8px; overflow-x:auto; padding: 2px 2px 8px; margin: 0 -2px;
    scroll-snap-type: x proximity; scrollbar-width:none; overscroll-behavior-x: contain;
  }
  .date-strip::-webkit-scrollbar{ display:none; }
  .day-chip{
    flex:0 0 auto; width:64px; display:flex; flex-direction:column; align-items:center; gap:2px; padding: 10px 0;
    border-radius: var(--radius-md); border:1px solid var(--line); background: var(--bg); color: var(--cream);
    font-family: inherit; cursor:pointer; scroll-snap-align:start;
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
  }
  .day-chip .dc-wd{ font-size:0.68rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color: var(--muted); }
  .day-chip .dc-num{ font-family: var(--font-display); font-size:1.6rem; line-height:1.1; }
  .day-chip .dc-mo{ font-size:0.7rem; font-weight:600; color: var(--muted); }
  .day-chip:active:not(:disabled){ transform: scale(0.96); }
  .day-chip:focus-visible, .date-more:focus-visible, .cal-nav:focus-visible, .cal-day:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
  .day-chip[aria-checked="true"]{ background: var(--gold); border-color: var(--gold); color:#0a0a0a; }
  .day-chip[aria-checked="true"] .dc-wd, .day-chip[aria-checked="true"] .dc-mo{ color:#0a0a0a; }
  .day-chip:disabled{ opacity:0.4; cursor:not-allowed; }
  @media (hover:hover){
    .day-chip:hover:not(:disabled):not([aria-checked="true"]){ border-color: var(--gold); }
  }

  .date-actions{ display:flex; flex-wrap:wrap; align-items:center; gap: 8px 14px; margin-top: 4px; }
  .date-more{
    display:inline-flex; align-items:center; gap:8px; padding: 9px 14px; border-radius: 999px;
    border:1px solid var(--line); background: transparent; color: var(--cream); font-family: inherit; font-size:0.85rem; font-weight:700; cursor:pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, transform .15s ease-out;
  }
  .date-more svg{ width:16px; height:16px; color: var(--gold); flex:none; }
  .date-more:active{ transform: scale(0.97); }
  .date-more[aria-expanded="true"], .date-more.is-selected{ border-color: var(--gold); }
  .date-more.is-selected{ background: rgba(246,201,40,0.12); }
  @media (hover:hover){ .date-more:hover{ border-color: var(--gold); } }
  .res-picked{ font-size:0.9rem; font-weight:700; color: var(--cream); }
  .res-error{ margin: 10px 0 0; font-size:0.85rem; color:#ff8f7e; }
  .res-error[hidden]{ display:none; }

  .cal-wrap{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(0.16, 1, 0.3, 1); }
  .cal-wrap.is-open{ grid-template-rows: 1fr; }
  .cal{ min-height:0; overflow:hidden; }
  .cal-card{
    margin-top: 12px; max-width: 360px; padding: 14px; border:1px solid var(--line);
    border-radius: var(--radius-md); background: var(--bg);
  }
  .cal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; }
  .cal-title{ font-family: var(--font-display); font-size:1.25rem; letter-spacing:0.01em; text-transform: capitalize; }
  .cal-nav{
    width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line);
    background: transparent; color: var(--cream); cursor:pointer;
    transition: border-color .15s ease-out, transform .15s ease-out, opacity .15s ease-out;
  }
  .cal-nav svg{ width:16px; height:16px; }
  .cal-nav:active:not(:disabled){ transform: scale(0.92); }
  .cal-nav:disabled{ opacity:0.3; cursor:not-allowed; }
  @media (hover:hover){ .cal-nav:hover:not(:disabled){ border-color: var(--gold); } }
  .cal-weekdays, .cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-weekdays{ margin-bottom: 4px; }
  .cal-weekdays span{ text-align:center; font-size:0.72rem; font-weight:800; color: var(--muted); letter-spacing:0.06em; padding: 4px 0; }
  .cal-day{
    aspect-ratio: 1; border-radius: 50%; border:0; background: transparent; color: var(--cream);
    font-family: inherit; font-size:0.95rem; font-weight:600; cursor:pointer;
    transition: background-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
  }
  .cal-day.is-today{ box-shadow: inset 0 0 0 1.5px var(--gold-deep); }
  .cal-day.is-off{ color: var(--muted-2); opacity:0.4; cursor:not-allowed; }
  .cal-day.is-selected{ background: var(--gold); color:#0a0a0a; box-shadow:none; }
  .cal-day:active:not(.is-off){ transform: scale(0.92); }
  @media (hover:hover){ .cal-day:hover:not(.is-off):not(.is-selected){ background: var(--surface-2); } }
  .cal-note{ margin: 10px 0 0; font-size:0.8rem; color: var(--muted-2); }
  @media (prefers-reduced-motion: reduce){
    .cal-wrap, .day-chip, .date-more, .cal-nav, .cal-day{ transition:none; }
  }

  /* ---------- Horas en chips ---------- */
  .res-people{ max-width: 240px; }
  .time-wrap{ display:grid; grid-template-rows: 0fr; margin-top: -20px; opacity:0; transition: grid-template-rows .35s cubic-bezier(0.16, 1, 0.3, 1), margin-top .35s cubic-bezier(0.16, 1, 0.3, 1), opacity .25s ease-out; }
  .time-wrap.is-open{ grid-template-rows: 1fr; margin-top: 0; opacity:1; }
  .time-inner{ min-height:0; overflow:hidden; padding: 4px; margin: -4px; }
  .time-group-label{ margin: 14px 0 8px; font-size:0.78rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color: var(--muted); }
  .time-group-label:first-child{ margin-top: 0; }
  .time-chips{ display:flex; flex-wrap:wrap; gap: 8px; }
  .time-chip{
    padding: 10px 18px; border-radius: 999px; border:1px solid var(--line); background: var(--bg); color: var(--cream);
    font-family: inherit; font-size:0.95rem; font-weight:700; cursor:pointer; font-variant-numeric: tabular-nums;
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
  }
  .time-chip:active{ transform: scale(0.96); }
  .time-chip:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
  .time-chip[aria-checked="true"]{ background: var(--gold); border-color: var(--gold); color:#0a0a0a; }
  @media (hover:hover){ .time-chip:hover:not([aria-checked="true"]){ border-color: var(--gold); } }
  @media (prefers-reduced-motion: reduce){ .time-wrap, .time-chip{ transition:none; } }

  /* ---------- Detalles del navegador ---------- */
  ::selection{ background: var(--gold); color:#0a0a0a; }
  main:focus{ outline:none; }
  .site-footer .footer-bottom p + p{ margin-top: 6px; }

  .hour-row .time{ text-align:right; }
  .hour-row .rng{ white-space:nowrap; }
  .res-submit{ white-space: normal; text-align:center; }
  @media (max-width: 360px){
    .hero-strip ul{ font-size: 0.8rem; letter-spacing: 0.04em; gap: 4px 10px; }
    .hero-strip li{ gap: 10px; }
  }

  /* ---------- Iconos y disposición de reservas ---------- */
  .ico{ width:1.15em; height:1.15em; flex:none; }
  .footer-socials .ico{ width:18px; height:18px; }
  .res-layout{ display:grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items:start; }
  .res-intro .section-head{ margin-bottom: 28px; }
  .res-points{ list-style:none; margin:0; padding:0; display:grid; gap: 14px; max-width: 440px; }
  .res-points li{ display:flex; gap:12px; align-items:flex-start; color: var(--muted); font-size:0.95rem; }
  .res-points .ico{ color: var(--gold); margin-top: 2px; width:18px; height:18px; }
  .res-points a{ color: var(--cream); font-weight:700; text-decoration: underline; text-underline-offset: 3px; }
  @media (min-width: 980px){
    .res-layout{ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
    .res-card{ max-width: none; }
  }

  /* ---------- Móvil: sensación nativa ---------- */
  :root{ color-scheme: dark; }
  html{ -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
  input, textarea, select{ font-size: 16px; }
  button, a, [role="button"], [role="radio"], summary{ touch-action: manipulation; }
  button, [role="button"], [role="radio"], .btn, .menu-pill, .nav-burger{ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  /* partes de reglas que no son hover y que no deben depender del puntero */
  .nav-links a.active::after{ width:100%; }
  .mobile-panel a.btn-solid{ color:#0a0a0a; }

  /* Hover solo en dispositivos con puntero preciso (en táctil se queda "pegado" tras tocar) */
  @media (hover: hover) and (pointer: fine){
    .btn-solid:hover{ background:#ffd95a; transform: translateY(-2px); }
    .btn-outline:hover{ border-color: var(--cream); transform: translateY(-2px); }
    .btn-dark:hover{ background:#000000; transform: translateY(-2px); }
    .btn-ghost-dark:hover{ border-color:#0a0a0a; transform: translateY(-2px); }
    .nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
    .mobile-panel a:hover{ color: var(--gold); }
    .mobile-panel a.btn-solid, .mobile-panel a.btn-solid:hover{ color:#0a0a0a; }
    .hero-pill-link:hover{ border-color: var(--gold); background: rgba(246,201,40,0.12); }
    .menu-pill:hover{ color: var(--cream); border-color: var(--gold); }
    .burger-card:hover{
        transform: translateY(-6px); border-color: var(--gold-deep);
        box-shadow: 0 18px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(246,201,40,0.12);
      }
    .small-card:hover{ transform: translateY(-4px); border-color: var(--gold-deep); }
    .contact-line a:hover{ color: var(--gold); }
    .footer-col a:hover{ color: var(--gold); }
    .footer-socials a:hover{ border-color: var(--gold); transform: translateY(-3px); }
    .footer-bottom a:hover{ color: var(--gold); text-decoration-color: var(--gold); }
    .mobile-panel a.btn-solid:hover{ color:#0a0a0a; }
  }

  /* Zonas seguras (notch / modo horizontal) */
  .wrap{ padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .nav{ padding-top: calc(20px + env(safe-area-inset-top)); }
  .nav.is-scrolled{ padding-top: calc(12px + env(safe-area-inset-top)); }
  .site-footer{ padding-bottom: calc(26px + env(safe-area-inset-bottom)); }

  /* Objetivos táctiles más cómodos */
  .footer-col a{ display:inline-block; padding: 6px 0; }
  .footer-col li{ margin-bottom: 4px; }
  .date-more{ min-height: 40px; }
  .cal-nav{ width:40px; height:40px; }

  .contact-line a, .footer-bottom a{ display:inline-block; padding: 6px 0; }

  /* Campo trampa antispam: invisible para personas */
  .hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

  .contact-line a.address-link{ text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: text-decoration-color .2s ease-out, color .2s ease-out; }
  @media (hover: hover) and (pointer: fine){ .contact-line a.address-link:hover{ color: var(--gold); text-decoration-color: var(--gold); } }

  /* ---------- Barra de contacto rápido (solo móvil) ---------- */
  .quick-bar{ display:none; }
  @media (max-width: 860px){
    .quick-bar{
      position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px;
      padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
      background:#0a0a0a; border-top:1px solid var(--line);
      transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .quick-bar.is-hidden{ transform: translateY(100%); }
    .qb{
      display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding: 0 8px; border-radius: 12px;
      border:1.5px solid rgba(248,245,234,0.35); color: var(--cream); font-weight:800; font-size:0.9rem;
      transition: transform .15s ease-out, background-color .15s ease-out;
    }
    .qb:active{ transform: scale(0.97); }
    .qb-solid{ background: var(--gold); border-color: var(--gold); color:#0a0a0a; }
    .site-footer{ padding-bottom: calc(26px + 70px + env(safe-area-inset-bottom)); }
    .hero .wrap{ padding-bottom: calc(40px + 70px); }
    .hero-strip{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){ .quick-bar, .qb{ transition:none; } }