/* ==========================================================================
   ESTILOS DEL SITIO
   --------------------------------------------------------------------------
   ÍNDICE
     1. Variables (colores, tipografía, espacios)   <- AQUÍ SE CAMBIAN COLORES
     2. Reset y base
     3. Tipografía
     4. Layout (contenedor, secciones)
     5. Botones
     6. Tarjetas
     7. Encabezado y navegación
     8. Hero (portada rotativa)
     9. Página: Inicio
    10. Página: Nuestra Carta
    11. Página: Nuestra Historia
    12. Página: Ubicación
    13. Página: Contacto
    14. Pie de página
    15. Accesibilidad y movimiento reducido
    16. Impresión
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   --------------------------------------------------------------------------
   PARA CAMBIAR LOS COLORES DEL SITIO ENTERO, EDITA SOLO ESTE BLOQUE.
   Los colores están tomados del menú impreso y del logo. Si algún día se
   rediseña el menú, hay que volver a tomarlos desde el archivo nuevo.
   ========================================================================== */

:root {

  /* --- Colores de marca --------------------------------------------------
     LOS COLORES SALEN DEL MENÚ IMPRESO Y DEL LOGO.
     El menú usa un sistema muy claro, y la página lo repite igual:

        TURQUESA  = el fondo, la base sobre la que se apoya todo
        NARANJA   = los títulos de categoría y las burbujas de precio
        AMARILLO  = los paneles y los detalles que resaltan
        CAFÉ      = el texto

     Por eso el turquesa manda en el sitio (pie de página, franjas, íconos)
     y el naranja es el que llama la atención (precios y botones).      */

  /* ===== PRIMARIO: el turquesa =========================================
     Es el color principal de la marca. Es el de las franjas de título de
     todas las páginas y el fondo de la sección de categorías.          */
  --color-marca:          #35A9A1;  /* EL COLOR PRINCIPAL.
                                       Franjas de título y fondos.        */
  --color-marca-oscuro:   #248179;  /* Más oscuro, para que el texto
                                       blanco encima sí se lea.           */
  --color-marca-texto:    #1C635D;  /* Turquesa como TEXTO sobre blanco.  */
  --color-marca-suave:    #E4F3F1;  /* Tinte clarito: fondos de íconos y
                                       de secciones alternas.             */
  --color-marca-profundo: #14403C;  /* Turquesa casi negro: pie de página
                                       y velos encima de las fotos.       */

  /* ===== SECUNDARIO: el naranja ========================================
     Da variedad. Se usa en rellenos (etiquetas, burbujas) SIEMPRE con
     texto oscuro encima, y en una versión más oscura para los precios
     y los botones, donde el texto va en blanco.                       */
  --color-naranja:        #E5901E;  /* El naranja de la paleta. Rellenos
                                       decorativos, con texto oscuro.     */
  --color-naranja-texto:  #C24720;  /* Precios, botones y títulos. Es el
                                       naranja rojizo de las burbujas de
                                       precio del menú impreso, y sí
                                       aguanta texto blanco a 16px.       */
  --color-naranja-oscuro: #A93B15;  /* Hover de los botones naranjas.     */
  --color-naranja-suave:  #FBEBE3;

  /* ===== TERCIARIO: el amarillo ========================================
     El de los paneles del menú y de la palabra "PAPA".
     OJO: el amarillo SIEMPRE lleva texto oscuro encima. Con texto
     blanco no se lee.                                                 */
  --color-acento:         #FDE05F;
  --color-acento-oscuro:  #E9C42A;
  --color-acento-suave:   #FEF7D8;

  /* El amarillo dorado de la palabra "PAPA" del logo. Es más intenso que el
     amarillo de los paneles del menú. Se usa en la barra de arriba del
     sitio. Como todo amarillo, siempre con texto oscuro encima. */
  --color-amarillo-logo:  #FDBA11;

  /* --- Neutros -----------------------------------------------------------
     No son grises: son cafés, del mismo tono del texto del menú y del
     contorno del logo. Eso es lo que mantiene el sitio cálido aunque el
     color principal sea frío.                                          */

  --color-carbon:        #2B1508;  /* Texto principal                     */
  --color-gris:          #6B5A4C;  /* Texto secundario, descripciones     */
  --color-gris-claro:    #A0907F;  /* Texto muy secundario                */
  --color-crema:         #FFF9EC;  /* Fondo de secciones alternas         */
  --color-borde:         #EFE3D2;  /* Líneas y bordes                     */
  --color-blanco:        #FFFFFF;
  --color-oscuro:        #14403C;  /* Pie de página y velos sobre fotos.  */

  /* --- Tipografía -------------------------------------------------------- */
  --fuente-titulo: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --fuente-texto:  'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Escala fluida: los tamaños se ajustan solos entre celular y escritorio */
  --texto-xs:   0.78rem;
  --texto-sm:   0.875rem;
  --texto-base: 1rem;
  --texto-lg:   clamp(1.05rem, 0.99rem + 0.30vw, 1.20rem);
  --texto-xl:   clamp(1.25rem, 1.14rem + 0.55vw, 1.55rem);
  --texto-2xl:  clamp(1.55rem, 1.34rem + 1.05vw, 2.15rem);
  --texto-3xl:  clamp(1.95rem, 1.55rem + 2.00vw, 3.05rem);
  --texto-4xl:  clamp(2.35rem, 1.60rem + 3.75vw, 4.20rem);

  /* --- Espacios ---------------------------------------------------------- */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4rem;
  --espacio-9: 6rem;

  /* --- Bordes redondeados ------------------------------------------------
     Bien redondeados a propósito: el logo es de trazo grueso y curvo, así
     que las esquinas suaves lo acompañan mejor que las rectas.        */
  --radio-sm:   10px;
  --radio-md:   16px;
  --radio-lg:   24px;
  --radio-xl:   32px;
  --radio-full: 999px;

  /* --- Sombras -----------------------------------------------------------
     Llevan el mismo café del logo en vez de negro puro: se ven cálidas. */
  --sombra-sm: 0 1px 3px rgba(43, 15, 1, 0.08);
  --sombra-md: 0 4px 16px rgba(43, 15, 1, 0.11);
  --sombra-lg: 0 12px 32px rgba(43, 15, 1, 0.15);
  --sombra-xl: 0 24px 60px rgba(43, 15, 1, 0.20);

  /* --- Otros ------------------------------------------------------------- */
  --ancho-max:   1200px;
  --transicion:  200ms ease;
  --alto-header: 78px;
}


