/* ── Paleta OFICIAL de marca ───────────────────────────────────
   Extraída del original del diseñador. El azul y el dorado son
   los del logo, medidos sobre los PNG que exportó él mismo.      */
:root{
  --alto-hd:66px;      /* alto real de la cabecera; lo afina el JS al cargar */
  --navy:#03253A;       /* azul de marca — fondo oscuro */
  --navy-2:#062F49;     /* superficies elevadas sobre el azul */
  --navy-3:#0B3A57;     /* bordes y separadores sobre el azul */
  --crema:#FAF7F2;      /* fondo claro */
  --crema-2:#F2EDE5;    /* franjas alternas */
  --tinta:#03253A;      /* texto sobre claro = azul de marca */
  --tinta-2:#4A5560;    /* texto secundario — 7.0:1 sobre --crema */
  --oro:#BB975E;        /* dorado de marca — sobre azul da 5.7:1 */
  --oro-osc:#7A5C2B;    /* dorado SOLO para texto pequeño sobre claro.
                          El anterior (#8A6A35) daba 4.30:1 sobre las franjas
                          crema-2 y no llegaba al 4.5:1 que pide WCAG AA.
                          Este da 5.8:1 sobre crema y 5.3:1 sobre crema-2.
                          Para títulos, filetes y bordes se sigue usando --oro. */
  --linea:#DED6C9;
  --linea-osc:rgba(187,151,94,.28);
  --wa:#15773B;
  /* Colores del local de verdad — medidos en las fotos del salón.
     El azul de marca no existe en la arquitectura: allí manda el negro
     cálido, la madera, el ladrillo y la luz ámbar. Estos tonos son los
     que dejan que la comida se vea apetecible en vez de verdosa. */
  --carbon:#16120F;     /* negro cálido: fondo detrás de las fotos */
  --madera:#3B2A1E;     /* madera oscura de mesas y vigas */
  --terracota:#A85B3C;  /* ladrillo visto */
  --disp:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* Foco visible en todo lo que se puede accionar con teclado. Antes solo lo
   tenían los campos del formulario y el acordeón. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--oro-osc);outline-offset:2px;border-radius:2px}
.sec--dark :focus-visible,.hd :focus-visible,.ft :focus-visible,
.pag-hero :focus-visible,.hero :focus-visible{outline-color:var(--oro)}
[hidden]{display:none!important}   /* ← imprescindible, ver aviso de arriba */
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--crema);color:var(--tinta);
     font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin-inline:auto;padding:0 1.5rem}

/* accesible pero invisible: texto que solo leen los lectores de pantalla */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--oro);
        color:var(--navy);padding:.8rem 1.2rem;font:600 14px/1 var(--sans);
        text-decoration:none;border-radius:0 0 2px 0}
.saltar:focus{left:0}

/* ── Preguntas frecuentes ───────────────────────────────────── */
.faq details{border-bottom:1px solid var(--linea);padding:.2rem 0}
.faq summary{font-family:var(--disp);font-weight:600;font-size:1.25rem;
             padding:1rem 2rem 1rem 0;cursor:pointer;position:relative;
             list-style:none;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;
                    transform:translateY(-50%);color:var(--oro-osc);
                    font:400 1.5rem/1 var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--oro-osc);outline-offset:2px}
.faq p{margin:0 0 1.1rem;color:var(--tinta-2);font-size:15.5px;max-width:42rem}
.faq a{color:var(--oro-osc);text-underline-offset:.2em}

/* ── Mapa incrustado ────────────────────────────────────────── */
.mapa{width:100%;border:0;border-radius:2px;display:block;
      background:var(--navy-2);filter:grayscale(.25) contrast(1.05)}
@media (max-width:880px){.mapa{height:260px}}

/* ── Marcadores de lo que falta ─────────────────────────────── */
.falta{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,#E7E0D6,#E7E0D6 10px,#DFD7CB 10px,#DFD7CB 20px);
  color:#6B6155;font:600 12px/1.5 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;padding:1rem;border:1px dashed #B9AE9E;
}
.prov{background:rgba(187,151,94,.16);
      box-shadow:0 0 0 2px rgba(187,151,94,.16);border-radius:2px}

