/* ==========================================================================
   UMEA · Estilos
   Estilo de carta clásica y refinada: letra con remates para títulos, platos
   y precios; composición centrada; filetes finos; líneas de puntos entre el
   plato y su precio; el verde lima solo en detalles finos.

   1. Variables (colores y letras): se cambian aquí y afectan a toda la web
   2. Base
   3. Cabecera y pie: comunes a todas las páginas
   4. Carta: pestañas, secciones, láminas con foto, lista, extras y ficha ampliada
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
  /* Colores de marca, sacados del logo y de la fachada */
  --verde-lima: #a2d83c;     /* el verde del logo (código exacto) */
  --verde-menta: #e5fdd0;    /* el fondo del logo (código exacto) */
  --verde-oscuro: #21402b;   /* el zócalo de la fachada */
  /* relieve del logo: brillo arriba, sombra corta abajo y sombra suave bajo la pieza */
  --relieve-logo: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .25), 0 4px 10px -2px rgba(0, 0, 0, .35);
  --fondo-logo: #f2eee6;     /* blanco roto de las láminas de la carta, detrás del logo (antes beige #e7dbc4) */

  --letra: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;            /* etiquetas e ingredientes */
  --letra-titulos: "Cormorant Garamond", Garamond, "Times New Roman", serif;      /* títulos, platos y precios */

  --radio: 3px;
  --ancho-max: 1120px;
  --margen: 18px;
  --alto-pestanas: 48px;

  /* Grano de papel, más marcado, para las láminas beige */
  --grano-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.2'/%3E%3C/svg%3E");

  /* Grano muy fino, como de papel o tela, para que los fondos no sean planos */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E");
}

/* Temas de color: se elige uno con data-tema="..." en la etiqueta <html> */

/* Beige: tonos madera claros */
[data-tema="beige"] {
  --fondo: #efe6d6;
  --superficie: #fbf7ef;
  --texto: #1f2a22;
  --texto-suave: #5e5a4f;
  --linea: #ddd1bc;
  --filete: rgba(31, 42, 34, .25);
  --puntos: rgba(31, 42, 34, .4);
  --cursiva: #7a5b38;
  --acento: var(--verde-oscuro);
  --pestanas-fondo: rgba(239, 230, 214, .95);
  --sombra: rgba(70, 50, 20, .25);
  --pie-fondo: var(--verde-oscuro);
  --luz: radial-gradient(ellipse 130% 560px at 50% -80px, rgba(255, 255, 255, .55), transparent 70%);
}

/* Verde: el verde oscuro de la fachada */
[data-tema="verde"] {
  --fondo: #1e412b;          /* antes #1d3526: un poco más claro y vivo (2026-10-18) */
  --superficie: #284d34;
  --texto: #f3ecdd;
  --texto-suave: #b9c4b2;
  --linea: rgba(243, 236, 221, .14);
  --filete: rgba(243, 236, 221, .28);
  --puntos: rgba(243, 236, 221, .38);
  --cursiva: #efe6d6;        /* subtítulos en cursiva: beige */
  --acento: var(--verde-lima);
  --pestanas-fondo: rgba(30, 65, 43, .95);
  --sombra: rgba(0, 0, 0, .55);
  --pie-fondo: #17321f;
  /* luz suave arriba, como una lámpara sobre la mesa */
  --luz: radial-gradient(ellipse 130% 560px at 50% -80px, rgba(162, 216, 60, .11), transparent 70%);
}

/* Pantallas de gama ampliada (iPhone, Mac): el mismo verde, algo más saturado */
@media (color-gamut: p3) {
  [data-tema="verde"] {
    --fondo: oklch(0.338 0.072 154);
    --superficie: oklch(0.38 0.076 154);
    --pestanas-fondo: oklch(0.338 0.072 154 / .95);
    --pie-fondo: oklch(0.285 0.062 154);
  }
}

/* En el tema verde, las láminas llevan el texto sobre beige papel */
[data-tema="verde"] .tarjeta {
  --superficie: #f2eee6;     /* blanco roto (antes beige #e7dbc4, 2026-10-18) */
  --texto: #000;             /* negro puro (2026-10-18) */
  --texto-suave: #000;
  --linea: #ddd6c9;
  --puntos: rgba(31, 42, 34, .4);
  --cursiva: var(--verde-oscuro);
  --acento: var(--verde-oscuro);
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--fondo);
  background-image: var(--grano), var(--luz);
  background-repeat: repeat, no-repeat;
  color: var(--texto);
  font-family: var(--letra);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body:has(.ficha[open]) { overflow: hidden; }

