/* ==========================================================================
   Taberna Alameda — Hoja de estilo principal
   --------------------------------------------------------------------------
   Concepto visual: noche malagueña + latón de barra + azulejo andaluz.
   Paleta cálida y oscura: el local es un refugio de luz en la Alameda.

   Índice:
     01. Tokens de diseño
     02. Reset y base
     03. Grano y atmósfera
     04. Tipografía
     05. Barra de navegación
     06. Héroe
     07. La casa
     08. Un día en la taberna
     09. Carta
     10. Galería
     11. Málaga
     12. Visítanos
     13. Empleados
     14. Pie de página
     15. Botón flotante de reservas
     16. Animaciones de entrada
     17. Responsive
   ========================================================================== */

/* ==========================================================================
   01. TOKENS DE DISEÑO
   ========================================================================== */

:root {
  /* --- Color. La base es la noche; el acento es la luz del local. --- */
  --noche-900: #080604;   /* fondo más profundo */
  --noche-800: #0d0a06;
  --noche-700: #14100a;   /* superficie de secciones */
  --noche-600: #1c1610;   /* superficies elevadas */
  --noche-500: #251d15;

  --brasa-600: #8a5a12;   /* latón en sombra */
  --brasa-500: #c8952f;   /* latón principal */
  --brasa-400: #e0ac48;   /* latón iluminado */
  --brasa-300: #f2ce7d;   /* brillo */
  --brasa-200: #f8e4b4;   /* casi blanco cálido */

  --teja-500: #b8502f;    /* teja malagueña */
  --teja-400: #d4653c;

  --azulejo-600: #17406f; /* azul cobalto del azulejo */
  --azulejo-500: #245f9e;

  --oliva-500: #6b7a3a;   /* verde olivo */

  --crema-100: #f7efe2;   /* texto principal */
  --crema-300: #dccdb8;
  --crema-500: #a8957f;   /* texto secundario */
  --crema-700: #6d6055;   /* texto terciario */

  --linea: rgba(200, 149, 47, 0.22);
  --linea-suave: rgba(247, 239, 226, 0.10);

  /* --- Tipografía --- */
  --fuente-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --fuente-texto: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Escala fluida: se adapta del móvil al monitor grande sin breakpoints */
  --t-xs:    clamp(0.72rem, 0.70rem + 0.15vw, 0.80rem);
  --t-sm:    clamp(0.85rem, 0.82rem + 0.20vw, 0.95rem);
  --t-base:  clamp(1.00rem, 0.95rem + 0.30vw, 1.12rem);
  --t-lg:    clamp(1.12rem, 1.02rem + 0.55vw, 1.35rem);
  --t-xl:    clamp(1.45rem, 1.25rem + 1.10vw, 2.00rem);
  --t-2xl:   clamp(1.90rem, 1.55rem + 2.00vw, 3.00rem);
  --t-3xl:   clamp(2.60rem, 1.90rem + 4.00vw, 4.80rem);
  --t-hero:  clamp(3.10rem, 1.70rem + 8.20vw, 8.60rem);

  /* --- Espaciado --- */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;
  --seccion-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --ancho: 1240px;

  /* --- Formas y sombras --- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-full: 999px;

  --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sombra-media: 0 18px 50px -12px rgba(0, 0, 0, 0.75);
  --sombra-brasa: 0 0 40px -8px rgba(200, 149, 47, 0.35);

  /* --- Movimiento --- */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --t-rapido: 0.22s;
  --t-medio: 0.45s;
  --t-lento: 0.9s;

  /* --- Capas --- */
  --z-grano: 90;
  --z-nav: 100;
  --z-flotante: 95;
}

/* ==========================================================================
   02. RESET Y BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* la barra fija no debe tapar los anclajes */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  background: var(--noche-900);
}

body {
  margin: 0;
  background: var(--noche-900);
  color: var(--crema-100);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* La web es oscura por diseño: no hay tema claro. */
body.sin-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--brasa-500); color: var(--noche-900); }

/* Foco visible: obligatorio para navegar con teclado */
:focus-visible {
  outline: 2px solid var(--brasa-400);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.salto-a-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--brasa-500);
  color: var(--noche-900);
  font-weight: 500;
}
.salto-a-contenido:focus { left: 0.5rem; top: 0.5rem; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. GRANO Y ATMÓSFERA
   --------------------------------------------------------------------------
   Una capa de ruido muy sutil sobre todo el sitio. Es lo que separa una web
   "oscura" plana de una que parece fotografiada con película.
   ========================================================================== */

.grano {
  position: fixed;
  inset: 0;
  z-index: var(--z-grano);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Resplandor cálido que sigue al usuario: la "luz del local". */
.resplandor {
  position: fixed;
  width: 44rem; height: 44rem;
  left: 0; top: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 149, 47, 0.13) 0%, rgba(200, 149, 47, 0.05) 38%, transparent 68%);
  transition: opacity 1.2s var(--curva);
  will-change: transform;
}
.resplandor.activo { opacity: 1; }

/* ==========================================================================
   04. TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Antetítulo: la etiqueta pequeña en mayúsculas con raya dorada. */
.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--e-3);
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brasa-400);
}
.antetitulo::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--brasa-500), transparent);
}

.titulo-seccion {
  font-size: var(--t-2xl);
  margin-bottom: var(--e-3);
}