/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* Deja espacio arriba al saltar a una sección, para que el encabezado
     fijo no tape el título */
  scroll-padding-top: calc(var(--alto-header) + var(--espacio-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: 1.65;
  color: var(--color-carbon);
  background-color: var(--color-blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
video,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select { font: inherit; color: inherit; }

a { color: var(--color-marca-texto); }

ul, ol { padding: 0; list-style: none; }


/* ==========================================================================
   3. TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;      /* evita que quede una palabra sola en la última línea */
}

h1 { font-size: var(--texto-4xl); }
h2 { font-size: var(--texto-3xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

p { text-wrap: pretty; }

/* Etiqueta pequeña que va ARRIBA de los títulos de sección */
.eyebrow {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-naranja-texto);
  margin-bottom: var(--espacio-3);
}

.subtitulo {
  font-size: var(--texto-lg);
  color: var(--color-gris);
  max-width: 60ch;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--espacio-5);
}

.seccion { padding-block: var(--espacio-8); }

@media (min-width: 900px) {
  .seccion { padding-block: var(--espacio-9); }
}

.seccion--crema { background-color: var(--color-crema); }

/* Fondo turquesa, igual que el del menú impreso: las tarjetas van encima.
   OJO: el texto encima va OSCURO, no blanco. El blanco sobre este turquesa
   no alcanza el contraste mínimo para leerse bien. */
.seccion--marca { background-color: var(--color-marca); }
.seccion--marca .subtitulo { color: rgba(43, 21, 8, 0.80); }
.seccion--marca .eyebrow   { color: var(--color-carbon); }

.seccion--oscura {
  background-color: var(--color-oscuro);
  color: var(--color-blanco);
}
.seccion--oscura .subtitulo { color: rgba(255, 255, 255, 0.72); }
.seccion--oscura .eyebrow   { color: var(--color-acento); }

.seccion__encabezado {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--espacio-7);
}
.seccion__encabezado .subtitulo { margin-inline: auto; margin-top: var(--espacio-3); }

/* Rejillas reutilizables */
.rejilla { display: grid; gap: var(--espacio-5); }

.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* 280px hace que en escritorio entren exactamente 3 columnas: 6 tarjetas
   quedan en una cuadrícula pareja de 3x2 en vez de 4 arriba y 2 sueltas */
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }


/* ==========================================================================
   5. BOTONES
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  padding: 0.85rem 1.75rem;
  min-height: 48px;                      /* cómodo de tocar en el celular */
  font-family: var(--fuente-titulo);
  font-size: var(--texto-base);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radio-full);
  cursor: pointer;
  transition: background-color var(--transicion),
              border-color var(--transicion),
              color var(--transicion),
              transform var(--transicion),
              box-shadow var(--transicion);
}

.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

/* Principal: naranja, igual que las burbujas de precio del menú impreso.
   Es el color que llama a la acción, no el de fondo. */
.boton--principal {
  background-color: var(--color-naranja-texto);
  border-color: var(--color-naranja-texto);
  color: var(--color-blanco);
  box-shadow: var(--sombra-md);
}
.boton--principal:hover {
  background-color: var(--color-naranja-oscuro);
  border-color: var(--color-naranja-oscuro);
  box-shadow: var(--sombra-lg);
}

/* Secundario: solo contorno, en turquesa */
.boton--secundario {
  background-color: transparent;
  border-color: var(--color-marca-oscuro);
  color: var(--color-marca-texto);
}
.boton--secundario:hover {
  background-color: var(--color-marca-oscuro);
  border-color: var(--color-marca-oscuro);
  color: var(--color-blanco);
}

/* Claro: para usar encima de fotos o de fondos oscuros */
.boton--claro {
  background-color: var(--color-blanco);
  border-color: var(--color-blanco);
  color: var(--color-carbon);
  box-shadow: var(--sombra-md);
}
.boton--claro:hover { background-color: var(--color-crema); border-color: var(--color-crema); }

/* Contorno blanco: encima de fotos */
.boton--fantasma {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--color-blanco);
  backdrop-filter: blur(4px);
}
.boton--fantasma:hover {
  background-color: var(--color-blanco);
  border-color: var(--color-blanco);
  color: var(--color-carbon);
}


.boton--bloque { width: 100%; }
.boton--sm { padding: 0.6rem 1.2rem; min-height: 42px; font-size: var(--texto-sm); }

.boton__icono { width: 20px; height: 20px; flex-shrink: 0; }

/* Fila de botones */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}
.acciones--centrado { justify-content: center; }


/* ==========================================================================
   6. TARJETAS
   ========================================================================== */

/* --- Marco de imagen ------------------------------------------------------
   Todas las fotos van dentro de este marco. Tiene un fondo degradado cálido
   que se ve mientras la foto carga, y que queda visible si la foto todavía
   no ha sido agregada. Así la página nunca se ve rota.                    */

.marco-img {
  position: relative;
  overflow: hidden;
  /* Degradado en los tonos del logo, para que el hueco de una foto que
     falta siga viéndose de la marca y no como un error */
  background: linear-gradient(135deg, #D6EAE7 0%, #B2D8D2 100%);
}

.marco-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

/* Texto de respaldo que aparece si falta la foto.
   La clase .sin-imagen la pone principal.js cuando una foto no carga. */
.marco-img::after {
  content: attr(data-etiqueta);
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-4);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  font-weight: 600;
  text-align: center;
  color: #43837C;
}
.marco-img.sin-imagen > img { visibility: hidden; }
.marco-img.sin-imagen::after { display: flex; }