h1, h2, h3, p, dl, dd, address { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
address { font-style: normal; }

:focus-visible { outline: 1px solid var(--acento); outline-offset: 3px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen);
}

@media (min-width: 640px) {
  :root { --margen: 32px; }
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--texto);
  color: var(--fondo);
}

/* Etiqueta pequeña en mayúsculas espaciadas (se usa en varios sitios) */
.cabecera__lugar, .pestanas__enlace, .extras__titulo, .pie__titulo, .pie__firma, .boton {
  font-family: var(--letra);
  font-weight: 400;
  text-transform: uppercase;
}

/* 3. Cabecera ------------------------------------------------------------- */
.cabecera {
  padding: 28px 0 20px;
  text-align: center;
}

.cabecera__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cabecera__logo {
  width: 92px;
  padding: 6px 8px;
  background: var(--grano-papel), var(--fondo-logo); /* beige papel, como las láminas de la carta */
  border-radius: var(--radio);
  /* sin filete; relieve sutil que lo despega del fondo (2026-10-18) */
  box-shadow: var(--relieve-logo);
}

.cabecera__lugar {
  padding-left: .34em; /* compensa el espaciado para que quede centrado */
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--texto-suave);
}

/* "Carta" en la misma letra que "Restaurante · Cieza", un poco más grande y más gruesa
   (antes: cursiva Cormorant fina de 48px; cambiado el 2026-10-18) */
.cabecera__titulo {
  margin-top: 12px;
  padding-left: .2em; /* compensa el espaciado para que quede centrado */
  font-family: var(--letra);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
}


/* 3. Pie ------------------------------------------------------------------ */
.pie {
  margin-top: 80px;
  padding: 44px 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--grano), var(--pie-fondo);
  border-top: 1px solid var(--linea);
  color: #e3e9df;
}

.pie a { color: #fff; }

.pie__alergenos {
  margin-bottom: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--letra-titulos);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

/* "Déjanos tu reseña" (solo en la carta): estrellas y botón a las reseñas de Google */
.pie__resena {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}
.pie__estrellas {
  padding-left: .35em; /* compensa el espaciado para que quede centrado */
  font-size: 18px;
  letter-spacing: .35em;
  color: var(--verde-lima);
}

.pie__columnas {
  display: grid;
  gap: 32px;
}

@media (min-width: 760px) {
  .pie__columnas { grid-template-columns: repeat(3, 1fr); }
}

.pie__titulo {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--verde-lima);
}

.horario div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}
.horario dt { color: #b9c6b5; }
.horario dd { text-align: right; }

.pie__direccion { margin-bottom: 4px; } /* debajo va "Cómo llegar" subrayado en lima, como en la portada */

.pie__contacto li { padding: 4px 0; }
.pie__contacto a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }

.boton {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid rgba(243, 236, 221, .55);
  border-radius: var(--radio);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-decoration: none;
  transition: border-color .3s;
}
.boton:hover { border-color: var(--verde-lima); }

.pie__firma {
  margin-top: 44px;
  font-size: 11px;
  letter-spacing: .3em;
  text-align: center;
  color: #93a58f;
}

/* En la carta, "UMEA" del final lleva a la portada: mismo aspecto que el texto,
   con un área de toque más amplia */
.pie__firma a {
  display: inline-block;
  padding: 10px 12px 10px calc(12px + .3em); /* compensa el espaciado para que quede centrado */
  color: inherit;
  text-decoration: none;
  transition: color .3s;
}
.pie__firma a:hover { color: #fff; }

/* 4. Carta · pestañas ----------------------------------------------------- */
.pestanas {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pestanas-fondo);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
}

.pestanas__lista {
  display: flex;
  gap: 4px;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen);
  overflow-x: auto;
  scrollbar-width: none;
  /* difumina el borde derecho para que se note que hay más pestañas */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.pestanas__lista::-webkit-scrollbar { display: none; }

/* Centradas si caben; si no, se deslizan */
.pestanas__lista li:first-child { margin-left: auto; }
.pestanas__lista li:last-child { margin-right: auto; }

.pestanas__enlace {
  display: block;
  padding: 15px 10px 13px;
  white-space: nowrap;
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--texto-suave);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: color .3s;
}
.pestanas__enlace:hover { color: var(--texto); }
.pestanas__enlace[aria-current="true"] {
  color: var(--texto);
  text-decoration-line: underline;
  text-decoration-color: var(--verde-lima);
}