.entradilla {
  max-width: 46ch;
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.6;
  color: var(--crema-300);
}

/* Texto con degradado de latón para palabras destacadas. */
.dorado {
  background: linear-gradient(105deg, var(--brasa-200) 0%, var(--brasa-400) 45%, var(--brasa-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cursiva {
  font-style: italic;
  font-weight: 400;
}

/* ==========================================================================
   05. BARRA DE NAVEGACIÓN
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding-block: 1.1rem;
  transition: background var(--t-medio) var(--curva),
              padding var(--t-medio) var(--curva),
              border-color var(--t-medio) var(--curva),
              backdrop-filter var(--t-medio) var(--curva);
  border-bottom: 1px solid transparent;
}

/* Al bajar: la barra se compacta y se vuelve translúcida. */
.nav.compacta {
  padding-block: 0.6rem;
  background: rgba(8, 6, 4, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linea);
}

.nav__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

/* --- Marca --- */
.marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.marca__sello {
  width: 2.6rem; height: 2.6rem;
  flex-shrink: 0;
  transition: transform var(--t-medio) var(--curva-salida);
}
.marca:hover .marca__sello { transform: rotate(-8deg) scale(1.06); }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre {
  font-family: var(--fuente-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.marca__lugar {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brasa-500);
}

/* --- Enlaces --- */
.nav__enlaces {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.nav__enlace {
  position: relative;
  padding-block: 0.35rem;
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--crema-300);
  transition: color var(--t-rapido) var(--curva);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brasa-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-medio) var(--curva-salida);
}
.nav__enlace:hover { color: var(--brasa-200); }
.nav__enlace:hover::after,
.nav__enlace.activo::after { transform: scaleX(1); transform-origin: left; }

/* --- Acciones derecha --- */
.nav__acciones { display: flex; align-items: center; gap: 0.85rem; }

/* Indicador "abierto / cerrado": un punto que late. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--crema-300);
  white-space: nowrap;
}
.estado__punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crema-700);
  flex-shrink: 0;
}
.estado.abierto .estado__punto {
  background: #6fcf7f;
  box-shadow: 0 0 0 0 rgba(111, 207, 127, 0.6);
  animation: latido 2.4s var(--curva) infinite;
}
.estado.abierto { border-color: rgba(111, 207, 127, 0.35); }
.estado.cerrado .estado__punto { background: var(--teja-400); }

@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(111, 207, 127, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(111, 207, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 207, 127, 0); }
}

/* --- Selector de idioma --- */
.idioma {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
}
.idioma button {
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--crema-500);
  transition: all var(--t-rapido) var(--curva);
}
.idioma button:hover { color: var(--brasa-200); }
.idioma button.activo {
  background: var(--brasa-500);
  color: var(--noche-900);
}

/* --- Botón genérico --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.4rem;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  transition: transform var(--t-rapido) var(--curva),
              background var(--t-medio) var(--curva),
              color var(--t-medio) var(--curva),
              box-shadow var(--t-medio) var(--curva),
              border-color var(--t-medio) var(--curva);
}
.boton svg { flex-shrink: 0; }

/* Botón principal: latón macizo. */
.boton--brasa {
  background: linear-gradient(135deg, var(--brasa-400), var(--brasa-600));
  color: var(--noche-900);
  box-shadow: 0 6px 22px -8px rgba(200, 149, 47, 0.65);
}
.boton--brasa:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -10px rgba(200, 149, 47, 0.85);
  background: linear-gradient(135deg, var(--brasa-300), var(--brasa-500));
}
.boton--brasa:active { transform: translateY(0); }

/* Reservas desactivadas (config: reservasActivas = false).
   El botón deja de ser un enlace invocable pero conserva su sitio en el diseño:
   el visitante ve que reservar existe, y que todavía no está disponible. */
.boton--apagado,
.boton--apagado:hover {
  background: none;
  border: 1px dashed var(--crema-700);
  color: var(--crema-500);
  box-shadow: none;
  cursor: default;
  transform: none;
  pointer-events: none;
}
.boton--apagado svg { opacity: 0.6; }

/* En la barra de navegación, el botón de reservas apagado se retira: su texto
   ("Reservas aún no disponibles") es mucho más largo que "Reservar" y partía
   los enlaces del menú en dos líneas, desalineando toda la barra. El aviso ya
   lo dan el héroe y la tarjeta de Visítanos, así que en la barra sobra. */
.nav__acciones .boton--apagado { display: none; }

/* Tarjeta de reservas en modo "todavía no": el texto y la nota, sin acción. */
.aviso-reservas {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-sm);
  color: var(--crema-500);
  font-style: italic;
}

/* Botón fantasma: contorno. */
.boton--contorno {
  border: 1px solid var(--linea);
  color: var(--crema-100);
  background: rgba(247, 239, 226, 0.03);
}
.boton--contorno:hover {
  border-color: var(--brasa-400);
  color: var(--brasa-200);
  background: rgba(200, 149, 47, 0.09);
  transform: translateY(-2px);
}

.boton--grande { padding: 0.95rem 1.9rem; font-size: var(--t-base); }