/* Si no se puso etiqueta, no se dibuja el recuadro vacío */
.marco-img[data-etiqueta=""]::after,
.marco-img:not([data-etiqueta])::after { display: none !important; }

/* En las portadas el aviso no se centra: iría justo encima del titular.
   Se manda a la esquina, chiquito, para que se lea el título sin estorbo. */
.hero__slide .marco-img::after,
.hero-pagina .marco-img::after {
  inset: auto 0 0 auto;
  padding: var(--espacio-2) var(--espacio-4);
  font-size: var(--texto-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  background-color: rgba(23, 12, 1, 0.35);
  border-radius: var(--radio-sm) 0 0 0;
}


/* --- Tarjeta de producto (usada en la carta y en los favoritos) ---------- */

.tarjeta-producto {
  display: flex;
  flex-direction: column;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta-producto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
}
.tarjeta-producto:hover .marco-img > img { transform: scale(1.05); }

/* Las fotos de los platos son "packshots": el envase recortado sobre fondo
   blanco. Por eso van CONTENIDAS y no recortadas — con recorte se cortarían
   los bordes del envase. El fondo blanco de la propia imagen rellena el
   marco, así que los costados no se notan.
   Si la foto todavía no existe, la imagen se oculta y queda a la vista el
   fondo turquesa con el nombre del archivo que falta. */
.tarjeta-producto .marco-img { aspect-ratio: 1 / 1; }

.tarjeta-producto .marco-img > img {
  object-fit: contain;
  background-color: var(--color-blanco);
}

.tarjeta-producto__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--espacio-4) var(--espacio-5) var(--espacio-5);
}

.tarjeta-producto__nombre {
  font-size: var(--texto-lg);
  margin-bottom: var(--espacio-2);
}

.tarjeta-producto__descripcion {
  font-size: var(--texto-sm);
  color: var(--color-gris);
  line-height: 1.55;
  flex-grow: 1;                      /* empuja el precio abajo del todo, para
                                        que todos los precios queden alineados
                                        aunque las descripciones midan distinto */
}

.tarjeta-producto__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}

/* El precio: es de las razones principales por las que alguien entra al
   sitio, así que va grande y bien legible. */
.precio {
  display: inline-block;
  padding: 0.3em 0.85em;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-blanco);
  background-color: var(--color-naranja-texto);
  border-radius: var(--radio-full);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.precio--sm { font-size: var(--texto-base); }

/* Precio sin burbuja, para cuando va sobre un fondo de color */
.precio--plano {
  padding: 0;
  background: none;
  color: var(--color-naranja-texto);
  font-size: var(--texto-xl);
}

.precio__nota {
  display: block;
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: 400;
  color: var(--color-gris-claro);
  letter-spacing: 0;
}

/* --- Etiquetas (Nuevo, Más pedido, Picante) ------------------------------ */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3rem 0.7rem;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radio-full);
  background-color: var(--color-marca-suave);
  color: var(--color-marca-texto);
  white-space: nowrap;
}

.etiqueta--acento { background-color: var(--color-acento-suave);   color: #7A4E00; }
.etiqueta--fresca { background-color: var(--color-marca-suave); color: var(--color-marca-texto); }

/* Etiqueta flotando sobre la foto */
.etiqueta--flotante {
  position: absolute;
  top: var(--espacio-3);
  left: var(--espacio-3);
  z-index: 1;
  background-color: var(--color-naranja-texto);
  color: var(--color-blanco);
  box-shadow: var(--sombra-md);
}

/* Sobre la foto, las variantes de color mantienen su propio fondo pero
   con el texto café oscuro del logo, que es la combinación de la marca */
.etiqueta--flotante.etiqueta--acento { background-color: var(--color-acento);   color: var(--color-oscuro); }
.etiqueta--flotante.etiqueta--fresca { background-color: var(--color-marca); color: var(--color-oscuro); }


/* --- Tarjeta de categoría (los accesos de la página de inicio) ----------- */

.tarjeta-categoria {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-blanco);
  box-shadow: var(--sombra-md);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta-categoria:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-xl);
}
.tarjeta-categoria:hover img { transform: scale(1.08); }

.tarjeta-categoria .marco-img { position: absolute; inset: 0; }

/* Velo oscuro para que el texto blanco siempre se lea sobre la foto */
.tarjeta-categoria__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(14, 46, 43, 0.90) 0%,
              rgba(14, 46, 43, 0.38) 45%,
              rgba(14, 46, 43, 0.06) 100%);
}

.tarjeta-categoria__contenido {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--espacio-5);
}

.tarjeta-categoria__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xl);
  font-weight: 700;
  line-height: 1.2;
}

.tarjeta-categoria__flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  margin-top: var(--espacio-2);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-acento);
}


/* --- Tarjeta de información (contacto, ubicación) ------------------------ */

.tarjeta-info {
  padding: var(--espacio-6);
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}

.tarjeta-info__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--espacio-4);
  border-radius: var(--radio-md);
  background-color: var(--color-marca-suave);
  color: var(--color-marca-texto);
}
.tarjeta-info__icono svg { width: 26px; height: 26px; }

.tarjeta-info h3 { margin-bottom: var(--espacio-2); }

.tarjeta-info p {
  color: var(--color-gris);
  font-size: var(--texto-sm);
  margin-bottom: var(--espacio-4);
}

.tarjeta-info__dato {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--color-carbon);
  text-decoration: none;
  word-break: break-word;
}
.tarjeta-info__dato:hover { color: var(--color-marca-texto); }


/* ==========================================================================
   7. ENCABEZADO Y NAVEGACIÓN
   ========================================================================== */

/* Enlace para saltar directo al contenido (lectores de pantalla y teclado) */
.saltar-al-contenido {
  position: absolute;
  top: -100px;
  left: var(--espacio-4);
  z-index: 200;
  padding: var(--espacio-3) var(--espacio-5);
  background-color: var(--color-marca-oscuro);
  color: var(--color-blanco);
  font-weight: 600;
  border-radius: 0 0 var(--radio-md) var(--radio-md);
  transition: top var(--transicion);
}
.saltar-al-contenido:focus { top: 0; }

