/* =====================================================================
   NICOLETTA · menú digital — hoja de estilo
   =====================================================================
   Reconstrucción limpia del menú que hoy sirve Elementor. Los valores
   no son de invención: salen de los estilos computados de la página
   vigente, medidos uno a uno.

     barra del header   #4a6e8a
     terracota          #a05c46   títulos, nombres de platillo, precios
     terracota icono    #8b6c5d   el círculo del carrusel
     tinta              #3a4b64   descripciones
     nombre de platillo Oswald 700 16/24
     descripción        Roboto 400 16/24
     precio             Roboto 500 16/24
     título de sección  Roboto 500 24/24
     foto               500 px, esquinas de 12 px
   ===================================================================== */

:root{
  --azul:#4a6e8a;
  --terracota:#a05c46;
  --terracota-icono:#8b6c5d;
  --tinta:#3a4b64;
  --blanco:#fff;
  --ancho:1440px;
  --foto:500px;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:24px;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ═══════════════ CABECERA ═══════════════ */

.nic-header{
  background:var(--azul);
  color:var(--blanco);
}

/* La cabecera del menú vigente se va al hacer scroll y así se deja,
   para no cambiar un diseño ya aprobado. Para dejarla fija basta con
   descomentar estas dos líneas. */
/* .nic-header{ position:sticky; top:0; z-index:30; } */

.nic-barra{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:8px 56px 4px;
  min-height:56px;
}

/* El logo va al 40 % del ancho de la barra, como en el original: es la
   pieza que marca la altura de la franja azul. El enlace tiene que
   ocupar toda la barra para que ese 40 % se calcule contra algo — si
   se encoge al contenido, el porcentaje no tiene contra qué medir. */
.nic-logo{ flex:1 1 auto; display:block; text-align:center; }
.nic-logo img{ width:40%; max-width:600px; min-width:120px; margin:0 auto; }

.nic-idiomas{
  position:absolute; top:50%; left:15px; transform:translateY(-50%);
  font-size:13px; line-height:13px; letter-spacing:.2px;
}
.nic-idiomas a{ text-decoration:none; font-weight:400; }
.nic-idiomas a.on{ font-weight:700; }
.nic-idiomas .sep{ opacity:.85; margin:0 4px; }

/* La hamburguesa abre el panel de cartas. En el menú de hoy es un
   glifo sin función; aquí es un botón de verdad. */
.nic-burger{
  position:absolute; top:50%; right:15px; transform:translateY(-50%);
  width:34px; height:34px; padding:0;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer;
}
.nic-burger span{
  display:block; height:2px; border-radius:2px;
  background:var(--blanco); transition:transform .2s, opacity .2s;
}
.nic-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nic-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nic-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── el carrusel de categorías ── */
.nic-cats{ position:relative; padding:0 20px 6px; }

.nic-pista{
  display:flex; gap:0;
  overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.nic-pista::-webkit-scrollbar{ display:none; }

.nic-cat{
  flex:0 0 25%;                 /* cuatro visibles, como el original */
  scroll-snap-align:start;
  text-decoration:none;
  text-align:center;
  padding:4px 6px;
}
.nic-cat img{
  width:50px; height:50px;
  padding:12px;
  margin:0 auto 2px;
  background:var(--terracota-icono);
  border-radius:50%;
  object-fit:contain;
}
.nic-cat span{
  display:block;
  font-size:12px; line-height:18px;
  color:var(--blanco);
}

.nic-flecha{
  position:absolute; top:38px; transform:translateY(-50%);
  width:26px; height:26px; padding:0;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.85); font-size:20px; line-height:1;
}
.nic-flecha:disabled{ opacity:.25; cursor:default; }
.nic-flecha.ant{ left:0; }
.nic-flecha.sig{ right:0; }

/* ── el panel de la hamburguesa ── */
.nic-panel{
  position:absolute; right:10px; top:100%;
  min-width:210px; padding:8px;
  background:var(--azul);
  border-radius:0 0 10px 10px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.nic-panel[hidden]{ display:none; }
.nic-panel a{
  display:block; padding:9px 12px;
  font-size:14px; text-decoration:none; color:var(--blanco);
  border-radius:6px;
}
.nic-panel a:hover,.nic-panel a:focus-visible{ background:rgba(255,255,255,.14); }

/* ═══════════════ EL MENÚ ═══════════════ */

.nic-seccion{ scroll-margin-top:12px; }

.nic-titulo{
  margin:16px auto;
  max-width:var(--ancho);
  padding:0 20px;
  font-family:"Roboto",sans-serif;
  font-size:24px; line-height:24px; font-weight:500;
  color:var(--terracota);
  text-align:center;
  text-wrap:balance;
}

.nic-nota{
  margin:-6px auto 12px;
  max-width:var(--ancho);
  padding:0 20px;
  text-align:center;
  font-size:14px; color:var(--tinta);
}

/* ── un platillo ── */
.nic-plato{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10px;
  padding:10px;
  max-width:var(--ancho);
  margin:0 auto;
}

.nic-plato-info{ padding:0 10px; }

.nic-plato h3{
  margin:0 0 34px;
  font-family:"Oswald",system-ui,sans-serif;
  font-size:16px; line-height:24px; font-weight:700;
  color:var(--terracota);
  text-transform:none;
}
.nic-plato h3 .porcion{
  font-size:14px; font-weight:400;
}

.nic-plato .desc{
  margin:0 0 34px;
  font-size:16px; line-height:24px;
  color:var(--tinta);
}

.nic-plato .precio{
  margin:0;
  font-size:16px; line-height:24px; font-weight:500;
  color:var(--terracota);
}
.nic-plato .precio .nota{ font-weight:400; font-size:14px; }

/* Las opciones con precio propio (Copa / Botella, +80). */
.nic-plato .opciones{ margin:6px 0 0; padding:0; list-style:none; }
.nic-plato .opciones li{
  font-size:14px; line-height:22px; color:var(--tinta);
}
.nic-plato .opciones b{ color:var(--terracota); font-weight:500; }

.nic-plato figure{ margin:0; text-align:center; }
.nic-plato figure img{
  width:var(--foto); max-width:100%;
  aspect-ratio:1/1; object-fit:cover;
  border-radius:12px;
  margin:0 auto;
}

/* Un platillo sin foto no debe dejar media fila vacía. */
.nic-plato.sin-foto{ grid-template-columns:1fr; max-width:760px; }

/* ═══════════════ PIE ═══════════════ */

.nic-pie{
  max-width:var(--ancho);
  margin:24px auto 0;
  padding:18px 20px 28px;
  font-size:12px; line-height:18px;
  color:var(--tinta);
  text-align:center;
  border-top:1px solid rgba(58,75,100,.14);
}

/* ═══════════════ MÓVIL ═══════════════ */
/* Igual que hoy: al bajar de 768 px las dos columnas se apilan y el
   texto queda encima de la foto. */

@media (max-width:767px){
  .nic-plato{
    grid-template-columns:1fr;
    padding:10px 4px 18px;
  }
  .nic-plato-info{ padding:0 12px; }
  .nic-plato h3,
  .nic-plato .desc{ margin-bottom:16px; }
  .nic-titulo{ font-size:20px; line-height:26px; }
  .nic-cat{ flex:0 0 33.333%; }
}

@media (max-width:420px){
  .nic-cat{ flex:0 0 40%; }
}

/* Quien prefiera menos movimiento, que no lo sufra en el carrusel. */
@media (prefers-reduced-motion:reduce){
  .nic-pista{ scroll-behavior:auto; }
  .nic-burger span{ transition:none; }
}

/* Para imprimir la carta: fuera cabecera y sombras. */
@media print{
  .nic-header{ display:none; }
  .nic-plato{ break-inside:avoid; }
}