/* --- Botón hamburguesa (móvil) --- */
.hamburguesa {
  display: none;
  width: 2.6rem; height: 2.6rem;
  position: relative;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.hamburguesa span {
  position: absolute;
  left: 50%; width: 1.05rem; height: 1.5px;
  background: var(--crema-100);
  transform: translateX(-50%);
  transition: transform var(--t-medio) var(--curva-salida), opacity var(--t-rapido) linear;
}
.hamburguesa span:nth-child(1) { top: 0.95rem; }
.hamburguesa span:nth-child(2) { top: 1.25rem; }
.hamburguesa span:nth-child(3) { top: 1.55rem; }
.hamburguesa.abierto span:nth-child(1) { transform: translateX(-50%) translateY(0.3rem) rotate(45deg); }
.hamburguesa.abierto span:nth-child(2) { opacity: 0; }
.hamburguesa.abierto span:nth-child(3) { transform: translateX(-50%) translateY(-0.3rem) rotate(-45deg); }

/* --- Panel móvil --- */
.nav__movil {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 5rem clamp(1.5rem, 8vw, 4rem);
  background: linear-gradient(170deg, var(--noche-800) 0%, var(--noche-900) 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva-salida), visibility var(--t-medio);
}
.nav__movil.abierto { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__movil a {
  font-family: var(--fuente-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 600;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--linea-suave);
  color: var(--crema-100);
  transition: color var(--t-rapido) var(--curva), padding-left var(--t-medio) var(--curva-salida);
}
.nav__movil a:hover { color: var(--brasa-300); padding-left: 0.75rem; }
.nav__movil .boton { margin-top: var(--e-4); align-self: flex-start; }

/* ==========================================================================
   06. HÉROE
   ========================================================================== */

.heroe {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 8rem 4.5rem;
  overflow: hidden;
  isolation: isolate;
}

/* Capa de imagen de fondo con zoom lento perpetuo. */
.heroe__fondo {
  position: absolute;
  inset: -2%;
  z-index: -3;
}
.heroe__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  animation: respirar 26s ease-in-out infinite alternate;
}
@keyframes respirar {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14); }
}

/* Velo oscuro: garantiza contraste del texto sobre la foto. */
.heroe__velo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, var(--noche-900) 2%, rgba(8, 6, 4, 0.72) 42%, rgba(8, 6, 4, 0.32) 72%, rgba(8, 6, 4, 0.55) 100%),
    radial-gradient(ellipse 80% 55% at 22% 78%, rgba(200, 149, 47, 0.16) 0%, transparent 62%);
}

/* Rayo de luz diagonal, como una lámpara entrando por la ventana. */
.heroe__rayo {
  position: absolute;
  z-index: -1;
  top: -30%; left: 8%;
  width: 34rem; height: 160%;
  background: linear-gradient(94deg, transparent 0%, rgba(248, 228, 180, 0.055) 42%, rgba(248, 228, 180, 0.10) 50%, rgba(248, 228, 180, 0.045) 58%, transparent 100%);
  transform: rotate(14deg);
  filter: blur(22px);
  pointer-events: none;
  animation: mecer 16s ease-in-out infinite alternate;
}
@keyframes mecer {
  from { transform: rotate(14deg) translateX(-2.5rem); opacity: 0.75; }
  to   { transform: rotate(11deg) translateX(3rem); opacity: 1; }
}

.heroe__contenido { position: relative; width: 100%; }

.heroe__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brasa-300);
}
.heroe__etiqueta::before,
.heroe__etiqueta::after {
  content: "";
  height: 1px;
  width: clamp(1.5rem, 4vw, 3.5rem);
  background: linear-gradient(90deg, transparent, var(--brasa-500));
}
.heroe__etiqueta::after { background: linear-gradient(90deg, var(--brasa-500), transparent); }

/* El nombre: enorme, con un brillo dorado que lo recorre. */
.heroe__titulo {
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.028em;
  margin-bottom: var(--e-3);
  text-shadow: 0 8px 60px rgba(0, 0, 0, 0.6);
}
.heroe__titulo .linea {
  display: block;
  overflow: hidden;
}
.heroe__titulo .linea > span {
  display: inline-block;
  transform: translateY(105%);
  animation: subir 1.15s var(--curva-salida) forwards;
}
.heroe__titulo .linea:nth-child(2) > span { animation-delay: 0.14s; }

@keyframes subir {
  to { transform: translateY(0); }
}

/* El brillo solo aparece si no hay reducción de movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .heroe__titulo {
    background: linear-gradient(100deg,
      var(--crema-100) 0%, var(--crema-100) 34%,
      var(--brasa-200) 48%, #fff8e6 52%,
      var(--brasa-300) 58%, var(--crema-100) 76%, var(--crema-100) 100%);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: brillo 7s ease-in-out 1.4s infinite;
  }
}
@keyframes brillo {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0% 0; }
}

.heroe__lema {
  max-width: 30ch;
  margin-bottom: var(--e-5);
  font-family: var(--fuente-display);
  font-size: var(--t-xl);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--crema-300);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

/* Ficha de horario dentro del héroe. */
.heroe__horario {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
  background: rgba(8, 6, 4, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--t-sm);
  color: var(--crema-300);
}
.heroe__horario strong { color: var(--brasa-200); font-weight: 500; letter-spacing: 0.04em; }
.heroe__horario .sep { width: 1px; height: 1rem; background: var(--linea); }