/* --- Barra superior ------------------------------------------------------ */
/* Va en el amarillo dorado de la palabra "PAPA" del logo.
   El texto encima va OSCURO: sobre este amarillo, el texto blanco es
   ilegible (1,9 de contraste) y el café oscuro llega a 10,1. */
.barra-superior {
  background-color: var(--color-amarillo-logo);
  color: var(--color-carbon);
  font-size: var(--texto-xs);
  font-weight: 500;
}

.barra-superior__interior {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-5);
  min-height: 38px;
  padding-block: var(--espacio-2);
  text-align: center;
}

.barra-superior__item {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  color: inherit;
  text-decoration: none;
}
.barra-superior__item:hover { color: var(--color-naranja-oscuro); }
.barra-superior__item svg { width: 15px; height: 15px; flex-shrink: 0; }

/* En celular se muestra solo el horario para no amontonar */
.barra-superior__item--secundario { display: none; }

@media (min-width: 640px) {
  .barra-superior__item--secundario { display: inline-flex; }
  .barra-superior__interior { justify-content: space-between; text-align: left; }
}

/* --- Encabezado principal ------------------------------------------------ */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-blanco);
  border-bottom: 1px solid var(--color-borde);
  transition: box-shadow var(--transicion);
}

/* principal.js agrega esta clase al bajar la página */
.encabezado.desplazado { box-shadow: var(--sombra-md); }

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  min-height: var(--alto-header);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  text-decoration: none;
  color: var(--color-carbon);
  flex-shrink: 0;
}

.logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
}

@media (min-width: 900px) {
  .logo img { height: 58px; }
}

/* Respaldo por si el archivo del logo todavía no existe: se muestra el
   nombre del negocio escrito. Se oculta solo cuando la imagen carga bien. */
.logo__texto {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.logo__texto span { color: var(--color-marca-texto); }

/* --- Navegación ---------------------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--espacio-5); }

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--espacio-5);
}

.nav__enlace {
  position: relative;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-carbon);
  text-decoration: none;
  padding-block: var(--espacio-2);
  transition: color var(--transicion);
}

.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-naranja-texto);
  border-radius: 2px;
  transition: width var(--transicion);
}

.nav__enlace:hover { color: var(--color-marca-texto); }
.nav__enlace:hover::after { width: 100%; }

/* Página actual */
.nav__enlace[aria-current="page"] {
  color: var(--color-marca-texto);
  font-weight: 600;
}
.nav__enlace[aria-current="page"]::after { width: 100%; }

/* --- Botón hamburguesa --------------------------------------------------- */
.menu-boton {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  cursor: pointer;
}

.menu-boton__barras {
  position: relative;
  width: 22px;
  height: 2px;
  background-color: var(--color-carbon);
  border-radius: 2px;
  transition: background-color var(--transicion);
}
.menu-boton__barras::before,
.menu-boton__barras::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: var(--color-carbon);
  border-radius: 2px;
  transition: transform var(--transicion), top var(--transicion);
}
.menu-boton__barras::before { top: -7px; }
.menu-boton__barras::after  { top: 7px; }