/* ── Cabecera ───────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:50;background:rgba(3,37,58,.97);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--linea-osc)}
.hd__in{display:flex;align-items:center;justify-content:space-between;
        gap:1.5rem;padding:.8rem 0}
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.logo img{width:40px;height:40px}
.logo__txt{font-family:var(--disp);font-weight:600;font-size:1.4rem;
           color:#fff;letter-spacing:.03em;line-height:1}
.logo__txt small{display:block;font:500 9px/1 var(--sans);
                 letter-spacing:.22em;color:var(--oro);
                 text-transform:uppercase;margin-top:.3rem}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a{font:500 14px/1 var(--sans);color:rgba(250,247,242,.84);
       text-decoration:none;transition:color .2s}
.nav a:hover,.nav a:focus-visible{color:var(--oro)}
.nav__cta{background:var(--wa);color:#fff!important;padding:.65rem 1.15rem;
          border-radius:2px;font-weight:600!important}
.nav__cta:hover{background:#11602F}
.burger{display:none;background:none;border:1px solid var(--linea-osc);
        color:var(--crema);padding:.5rem .7rem;border-radius:2px;
        cursor:pointer;font-size:1.1rem;line-height:1}

/* ── Portada ────────────────────────────────────────────────── */
.hero{position:relative;background:var(--carbon);color:var(--crema);
      min-height:clamp(520px,80vh,720px);display:grid;align-items:center;
      text-align:center;overflow:hidden}
.hero__ph{position:absolute;inset:0;border:0;align-items:flex-end;padding-bottom:1.2rem;
          background:repeating-linear-gradient(45deg,#062F49,#062F49 12px,#0B3A57 12px,#0B3A57 24px);
          color:rgba(250,247,242,.42)}
/* velo para que la marca se lea cuando entre la foto de verdad */
/* Velo cálido, no azul: encima de una foto de comida el azul la vuelve
   verdosa y mata el apetito. Más abierto arriba para que se vea el plato. */
.hero__velo{position:absolute;inset:0;
            background:linear-gradient(175deg,rgba(22,18,15,.52) 0%,
                                              rgba(22,18,15,.72) 45%,
                                              rgba(22,18,15,.90) 100%)}
.hero__in{position:relative;padding:5rem 0;margin-inline:auto;max-width:44rem}
.hero__marca{width:min(300px,62vw);margin:0 auto 1.5rem}
.hero h1{margin:0 0 1rem;font-weight:400}
.hero__sub{display:block;font-family:var(--disp);font-style:italic;font-weight:400;
           font-size:clamp(1.3rem,3.4vw,1.85rem);line-height:1.22;
           color:var(--oro);margin:0 0 1rem;letter-spacing:0}
.hero p{font-size:clamp(1rem,2vw,1.1rem);color:rgba(250,247,242,.88);
        margin:0 auto 2.2rem;max-width:34rem}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.6rem;
     border-radius:2px;font:600 15px/1 var(--sans);text-decoration:none;
     border:1.5px solid transparent;transition:all .2s;cursor:pointer}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:#11602F}
.btn--ghost{border-color:var(--oro);color:var(--oro)}
.btn--ghost:hover{background:var(--oro);color:var(--navy)}
.btn--solid{background:var(--navy);color:var(--crema)}
.btn--solid:hover{background:var(--navy-2)}

/* ── Secciones ──────────────────────────────────────────────── */
section{padding:clamp(3.5rem,8vw,6rem) 0}
.sec--alt{background:var(--crema-2)}
.sec--dark{background:var(--navy);color:var(--crema)}
.sec__k{font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
        color:var(--oro-osc);margin:0 0 .9rem}
.sec--dark .sec__k{color:var(--oro)}
.sec__t{font-family:var(--disp);font-weight:600;
        font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;margin:0 0 1rem}
.sec__d{color:var(--tinta-2);max-width:44rem;margin:0 0 2.8rem}
.sec--dark .sec__d{color:rgba(250,247,242,.8)}
/* filete dorado, el mismo recurso gráfico que usa el logo */
.filete{display:flex;align-items:center;gap:1rem;margin:0 0 2.6rem}
.filete::before,.filete::after{content:"";height:1px;background:var(--oro);opacity:.5;flex:1}
.filete img{width:34px;height:34px;flex-shrink:0}

/* ── Destacados del menú ────────────────────────────────────── */
.dest{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:1.5rem;margin:0 0 3.5rem}
.dest figure{margin:0}
.dest__ph{aspect-ratio:4/5;border-radius:2px;margin:0 0 .8rem}
.dest figcaption{font-family:var(--disp);font-weight:600;font-size:1.2rem;
                 text-align:center;color:var(--tinta)}

/* ── La carta ───────────────────────────────────────────────── */
.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.5rem;padding:0;list-style:none}
.cats button{background:none;border:1.5px solid var(--linea);color:var(--tinta-2);
             padding:.55rem 1.1rem;border-radius:2px;cursor:pointer;
             font:500 14px/1 var(--sans);transition:all .2s}