/* Indicador de scroll: una línea que se llena. */
.heroe__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--crema-500);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.heroe__scroll::after {
  content: "";
  width: 1px; height: 2.6rem;
  background: linear-gradient(180deg, var(--brasa-500), transparent);
  animation: bajar 2.4s var(--curva) infinite;
}
@keyframes bajar {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Cinta de datos bajo el héroe. */
.cinta {
  position: relative;
  border-block: 1px solid var(--linea);
  background: linear-gradient(180deg, var(--noche-800), var(--noche-900));
  overflow: hidden;
}
.cinta__pista {
  display: flex;
  gap: 3rem;
  padding-block: 1.05rem;
  white-space: nowrap;
  width: max-content;
  animation: desfilar 44s linear infinite;
}
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cinta__item {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--crema-500);
  letter-spacing: 0.02em;
}
.cinta__item::after {
  content: "◆";
  font-size: 0.5rem;
  font-style: normal;
  color: var(--brasa-600);
}

/* ==========================================================================
   07. LA CASA
   ========================================================================== */

.seccion { position: relative; padding-block: var(--seccion-y); }
.seccion--alterna { background: linear-gradient(180deg, var(--noche-900) 0%, var(--noche-700) 18%, var(--noche-700) 82%, var(--noche-900) 100%); }

/* Rejilla de dos columnas: texto + imagen. */
.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.dos-columnas--invertida .dos-columnas__texto { order: 2; }

.casa__texto p {
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.72;
  color: var(--crema-300);
}
.casa__texto p + p { margin-top: 1.15em; }

/* Cifras destacadas. */
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea-suave);
}
.cifra { min-width: 6rem; }
.cifra__valor {
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--brasa-300);
}
.cifra__etiqueta {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema-500);
}

/* Imagen enmarcada con detalle de latón. */
.marco {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sombra-media);
}
.marco img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.4s var(--curva-salida);
}
.marco:hover img { transform: scale(1.045); }
/* Esquina de latón, como el marco de un espejo antiguo. */
.marco::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(200, 149, 47, 0.28);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55);
}

/* Detalle vertical junto a la imagen. */
.marco--retrato img { aspect-ratio: 3 / 4; }

.cita {
  margin-top: var(--e-4);
  padding-left: var(--e-3);
  border-left: 2px solid var(--brasa-600);
  font-family: var(--fuente-display);
  font-size: var(--t-xl);
  font-style: italic;
  line-height: 1.4;
  color: var(--brasa-200);
}

/* ==========================================================================
   08. UN DÍA EN LA TABERNA
   ========================================================================== */

.tres-momentos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.15rem, 2.5vw, 2rem);
  margin-top: var(--e-6);
}

.momento {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(28, 22, 16, 0.75) 0%, rgba(13, 10, 6, 0.95) 100%);
  overflow: hidden;
  transition: transform var(--t-medio) var(--curva-salida),
              border-color var(--t-medio) var(--curva),
              box-shadow var(--t-medio) var(--curva);
}
.momento:hover {
  transform: translateY(-6px);
  border-color: var(--linea);
  box-shadow: var(--sombra-brasa);
}

/* La foto superior se ilumina al pasar el ratón. */
.momento__foto { position: relative; overflow: hidden; }
.momento__foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.78);
  transition: filter var(--t-lento) var(--curva), transform 1.2s var(--curva-salida);
}
.momento:hover .momento__foto img {
  filter: saturate(1.05) brightness(0.96);
  transform: scale(1.05);
}
.momento__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 6, 4, 0.15) 0%, rgba(13, 10, 6, 0.92) 88%);
}

/* Hora: sello arriba a la derecha. */
.momento__hora {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 2;
  padding: 0.32rem 0.72rem;
  border: 1px solid rgba(200, 149, 47, 0.42);
  border-radius: var(--r-full);
  background: rgba(8, 6, 4, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--brasa-200);
  white-space: nowrap;
}

.momento__cuerpo { padding: var(--e-3) var(--e-3) var(--e-4); }

.momento__titulo {
  margin-bottom: 0.65rem;
  font-size: var(--t-xl);
  color: var(--crema-100);
}
.momento__texto {
  font-size: var(--t-sm);
  line-height: 1.68;
  color: var(--crema-500);
}
.momento__lista {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  display: grid;
  gap: 0.5rem;
}
.momento__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-sm);
  color: var(--crema-300);
}
.momento__lista li::before {
  content: "";
  flex-shrink: 0;
  width: 5px; height: 5px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--brasa-500);
}

/* ==========================================================================
   09. CARTA
   ========================================================================== */

.carta__rejilla {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.15rem, 2.5vw, 2rem);
  margin-top: var(--e-6);
}

/* Tarjeta del menú del día: la más importante, ocupa el bloque grande. */
.menu-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-4);
  padding: clamp(1.6rem, 4vw, 2.75rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse 70% 60% at 90% 8%, rgba(200, 149, 47, 0.14) 0%, transparent 60%),
    linear-gradient(160deg, var(--noche-600) 0%, var(--noche-800) 100%);
  overflow: hidden;
}
.menu-dia::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brasa-400), transparent);
}
.menu-dia__etiqueta {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--e-2);
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-full);
  background: rgba(184, 80, 47, 0.16);
  border: 1px solid rgba(184, 80, 47, 0.42);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0a988;
}
.menu-dia__titulo { font-size: var(--t-xl); margin-bottom: 0.7rem; }
.menu-dia__texto { font-size: var(--t-sm); color: var(--crema-500); line-height: 1.7; }