/* 4. Carta · secciones ---------------------------------------------------- */
.seccion {
  padding-top: 44px;
  scroll-margin-top: var(--alto-pestanas);
}

.seccion__cabecera {
  margin-bottom: 24px;
  text-align: center;
}

/* Filete — doble M — filete */
.seccion__ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.seccion__ornamento::before,
.seccion__ornamento::after {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--filete);
}

/* Doble "M" entrelazada del isotipo (la dibuja carta.js) */
.zigzag { width: 27px; height: 18px; }
.zigzag__lima { fill: var(--verde-lima); }
.zigzag__oscura { fill: var(--texto); } /* el negro del logo: sobre el verde va en crema */

.seccion__titulo {
  margin-top: 12px;
  font-family: var(--letra-titulos);
  font-weight: 500;
  font-size: clamp(36px, 10vw, 50px);
  line-height: 1.05;
}

.seccion__subtitulo {
  margin-top: 4px;
  font-family: var(--letra-titulos);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--cursiva);
}

/* 4. Carta · láminas con foto --------------------------------------------- */
/* En el móvil van de dos en dos (versión compacta, más abajo); en tablet de dos
   en dos y en ordenador de tres en tres, con todo el texto. */
.destacados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 640px) {
  .destacados { gap: 22px; }
}

@media (min-width: 640px) {
  .destacados { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .destacados { grid-template-columns: repeat(3, 1fr); }
}

/* La foto va enmarcada en beige, como una lámina */
.tarjeta {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--radio);
  background: var(--grano-papel), var(--superficie);
  color: var(--texto);
  box-shadow: 0 16px 30px -20px var(--sombra);
  /* filete fino interior, como en las cartas impresas */
  outline: 1px solid rgba(31, 42, 34, .2);
  outline-offset: -4px;
}
.destacados .tarjeta { cursor: pointer; } /* al tocarla se abre la ficha ampliada */

.tarjeta__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 1px;
  overflow: hidden;
  background: var(--linea);
  cursor: pointer;
}
.tarjeta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.tarjeta__foto:hover img { transform: scale(1.02); }

/* Pase de fotos (fotos: [...] en carta-datos.js): cada foto se ve 2 s y se funde con la siguiente */
.pase { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.pase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pase img:not(:first-child) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pase img { opacity: 0; animation: pase calc(var(--fotos) * 2s) linear infinite; animation-delay: calc(var(--paso) * 2s); }
  @keyframes pase { 0% { opacity: 0; } 8% { opacity: 1; } 33% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } }
  /* Con 2 fotos (caballitos), cada una ocupa la mitad del ciclo */
  .pase[data-fotos="2"] img { animation-name: pase2; }
  @keyframes pase2 { 0% { opacity: 0; } 8% { opacity: 1; } 50% { opacity: 1; } 58% { opacity: 0; } 100% { opacity: 0; } }
}

/* Señal de "más información" en la esquina de la foto: una "i" en cursiva
   sobre un círculo verde oscuro con aro verde lima y sombra marcada, para que
   se vea bien sobre cualquier foto (antes era beige y pequeña y había clientes
   que no la veían). Cada pocos segundos late un aro suave para llamar la atención.
   (Antes era un círculo con un +, que se confundía con "añadir a la cesta".) */
.tarjeta__foto { position: relative; }
.tarjeta__foto::after {
  content: "i";
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font: italic 600 21px/1 var(--letra-titulos);
  color: var(--verde-oscuro);
  background: rgb(239, 230, 214);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(239, 230, 214, .8), 0 4px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .tarjeta__foto::after { animation: latido-info 3.2s ease-out infinite; }
  @keyframes latido-info {
    0%, 55% { box-shadow: 0 0 0 0 rgba(239, 230, 214, .8), 0 4px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35); }
    85%, 100% { box-shadow: 0 0 0 9px rgba(239, 230, 214, 0), 0 4px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35); }
  }
}
.tarjeta:hover .tarjeta__foto::after { transform: scale(1.08); }

/* Hueco de la foto en los platos que aún no la tienen:
   relleno arena con la doble M muy tenue en el centro */
.tarjeta__hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--grano-papel), #e2dbcd;
}
.tarjeta__hueco-marca {
  width: 36px;
  height: 53px;
  opacity: .28;
}

