/* ==========================================================================
   LAS MORERAS · Carta digital (la que abre la tarjeta NFC / QR de la mesa)
   Independiente de la web. Colores y letras de la marca del restaurante.
   ========================================================================== */

/* Fuentes alojadas en la propia web (más rápido y sin enviar datos a Google).
   Licencia SIL OFL 1.1: ver ../fonts/LICENCIAS.txt */
@font-face{ font-family:"Marcellus"; src:url(../fonts/marcellus.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lora"; src:url(../fonts/lora-italic.woff2) format("woff2"); font-weight:400 500; font-style:italic; font-display:swap; }
@font-face{ font-family:"Jost"; src:url(../fonts/jost.woff2) format("woff2"); font-weight:300 600; font-style:normal; font-display:swap; }

:root{
  --tinta:       #241A13;
  --tinta-2:     #3B2C21;
  --papel:       #FBF7F0;
  --papel-2:     #F3EBDD;
  --linea:       #DED3C0;
  --texto:       #33271E;
  --tenue:       #6F604F;
  --dorado:      #B08D4F;
  --dorado-claro:#D8BC85;
  --precio:      #85652F;
  --oliva:       #4F5838;

  --serif:  "Marcellus", Georgia, "Times New Roman", serif;
  --cursiva:"Lora", Georgia, serif;
  --sans:   "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --columna: 640px;
  --lado: 20px;
  --abajo: env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:64px; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:var(--sans); font-size:1rem; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--dorado); outline-offset:3px; }

.oculto{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0;
}
.saltar{
  position:absolute; left:12px; top:-60px; z-index:100; padding:10px 14px;
  background:var(--papel); color:var(--tinta); border-radius:6px;
}
.saltar:focus{ top:12px; }

/* Portada --------------------------------------------------------------------
   Lo único llamativo de la carta: como la tapa de una carta de papel. */
.portada{
  background:var(--tinta); color:var(--papel); text-align:center;
  padding:calc(40px + env(safe-area-inset-top, 0px)) var(--lado) 40px;
}
.portada__nombre{ margin:0; line-height:0; }
.portada{ position:relative; }
/* Selector de idioma: ES · EN · FR */
.idiomas{
  position:absolute; top:calc(10px + env(safe-area-inset-top, 0px)); right:max(10px, env(safe-area-inset-right, 0px));
  display:flex; gap:2px;
}
.idiomas button{
  min-width:42px; min-height:40px; padding:0 8px; border:1px solid transparent; border-radius:6px;
  background:none; color:#CBBFAE; font-size:.8rem; letter-spacing:.1em; cursor:pointer;
}
.idiomas button{ display:inline-flex; align-items:center; gap:6px; }
.idiomas img{ width:20px; height:14px; border-radius:2px; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.3); }
@media (max-width:360px){ .idiomas span{ display:none; } }
.idiomas button:hover{ color:var(--papel); }
.idiomas button[aria-pressed="true"]{ color:var(--papel); border-color:rgba(201,165,92,.7); }
/* Logo de Las Moreras en oro, el mismo que lleva la tarjeta NFC de la mesa */
.portada__logo{
  display:block; width:min(64vw, 250px); aspect-ratio:1; margin:0 auto;
  background-color:#C9A55C;
  -webkit-mask:url(../img/logo-completo.svg) center / contain no-repeat;
          mask:url(../img/logo-completo.svg) center / contain no-repeat;
}
@media (forced-colors: active){ .portada__logo{ background-color:CanvasText; forced-color-adjust:none; } }
.portada__sub{
  font-family:var(--cursiva); font-style:italic; color:var(--papel);
  font-size:1.5rem; margin:16px 0 0; line-height:1.2;
}
.portada__lugar{ margin:14px 0 0; font-size:.92rem; color:#CBBFAE; }

@media (prefers-reduced-motion: no-preference){
  .portada__logo{ opacity:0; transform:translateY(6px); animation:aparece .9s cubic-bezier(.22,.61,.36,1) .1s forwards; }
}
@keyframes aparece{ to{ opacity:1; transform:none; } }

/* Pestañas de secciones ------------------------------------------------------ */
.pestanas{
  position:sticky; top:0; z-index:20;
  background:rgba(251,247,240,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.pestanas__marco{ max-width:calc(var(--columna) + 2 * var(--lado)); margin:0 auto; }
.pestanas ul{
  display:flex; list-style:none; margin:0; padding:0 calc(var(--lado) - 12px);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pestanas ul::-webkit-scrollbar{ display:none; }
.pestanas a{
  display:block; white-space:nowrap; text-decoration:none;
  padding:15px 12px 13px; font-size:.98rem; font-weight:500; color:var(--tenue);
  border-bottom:2px solid transparent;
}
.pestanas a:hover{ color:var(--tinta); }
.pestanas a.activo{ color:var(--tinta); border-bottom-color:var(--dorado); }

/* Barra desplazable (flechas en ordenador, arrastre, rueda) */
.desplazable{ position:relative; }
.desplazable ul{ cursor:grab; }
.desplazable ul.arrastrando{ cursor:grabbing; scroll-behavior:auto; }
.desplazable ul.arrastrando a{ pointer-events:none; }
.desplazable--der ul{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent); }
.desplazable--izq ul{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px); mask-image:linear-gradient(90deg,transparent,#000 56px); }
.desplazable--izq.desplazable--der ul{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
}
.desplazable__flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; padding:0;
  border:1px solid var(--linea); background:#fff; color:var(--tinta); cursor:pointer;
}
.desplazable__flecha:hover{ border-color:var(--dorado); }
.desplazable__flecha--izq{ left:4px; }
.desplazable__flecha--der{ right:4px; }
@media (hover:none){ .desplazable__flecha{ display:none !important; } }

/* Secciones y platos --------------------------------------------------------- */
.carta{ max-width:calc(var(--columna) + 2 * var(--lado)); margin:0 auto; padding:8px var(--lado) 24px; }

.seccion{ padding-top:36px; scroll-margin-top:56px; }
.seccion__titulo{
  font-family:var(--serif); font-weight:400; color:var(--tinta);
  font-size:1.85rem; line-height:1.15; margin:0;
}
.seccion__titulo::after{
  content:""; display:block; width:36px; height:2px; background:var(--dorado); margin-top:12px;
}
.seccion__desc{ font-family:var(--cursiva); font-style:italic; color:var(--tenue); margin:12px 0 0; }
.seccion--vacia .platos{ display:none; }
.seccion__vacia{ display:none; color:var(--tenue); font-size:.92rem; margin:14px 0 0; }
.seccion--vacia .seccion__vacia{ display:block; }

.platos{ list-style:none; margin:8px 0 0; padding:0; }
.plato{
  display:grid; grid-template-columns:1fr; gap:14px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--linea);
}
.plato:last-child{ border-bottom:0; }
.plato--foto{ grid-template-columns:1fr 78px; }

.linea{ display:flex; align-items:baseline; gap:8px; }
.linea__puntos{ flex:1 1 auto; min-width:14px; border-bottom:1px dotted #BFAF95; transform:translateY(-5px); }
.linea__precio{
  flex:none; white-space:nowrap; font-variant-numeric:tabular-nums lining-nums;
  font-weight:500; color:var(--precio);
}

.plato__nombre{
  font-family:var(--serif); font-weight:400; color:var(--tinta);
  font-size:1.16rem; line-height:1.3; margin:0; flex:0 1 auto;
}
.plato__desc{ font-family:var(--cursiva); font-style:italic; color:var(--tenue); font-size:.95rem; line-height:1.55; margin:4px 0 0; }
.plato__precios{ list-style:none; margin:6px 0 0; padding:0; }
.plato__precios li{ font-size:.95rem; color:var(--texto); }
.plato__precios li + li{ margin-top:2px; }
.plato__recomendado{
  display:inline-flex; align-items:center; gap:6px; margin:6px 0 0;
  font-family:var(--cursiva); font-style:italic; font-size:.92rem; color:var(--oliva);
}
.plato__recomendado svg{ width:15px; height:15px; }
.plato__alergenos{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:10px 0 0; padding:0; }
.plato__alergenos li{ line-height:0; }
.plato__agotado{
  display:inline-block; margin:8px 0 0; padding:3px 10px; border-radius:999px;
  background:var(--tinta-2); color:var(--papel); font-size:.8rem; font-weight:500;
}
.plato--agotado .plato__nombre,
.plato--agotado .linea__precio,
.plato--agotado .plato__desc,
.plato--agotado .plato__precios{ opacity:.5; }
.plato--agotado .plato__foto img{ filter:grayscale(1); opacity:.6; }

.plato__foto{
  width:78px; height:78px; padding:0; border:0; border-radius:8px; overflow:hidden;
  background:var(--papel-2); cursor:zoom-in;
}
.plato__foto img{ width:100%; height:100%; object-fit:cover; }

.aviso{ text-align:center; color:var(--tenue); padding:48px 0; }

/* Esqueleto de carga */
.esqueleto{ display:grid; gap:14px; padding-top:32px; }
.esqueleto span{ display:block; height:62px; border-radius:8px; background:var(--papel-2); }
.esqueleto span:first-child{ width:55%; height:34px; }
@media (prefers-reduced-motion: no-preference){
  .esqueleto span{ animation:latido 1.4s ease-in-out infinite; }
}
@keyframes latido{ 50%{ opacity:.45; } }

/* Botón de alérgenos (siempre a mano) ---------------------------------------- */
.boton-alergenos{
  position:fixed; z-index:30; right:16px; bottom:calc(16px + var(--abajo));
  display:inline-flex; align-items:center; gap:10px; min-height:48px;
  padding:8px 18px 8px 10px; border:0; border-radius:999px; cursor:pointer;
  background:var(--tinta); color:var(--papel); font-weight:500; font-size:.95rem;
  box-shadow:0 6px 20px rgba(36,26,19,.28);
}
.boton-alergenos__icono{ display:flex; }
.boton-alergenos__icono svg + svg{ margin-left:-8px; }
.boton-alergenos__icono svg{ border:2px solid var(--tinta); border-radius:50%; box-sizing:content-box; }
.boton-alergenos--activo{ background:var(--oliva); }
.boton-alergenos--activo .boton-alergenos__icono svg{ border-color:var(--oliva); }

/* Pie con la leyenda --------------------------------------------------------- */
.pie{ background:var(--papel-2); padding:36px var(--lado) calc(96px + var(--abajo)); margin-top:24px; }
.pie > *{ max-width:var(--columna); margin-left:auto; margin-right:auto; }
.leyenda h2{ font-family:var(--serif); font-weight:400; font-size:1.35rem; color:var(--tinta); margin:0 0 16px; }
.leyenda ul{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 16px; list-style:none; margin:0; padding:0; }
@media (min-width:560px){ .leyenda ul{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.leyenda li{ display:flex; align-items:center; gap:10px; font-size:.92rem; }
.leyenda p{ margin:18px 0 0; font-size:.92rem; color:var(--tenue); }
.pie__fecha{ margin-top:24px; font-size:.86rem; color:var(--tenue); }
.pie__enlaces{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:10px; }
.pie__enlaces a{ font-weight:500; color:var(--tinta); text-underline-offset:3px; }
.pie__legal{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; font-size:.86rem; }
.pie__legal a{ color:var(--tenue); text-underline-offset:3px; }
.pie__credito{ margin-top:14px; font-size:.8rem; color:var(--tenue); }
.pie__credito a{ color:var(--tenue); text-underline-offset:3px; }

/* Panel del filtro (hoja inferior en el móvil) ------------------------------ */
.hoja-filtro{
  border:0; padding:0; color:var(--texto); background:var(--papel);
  width:min(100%, 560px); max-width:100%; max-height:88svh;
  margin:auto auto 0; border-radius:16px 16px 0 0;
}
@media (min-width:640px){ .hoja-filtro{ margin:auto; border-radius:14px; } }
.hoja-filtro::backdrop{ background:rgba(36,26,19,.55); }
.hoja-filtro form{ padding:18px var(--lado) calc(18px + var(--abajo)); }
.hoja-filtro__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hoja-filtro h2{ font-family:var(--serif); font-weight:400; font-size:1.4rem; color:var(--tinta); margin:0; }
.hoja-filtro fieldset{ border:0; margin:14px 0 0; padding:0; }
.hoja-filtro__opciones{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.opcion{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 10px;
  border:1px solid var(--linea); border-radius:10px; background:#fff; cursor:pointer; font-size:.94rem;
}
.opcion input{ width:18px; height:18px; margin:0; accent-color:var(--tinta); flex:none; }
.opcion:has(input:checked){ border-color:var(--tinta); background:var(--papel-2); }
.hoja-filtro__nota{ font-size:.86rem; color:var(--tenue); margin:14px 0 0; }
.hoja-filtro__acciones{ display:flex; gap:10px; margin-top:16px; }
.hoja-filtro__acciones .btn{ flex:1; }

.btn{
  min-height:48px; padding:10px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--tinta); background:var(--tinta); color:var(--papel); font-weight:500;
}
.btn--linea{ background:transparent; color:var(--tinta); }
.cerrar{
  width:44px; height:44px; border-radius:50%; border:0; background:transparent; cursor:pointer;
  font-size:1.8rem; line-height:1; color:var(--tinta);
}

/* Foto ampliada */
.foto{
  border:0; padding:0; background:var(--tinta); color:var(--papel);
  width:min(94vw, 760px); max-width:none; border-radius:12px; overflow:hidden;
}
.foto::backdrop{ background:rgba(20,14,10,.85); }
.foto img{ width:100%; max-height:76svh; object-fit:contain; background:var(--tinta); }
.foto p{ margin:0; padding:12px 16px 16px; font-family:var(--serif); font-size:1.15rem; }
.foto form{ position:absolute; top:6px; right:6px; margin:0; }
.cerrar--foto{ background:rgba(36,26,19,.7); color:var(--papel); }
.foto__nav{ display:flex; align-items:center; justify-content:center; gap:18px; padding:10px 16px 0; font-weight:600; }
.foto__flecha{ width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(251,247,240,.5); background:transparent; color:var(--papel); font-size:1.8rem; line-height:1; cursor:pointer; }
.foto__flecha:hover{ background:rgba(251,247,240,.12); }
.plato__foto{ position:relative; }
.plato__nfotos{ position:absolute; right:4px; bottom:4px; min-width:22px; padding:1px 6px; border-radius:999px; background:rgba(20,14,10,.78); color:#fff; font-size:.75rem; font-weight:700; line-height:1.4; }
.plato__nfotos::before{ content:"+"; }

.icono-alergeno{ flex:none; }

@media (min-width:900px){
  :root{ --lado:32px; }
  .seccion{ padding-top:48px; }
  .plato--foto{ grid-template-columns:1fr 96px; }
  .plato__foto{ width:96px; height:96px; }
}
.linea__etiqueta{ font-size:.8rem; font-weight:400; color:var(--tenue); }

/* Menú del día: la primera sección, enmarcada como el especial de hoy ------- */
.seccion--menu{
  margin-top:28px; padding:26px clamp(18px,4vw,28px) 22px;
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:0 1px 0 var(--linea), 0 10px 30px -18px rgba(36,26,19,.35);
}
.seccion--menu .seccion__titulo{ font-size:2rem; }
.menu__fecha{ margin:10px 0 0; font-family:var(--cursiva); font-style:italic; color:var(--tenue); font-size:1.02rem; }
.menu__tiempo{
  margin:24px 0 0; font-family:var(--cursiva); font-style:italic; font-weight:500;
  font-size:1.15rem; color:var(--precio);
}
.seccion--menu .platos{ margin-top:2px; }
.seccion--menu .plato{ padding:12px 0; }
.menu__pie{ margin-top:18px; padding-top:18px; border-top:1px solid var(--linea); }
.menu__precio{ margin:0; font-family:var(--serif); font-size:1.9rem; line-height:1.1; color:var(--tinta); font-variant-numeric:lining-nums; }
.menu__incluye{ margin:6px 0 0; color:var(--texto); }
.menu__nota{ margin:8px 0 0; font-size:.92rem; color:var(--tenue); }
.seccion--menu.seccion--vacia .menu__tiempo{ display:none; }
/* Fotos orientativas (de bancos libres): aviso en la miniatura y autor al ampliar */
.plato__orientativa{ position:absolute; left:4px; right:4px; bottom:4px; padding:1px 4px; border-radius:6px; background:rgba(20,14,10,.72); color:#fff; font-size:.6rem; font-weight:600; line-height:1.3; text-align:center; }
.foto .foto-credito{ margin:-8px 0 0; padding:0 16px 14px; font-family:inherit; font-size:.8rem; line-height:1.4; opacity:.8; }
.foto-credito a{ color:inherit; }
.foto-credito[hidden]{ display:none; }