/* Los tres pases del menú, como una cuenta escrita a mano. */
.pases {
  display: grid;
  gap: 0.7rem;
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px dashed var(--linea-suave);
}
.pase {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--t-sm);
  color: var(--crema-300);
}
.pase__n {
  flex-shrink: 0;
  width: 1.5rem;
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--brasa-500);
}

/* Columna derecha: barra y bebida. */
/* Columna derecha: barra y bebida.
   `grid-template-rows: 1fr 1fr` hace que las dos tarjetas se REPARTAN la altura
   completa de la columna (que la fija la tarjeta del menú del día de al lado).
   Sin esto, las dos tarjetas se quedan cortas y dejan un hueco negro debajo. */
.carta__lateral {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(1.15rem, 2.5vw, 2rem);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(28, 22, 16, 0.6) 0%, rgba(13, 10, 6, 0.9) 100%);
  transition: border-color var(--t-medio) var(--curva);
}

/* Lista dentro de una tarjeta: mismo lenguaje visual que las listas de
   "Un día aquí", para que las tarjetas de la Carta llenen su altura.
   `margin-top: auto` EMPUJA la lista al fondo de la tarjeta, así el aire sobrante
   queda entre el texto y la lista en vez de acumularse como hueco al final. */
.tarjeta__lista {
  display: grid;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
}
.tarjeta__texto { margin-bottom: var(--e-3); }
.tarjeta__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-sm);
  color: var(--crema-300);
}
.tarjeta__lista li::before {
  content: "";
  flex-shrink: 0;
  width: 5px; height: 5px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--brasa-500);
}
.tarjeta:hover { border-color: var(--linea); }
.tarjeta__titulo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.7rem;
  font-size: var(--t-lg);
}
.tarjeta__titulo svg { color: var(--brasa-500); flex-shrink: 0; }
.tarjeta__texto { font-size: var(--t-sm); color: var(--crema-500); line-height: 1.68; }

/* Aviso: precios y platos provisionales. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: var(--e-5);
  padding: 0.9rem 1.2rem;
  border: 1px dashed rgba(200, 149, 47, 0.35);
  border-radius: var(--r-md);
  background: rgba(200, 149, 47, 0.05);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--brasa-200);
  max-width: 70ch;
}
.aviso svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--brasa-400); }

/* ==========================================================================
   10. GALERÍA
   ========================================================================== */

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.65rem, 1.4vw, 1.1rem);
  margin-top: var(--e-6);
}
.galeria__pieza {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--noche-700);
  cursor: zoom-in;
}
.galeria__pieza img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.8);
  transition: filter var(--t-lento) var(--curva), transform 1.5s var(--curva-salida);
}
.galeria__pieza:hover img {
  filter: saturate(1.05) brightness(1);
  transform: scale(1.07);
}
.galeria__pieza::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 4, 0.88) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--t-medio) var(--curva);
}
.galeria__pieza:hover::after { opacity: 1; }