/* Se convierte en una X cuando el menú está abierto */
.menu-boton[aria-expanded="true"] .menu-boton__barras { background-color: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { top: 0; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after  { top: 0; transform: rotate(-45deg); }

/* --- Comportamiento en celular (menos de 900px) -------------------------- */
@media (max-width: 899px) {
  .nav {
    position: fixed;
    inset: 0;
    top: var(--alto-header);
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: var(--espacio-6) var(--espacio-5);
    background-color: var(--color-blanco);
    overflow-y: auto;

    /* Cerrado: se desvanece y sube un poco.
       OJO: no se usa translateX(100%) para esconderlo. Al ser un elemento
       "fixed", su marco de referencia es la ventana, así que empujarlo fuera
       por la derecha ensancha la página entera y aparece scroll horizontal
       en el celular. El overflow-x:hidden del body NO recorta elementos
       fixed, por eso hay que esconderlo sin sacarlo de la pantalla. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
  }

  .nav.abierto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav__lista li { border-bottom: 1px solid var(--color-borde); }

  .nav__enlace {
    display: block;
    padding: var(--espacio-4) 0;
    font-size: var(--texto-lg);
    font-weight: 600;
  }
  .nav__enlace::after { display: none; }

  .nav .boton { margin-top: var(--espacio-6); width: 100%; }

  /* Bloquea el scroll del fondo mientras el menú está abierto */
  body.menu-abierto { overflow: hidden; }
}

@media (min-width: 900px) {
  .menu-boton { display: none; }
}


/* ==========================================================================
   8. HERO (portada rotativa)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-oscuro);
}

.hero__pista {
  display: flex;
  transition: transform 550ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 480px;
  height: 72vh;
  max-height: 720px;
  display: grid;
  align-items: center;
}

.hero__slide .marco-img { position: absolute; inset: 0; }
.hero__slide .marco-img > img { transition: none; }

/* Velo: sin esto el texto blanco no se lee sobre una foto clara.
   Es más oscuro a la izquierda, que es donde va el texto. */
.hero__velo {
  position: absolute;
  inset: 0;
  /* Oscuro a la izquierda para que el texto blanco se lea, y casi limpio a
     la derecha para que la comida se vea apetitosa y no apagada. */
  background: linear-gradient(to right,
              rgba(14, 46, 43, 0.88) 0%,
              rgba(14, 46, 43, 0.58) 42%,
              rgba(14, 46, 43, 0.12) 100%);
}

@media (max-width: 639px) {
  /* En celular la pantalla es angosta y la portada se recorta por los lados.
     Como la comida esta en el tercio derecho de la imagen, sin esto se
     quedaria fuera del recorte y solo se veria fondo turquesa. */
  .hero__slide .marco-img > img { object-position: 74% center; }

  /* El texto baja a la parte de abajo, que es donde el velo es mas oscuro.
     Asi la comida se ve arriba y el titular se lee sobre el tramo oscuro. */
  .hero__slide { align-items: end; }
  .hero__contenido { padding-bottom: var(--espacio-7); }

  /* El velo se pone vertical: oscuro abajo (el texto) y claro arriba */
  .hero__velo {
    background: linear-gradient(to top,
                rgba(14, 46, 43, 0.92) 15%,
                rgba(14, 46, 43, 0.58) 60%,
                rgba(14, 46, 43, 0.38) 100%);
  }
}

.hero__contenido {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding-block: var(--espacio-7);
  color: var(--color-blanco);
}

.hero__eyebrow {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  margin-bottom: var(--espacio-4);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-oscuro);
  background-color: var(--color-acento);
  border-radius: var(--radio-full);
}

.hero__titulo {
  margin-bottom: var(--espacio-4);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.hero__texto {
  font-size: var(--texto-lg);
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: var(--espacio-6);
  max-width: 46ch;
}

/* --- Flechas ------------------------------------------------------------- */
.hero__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: var(--color-blanco);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color var(--transicion);
}
.hero__flecha:hover { background-color: rgba(255, 255, 255, 0.32); }
.hero__flecha svg { width: 22px; height: 22px; }

.hero__flecha--prev { left: var(--espacio-4); }
.hero__flecha--next { right: var(--espacio-4); }

/* En celular estorban: se ocultan y se navega deslizando el dedo */
@media (max-width: 899px) { .hero__flecha { display: none; } }

/* --- Puntos -------------------------------------------------------------- */
.hero__puntos {
  position: absolute;
  bottom: var(--espacio-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: var(--espacio-2);
}

.hero__punto {
  width: 10px;
  height: 10px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.45);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transicion), width var(--transicion);
}
.hero__punto[aria-selected="true"] {
  width: 30px;
  border-radius: var(--radio-full);
  background-color: var(--color-blanco);
}

/* --- Encabezado corto para las páginas internas -------------------------- */
/* --- Franja de título de las páginas internas ---------------------------
   Va en el turquesa principal, plana y sin foto, igual que el menú impreso.

   EL TEXTO VA OSCURO, NO BLANCO. El blanco sobre este turquesa solo llega
   a 2,9 de contraste y el mínimo legible es 4,5. En cambio el café oscuro
   llega a 6,0. Es el mismo criterio del menú del local, donde el texto
   sobre el fondo turquesa también es oscuro.                            */
.hero-pagina {
  position: relative;
  padding-block: var(--espacio-8);
  background-color: var(--color-marca);
  color: var(--color-carbon);
  text-align: center;
  overflow: hidden;
}

/* El fondo va en café oscuro, NO en el degradado claro del resto de las
   fotos: encima va texto blanco y tiene que leerse aunque la foto todavía
   no exista. La foto, cuando esté, se muestra atenuada sobre ese café. */
.hero-pagina__contenido { position: relative; z-index: 2; }

/* La etiqueta de arriba va en una burbuja amarilla.
   Va IGUAL en las cuatro páginas, a propósito: la franja turquesa con la
   burbuja amarilla es el sello de la marca, y repetirla sin cambios es lo
   que hace que todas las páginas se sientan parte del mismo sitio. */
.hero-pagina__contenido .eyebrow {
  padding: 0.4rem 1rem;
  background-color: var(--color-acento);
  color: var(--color-carbon);
  border-radius: var(--radio-full);
}

.hero-pagina p {
  max-width: 58ch;
  margin: var(--espacio-4) auto 0;
  font-size: var(--texto-lg);
  color: rgba(43, 21, 8, 0.82);
}


/* ==========================================================================
   9. PÁGINA: INICIO
   ========================================================================== */

/* --- Franja de ventajas -------------------------------------------------- */
.ventajas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--espacio-5);
  padding-block: var(--espacio-6);
  border-bottom: 1px solid var(--color-borde);
}

.ventaja {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
}

.ventaja__icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--radio-md);
  background-color: var(--color-marca-suave);
  color: var(--color-marca-texto);
}
.ventaja__icono svg { width: 24px; height: 24px; }

.ventaja__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: var(--texto-base);
  line-height: 1.3;
}
.ventaja__texto { font-size: var(--texto-sm); color: var(--color-gris); }

/* --- Bloque partido: texto a un lado, foto al otro ----------------------- */
.partido {
  display: grid;
  gap: var(--espacio-6);
  align-items: center;
}

@media (min-width: 900px) {
  .partido { grid-template-columns: 1fr 1fr; gap: var(--espacio-8); }
  /* Invierte el orden: la foto pasa a la DERECHA y el texto a la izquierda.
     En el HTML la foto siempre va escrita primero, asi que en celular queda
     arriba en todos los bloques; esto solo cambia el orden en pantalla
     grande, que es donde hay dos columnas. */
  .partido--invertido .partido__media { order: 1; }
}

.partido__media {
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
}
.partido__media .marco-img { aspect-ratio: 4 / 3; }

.partido__texto h2 { margin-bottom: var(--espacio-4); }
.partido__texto p {
  color: var(--color-gris);
  font-size: var(--texto-lg);
  margin-bottom: var(--espacio-4);
}
.partido__texto .acciones { margin-top: var(--espacio-6); }

.seccion--oscura .partido__texto p { color: rgba(255, 255, 255, 0.78); }

/* --- Franja de llamada a la acción --------------------------------------- */
.franja-cta {
  padding-block: var(--espacio-8);
  background-color: var(--color-marca-oscuro);
  color: var(--color-blanco);
  text-align: center;
}
.franja-cta h2 { margin-bottom: var(--espacio-4); }
.franja-cta p {
  max-width: 55ch;
  margin: 0 auto var(--espacio-6);
  font-size: var(--texto-lg);
  color: rgba(255, 255, 255, 0.92);
}