.cats button:hover{border-color:var(--oro-osc);color:var(--oro-osc)}
.cats button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.grupo{margin:0 0 3.4rem}
.grupo__t{font-family:var(--disp);font-weight:600;font-size:1.85rem;
          margin:0 0 .3rem;display:flex;align-items:baseline;gap:.9rem;
          color:var(--tinta)}
.grupo__t::after{content:"";flex:1;height:1px;background:var(--oro);opacity:.45}
.grupo__n{font:400 14px/1.6 var(--sans);color:var(--tinta-2);margin:0 0 1.5rem;
          max-width:46rem}
.grupo__n em{font-style:normal;color:var(--oro-osc);font-weight:600}

/* Lista tipo carta: nombre · puntos · precio, como el menú impreso.
   Con 130 platos una tarjeta con foto por plato era inviable —
   la carta impresa y lacampirana.ec usan exactamente esta forma. */
.carta{list-style:none;padding:0;margin:0;
       display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
       gap:1.4rem 3rem}
.item{break-inside:avoid}
.item__l{display:flex;align-items:baseline;gap:.2rem;margin:0 0 .25rem}
.item__n{font-family:var(--disp);font-weight:600;font-size:1.22rem;
         line-height:1.25;color:var(--tinta)}
.item__pt{flex:1;min-width:1.2rem;border-bottom:1px dotted rgba(138,106,53,.42);
          position:relative;top:-.32em}
.item__p{font:600 15px/1 var(--sans);color:var(--oro-osc);white-space:nowrap;
         font-variant-numeric:tabular-nums}
.item__d{font-size:14.5px;line-height:1.6;color:var(--tinta-2);margin:0}
.vars{list-style:none;padding:0;margin:.5rem 0 0}
.vars li{display:flex;align-items:baseline;gap:.2rem;font-size:14.5px;
         color:var(--tinta-2);margin:0 0 .15rem}
.vars .item__p{font-size:14px}
.nota-carta{border-top:1px solid var(--linea);margin-top:1.5rem;padding-top:1.5rem;
            font-size:14px;color:var(--tinta-2)}

/* ── Bloques de dos columnas ────────────────────────────────── */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.dos__ph{aspect-ratio:4/5;border-radius:2px}
.dos p{margin:0 0 1.1rem}

/* ── Ubicación ──────────────────────────────────────────────── */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
       gap:2rem;margin:0 0 2.5rem}
.dato h3{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
         color:var(--oro);margin:0 0 .7rem}
.dato p{margin:0 0 .35rem;color:rgba(250,247,242,.88);font-size:15px}
.dato a{color:rgba(250,247,242,.88);text-underline-offset:.2em}
.dato a:hover{color:var(--oro)}
.horarios{width:100%;border-collapse:collapse;font-size:15px}
.horarios td{padding:.32rem 0;color:rgba(250,247,242,.88)}
.horarios td:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* ── Formulario ─────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;max-width:640px}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo--full{grid-column:1/-1}
.campo label{font:600 12px/1 var(--sans);letter-spacing:.08em;
             text-transform:uppercase;color:var(--tinta-2)}