.galeria__pie {
  position: absolute;
  left: 1rem; bottom: 0.85rem;
  z-index: 2;
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--crema-100);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--t-medio) var(--curva), transform var(--t-medio) var(--curva-salida);
}
.galeria__pieza:hover .galeria__pie { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   Posiciones explícitas: un mosaico con ritmo (una pieza grande, una alta,
   una ancha) sin dejar huecos. La colocación automática de CSS deja agujeros
   cuando conviven piezas de distintos tamaños, así que las áreas se fijan.
   Cada área declarada DEBE tener un elemento: un área sin asignar deja un
   hueco vacío en la rejilla (pasó con "alto", que quedó sin uso).
   -------------------------------------------------------------------------- */
.galeria {
  grid-template-areas:
    "vino    vino    desayuno fachada"
    "vino    vino    tapas    fachada"
    "grande  grande  ancha    ancha";
  grid-template-rows:
    clamp(9.5rem, 14vw, 13rem)
    clamp(9.5rem, 14vw, 13rem)
    clamp(9.5rem, 15vw, 13rem);
}

.galeria__pieza--vino     { grid-area: vino; }
.galeria__pieza--grande   { grid-area: grande; }
.galeria__pieza--ancha    { grid-area: ancha; }
.galeria__pieza--desayuno { grid-area: desayuno; }
.galeria__pieza--tapas    { grid-area: tapas; }
.galeria__pieza--fachada  { grid-area: fachada; }

/* La pieza grande y la alta muestran más detalle: recuperan color antes. */
.galeria__pieza--grande img,
.galeria__pieza--fachada img { filter: saturate(0.88) brightness(0.86); }

/* La pieza del vino es la imagen de marca de la casa y la más grande del
   mosaico: se oscurece menos que el resto (la foto ya es de por sí cálida y
   oscura) y se encuadra algo por encima del centro, que es donde viven la
   botella y el rótulo pintado a tiza. */
.galeria__pieza--vino img {
  filter: saturate(0.95) brightness(0.94);
  object-position: center 46%;
}

/* Visor de imagen a pantalla completa. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 3, 2, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-medio) var(--curva), visibility var(--t-medio);
}
.visor.abierto { opacity: 1; visibility: visible; }
.visor img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-media);
  transform: scale(0.96);
  transition: transform var(--t-medio) var(--curva-salida);
}
.visor.abierto img { transform: scale(1); }
.visor__cerrar {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 2.85rem; height: 2.85rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: rgba(8, 6, 4, 0.7);
  color: var(--crema-100);
  transition: all var(--t-rapido) var(--curva);
}
.visor__cerrar:hover { background: var(--brasa-500); color: var(--noche-900); border-color: var(--brasa-500); }

/* ==========================================================================
   11. MÁLAGA
   --------------------------------------------------------------------------
   La sección clave del marketing visual: la ciudad como reclamo.
   ========================================================================== */

.malaga {
  position: relative;
  padding-block: var(--seccion-y);
  overflow: hidden;
  background: linear-gradient(180deg, var(--noche-900) 0%, #0a0d14 40%, #0a0d14 60%, var(--noche-900) 100%);
}

/* Texto gigante translúcido de fondo: "MÁLAGA". */
.malaga__marca-agua {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--fuente-display);
  font-size: clamp(9rem, 30vw, 30rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 149, 47, 0.09);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.malaga__cabecera {
  position: relative;
  max-width: 58ch;
  margin-bottom: var(--e-6);
}
.malaga__texto {
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.75;
  color: var(--crema-300);
}

/* Mosaico asimétrico de la ciudad.
   ---------------------------------------------------------------------------
   Filas y columnas explícitas + `object-fit: cover`: así las piezas encajan
   siempre, sin los huecos negros que aparecen cuando se dejan las alturas al
   `aspect-ratio` de cada imagen (una foto vertical y otra apaisada en la misma
   fila no miden lo mismo, y la fila se descuadra). */
.malaga__mosaico {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows:
    clamp(13rem, 24vw, 21rem)
    clamp(11rem, 20vw, 17rem);
  gap: clamp(0.7rem, 1.6vw, 1.25rem);
}
.malaga__pieza {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-media);
  /* la altura la manda la fila de la rejilla, no la imagen */
  min-height: 0;
}
.malaga__pieza img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--curva-salida), filter var(--t-lento) var(--curva);
}
.malaga__pieza:hover img { transform: scale(1.05); }

.malaga__pieza--1 { grid-column: 1 / 8;  grid-row: 1; }
.malaga__pieza--2 { grid-column: 8 / 13; grid-row: 1; }
.malaga__pieza--3 { grid-column: 1 / 5;  grid-row: 2; }
.malaga__pieza--4 { grid-column: 5 / 13; grid-row: 2; }

.malaga__leyenda {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  padding: 0.42rem 0.9rem;
  border-radius: var(--r-full);
  background: rgba(8, 6, 4, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--linea);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--crema-300);
}

/* ==========================================================================
   12. VISÍTANOS
   ========================================================================== */

.visita__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* Lista de datos: dirección, horario, teléfono. */
.datos { display: grid; gap: var(--e-4); }
.dato { display: flex; gap: 1.1rem; }
.dato__icono {
  flex-shrink: 0;
  width: 2.85rem; height: 2.85rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--brasa-400);
  background: rgba(200, 149, 47, 0.06);
}
.dato__etiqueta {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brasa-500);
  margin-bottom: 0.2rem;
}
.dato__valor {
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.45;
  color: var(--crema-100);
}
.dato__valor a { border-bottom: 1px solid transparent; transition: border-color var(--t-rapido) var(--curva); }
.dato__valor a:hover { border-bottom-color: var(--brasa-500); }

/* Redes sociales: WhatsApp e Instagram, junto a los datos de contacto.
   Misma gramática visual que .dato__icono (círculo con borde fino y brasa),
   con el color de la marca solo al pasar el ratón: así conviven sin gritar. */
.redes { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.redes__enlace {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--brasa-400);
  background: rgba(200, 149, 47, 0.06);
  transition:
    background var(--t-rapido) var(--curva),
    color var(--t-rapido) var(--curva),
    border-color var(--t-rapido) var(--curva);
}
.redes__enlace:hover { color: #fff; }
.redes__enlace--whatsapp:hover { background: #25d366; border-color: #25d366; }
.redes__enlace--instagram:hover { background: #d6336c; border-color: #d6336c; }

/* Tarjetas de acción: reservas, reseñas. */
.accion-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.4rem, 3.5vw, 2.25rem);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--noche-600) 0%, var(--noche-800) 100%);
  transition: border-color var(--t-medio) var(--curva), transform var(--t-medio) var(--curva-salida), box-shadow var(--t-medio) var(--curva);
}
.accion-tarjeta:hover {
  border-color: var(--linea);
  transform: translateY(-4px);
  box-shadow: var(--sombra-brasa);
}
.accion-tarjeta__titulo { font-size: var(--t-xl); }
.accion-tarjeta__texto { font-size: var(--t-sm); color: var(--crema-500); line-height: 1.68; }
.accion-tarjeta .boton { align-self: flex-start; margin-top: 0.35rem; }

/* El bloque de reservas manda: fondo de latón. */
.accion-tarjeta--brasa {
  border-color: rgba(200, 149, 47, 0.45);
  background:
    radial-gradient(ellipse 80% 70% at 85% 10%, rgba(200, 149, 47, 0.2) 0%, transparent 62%),
    linear-gradient(160deg, var(--noche-500) 0%, var(--noche-800) 100%);
}