/* Móvil: lámina compacta (foto cuadrada) con todo el texto menos los
   ingredientes, que se añaden al tocarla, en la ficha ampliada.
   Los grupos (croquetas, caballitos…) muestran sus tipos con su precio. */
@media (max-width: 639px) {
  .destacados .tarjeta { padding: 5px; outline-offset: -3px; }
  .destacados .tarjeta__foto { aspect-ratio: 1 / 1; }
  .destacados .tarjeta__foto::after { right: 7px; bottom: 7px; width: 28px; height: 28px; font-size: 19px; }
  .destacados .tarjeta__hueco-marca { width: 24px; height: 35px; }
  .destacados .tarjeta__cuerpo { gap: 3px; padding: 10px 3px 7px; }
  .destacados .tarjeta__nombre { font-size: 19px; line-height: 1.12; }
  .destacados .desc,
  .destacados .tarjeta__nota { display: none; }
  .destacados .tarjeta__precio { margin-top: 1px; }
  .destacados .tarjeta__precio .precio { font-size: 20px; }
  .destacados .precio small { font-size: 11.5px; }

  /* Varios tamaños: los dos primeros en la misma línea ("Ración 15 € · Media 8 €")
     y, si hay un tercero, debajo ("Tapa 3 €") */
  .destacados .tamanos {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    font-size: 17px;
  }
  .destacados .tamano span { font-size: 12.5px; }
  .destacados .tamano + .tamano::before { content: none; }
  .destacados .tamano:nth-child(2)::before {
    content: "·";
    margin: 0 4px;
    color: var(--texto-suave);
  }
  .destacados .tamano:nth-child(3) { flex-basis: 100%; }
  /* platos marcados con tamanosEnColumna: uno debajo de otro, para rellenar */
  .destacados .tarjeta--tamanos-en-columna .tamanos {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 18px;
  }
  .destacados .tarjeta--tamanos-en-columna .tamano span { font-size: 13.5px; }
  .destacados .tarjeta--tamanos-en-columna .tamano:nth-child(2)::before { content: none; }

  /* tipos dentro de un grupo, lo más juntos posible */
  .destacados .subplatos { margin-top: 4px; }
  .destacados .subplato { padding: 5px 0; }
  /* el precio va a continuación del nombre, en la misma línea que su última
     palabra ("Huevos rotos con / jamón 2 €/ud."); solo baja si no cabe */
  .destacados .subplato .linea { display: block; line-height: 1.15; }
  .destacados .subplato__nombre { font-size: 16.5px; }
  .destacados .subplato__nombre::after { content: " "; } /* espacio que desaparece si el precio baja de línea */
  .destacados .subplato .puntos { display: none; }
  .destacados .subplato .linea .precio { display: inline-block; font-size: 17px; }
  .destacados .subplato .precio small { margin-left: 2px; font-size: 10.5px; }
  .destacados .subplato .tamanos { justify-content: flex-start; margin-top: 2px; }
}

/* Móviles algo más estrechos (unos 360 px): la línea de tamaños un poco más pequeña para que quepa */
@media (max-width: 370px) {
  .destacados .subplato__nombre { font-size: 16px; }
  .destacados .subplato .linea .precio { font-size: 16.5px; }
  .destacados .tamanos { font-size: 16px; }
  .destacados .tamano span { font-size: 12px; }
  .destacados .tamano:nth-child(2)::before { margin: 0 3px; }
}

/* Móviles muy estrechos: si "Media" no cabe junto a "Ración", baja de línea sin el punto */
@media (max-width: 340px) {
  .destacados .tamano:nth-child(2)::before { content: none; }
  .destacados .tamano:nth-child(2) { flex-basis: 100%; }
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px 12px;
  text-align: center;
}

.tarjeta__nombre {
  font-family: var(--letra-titulos);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.15;
}

/* Tipos de un grupo bajo el nombre, en la lámina ("Pollo · Ternera · Verdulero") */
.tarjeta__tipos {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
  color: var(--texto-suave);
}

.tarjeta__nota {
  font-family: var(--letra-titulos);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--cursiva);
}

.tarjeta__precio {
  margin-top: 4px;
  color: var(--acento);
}
.tarjeta__precio .precio { font-size: 22px; }

.tarjeta .tamanos { justify-content: center; }
.subplato .tamanos { justify-content: flex-start; } /* dentro de un grupo, alineados a la izquierda */