/* ==========================================================================
   FRANJA "LA PAPA DE A DÓLAR"
   --------------------------------------------------------------------------
   La papa de $1 es la que más se vende, así que tiene su propia franja
   grande y llamativa. Va en el amarillo del logo con el precio enorme.
   El texto va OSCURO: sobre este amarillo el blanco no se lee.
   ========================================================================== */

.promo-dolar {
  position: relative;
  overflow: hidden;
  background-color: var(--color-amarillo-logo);
  color: var(--color-carbon);
}

/* Círculos decorativos del fondo, apenas visibles */
.promo-dolar::before,
.promo-dolar::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.promo-dolar::before { width: 300px; height: 300px; top: -120px; left: -90px; }
.promo-dolar::after  { width: 220px; height: 220px; bottom: -110px; right: 12%; }

.promo-dolar__interior {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--espacio-6);
  align-items: center;
  padding-block: var(--espacio-7);
  text-align: center;
}

@media (min-width: 900px) {
  .promo-dolar__interior {
    grid-template-columns: 1.2fr 0.8fr;
    text-align: left;
    padding-block: var(--espacio-8);
  }
}

/* La etiqueta "PRECIO BOMBA", ladeada como un sticker */
.promo-dolar__etiqueta {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  background-color: var(--color-naranja-texto);
  color: var(--color-blanco);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radio-full);
  transform: rotate(-2.5deg);
  box-shadow: var(--sombra-md);
}

.promo-dolar__titulo {
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.9rem);
  line-height: 1.02;
  margin-block: var(--espacio-4) var(--espacio-3);
}

.promo-dolar__texto {
  font-size: var(--texto-lg);
  max-width: 46ch;
  margin-inline: auto;
  color: rgba(43, 21, 8, 0.86);
}
@media (min-width: 900px) { .promo-dolar__texto { margin-inline: 0; } }

/* El bloque del precio: el número va enorme, es el gancho de la franja */
.promo-dolar__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-5);
  margin-top: var(--espacio-6);
}
@media (min-width: 900px) { .promo-dolar__acciones { justify-content: flex-start; } }

.promo-dolar__precio {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.045em;
  /* Usa el naranja MÁS oscuro, no el de los precios normales: sobre este
     amarillo el naranja común se queda en 2,9 de contraste y el mínimo
     para texto grande es 3. Este llega a 3,7. */
  color: var(--color-naranja-oscuro);
}
.promo-dolar__precio span { font-size: clamp(3.2rem, 1.9rem + 6vw, 6rem); }
.promo-dolar__precio small {
  font-size: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0;
  align-self: flex-end;
  padding-bottom: 0.35em;
}

/* La foto va dentro de un círculo blanco: sin esto, el fondo blanco de la
   foto se vería como un recuadro pegado encima del amarillo. */
.promo-dolar__media {
  width: min(300px, 78vw);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-blanco);
  box-shadow: var(--sombra-xl);
}
.promo-dolar__media img { width: 100%; height: 100%; object-fit: contain; }


/* ==========================================================================
   FRANJA "BARRA DE ENSALADAS"
   --------------------------------------------------------------------------
   La ensalada va incluida en todos los platos y el cliente se sirve solo.
   Es un argumento de venta fuerte, así que tiene franja propia.
   Va en turquesa con texto oscuro (6,0 de contraste).
   ========================================================================== */

.franja-ensalada {
  position: relative;
  overflow: hidden;
  background-color: var(--color-marca);
  color: var(--color-carbon);
}

.franja-ensalada::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  right: -110px;
  top: -140px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.franja-ensalada__interior {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--espacio-5);
  justify-items: center;
  text-align: center;
  padding-block: var(--espacio-7);
}

@media (min-width: 800px) {
  .franja-ensalada__interior {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
    gap: var(--espacio-7);
    align-items: center;
    padding-block: var(--espacio-8);
  }
}

/* El ícono va en un círculo blanco, para que resalte sobre el turquesa */
.franja-ensalada__icono {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-blanco);
  color: var(--color-marca-texto);
  box-shadow: var(--sombra-lg);
}
.franja-ensalada__icono svg { width: 58px; height: 58px; }

.franja-ensalada__etiqueta {
  display: inline-block;
  padding: 0.4rem 1rem;
  margin-bottom: var(--espacio-3);
  background-color: var(--color-acento);
  color: var(--color-carbon);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: var(--radio-full);
}

.franja-ensalada__titulo {
  font-size: var(--texto-3xl);
  margin-bottom: var(--espacio-3);
}

.franja-ensalada__texto {
  font-size: var(--texto-lg);
  max-width: 62ch;
  color: rgba(43, 21, 8, 0.86);
}

.franja-ensalada__texto strong { color: var(--color-carbon); }


/* --- Aviso compacto de la ensalada ---------------------------------------
   Versión de una sola línea, para la página de la carta. Va justo debajo de
   las categorías, donde el cliente está mirando los platos.            */

.aviso-ensalada {
  background-color: var(--color-marca-suave);
  border-bottom: 1px solid var(--color-borde);
}

.aviso-ensalada__interior {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  padding-block: var(--espacio-4);
  text-align: center;
  font-size: var(--texto-base);
  color: var(--color-carbon);
}

.aviso-ensalada__interior svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--color-marca-texto);
}

.aviso-ensalada strong { font-family: var(--fuente-titulo); font-weight: 600; }


/* --- Tarjeta de producto destacada ---------------------------------------
   Para el plato estrella. Marco amarillo grueso, sombra más marcada y el
   precio bastante más grande que el de las demás tarjetas.            */

.tarjeta-producto--destacada {
  border: 3px solid var(--color-amarillo-logo);
  box-shadow: var(--sombra-lg);
}

.tarjeta-producto--destacada .tarjeta-producto__nombre {
  font-size: var(--texto-xl);
}

.tarjeta-producto--destacada .precio {
  font-size: var(--texto-2xl);
  padding: 0.3em 0.9em;
  box-shadow: var(--sombra-md);
}

/* La etiqueta flotante pasa a amarilla con texto oscuro */
.tarjeta-producto--destacada .etiqueta--flotante {
  background-color: var(--color-amarillo-logo);
  color: var(--color-carbon);
}