.acciones { display: grid; gap: clamp(1.15rem, 2.5vw, 1.75rem); }

/* Estrellas de reseñas. */
.estrellas { display: inline-flex; gap: 0.22rem; color: var(--brasa-400); }

/* ==========================================================================
   13. EMPLEADOS
   ========================================================================== */

.empleados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--noche-700) 0%, var(--noche-800) 60%, var(--noche-700) 100%);
}
.empleados__texto { max-width: 52ch; }
.empleados__titulo { font-size: var(--t-xl); margin-bottom: 0.5rem; }
.empleados__desc { font-size: var(--t-sm); color: var(--crema-500); }

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

.pie {
  position: relative;
  padding-block: var(--e-6) var(--e-4);
  border-top: 1px solid var(--linea-suave);
  background: var(--noche-900);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  padding-bottom: var(--e-5);
}
.pie__marca { display: flex; align-items: center; gap: 0.8rem; margin-bottom: var(--e-2); }
.pie__sello { width: 2.6rem; height: 2.6rem; }
.pie__nombre { font-family: var(--fuente-display); font-size: 1.5rem; font-weight: 600; }
.pie__desc { max-width: 40ch; font-size: var(--t-sm); color: var(--crema-500); line-height: 1.7; }

.pie__titulo {
  margin-bottom: var(--e-2);
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--brasa-500);
}
.pie__lista { display: grid; gap: 0.6rem; }
.pie__lista a, .pie__lista span {
  font-size: var(--t-sm);
  color: var(--crema-500);
  transition: color var(--t-rapido) var(--curva);
}
.pie__lista a:hover { color: var(--brasa-300); }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--t-xs);
  color: var(--crema-700);
}
.pie__legal-enlaces { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie__legal a:hover { color: var(--brasa-300); }

/* Aviso de imágenes provisionales. */
.pie__nota {
  margin-top: var(--e-2);
  font-size: 0.65rem;
  line-height: 1.6;
  color: var(--crema-700);
  opacity: 0.75;
  max-width: 60ch;
}

/* ==========================================================================
   15. BOTÓN FLOTANTE DE RESERVAS
   --------------------------------------------------------------------------
   Aparece al salir del héroe: la acción comercial siempre a un toque.
   ========================================================================== */

.flotante {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 2rem);
  bottom: clamp(0.9rem, 2.5vw, 2rem);
  z-index: var(--z-flotante);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--brasa-400), var(--brasa-600));
  color: var(--noche-900);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 34px -8px rgba(200, 149, 47, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem) scale(0.94);
  transition: opacity var(--t-medio) var(--curva),
              transform var(--t-medio) var(--curva-salida),
              visibility var(--t-medio),
              box-shadow var(--t-medio) var(--curva);
}
.flotante.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.flotante:hover { box-shadow: 0 16px 44px -10px rgba(200, 149, 47, 0.95); transform: translateY(-3px); }

/* ==========================================================================
   16. ANIMACIONES DE ENTRADA
   --------------------------------------------------------------------------
   Los elementos con data-aparecer entran al hacer scroll.
   El estado inicial solo se aplica si hay JS (clase .js en <html>), para que
   sin JS el contenido sea visible por defecto.
   ========================================================================== */

.js [data-aparecer] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.95s var(--curva-salida), transform 0.95s var(--curva-salida);
  transition-delay: var(--retardo, 0s);
  will-change: opacity, transform;
}
.js [data-aparecer].visible { opacity: 1; transform: none; }

/* Los marcos de imagen entran con un leve zoom hacia atrás. */
.js [data-aparecer="escala"] { transform: translateY(2rem) scale(0.965); }
.js [data-aparecer="escala"].visible { transform: none; }

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

/* --- Portátil estrecho --- */
@media (max-width: 1080px) {
  .nav__enlaces { display: none; }
  .estado { display: none; }
}