/* Platos dentro de una lámina de grupo (croquetas, caballitos) */
.subplatos {
  align-self: stretch;
  margin-top: 10px;
  border-top: 1px solid var(--linea);
  text-align: left;
}

.subplato {
  padding: 10px 2px;
  border-bottom: 1px solid var(--linea);
}
.subplato:last-child { padding-bottom: 2px; border-bottom: 0; }

.subplato__nombre {
  font-family: var(--letra-titulos);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}

/* 4. Carta · lista de platos sin foto ------------------------------------- */
.lista {
  display: grid;
  column-gap: 56px;
  margin-top: 14px;
}

@media (min-width: 860px) {
  .lista { grid-template-columns: 1fr 1fr; }
}

.fila { padding: 11px 0; }

/* Título de un grupo dentro de la lista (Tintos de la tierra, Nuestros blancos…):
   en mayúsculas y otra letra, para distinguirlo de los nombres de debajo */
.fila > .fila__nombre {
  margin-top: 14px;
  font-family: var(--letra);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  padding-left: .18em; /* compensa el espaciado para que quede centrado */
  color: var(--cursiva);
}

.fila__nombre {
  font-family: var(--letra-titulos);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}

/* 4. Carta · nombre ······· precio ---------------------------------------- */
.linea {
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  gap: 8px;
}

.puntos {
  flex: 1 1 auto;
  min-width: 18px;
  border-bottom: 1.5px dotted var(--puntos);
  transform: translateY(-.22em);
}

/* 4. Carta · textos y precios --------------------------------------------- */
.desc {
  margin-top: 1px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--texto-suave);
}

.precio {
  font-family: var(--letra-titulos);
  font-weight: 600;
  font-size: 21px;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.precio small {
  margin-left: 3px;
  font-family: var(--letra);
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-suave);
}

/* Varios tamaños: "Media 8 € · Ración 15 €" */
.tamanos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 3px;
  font-family: var(--letra-titulos);
  font-size: 19px;
}
/* "Tapa", "Media", "Ración": letra sin remates, más gruesa, para que se lea bien */
.tamano span {
  font-family: var(--letra);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--texto);
}
.tamano b { font-weight: 600; font-variant-numeric: lining-nums; }
.tamano + .tamano::before {
  content: "·";
  margin: 0 10px;
  color: var(--texto-suave);
}

/* 4. Carta · extras ------------------------------------------------------- */
.extras {
  margin-top: 60px;
  padding: 22px 22px 14px;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
}

.extras__titulo {
  margin-bottom: 8px;
  padding-left: .3em;
  font-size: 11.5px;
  letter-spacing: .3em;
  text-align: center;
  color: var(--acento);
}

.extras__lista {
  display: grid;
  column-gap: 40px;
}

@media (min-width: 560px) {
  .extras__lista { grid-template-columns: 1fr 1fr; }
}

.extras__lista li { padding: 6px 0; }

.extras__nombre {
  font-family: var(--letra-titulos);
  font-weight: 600;
  font-size: 19px;
}
.extras .precio { font-size: 19px; }

.aviso { padding: 32px 0; }

/* 4. Carta · ficha ampliada ------------------------------------------------
   Al tocar un plato se abre en grande: foto y todo su texto (ingredientes,
   tamaños, tipos y precio), como una lámina sola. */