/* ==========================================================================
   10. PÁGINA: NUESTRA CARTA
   ========================================================================== */

/* En la página de la carta hay DOS barras pegadas arriba (el encabezado y la
   barra de categorías), así que al saltar a una categoría hay que dejar más
   espacio para que el título no quede tapado. */
.pagina-carta { scroll-padding-top: calc(var(--alto-header) + 72px); }

/* --- Barra de categorías (se queda pegada abajo del encabezado) ---------- */
.filtro-categorias {
  position: sticky;
  top: var(--alto-header);
  z-index: 90;
  background-color: var(--color-blanco);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: var(--sombra-sm);
}

.filtro-categorias__lista {
  display: flex;
  gap: var(--espacio-2);
  padding-block: var(--espacio-3);
  /* Se desliza de lado en celular en vez de partirse en varias líneas */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filtro-categorias__lista::-webkit-scrollbar { display: none; }

.filtro-categorias__chip {
  flex-shrink: 0;
  padding: 0.55rem 1.15rem;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-carbon);
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--color-crema);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-full);
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion);
}

.filtro-categorias__chip:hover {
  background-color: var(--color-marca-suave);
  border-color: var(--color-marca);
  color: var(--color-marca-texto);
}

/* principal.js marca la categoría que se está viendo */
.filtro-categorias__chip.activo {
  background-color: var(--color-marca-oscuro);
  border-color: var(--color-marca-oscuro);
  color: var(--color-blanco);
}

/* --- Secciones de la carta ----------------------------------------------- */
.categoria { padding-block: var(--espacio-7); }
.categoria:nth-child(even) { background-color: var(--color-crema); }

.categoria__encabezado {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-6);
  padding-bottom: var(--espacio-4);
  border-bottom: 2px solid var(--color-borde);
}

.categoria__titulo { font-size: var(--texto-2xl); }

.categoria__descripcion {
  font-size: var(--texto-sm);
  color: var(--color-gris);
}

/* --- Nota de precios ----------------------------------------------------- */
.nota-precios {
  display: flex;
  gap: var(--espacio-4);
  align-items: flex-start;
  max-width: 780px;
  margin: var(--espacio-7) auto 0;
  padding: var(--espacio-5);
  background-color: var(--color-crema);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
  color: var(--color-gris);
}
.nota-precios svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-marca-texto);
}
.nota-precios strong { color: var(--color-carbon); }


/* ==========================================================================
   11. PÁGINA: NUESTRA HISTORIA
   ========================================================================== */

.prosa { max-width: 68ch; margin-inline: auto; }
.prosa p {
  font-size: var(--texto-lg);
  color: var(--color-gris);
  margin-bottom: var(--espacio-5);
}
.prosa p:last-child { margin-bottom: 0; }

/* Primera frase destacada */
.prosa__entrada {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xl);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-carbon);
  margin-bottom: var(--espacio-6);
}

/* --- Línea de tiempo ----------------------------------------------------- */
.linea-tiempo {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding-left: var(--espacio-6);
}

/* La línea vertical */
.linea-tiempo::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom,
              var(--color-marca) 0%,
              var(--color-acento) 100%);
  border-radius: 2px;
}

.hito { position: relative; padding-bottom: var(--espacio-7); }
.hito:last-child { padding-bottom: 0; }

/* El punto sobre la línea */
.hito::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--espacio-6));
  top: 6px;
  width: 16px;
  height: 16px;
  background-color: var(--color-blanco);
  border: 3px solid var(--color-naranja-texto);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--color-blanco);
}

.hito__anio {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xl);
  font-weight: 700;
  color: var(--color-marca-texto);
  letter-spacing: -0.02em;
  margin-bottom: var(--espacio-1);
}

.hito__titulo { font-size: var(--texto-lg); margin-bottom: var(--espacio-2); }
.hito__texto  { color: var(--color-gris); }

@media (min-width: 640px) {
  .linea-tiempo { padding-left: var(--espacio-7); }
  .hito::before { left: calc(-1 * var(--espacio-7)); }
  .linea-tiempo::before { left: 7px; }
}

/* --- Valores ------------------------------------------------------------- */
.valor { text-align: center; padding: var(--espacio-5); }

.valor__icono {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto var(--espacio-4);
  border-radius: 50%;
  background-color: var(--color-marca-suave);
  color: var(--color-marca-texto);
}
.valor__icono svg { width: 32px; height: 32px; }

.valor h3 { margin-bottom: var(--espacio-2); }
.valor p  { color: var(--color-gris); font-size: var(--texto-sm); }

.seccion--oscura .valor__icono { background-color: rgba(255, 255, 255, 0.10); color: var(--color-acento); }
.seccion--oscura .valor p { color: rgba(255, 255, 255, 0.72); }

/* --- Cita ---------------------------------------------------------------- */
.cita {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.cita blockquote {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin-bottom: var(--espacio-5);
}
.cita figcaption {
  font-size: var(--texto-sm);
  color: var(--color-gris);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.seccion--oscura .cita figcaption { color: rgba(255, 255, 255, 0.6); }


/* ==========================================================================
   12. PÁGINA: UBICACIÓN
   ========================================================================== */

.mapa {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-md);
  background-color: var(--color-crema);
}

.mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 900px) {
  .mapa { aspect-ratio: 16 / 9; }
}

/* Diseño de la página: mapa grande + panel de datos al lado */
.ubicacion-layout {
  display: grid;
  gap: var(--espacio-6);
}

@media (min-width: 1000px) {
  .ubicacion-layout {
    grid-template-columns: 1.35fr 1fr;
    align-items: start;
  }
}

.panel-datos {
  padding: var(--espacio-6);
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}

.dato {
  display: flex;
  gap: var(--espacio-4);
  padding-block: var(--espacio-4);
  border-bottom: 1px solid var(--color-borde);
}
.dato:first-child { padding-top: 0; }
.dato:last-child  { border-bottom: none; padding-bottom: 0; }