/* --- Tableta --- */
@media (max-width: 900px) {
  .hamburguesa { display: block; }
  /* Se oculta el botón de reserva de la barra —tanto activo como apagado—:
     en móvil el menú ya ofrece el enlace. Si solo se ocultara el activo, al
     apagar las reservas el botón reaparecería y empujaría la hamburguesa
     fuera de la pantalla. */
  .nav__acciones .boton--brasa,
  .nav__acciones .boton--apagado { display: none; }

  .dos-columnas { grid-template-columns: 1fr; gap: var(--e-4); }
  .dos-columnas--invertida .dos-columnas__texto { order: 0; }
  .marco--retrato img { aspect-ratio: 4 / 3; }

  .tres-momentos { grid-template-columns: 1fr; }

  .carta__rejilla { grid-template-columns: 1fr; }
  /* En tableta las dos tarjetas van lado a lado: hay que devolver las filas a
     `auto`, o el `1fr 1fr` heredado crea una segunda fila vacía con hueco. */
  .carta__lateral { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

  .visita__rejilla { grid-template-columns: 1fr; }

  /* Galería en tableta: dos columnas y mosaico simplificado. */
  .galeria {
    grid-template-columns: repeat(2, 1fr);
    /* El vino es la pieza mayor: a dos columnas completas necesita filas altas,
       o quedaría una franja de 3:1. El resto conserva las proporciones del
       mosaico de tableta anterior (grande y fachada a dos filas; desayuno,
       tapas y la banda inferior a una). */
    grid-template-areas:
      "vino     vino"
      "vino     vino"
      "grande   fachada"
      "grande   fachada"
      "desayuno tapas"
      "ancha    ancha";
    grid-template-rows:
      clamp(10rem, 30vw, 18rem)
      clamp(10rem, 30vw, 18rem)
      clamp(7rem, 11vw, 9rem)
      clamp(7rem, 11vw, 9rem)
      clamp(8rem, 13vw, 10rem)
      clamp(8rem, 13vw, 10rem);
  }
  .malaga__marca-agua { font-size: clamp(7rem, 40vw, 18rem); }

  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__marca-col { grid-column: span 2; }
}

/* --- Móvil --- */
@media (max-width: 640px) {
  :root { --seccion-y: clamp(3.5rem, 8vw, 5rem); }

  .marca__lugar { display: none; }
  .heroe { min-height: 92svh; padding-block: 7rem 3.5rem; }
  .heroe__lema { max-width: 100%; }
  .heroe__horario { gap: 0.75rem; padding: 0.6rem 1rem; font-size: var(--t-xs); }
  .heroe__horario .sep { display: none; }
  .heroe__acciones { gap: 0.7rem; }
  .heroe__acciones .boton { flex: 1 1 100%; }

  .cifras { gap: 1.25rem; }
  .cifra { flex: 1 1 40%; min-width: auto; }

  .carta__lateral { grid-template-columns: 1fr; grid-template-rows: auto; }

  .galeria {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "vino     vino"
      "vino     vino"
      "desayuno tapas"
      "fachada  fachada"
      "grande   grande"
      "ancha    ancha";
    grid-template-rows: repeat(6, 8.5rem);
  }

  /* Mosaico de Málaga en móvil: una columna, alturas fijas y sin huecos. */
  .malaga__mosaico { grid-template-columns: 1fr; grid-template-rows: repeat(4, clamp(10rem, 46vw, 15rem)); gap: 0.75rem; }
  .malaga__pieza--1,
  .malaga__pieza--2,
  .malaga__pieza--3,
  .malaga__pieza--4 { grid-column: 1; grid-row: auto; }

  /* Redes: misma fila en móvil, el flex envuelve por sí solo. */
  .redes { flex-wrap: wrap; }

  .pie__rejilla { grid-template-columns: 1fr; }
  .pie__marca-col { grid-column: span 1; }
  .pie__legal { flex-direction: column; align-items: flex-start; }

  .flotante { left: clamp(0.9rem, 4vw, 1.5rem); right: clamp(0.9rem, 4vw, 1.5rem); justify-content: center; }

  /* En móvil el dedo manda: el selector de idioma y la hamburguesa deben ser
     objetivos táctiles cómodos (mínimo 44 px de lado). */
  .idioma button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.7rem;
  }
  .idioma { padding: 0.15rem; }
  .hamburguesa { width: 2.75rem; height: 2.75rem; }
  .hamburguesa span:nth-child(1) { top: 1.02rem; }
  .hamburguesa span:nth-child(2) { top: 1.37rem; }
  .hamburguesa span:nth-child(3) { top: 1.72rem; }

  .visor__cerrar { top: 0.75rem; right: 0.75rem; }
}

/* ==========================================================================
   ACCESIBILIDAD: movimiento reducido
   --------------------------------------------------------------------------
   Si el usuario pide menos movimiento en su sistema, se apaga todo lo
   decorativo. La web sigue siendo perfectamente usable y vistosa.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .heroe__fondo img,
  .heroe__rayo,
  .heroe__scroll::after,
  .cinta__pista,
  .estado.abierto .estado__punto,
  .resplandor { animation: none !important; }

  .heroe__titulo .linea > span { transform: none; }
  .heroe__titulo {
    background: none;
    -webkit-text-fill-color: var(--crema-100);
    color: var(--crema-100);
  }

  .js [data-aparecer] { opacity: 1; transform: none; }
  .resplandor { display: none; }
}

/* Si el navegador no soporta backdrop-filter, oscurecemos más el fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.compacta { background: rgba(8, 6, 4, 0.97); }
  .heroe__horario { background: rgba(8, 6, 4, 0.82); }
  .momento__hora,
  .malaga__leyenda { background: rgba(8, 6, 4, 0.92); }
}

/* Impresión: la carta debe poder imprimirse en claro. */
@media print {
  .nav, .flotante, .grano, .resplandor, .visor, .heroe__scroll, .cinta { display: none !important; }
  body { background: #fff; color: #111; }
  .heroe { min-height: auto; padding: 1rem 0; }
  .heroe__fondo, .heroe__velo, .heroe__rayo { display: none; }
  .heroe__titulo, .dorado {
    color: #111 !important;
    -webkit-text-fill-color: #111;
    background: none;
  }
  .seccion, .malaga { background: #fff !important; padding-block: 1.25rem; }
  .momento, .tarjeta, .menu-dia, .accion-tarjeta {
    background: #fff !important;
    border-color: #ccc !important;
    break-inside: avoid;
  }
  .momento__texto, .tarjeta__texto, .casa__texto p, .malaga__texto, .pie__desc { color: #333 !important; }
}