.campo input,.campo select,.campo textarea{
  font:400 16px/1.5 var(--sans);padding:.75rem .9rem;border:1.5px solid var(--linea);
  border-radius:2px;background:#fff;color:var(--tinta);width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2px solid var(--oro-osc);outline-offset:1px;border-color:var(--oro-osc)}
.campo textarea{resize:vertical;min-height:96px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__nota{grid-column:1/-1;font-size:13px;color:var(--tinta-2);margin:0}

/* ── Pie ────────────────────────────────────────────────────── */
.ft{background:var(--navy);color:rgba(250,247,242,.72);
    padding:3rem 0 2rem;border-top:1px solid var(--linea-osc)}
.ft__g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin:0 0 2.5rem}
.ft__marca{width:150px;margin:0 0 1rem}
.ft h4{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
       color:var(--oro);margin:0 0 .9rem}
.ft p,.ft li{font-size:14px;margin:0 0 .45rem}
.ft ul{list-style:none;padding:0;margin:0}
.ft a{text-decoration:none}
.ft a:hover{color:var(--oro);text-decoration:underline}
.ft__base{border-top:1px solid var(--linea-osc);padding-top:1.4rem;
          display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
          font-size:13px;color:rgba(250,247,242,.55)}

/* ── Botón flotante ─────────────────────────────────────────── */
.wa-flota{position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;width:56px;height:56px;
          border-radius:50%;background:var(--wa);display:grid;place-items:center;
          box-shadow:0 6px 20px rgba(0,0,0,.3);text-decoration:none}
.wa-flota:hover{background:#11602F}
.wa-flota svg{width:28px;height:28px;fill:#fff}

@media (max-width:880px){
  .nav{position:fixed;inset:60px 0 auto;flex-direction:column;align-items:stretch;
       gap:0;background:var(--navy);padding:1rem 1.5rem 1.5rem;
       border-bottom:1px solid var(--linea-osc);display:none}
  .nav[data-abierto]{display:flex}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--linea-osc)}
  .nav__cta{text-align:center;margin-top:1rem;border-bottom:0!important}
  .burger{display:block}
  .dos{grid-template-columns:1fr}
  .ft__g{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .carta{grid-template-columns:1fr;gap:1.3rem}
  /* apilados a 4/5 los tres destacados eran una pared de scroll en móvil */
  .dest{gap:1.2rem;margin-bottom:2.5rem}
  .dest__ph{aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ══════════════════════════════════════════════════════════════
   Páginas interiores (nosotros, catering)
   ══════════════════════════════════════════════════════════════ */

/* Cabecera de página: más baja que la portada, sin ser un hero completo */
.pag-hero{padding:clamp(3.5rem,9vw,6rem) 0 clamp(3rem,7vw,5rem);
          background:var(--navy);color:var(--crema)}
.pag-hero__t{font-family:var(--disp);font-weight:600;line-height:1.08;
             font-size:clamp(2.2rem,6vw,3.6rem);margin:0;letter-spacing:-.01em;color:#fff}
.pag-hero__t em{font-style:italic;color:var(--oro)}

/* Invierte el orden de las dos columnas sin romper el orden del HTML */
.dos--inv > *:first-child{order:2}
.dos--inv > *:last-child{order:1}

/* Rejilla de tarjetas de texto */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.tarjetas article{border-top:2px solid var(--terracota);padding-top:1.1rem}
.tarjetas h3{font-family:var(--disp);font-weight:600;font-size:1.4rem;
             margin:0 0 .5rem;color:var(--tinta)}
.tarjetas p{margin:0;font-size:15.5px;color:var(--tinta-2)}

/* Pasos numerados */
.pasos{list-style:none;counter-reset:paso;padding:0;margin:0;
       display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2.5rem}
.pasos li{counter-increment:paso;position:relative;padding-top:3.2rem}
.pasos li::before{content:counter(paso,decimal-leading-zero);position:absolute;top:0;left:0;
                  font-family:var(--disp);font-weight:600;font-size:2.4rem;line-height:1;
                  color:var(--oro);opacity:.85}
.pasos h3{font-family:var(--disp);font-weight:600;font-size:1.35rem;
          margin:0 0 .5rem;color:var(--tinta)}
.pasos p{margin:0;font-size:15.5px;color:var(--tinta-2)}

/* Enlace activo de la navegación */
.nav a[aria-current="page"]{color:var(--oro)}

@media (max-width:880px){
  .dos--inv > *:first-child{order:0}
  .dos--inv > *:last-child{order:0}
  .pasos{gap:2rem}
}

/* ══════════════════════════════════════════════════════════════
   Páginas legales (privacidad, términos)
   Son documentos de texto largo: cabecera simple y columna estrecha.
   ══════════════════════════════════════════════════════════════ */
.legal main .wrap{max-width:46rem;padding-top:clamp(2.5rem,6vw,4rem);
                  padding-bottom:clamp(3rem,7vw,5rem)}
.legal .logo{font-family:var(--disp);font-weight:600;font-size:1.3rem;
             color:#fff;text-decoration:none;line-height:1;display:block}
.legal .logo small{display:block;font:500 9px/1 var(--sans);letter-spacing:.22em;
                   color:var(--oro);text-transform:uppercase;margin-top:.3rem}
.legal h1{font-family:var(--disp);font-weight:600;line-height:1.1;
          font-size:clamp(2rem,5vw,2.8rem);margin:0 0 .4rem;color:var(--tinta)}
.legal h2{font-family:var(--disp);font-weight:600;font-size:1.45rem;
          margin:2.4rem 0 .7rem;color:var(--tinta)}
.legal p,.legal li{color:var(--tinta-2);font-size:16px;line-height:1.75}
.legal ul,.legal ol{padding-left:1.2rem}
.legal li{margin:0 0 .45rem}
.legal a{color:var(--oro-osc);text-underline-offset:.2em}
.legal strong{color:var(--tinta)}
.fecha{font-size:14px!important;color:var(--tinta-2);margin:0 0 2rem!important}
.nota{border-left:3px solid var(--oro);background:var(--crema-2);
      padding:1rem 1.2rem;border-radius:0 2px 2px 0;font-size:15px;margin:2rem 0}
.volver{color:rgba(250,247,242,.85);text-decoration:none;
        font:500 14px/1 var(--sans);white-space:nowrap}
.volver:hover{color:var(--oro)}

/* ── Cabecera de cada grupo de la carta ─────────────────────────
   Foto cuadrada: la mitad de los originales son verticales y una
   banda apaisada les cortaba el plato. El cuadrado no discrimina. */
.grupo__cab{display:flex;gap:1.4rem;align-items:center;margin:0 0 1.6rem}
.grupo__tit{flex:1;min-width:0}
.grupo__foto{width:190px;height:190px;flex-shrink:0;border-radius:2px;
             object-fit:cover;box-shadow:0 6px 20px rgba(3,37,58,.13)}
.grupo__cab .grupo__t{margin-bottom:.4rem}
.grupo__cab .grupo__n{margin-bottom:0}
@media (max-width:880px){
  .grupo__cab{gap:1rem}
  .grupo__foto{width:104px;height:104px}
}

/* ── Fotos de las páginas interiores ────────────────────────── */
img.dos__ph{width:100%;height:auto;object-fit:cover;border-radius:2px}

/* ── Foto de portada ────────────────────────────────────────── */
.hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ══════════════════════════════════════════════════════════════
   BUSCADOR DE LA CARTA
   Con 91 fichas y 155 precios, encontrar un plato bajando con el
   dedo es lento. El buscador es el camino más corto al objetivo
   "ver un plato y su precio en menos de 10 segundos".
   ══════════════════════════════════════════════════════════════ */
.buscar{position:relative;margin:0 0 1.2rem;max-width:32rem}
.buscar__campo{width:100%;font:400 16px/1.5 var(--sans);
  padding:.85rem 2.6rem .85rem 2.9rem;border:1.5px solid var(--linea);
  border-radius:2px;background:#fff;color:var(--tinta)}
.buscar__campo::placeholder{color:#8A8F96}
.buscar__campo:focus{outline:3px solid var(--oro-osc);outline-offset:2px;
  border-color:var(--oro-osc)}
.buscar__lupa{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;fill:none;stroke:var(--tinta-2);stroke-width:2;
  pointer-events:none}
.buscar__limpiar{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;background:none;cursor:pointer;color:var(--tinta-2);
  font-size:20px;line-height:1;border-radius:50%}
.buscar__limpiar:hover{background:var(--crema-2);color:var(--tinta)}
.buscar__limpiar[hidden]{display:none!important}
.buscar__cuenta{font:500 14px/1.5 var(--sans);color:var(--tinta-2);
  margin:0 0 2rem;min-height:1.5em}
.buscar__cuenta strong{color:var(--tinta);font-weight:600}

/* Estado vacío: cuando la búsqueda no encuentra nada */
.vacio{display:none;text-align:center;padding:3.5rem 1.5rem;
  border:1px dashed var(--linea);border-radius:2px;background:var(--crema-2)}
.vacio[data-visible]{display:block}
.vacio img{width:56px;height:56px;margin:0 auto 1.2rem;opacity:.55}
.vacio h3{font-family:var(--disp);font-weight:600;font-size:1.5rem;
  margin:0 0 .5rem;color:var(--tinta)}
.vacio p{color:var(--tinta-2);margin:0 0 1.4rem;font-size:15.5px}

/* Resaltado de la coincidencia dentro del nombre del plato */
mark{background:rgba(187,151,94,.32);color:inherit;border-radius:2px;padding:0 .1em}

/* ══════════════════════════════════════════════════════════════
   BARRA DE CATEGORÍAS — pegajosa bajo la cabecera
   En móvil va en UNA sola línea con desplazamiento horizontal:
   con 12 chips, envolverlas ocupaba cuatro líneas y empujaba la
   carta fuera de la pantalla.
   ══════════════════════════════════════════════════════════════ */
.cats-envoltura{position:sticky;top:var(--alto-hd,66px);z-index:40;
  background:var(--crema);margin:0 0 1.6rem;
  border-bottom:1px solid var(--linea)}
.sec--alt .cats-envoltura{background:var(--crema-2)}
/* En escritorio envuelven con normalidad: hay sitio de sobra y una barra de
   desplazamiento cruzando la página se ve rota. El carrusel es cosa de móvil. */
.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:.75rem 0;list-style:none}
.cats li{flex:0 0 auto}
.cats button{white-space:nowrap;background:none;border:1.5px solid var(--linea);
  color:var(--tinta-2);padding:.55rem 1.1rem;border-radius:2px;cursor:pointer;
  font:500 14px/1 var(--sans);transition:all .2s}
.cats button:hover{border-color:var(--oro-osc);color:var(--oro-osc)}
.cats button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);
  color:#fff}
/* difuminado del borde derecho: solo en móvil, donde sí hay desplazamiento */
.cats-envoltura::after{content:none}
.cats-envoltura[data-fin]::after{opacity:0}

/* ══════════════════════════════════════════════════════════════
   DISTINTIVOS DE PLATO
   ══════════════════════════════════════════════════════════════ */
.marcas{display:inline-flex;flex-wrap:wrap;gap:.35rem;vertical-align:middle;
  margin-left:.45rem}
.marca{display:inline-flex;align-items:center;gap:.25rem;
  font:600 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  padding:.3rem .45rem;border-radius:2px;border:1px solid;white-space:nowrap}
.marca--reco{color:var(--oro-osc);border-color:rgba(122,92,43,.45);
  background:rgba(187,151,94,.13)}
.marca--veg{color:#3D6B34;border-color:rgba(61,107,52,.4);background:rgba(61,107,52,.09)}
.marca--pic{color:#A33726;border-color:rgba(163,55,38,.4);background:rgba(163,55,38,.08)}
.marca--sg{color:#4A5560;border-color:rgba(74,85,96,.35);background:rgba(74,85,96,.07)}
.leyenda{display:flex;flex-wrap:wrap;gap:1rem;margin:0 0 2rem;
  font:400 13.5px/1.4 var(--sans);color:var(--tinta-2)}
.leyenda span{display:inline-flex;align-items:center;gap:.4rem}

/* ══════════════════════════════════════════════════════════════
   ESTADO DEL LOCAL — "Abierto ahora · cierra 20:00"
   Se calcula en el navegador con la hora de Quito, no la del
   visitante: alguien mirando desde Madrid tiene que ver si el
   restaurante está abierto EN QUITO.
   ══════════════════════════════════════════════════════════════ */
.estado{display:inline-flex;align-items:center;gap:.5rem;
  font:600 13px/1 var(--sans);padding:.5rem .85rem;border-radius:2px;
  border:1px solid;white-space:nowrap}
.estado__punto{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.estado[data-abierto="si"]{color:#7BE0A0;border-color:rgba(123,224,160,.4);
  background:rgba(21,119,59,.22)}
.estado[data-abierto="si"] .estado__punto{background:#4ADE80;
  box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.estado[data-abierto="no"]{color:rgba(250,247,242,.82);
  border-color:rgba(250,247,242,.28);background:rgba(250,247,242,.08)}
.estado[data-abierto="no"] .estado__punto{background:#B9B0A4}
.estado:empty,.estado[hidden]{display:none}
/* sobre fondo claro */
.sec--alt .estado[data-abierto="si"],section:not(.sec--dark):not(.hero) .estado[data-abierto="si"]{
  color:#136B36;border-color:rgba(19,107,54,.35);background:rgba(19,107,54,.09)}
.sec--alt .estado[data-abierto="no"],section:not(.sec--dark):not(.hero) .estado[data-abierto="no"]{
  color:var(--tinta-2);border-color:var(--linea);background:var(--crema-2)}
.hero .estado{margin:0 0 1.4rem}

/* ══════════════════════════════════════════════════════════════
   BARRA DE ACCIONES EN MÓVIL
   Tres acciones siempre a mano. Es lo que decide si el visitante
   escribe o se va.
   ══════════════════════════════════════════════════════════════ */
.acciones{display:none}
@media (max-width:880px){
  .acciones{display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(3,37,58,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--linea-osc);
    padding-bottom:env(safe-area-inset-bottom,0)}
  .acciones a{display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:.28rem;padding:.7rem .3rem;
    font:600 11.5px/1.2 var(--sans);color:var(--crema);text-decoration:none;
    letter-spacing:.02em}
  .acciones a + a{border-left:1px solid var(--linea-osc)}
  .acciones svg{width:20px;height:20px;fill:var(--oro)}
  .acciones a:active{background:rgba(187,151,94,.16)}
  .acciones a.es-wa svg{fill:#4ADE80}
  /* deja sitio para que la barra no tape el final del pie */
  body{padding-bottom:66px}
  /* El botón flotante sobra en móvil: la barra de abajo ya tiene WhatsApp,
     y flotando tapaba precios de la carta. Dos botones iguales en la misma
     esquina son ruido, no una segunda oportunidad. */
  .wa-flota{display:none}
}

/* ══════════════════════════════════════════════════════════════
   RESEÑAS
   ══════════════════════════════════════════════════════════════ */
.resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.8rem;margin:0 0 2.5rem}
.resena{background:#fff;border:1px solid var(--linea);border-radius:2px;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column}
.sec--alt .resena{background:var(--crema)}
.resena__estrellas{color:var(--oro-osc);font-size:15px;letter-spacing:.12em;
  margin:0 0 .9rem}
.resena__texto{font-family:var(--disp);font-size:1.15rem;line-height:1.5;
  color:var(--tinta);margin:0 0 1.1rem;flex:1}
.resena__autor{font:600 13px/1.4 var(--sans);color:var(--tinta-2);margin:0}
.resena__autor span{display:block;font-weight:400;font-size:12.5px;opacity:.85;
  margin-top:.15rem}
.resenas-pie{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.nota-media{display:inline-flex;align-items:baseline;gap:.5rem;
  font:400 15px/1 var(--sans);color:var(--tinta-2)}
.nota-media b{font-family:var(--disp);font-size:2.1rem;font-weight:600;
  color:var(--tinta);line-height:1}

/* ══════════════════════════════════════════════════════════════
   DELIVERY
   ══════════════════════════════════════════════════════════════ */
.delivery{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.delivery__enlace{display:inline-flex;align-items:center;gap:.6rem;
  border:1.5px solid var(--linea);background:#fff;border-radius:2px;
  padding:.8rem 1.2rem;text-decoration:none;color:var(--tinta);
  font:600 15px/1 var(--sans);transition:all .2s}
.delivery__enlace:hover{border-color:var(--oro-osc);color:var(--oro-osc)}
.delivery__nota{font-size:14px;color:var(--tinta-2);margin:1.2rem 0 0;
  max-width:40rem}

/* ══════════════════════════════════════════════════════════════
   TEASERS hacia /nosotros y /catering
   ══════════════════════════════════════════════════════════════ */
.teasers{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.teaser{position:relative;display:block;overflow:hidden;border-radius:2px;
  text-decoration:none;background:var(--navy);min-height:260px;
  display:flex;align-items:flex-end}
.teaser img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.teaser:hover img,.teaser:focus-visible img{transform:scale(1.04)}
/* El velo tiene que ganarle al ladrillo iluminado del fondo: con el degradado
   suave anterior, el titular quedaba ilegible justo encima del rótulo. */
.teaser__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,18,15,.28) 0%,
                                    rgba(22,18,15,.58) 42%,
                                    rgba(22,18,15,.93) 100%)}
.teaser:hover .teaser__velo,.teaser:focus-visible .teaser__velo{
  background:linear-gradient(180deg,rgba(22,18,15,.34) 0%,
                                    rgba(22,18,15,.64) 42%,
                                    rgba(22,18,15,.95) 100%)}
.teaser__txt{position:relative;padding:1.8rem 1.6rem;color:var(--crema)}
.teaser__k{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);margin:0 0 .5rem}
.teaser h3{font-family:var(--disp);font-weight:600;font-size:1.75rem;
  line-height:1.15;margin:0 0 .5rem;color:#fff}
.teaser p{font-size:14.5px;line-height:1.55;color:rgba(250,247,242,.88);margin:0 0 .8rem}
.teaser__mas{font:600 14px/1 var(--sans);color:var(--oro)}
@media (max-width:880px){.teasers{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   FORMULARIO: validación, carga y confirmación
   ══════════════════════════════════════════════════════════════ */
.campo__error{font:500 13px/1.4 var(--sans);color:#A33726;margin:0;
  display:flex;align-items:flex-start;gap:.35rem}
.campo__error:empty{display:none}
.campo__error::before{content:"!";flex-shrink:0;width:15px;height:15px;
  border-radius:50%;background:#A33726;color:#fff;font:700 11px/15px var(--sans);
  text-align:center;margin-top:.05rem}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{border-color:#A33726;
  background:rgba(163,55,38,.035)}
.btn[data-cargando]{position:relative;color:transparent!important;
  pointer-events:none}
.btn[data-cargando]::after{content:"";position:absolute;inset:0;margin:auto;
  width:18px;height:18px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.form__ok{grid-column:1/-1;display:none;gap:.9rem;align-items:flex-start;
  border:1.5px solid rgba(21,119,59,.4);background:rgba(21,119,59,.07);
  border-radius:2px;padding:1.2rem 1.3rem}
.form__ok[data-visible]{display:flex}
.form__ok svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:#136B36;
  stroke-width:2.5;margin-top:.1rem}
.form__ok h3{font-family:var(--disp);font-weight:600;font-size:1.25rem;
  margin:0 0 .3rem;color:var(--tinta)}
.form__ok p{margin:0;font-size:14.5px;color:var(--tinta-2)}
.form__ok a{color:var(--oro-osc);font-weight:600}

/* ══════════════════════════════════════════════════════════════
   DESTACADOS de la carta
   Si algún día falta una foto, el hueco NO queda gris: lleva el
   fondo de marca con el monograma, para que parezca intencional.
   ══════════════════════════════════════════════════════════════ */
.dest{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.5rem;margin:0 0 3rem}
.dest figure{margin:0}
.dest__ph{aspect-ratio:4/5;border-radius:2px;margin:0 0 .85rem;width:100%;
  object-fit:cover;display:block}
.dest__ph--vacio{background:var(--navy);
  background-image:
    repeating-linear-gradient(135deg,rgba(187,151,94,.07) 0 2px,transparent 2px 9px),
    radial-gradient(circle at 50% 42%,rgba(187,151,94,.18),transparent 62%);
  display:grid;place-items:center}
.dest__ph--vacio img{width:62px;height:62px;opacity:.85}
.dest figcaption{font-family:var(--disp);font-weight:600;font-size:1.25rem;
  text-align:center;color:var(--tinta)}
.dest figcaption span{display:block;font:400 13px/1.4 var(--sans);
  color:var(--tinta-2);margin-top:.2rem}

/* ══════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES
   ══════════════════════════════════════════════════════════════ */
.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--linea);padding:.2rem 0}
.faq summary{font-family:var(--disp);font-weight:600;font-size:1.25rem;
  padding:1rem 2.2rem 1rem 0;cursor:pointer;position:relative;
  list-style:none;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.5rem;top:50%;
  width:11px;height:11px;margin-top:-7px;border-right:2px solid var(--oro-osc);
  border-bottom:2px solid var(--oro-osc);transform:rotate(45deg);
  transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq p{margin:0 0 1.1rem;color:var(--tinta-2);font-size:15.5px;max-width:42rem}
.faq a{color:var(--oro-osc);text-underline-offset:.2em}
.faq li{color:var(--tinta-2);font-size:15.5px;margin:0 0 .4rem}

/* Botón hamburguesa: ahora lleva un icono dibujado, no el carácter ☰,
   que se salía del subconjunto de fuente y obligaba a cargar latin-ext. */
.burger svg{width:20px;height:14px;display:block;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}

@media (prefers-reduced-motion:reduce){
  .cats{scroll-behavior:auto}
  .btn[data-cargando]::after{animation:none}
}

@media (max-width:880px){
  /* Tira horizontal: se ven los tres sin gastar dos pantallas de scroll. */
  .dest{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;
        margin:0 -1.5rem 2.2rem;padding:0 1.5rem .5rem;
        -webkit-overflow-scrolling:touch}
  .dest::-webkit-scrollbar{height:4px}
  .dest::-webkit-scrollbar-thumb{background:var(--linea);border-radius:4px}
  .dest figure{flex:0 0 62%;scroll-snap-align:start}
  .dest__ph{aspect-ratio:4/3;margin-bottom:.6rem}
  .dest figcaption{font-size:1.1rem;text-align:left}
  .dest figcaption span{font-size:12.5px}
}

@media (max-width:880px){
  /* Doce chips envueltos ocupaban cuatro líneas y empujaban la carta fuera
     de la pantalla. En móvil van en una sola línea que se desliza. */
  .cats{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
        scrollbar-width:thin;scroll-behavior:smooth;
        -webkit-overflow-scrolling:touch}
  .cats::-webkit-scrollbar{height:4px}
  .cats::-webkit-scrollbar-thumb{background:var(--linea);border-radius:4px}
  .cats-envoltura::after{content:"";position:absolute;right:0;top:0;bottom:1px;
    width:32px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--crema))}
  .sec--alt .cats-envoltura::after{background:linear-gradient(90deg,transparent,var(--crema-2))}
}