.dato__icono {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--color-marca-texto);
}

.dato__etiqueta {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-gris-claro);
  margin-bottom: var(--espacio-1);
}

.dato__valor { font-size: var(--texto-base); line-height: 1.55; }
.dato__valor a { color: var(--color-carbon); text-decoration: none; font-weight: 500; }
.dato__valor a:hover { color: var(--color-marca-texto); text-decoration: underline; }

/* --- Tabla de horarios --------------------------------------------------- */
.horarios { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }

.horarios th,
.horarios td {
  padding: var(--espacio-3) 0;
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}
.horarios tr:last-child th,
.horarios tr:last-child td { border-bottom: none; }

.horarios th { font-weight: 500; color: var(--color-gris); }
.horarios td { text-align: right; font-weight: 600; font-family: var(--fuente-titulo); }

/* principal.js resalta el día de hoy */
.horarios tr.hoy th,
.horarios tr.hoy td { color: var(--color-marca-texto); font-weight: 700; }

.horarios td.cerrado { color: var(--color-gris-claro); font-weight: 500; }

/* --- Estado abierto / cerrado ------------------------------------------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 0.35rem 0.85rem;
  font-size: var(--texto-sm);
  font-weight: 600;
  font-family: var(--fuente-titulo);
  border-radius: var(--radio-full);
}
.estado::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}
.estado--abierto { background-color: var(--color-marca-suave); color: var(--color-marca-texto); }
.estado--cerrado { background-color: #F3EDE4; color: var(--color-gris); }


/* ==========================================================================
   13. PÁGINA: CONTACTO
   ========================================================================== */

.contacto-layout {
  display: grid;
  gap: var(--espacio-7);
}

@media (min-width: 1000px) {
  .contacto-layout { grid-template-columns: 1fr 1.1fr; align-items: start; }
}

/* --- Formulario ---------------------------------------------------------- */
.formulario {
  padding: var(--espacio-6);
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
}

@media (min-width: 640px) {
  .formulario { padding: var(--espacio-7); }
}

.campo { margin-bottom: var(--espacio-5); }

.campo label {
  display: block;
  margin-bottom: var(--espacio-2);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  font-weight: 600;
}

.campo__requerido { color: var(--color-marca-texto); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: var(--texto-base);
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--color-marca);
  box-shadow: 0 0 0 3px var(--color-marca-suave);
}

.campo textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.campo__ayuda {
  margin-top: var(--espacio-2);
  font-size: var(--texto-xs);
  color: var(--color-gris-claro);
}

/* Aviso de cómo funciona el formulario */
.aviso-formulario {
  display: flex;
  gap: var(--espacio-3);
  align-items: flex-start;
  padding: var(--espacio-4);
  margin-bottom: var(--espacio-6);
  background-color: var(--color-marca-suave);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
  color: var(--color-marca-texto);
}
.aviso-formulario svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }


/* ==========================================================================
   14. PIE DE PÁGINA
   ========================================================================== */

.pie {
  background-color: var(--color-oscuro);
  color: rgba(255, 255, 255, 0.72);
  padding-top: var(--espacio-8);
  font-size: var(--texto-sm);
}

.pie__rejilla {
  display: grid;
  gap: var(--espacio-6);
  padding-bottom: var(--espacio-7);
}

@media (min-width: 700px) {
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--espacio-7); }
}
@media (min-width: 1000px) {
  .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

/* En el pie va el logo completo (con la mascota), que tiene más presencia
   sobre el fondo café oscuro */
.pie__logo img { height: 130px; width: auto; margin-bottom: var(--espacio-4); }
.pie__logo .logo__texto { color: var(--color-blanco); margin-bottom: var(--espacio-4); }
.pie__logo .logo__texto span { color: var(--color-acento); }

.pie__descripcion { max-width: 34ch; line-height: 1.7; }

.pie__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-blanco);
  margin-bottom: var(--espacio-4);
}

.pie__lista li { margin-bottom: var(--espacio-3); }

.pie__lista a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--transicion);
}
.pie__lista a:hover { color: var(--color-acento); }

.pie__contacto li {
  display: flex;
  gap: var(--espacio-3);
  align-items: flex-start;
  margin-bottom: var(--espacio-4);
  line-height: 1.5;
}
.pie__contacto svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-acento);
}

/* --- Redes sociales ------------------------------------------------------ */
.redes { display: flex; gap: var(--espacio-3); margin-top: var(--espacio-4); }

.redes a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.10);
  color: var(--color-blanco);
  transition: background-color var(--transicion), transform var(--transicion);
}
.redes a:hover {
  background-color: var(--color-naranja-texto);
  transform: translateY(-3px);
}
.redes svg { width: 20px; height: 20px; }

/* --- Línea final --------------------------------------------------------- */
.pie__final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding-block: var(--espacio-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--texto-xs);
  color: rgba(255, 255, 255, 0.55);
}
.pie__final a { color: inherit; }


/* ==========================================================================
   15. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   ========================================================================== */

/* Contorno visible al navegar con el teclado (tecla Tab) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-naranja-texto);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}

/* Texto visible solo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respeta a quien tenga desactivadas las animaciones en su sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .boton:hover,
  .tarjeta-producto:hover,
  .tarjeta-categoria:hover { transform: none; }
}


/* ==========================================================================
   16. IMPRESIÓN
   --------------------------------------------------------------------------
   Para que la carta se pueda imprimir en papel y quede legible.
   ========================================================================== */

@media print {
  .barra-superior,
  .encabezado,
  .filtro-categorias,
  .pie,
  .franja-cta,
  .hero__flecha,
  .hero__puntos,
  .acciones { display: none !important; }

  body { font-size: 11pt; color: #000; background: #fff; }

  .categoria { padding-block: 0.5cm; break-inside: avoid; }
  .categoria:nth-child(even) { background: none; }

  .tarjeta-producto {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  .tarjeta-producto .marco-img { display: none; }

  .precio { color: #000; }

  a[href]::after { content: ''; }
}