.ficha {
  width: min(92vw, 520px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.ficha::backdrop { background: rgba(14, 19, 15, .88); }

.ficha__contenido {
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radio);
}

.ficha .tarjeta { box-shadow: none; }
.ficha .tarjeta__cuerpo { padding: 18px 14px 16px; }
.ficha .tarjeta__nombre { font-size: 30px; }

/* Detalle: nota pequeña bajo los precios, solo en la ficha ampliada */
.ficha__detalle { margin-top: 8px; font-size: 13px; font-style: italic; text-align: center; color: var(--texto-suave); }

/* Alérgenos: solo en la ficha ampliada */
.alergenos { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); text-align: center; }
.alergenos__titulo { font-family: var(--letra); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.alergenos__plato + .alergenos__plato { margin-top: 10px; }
.alergenos__nombre { font-size: 14px; margin-bottom: 5px; }
.alergenos__lista { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.alergenos__lista { gap: 10px 6px; }
.alergenos__lista li { line-height: 0; display: flex; flex-direction: column; align-items: center; width: 62px; }
.alergeno__nombre { font-family: var(--letra); font-size: 11.5px; line-height: 1.15; margin-top: 4px; text-align: center; overflow-wrap: anywhere; }
.alergeno { display: block; width: 38px; height: 38px; border-radius: 7px; }

/* Iconos pequeños de alérgenos en las láminas, debajo de los precios */
.alergenos-mini { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 7px; padding: 0; }
.alergenos-mini li { line-height: 0; display: block; width: auto; }
.alergenos-mini .alergeno { width: 19px; height: 19px; border-radius: 4px; }
.alergenos__nota { font-size: 13px; margin: 0 0 9px; font-style: italic; }

.ficha__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1px;
}

/* Carrusel de la ficha (platos con varias fotos): se desliza con el dedo o con las flechas */
.carrusel { position: relative; overflow: hidden; }
.carrusel__pista { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0 0 3px;
  font: 500 26px/1 var(--letra-titulos); color: var(--verde-oscuro);
  background: rgba(239, 230, 214, .94); border: 0; border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .12);
  cursor: pointer;
}
.carrusel__flecha--ant { left: 10px; }
.carrusel__flecha--sig { right: 10px; }
.carrusel__puntos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.carrusel__punto { width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 230, 214, .55); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: background .2s; }
.carrusel__punto.es-actual { background: rgba(239, 230, 214, 1); }

.ficha__cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 32, 25, .65);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .ficha[open] { animation: aparecer-ficha .25s ease; }
}
@keyframes aparecer-ficha {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}

/* 4. Carta · aparición suave al bajar --------------------------------------
   Solo un fundido. Se activa si carta.js añade "js-anima" (no lo hace si el
   móvil tiene activado "reducir movimiento"). */
.js-anima .aparece {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: calc(var(--orden, 0) * 120ms);
}
.js-anima .aparece.visible { opacity: 1; }

@media print {
  .js-anima .aparece { opacity: 1; }
}

/* 5. Portada (index.html) ---------------------------------------------------
   Una sola pantalla: logo, "Ver la carta" y debajo la información resumida
   (horario, dirección y contacto). La portada ya no lleva pie. */
.portada {
  display: flex;
  align-items: center;
  min-height: 86vh;
  min-height: 86svh;
  padding: 44px 0 36px;
  text-align: center;
}

.portada__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.portada__titulo { line-height: 0; }

.portada__logo {
  width: 176px;
  padding: 11px 14px;
  background: var(--grano-papel), var(--fondo-logo); /* beige papel, como las láminas de la carta */
  border-radius: var(--radio);
  /* sin filete; relieve sutil que lo despega del fondo (2026-10-18) */
  box-shadow: var(--relieve-logo), 0 18px 36px -18px var(--sombra);
}

.portada .seccion__ornamento { margin: 4px 0 12px; }

.portada__acciones {
  margin-top: 20px; /* aire sobre el botón, ahora que no está la doble M */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(100%, 320px);
}
.portada__acciones .boton {
  display: block;
  padding: 15px 20px;
  font-size: 12.5px;
  text-align: center;
}

/* Botón principal: relleno verde lima */
.boton--principal {
  border-color: var(--verde-lima);
  background: var(--verde-lima);
  color: #142019;
  font-weight: 500;
}
.boton--principal:hover { border-color: #f3ecdd; }

.portada + .pie { margin-top: 0; }

/* En la carta, el logo lleva a la portada */
.cabecera__inicio { display: inline-block; line-height: 0; }

/* "Ver más información": baja al horario, la dirección y el contacto */
/* Información resumida en la portada: horario, dirección y contacto a primera vista */
.portada__info {
  display: grid;
  gap: 16px;
  width: min(100%, 360px);
  margin-top: 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #e3e9df;
}
.portada__info section + section {
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}
.portada__info .pie__titulo { margin-bottom: 6px; }
.portada__info address { font-style: normal; }
.horario--breve div { padding: 1px 0; }
.horario--breve dd { white-space: nowrap; }
/* En el pie de la carta, el horario igual que en la portada: título centrado y letra algo menor */
.pie__horario { font-size: 14.5px; line-height: 1.45; }
.pie__horario .pie__titulo { margin-bottom: 6px; text-align: center; }
.portada__enlace {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3); /* línea gris clara, como en el pie de la carta */
}
.portada__info section p + p { margin-top: 4px; }
/* Contacto (portada y pie de la carta): cada uno en una línea, justificado como el horario */
.contactos { margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.45; }
.contactos li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 1px 0;
}
.contactos span { color: #b9c6b5; }
.contactos a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}