@charset "UTF-8";
/* ==========================================================================
   Restaurant Pitín — Loncoche, La Araucanía
   Hoja de estilo única. Sin build, sin framework, sin dependencias.

   PALETA — de dónde sale cada color:
     fierro     #1A1310  la plancha negra de la cocina a leña
     fierro-2   #241A14  el mismo fierro un tono más arriba, para tarjetas
     fierro-3   #2F2218  campos de formulario sobre oscuro
     crema      #F7F0E2  el mantel de la mesa puesta
     crema-2    #EADFC9  esa crema más tostada, para bordes
     tinta      #2A211A  café de tabla de picar vieja, texto sobre claro
     greda      #A64B2A  la fuente de greda en que llega la cazuela
     greda-clara#C2603A  la misma greda donde le pega la luz
     caldo      #E3A455  el dorado del caldo de cazuela
     ají        #8E2F21  el ají casero que ponen en la mesa
     huerta     #4D5A33  el verde del cilantro y la huerta
     enlozado   #3D5A63  el azul del jarro enlozado de picada
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --fierro:       #1a1310;
  --fierro-2:     #241a14;
  --fierro-3:     #2f2218;
  --crema:        #f7f0e2;
  --crema-2:      #eadfc9;
  --tinta:        #2a211a;
  --tinta-suave:  #635649;
  --hueso:        #fcf8ee;
  --hueso-suave:  #d9cdb6;
  --greda:        #a64b2a;
  --greda-clara:  #c2603a;
  --caldo:        #e3a455;
  --aji:          #8e2f21;
  --huerta:       #4d5a33;
  --enlozado:     #3d5a63;

  /* Fraunces: serifa blanda con aire de carta de restaurante antiguo. Va de
     400 a 600; no declarar más peso que eso. Work Sans es la grotesca de
     cuerpo, variable de 300 a 700. */
  --fuente-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --ancho:         1180px;
  --ancho-angosto: 760px;
  /* Esquinas casi rectas: lenguaje de letrero y de mesón, no de app. */
  --radio:        2px;
  --radio-chico:  2px;

  /* Curva de salida: rápida al principio, se posa despacio. */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --sombra:       0 18px 48px -22px rgba(26, 19, 16, .42);
  --sombra-alta:  0 30px 70px -28px rgba(26, 19, 16, .55);
}

/* --------------------------------------------------------------------------
   2. RESET Y BASE
   -------------------------------------------------------------------------- */

/* Va temprano y con !important a propósito: si no, cualquier regla con
   display de más abajo le gana al atributo y el elemento reaparece. */
[hidden] { display: none !important; }

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

html {
  scroll-behavior: smooth;
  /* El header es fijo: sin esto, los anclajes dejan el título tapado. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  color: var(--tinta);
  background: var(--crema);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Mientras una foto no esté pegada todavía, el navegador dibuja el texto
   alternativo encima del placeholder y se ve como un error. Con el color en
   transparente se ve solo el degradado de la paleta, y el alt sigue ahí para
   los lectores de pantalla y para Google. */
.hero__fondo img,
.panel__foto img,
.galeria__foto img { color: transparent; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
}

p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--greda);
  outline-offset: 3px;
  border-radius: 3px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--greda);
  color: var(--hueso);
  padding: .8rem 1.4rem;
  text-decoration: none;
}
.saltar:focus { left: 0; }

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
.contenedor--angosto { width: min(100% - 2.5rem, var(--ancho-angosto)); }

/* --------------------------------------------------------------------------
   3. FONDO AMBIENTAL
   Cuatro capas, todas en CSS puro: ni canvas, ni librerías, ni un KB de red.
   Acá el tema no es niebla de lago: es una cocina trabajando.

     a) manchas   — masas de color de la paleta que derivan en ciclos largos
     b) vahos     — bandas de vapor que cruzan la pantalla de lado a lado
     c) especias  — motas tostadas en suspensión que suben muy despacio
     d) chispas   — el equivalente dentro de las zonas oscuras: puntos
                    cálidos de cocina a leña sobre UN pseudoelemento animado,
                    no decenas de nodos
   -------------------------------------------------------------------------- */
.humo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* --- a) manchas ----------------------------------------------------------- */
.humo__mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}

.humo__mancha--1 {
  width: 46vw; height: 46vw;
  top: -8vw; left: -10vw;
  background: radial-gradient(circle, rgba(166,75,42,.22) 0%, rgba(166,75,42,0) 70%);
  animation: derivar-1 82s ease-in-out infinite;
}
.humo__mancha--2 {
  width: 54vw; height: 54vw;
  top: 30%; right: -16vw;
  background: radial-gradient(circle, rgba(227,164,85,.20) 0%, rgba(227,164,85,0) 70%);
  animation: derivar-2 98s ease-in-out infinite;
}
.humo__mancha--3 {
  width: 40vw; height: 40vw;
  bottom: -12vw; left: 20%;
  background: radial-gradient(circle, rgba(77,90,51,.18) 0%, rgba(77,90,51,0) 70%);
  animation: derivar-3 88s ease-in-out infinite;
}
.humo__mancha--4 {
  width: 34vw; height: 34vw;
  top: 56%; left: -8vw;
  background: radial-gradient(circle, rgba(61,90,99,.18) 0%, rgba(61,90,99,0) 70%);
  animation: derivar-4 104s ease-in-out infinite;
}

@keyframes derivar-1 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(7vw, 5vw, 0) scale(1.15); }
}
@keyframes derivar-2 {
  0%, 100% { transform: translate3d(0,0,0) scale(1.05); }
  50%      { transform: translate3d(-9vw, -6vw, 0) scale(.92); }
}
@keyframes derivar-3 {
  0%, 100% { transform: translate3d(0,0,0) scale(.95); }
  50%      { transform: translate3d(5vw, -7vw, 0) scale(1.2); }
}
@keyframes derivar-4 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(8vw, -4vw, 0) scale(1.18); }
  66%      { transform: translate3d(3vw, 6vw, 0) scale(.9); }
}

/* --- b) vahos ------------------------------------------------------------- */
/* Bandas muy anchas y muy bajas: leídas de reojo son el vapor que sale de la
   cocina cuando levantan la tapa de la olla. Cruzan la pantalla entera. */
.humo__vaho {
  position: absolute;
  left: -60%;
  width: 75%;
  height: 16vh;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0;
  will-change: transform, opacity;
}
.humo__vaho--1 {
  top: 15%;
  background: linear-gradient(90deg, rgba(252,248,238,0) 0%, rgba(252,248,238,.30) 50%, rgba(252,248,238,0) 100%);
  animation: cruzar 66s linear infinite;
}
.humo__vaho--2 {
  top: 46%;
  height: 22vh;
  background: linear-gradient(90deg, rgba(217,205,182,0) 0%, rgba(217,205,182,.26) 50%, rgba(217,205,182,0) 100%);
  animation: cruzar 94s linear infinite -32s;
}
.humo__vaho--3 {
  top: 76%;
  height: 12vh;
  background: linear-gradient(90deg, rgba(252,248,238,0) 0%, rgba(252,248,238,.22) 50%, rgba(252,248,238,0) 100%);
  animation: cruzar 78s linear infinite -55s;
}

@keyframes cruzar {
  0%       { transform: translate3d(0, 0, 0);          opacity: 0; }
  12%      {                                            opacity: .55; }
  85%      {                                            opacity: .4; }
  100%     { transform: translate3d(220vw, -4vh, 0);   opacity: 0; }
}

/* --- c) especias ---------------------------------------------------------- */
/* Motas tostadas que suben sobre el fondo claro, como pimienta suspendida a
   contraluz. El desvío lateral de cada una es distinto para que no parezcan
   una fila de burbujas. */
.especias {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.especias span {
  position: absolute;
  bottom: -3vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(99,86,73,.5);
  opacity: 0;
  will-change: transform, opacity;
  animation: flotar linear infinite;
}

@keyframes flotar {
  0%   { transform: translate3d(0, 0, 0) scale(.5);                       opacity: 0; }
  8%   {                                                                  opacity: .7; }
  70%  {                                                                  opacity: .45; }
  100% { transform: translate3d(var(--desvio, 4vw), -108vh, 0) scale(1);  opacity: 0; }
}

.especias span:nth-child(1)  { left:  4%; --desvio:  5vw; animation-duration: 36s; animation-delay:  -2s; }
.especias span:nth-child(2)  { left: 11%; --desvio: -3vw; animation-duration: 47s; animation-delay: -14s; width: 2px; height: 2px; }
.especias span:nth-child(3)  { left: 18%; --desvio:  7vw; animation-duration: 29s; animation-delay: -25s; }
.especias span:nth-child(4)  { left: 24%; --desvio: -6vw; animation-duration: 55s; animation-delay:  -7s; width: 4px; height: 4px; }
.especias span:nth-child(5)  { left: 31%; --desvio:  2vw; animation-duration: 38s; animation-delay: -31s; width: 2px; height: 2px; }
.especias span:nth-child(6)  { left: 37%; --desvio:  9vw; animation-duration: 43s; animation-delay: -18s; }
.especias span:nth-child(7)  { left: 44%; --desvio: -4vw; animation-duration: 31s; animation-delay: -40s; }
.especias span:nth-child(8)  { left: 50%; --desvio:  6vw; animation-duration: 51s; animation-delay:  -5s; width: 2px; height: 2px; }
.especias span:nth-child(9)  { left: 56%; --desvio: -8vw; animation-duration: 36s; animation-delay: -22s; }
.especias span:nth-child(10) { left: 62%; --desvio:  3vw; animation-duration: 45s; animation-delay: -37s; width: 4px; height: 4px; }
.especias span:nth-child(11) { left: 68%; --desvio: -5vw; animation-duration: 33s; animation-delay: -11s; }
.especias span:nth-child(12) { left: 74%; --desvio:  8vw; animation-duration: 58s; animation-delay: -46s; width: 2px; height: 2px; }
.especias span:nth-child(13) { left: 80%; --desvio: -2vw; animation-duration: 40s; animation-delay: -28s; }
.especias span:nth-child(14) { left: 85%; --desvio:  5vw; animation-duration: 30s; animation-delay:  -9s; }
.especias span:nth-child(15) { left: 90%; --desvio: -7vw; animation-duration: 49s; animation-delay: -35s; width: 2px; height: 2px; }
.especias span:nth-child(16) { left: 95%; --desvio:  4vw; animation-duration: 37s; animation-delay: -20s; }
.especias span:nth-child(17) { left:  8%; --desvio: -9vw; animation-duration: 53s; animation-delay: -43s; width: 2px; height: 2px; }
.especias span:nth-child(18) { left: 71%; --desvio:  2vw; animation-duration: 42s; animation-delay: -16s; width: 4px; height: 4px; }

/* --- d) chispas ----------------------------------------------------------- */
/* Sobre fondo oscuro las motas oscuras desaparecen, así que las zonas negras
   llevan su propia capa: chispas de la cocina a leña hechas con degradados
   sobre un solo pseudoelemento. Dieciocho nodos más por sección sería un
   desperdicio. */
.seccion--oscura::after,
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(227,164,85,.8),  transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 62%, rgba(227,164,85,.55), transparent 100%),
    radial-gradient(1.8px 1.8px at 58% 27%, rgba(194,96,58,.6),   transparent 100%),
    radial-gradient(1.1px 1.1px at 77% 78%, rgba(227,164,85,.5),  transparent 100%),
    radial-gradient(1.5px 1.5px at 91% 41%, rgba(227,164,85,.65), transparent 100%),
    radial-gradient(1.3px 1.3px at 23% 88%, rgba(194,96,58,.45),  transparent 100%);
  background-size: 380px 460px;
  animation: chispear 40s linear infinite;
}
@keyframes chispear {
  from { background-position: 0 0; }
  to   { background-position: -46px 460px; }
}

/* --------------------------------------------------------------------------
   4. REVEALS AL SCROLL
   El estado oculto cuelga de .js. Si el JavaScript no corre, nada de esto
   aplica y la página se lee completa.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(7px);
  transition:
    opacity   .85s var(--curva),
    transform .85s var(--curva),
    filter    .85s var(--curva);
}
.js .reveal.visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFÍA COMPARTIDA
   -------------------------------------------------------------------------- */
.kicker {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aji);
  margin: 0 0 .9rem;
}
.kicker--claro { color: var(--caldo); }

.titulo-seccion {
  font-size: clamp(2rem, 4.6vw, 3.15rem);
  color: var(--tinta);
  margin: 0 0 1.1rem;
  position: relative;
  padding-bottom: 1.1rem;
}
.titulo-seccion--claro { color: var(--hueso); }

/* La línea que crece bajo el título cuando la sección entra en pantalla.
   El estado por defecto es la línea ya dibujada: sin JS no se pierde el
   detalle. Solo con .js parte en cero y crece al aparecer. */
.titulo-seccion::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 96px;
  background: linear-gradient(90deg, var(--greda), var(--caldo));
  transition: width 1.1s var(--curva) .25s;
}
.js .reveal .titulo-seccion::after         { width: 0; }
.js .reveal.visible .titulo-seccion::after { width: 96px; }

.seccion__cabecera--centrada .titulo-seccion::after { left: 50%; transform: translateX(-50%); }

.entradilla {
  font-size: 1.15rem;
  color: var(--tinta-suave);
  max-width: 62ch;
  margin: 0;
}
.entradilla--clara { color: var(--hueso-suave); }

/* Marca visual de dato de relleno: en la demo se ve un punto de greda al lado
   para poder decir en voz alta "esto va con sus datos reales". */
.es-ejemplo { position: relative; }
.es-ejemplo::before {
  content: '';
  position: absolute;
  left: -.85rem;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--greda);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   6. BOTONES
   Rectangulares y a ras: la referencia es el letrero atornillado sobre la
   puerta de la picada. Caja recta, versalitas espaciadas y un panel de color
   que sube desde abajo al pasar el mouse. Nada de píldoras que saltan.
   -------------------------------------------------------------------------- */
.boton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--fuente-cuerpo);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.85rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: color .45s var(--curva), border-color .45s var(--curva);
}

/* El panel que sube. z-index negativo dentro del propio botón (por eso el
   isolation de arriba): queda bajo el texto y sobre el fondo del botón. */
.boton::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--curva);
}
.boton:hover::before,
.boton:focus-visible::before { transform: scaleY(1); }

/* Primario: greda llena que se apaga a fierro y deja el texto color caldo. */
.boton--wa {
  background: var(--greda);
  color: var(--hueso);
  border-color: var(--greda);
}
.boton--wa::before { background: var(--fierro); }
.boton--wa:hover,
.boton--wa:focus-visible { color: var(--caldo); border-color: var(--fierro); }

/* Secundario: solo el contorno, y la greda lo rellena al pasar por encima. */
.boton--fantasma {
  color: var(--tinta);
  border-color: rgba(42,33,26,.3);
}
.boton--fantasma::before { background: var(--greda); }
.boton--fantasma:hover,
.boton--fantasma:focus-visible { color: var(--hueso); border-color: var(--greda); }

.seccion--oscura .boton--fantasma,
.hero .boton--fantasma {
  color: var(--hueso);
  border-color: rgba(252,248,238,.32);
}

.boton--grande { padding: 1.2rem 2.2rem; font-size: .78rem; }

.ico-wa { flex: none; }

/* --------------------------------------------------------------------------
   7. CABECERA
   -------------------------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .4s var(--curva),
              box-shadow .4s var(--curva),
              backdrop-filter .4s var(--curva);
}
.cabecera--fija {
  background: rgba(26,19,16,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(252,248,238,.09);
}

.cabecera__interior {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 76px;
}

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--hueso);
  margin-right: auto;
}
.marca__icono { color: var(--caldo); display: flex; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__texto strong {
  font-family: var(--fuente-titulo);
  font-size: 1.38rem;
  font-weight: 500;
  letter-spacing: .005em;
}
.marca__texto em {
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--hueso-suave);
}

.nav__lista { display: flex; gap: 1.7rem; }
.nav__lista a {
  text-decoration: none;
  color: var(--hueso);
  font-size: .92rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 3px;
  /* Sin esto, "La carta" se parte en dos líneas cuando la barra va justa. */
  white-space: nowrap;
}
.nav__lista a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--caldo);
  transition: width .3s var(--curva);
}
.nav__lista a:hover::after { width: 100%; }

.hamburguesa {
  display: none;
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 24px; height: 2px;
  background: var(--hueso);
  margin: 5px 0;
  transition: transform .3s var(--curva), opacity .3s var(--curva);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 0 0;
  background: var(--fierro);
  overflow: hidden;
}

.hero__fondo { position: absolute; inset: 0; }
.hero__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  /* La foto va casi entera y el contraste del texto lo pone el velo de abajo,
     no esta opacidad: bajarla mucho entierra una foto diurna en el negro. */
  opacity: .88;
  /* Deriva lentísima sobre la foto: en 44 s recorre un 2% de encuadre. No se
     nota mirándola, se nota si uno se queda un rato. */
  animation: vaiven 44s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes vaiven {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.1%, 0); }
}
/* Placeholder digno mientras no hay foto: si el archivo falta, se ve un
   degradado de la paleta y no un ícono roto sobre blanco. */
.hero__fondo {
  background:
    radial-gradient(120% 80% at 72% 18%, rgba(227,164,85,.4) 0%, rgba(26,19,16,0) 60%),
    linear-gradient(160deg, #4a2c1c 0%, #2c1c12 45%, var(--fierro) 100%);
}
/* Velo para que el texto se lea sobre cualquier foto. Cargado a la izquierda,
   que es donde está el titular: la derecha deja respirar la foto. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(26,19,16,.8) 0%, rgba(26,19,16,.46) 55%, rgba(26,19,16,.18) 100%),
    linear-gradient(to bottom, rgba(26,19,16,.55) 0%, rgba(26,19,16,.05) 40%, rgba(26,19,16,.88) 100%);
  z-index: 1;
}

.hero__interior {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

/* Cartel de estado del local, calculado con la hora real de Chile. Es una
   chapa rectangular, no una píldora. El punto respira cuando está abierto. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.3rem;
  padding: .5rem .95rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hueso);
  border: 1px solid rgba(252,248,238,.3);
  background: rgba(26,19,16,.45);
}
.estado__punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hueso-suave);
  flex: none;
}
.estado--abierto .estado__punto {
  background: #9dbf7b;
  box-shadow: 0 0 0 0 rgba(157,191,123,.6);
  animation: latir 2.6s ease-out infinite;
}
.estado--cerrado .estado__punto { background: #d0705f; }
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(157,191,123,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(157,191,123,0); }
  100% { box-shadow: 0 0 0 0 rgba(157,191,123,0); }
}
/* Mientras el horario no esté confirmado por el local, la chapa lleva el
   borde punteado de dato de ejemplo (el punto de la izquierda no cabe acá). */
.estado.es-ejemplo::before { display: none; }
.estado.es-ejemplo { border-style: dashed; }

.hero__titulo {
  font-size: clamp(2.6rem, 7.6vw, 5.1rem);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.04;
  margin: 0 0 1.5rem;
  color: var(--hueso);
}

/* Degradado "cazuela recién servida": el dorado del caldo arriba de la
   fuente, la greda del plato y el ají al fondo. Con @supports para que en un
   navegador viejo el titular quede blanco legible en vez de invisible. */
.degradado-cazuela { color: var(--hueso); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .degradado-cazuela {
    background: linear-gradient(103deg, #f7e4c2 0%, #eebd77 24%, #e3a455 42%, #c2603a 66%, #a64b2a 84%, #8e2f21 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero__bajada {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: rgba(252,248,238,.86);
  max-width: 56ch;
  margin: 0 0 2.2rem;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; }

.cifras {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--ancho));
  margin: 4.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(252,248,238,.14);
  border-block: 1px solid rgba(252,248,238,.14);
}
.cifras__item {
  background: var(--fierro);
  padding: 1.5rem 1rem;
  text-align: center;
}
.cifras__item b {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--caldo);
  line-height: 1.1;
}
.cifras__item span {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hueso-suave);
  margin-top: .35rem;
}

.hero__flecha {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 3;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
}
.hero__flecha span {
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--hueso-suave);
  border-bottom: 1.5px solid var(--hueso-suave);
  transform: rotate(45deg);
  animation: bajar 2.4s var(--curva) infinite;
}
@keyframes bajar {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: .45; }
  50%      { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   9. SECCIONES
   -------------------------------------------------------------------------- */
.seccion {
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}
.seccion--oscura {
  background: var(--fierro);
  color: var(--hueso);
}
.seccion__cabecera { margin-bottom: 3.5rem; }
.seccion__cabecera--centrada { text-align: center; }
.seccion__cabecera--centrada .entradilla { margin-inline: auto; }

/* --------------------------------------------------------------------------
   10. PANEL — foto a sangre fundida al fondo, alternando el lado
   El .reveal que se observa está en .panel__texto, nunca dentro de la foto:
   un elemento con máscara cerrada tiene área cero y no dispara nunca el
   IntersectionObserver, se queda invisible para siempre.
   -------------------------------------------------------------------------- */
.panel {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
  overflow: hidden;
}

.panel__foto {
  position: relative;
  min-height: 46vh;
  /* Placeholder de paleta mientras no está la foto. */
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.025) 0 2px,
      rgba(0,0,0,.025) 2px 5px),
    linear-gradient(160deg, var(--greda) 0%, var(--aji) 55%, var(--fierro) 100%);
}
.panel__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.panel__texto {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  width: min(100% - 2.5rem, 620px);
  margin-inline: auto;
}

/* En móvil la foto va arriba y se funde hacia abajo. */
.panel__foto {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

@media (min-width: 900px) {
  .panel { grid-template-columns: 1.08fr 1fr; align-items: stretch; }

  /* Por defecto: texto a la izquierda, foto a la derecha. */
  /* El min con resta deja siempre un respiro contra el borde en pantallas
     justas (1280): sin él, el texto tocaba el filo izquierdo. */
  .panel__texto { order: 1; margin: 0 0 0 auto; padding-inline: 0 4rem; width: min(100% - 2.5rem, 640px); }
  .panel__foto  { order: 2; min-height: 100%; }
  .panel__foto {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
            mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  }

  /* Invertido: foto a la izquierda. Se alterna sección a sección. */
  .panel--izq .panel__texto { order: 2; margin: 0 auto 0 0; padding-inline: 4rem 0; }
  .panel--izq .panel__foto  { order: 1; }
  .panel--izq .panel__foto {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 34%);
            mask-image: linear-gradient(to left, transparent 0%, #000 34%);
  }
}

/* --------------------------------------------------------------------------
   10b. LA HISTORIA — párrafos y línea de tiempo sobre fondo oscuro
   -------------------------------------------------------------------------- */
.historia__parrafo { color: var(--hueso-suave); max-width: 58ch; }

.hitos { display: grid; gap: 1.7rem; margin-top: 2.5rem; }
.hitos li {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 1.2rem;
  align-items: start;
  padding-bottom: 1.7rem;
  border-bottom: 1px solid rgba(252,248,238,.12);
}
.hitos li:last-child { border-bottom: 0; padding-bottom: 0; }
.hitos__dato {
  font-family: var(--fuente-titulo);
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--caldo);
  line-height: 1.3;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: 'onum' 1;
}
.hitos h3 {
  font-size: 1.12rem;
  color: var(--hueso);
  margin-bottom: .3rem;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  letter-spacing: 0;
}
.hitos p { margin: 0; font-size: .96rem; color: var(--hueso-suave); }

@media (max-width: 560px) {
  .hitos li { grid-template-columns: 1fr; gap: .3rem; }
}

/* --------------------------------------------------------------------------
   11. LA CARTA
   Escrita entera en el HTML. Una columna en el celular (se lee con una mano),
   dos en escritorio. Los precios llevan numerales elegantes y puntos de guía
   hasta el nombre del plato, como en las cartas impresas de verdad.
   -------------------------------------------------------------------------- */
.carta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.8rem 4rem;
}

.carta__seccion h3 {
  font-size: 1.55rem;
  color: var(--tinta);
  margin-bottom: .35rem;
}
.carta__nota-seccion {
  margin: 0 0 1.3rem;
  font-size: .88rem;
  color: var(--tinta-suave);
}

.platos { display: grid; gap: 1.15rem; }

.plato__linea {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.plato__nombre {
  font-family: var(--fuente-cuerpo);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tinta);
}
/* Los puntos de guía entre el plato y el precio. */
.plato__puntos {
  flex: 1;
  border-bottom: 2px dotted rgba(99,86,73,.38);
  transform: translateY(-4px);
  min-width: 1.5rem;
}
.plato__precio {
  font-family: var(--fuente-titulo);
  font-size: 1.18rem;
  color: var(--greda);
  white-space: nowrap;
  /* Numerales a la antigua: los precios se ven de carta cara, no de boleta. */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: 'onum' 1;
}
.plato__detalle {
  margin: .15rem 0 0;
  font-size: .92rem;
  color: var(--tinta-suave);
  max-width: 52ch;
}

/* El precio de ejemplo se marca en el propio número: subrayado punteado, y el
   punto de la izquierda no se dibuja porque acá quedaría volando en la guía. */
.plato__precio.es-ejemplo::before { display: none; }
.plato__precio.es-ejemplo {
  border-bottom: 1px dashed rgba(166,75,42,.55);
}

/* El menú del día va destacado en una tabla propia con borde de greda. */
.menu-dia {
  grid-column: 1 / -1;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid rgba(166,75,42,.35);
  background: rgba(255,255,255,.5);
  border-radius: var(--radio);
}
.menu-dia__encabezado {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-bottom: .7rem;
}
.menu-dia__encabezado h3 { font-size: 1.7rem; }
.menu-dia__precio {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  color: var(--greda);
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: 'onum' 1;
}
.menu-dia__precio.es-ejemplo::before { display: none; }
.menu-dia__precio.es-ejemplo { border-bottom: 1px dashed rgba(166,75,42,.55); }
.menu-dia p { margin: 0; color: var(--tinta-suave); max-width: 70ch; }

.nota-carta {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--crema-2);
  font-size: .92rem;
  color: var(--tinta-suave);
  text-align: center;
}

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

/* --------------------------------------------------------------------------
   12. RESEÑAS — sección oscura
   Números reales de Google, Facebook y TripAdvisor, más el premio de
   Sernatur. Nada de testimonios inventados.
   -------------------------------------------------------------------------- */
.notas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(252,248,238,.14);
  border: 1px solid rgba(252,248,238,.14);
  margin-bottom: 3rem;
}
.nota {
  background: var(--fierro-2);
  padding: 1.9rem 1.6rem;
  text-align: center;
}
.nota b {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 2.3rem;
  font-weight: 400;
  color: var(--caldo);
  line-height: 1.05;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: 'onum' 1;
}
.nota span {
  display: block;
  margin-top: .5rem;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hueso-suave);
}
.nota a { color: inherit; text-decoration: none; }
.nota a:hover { color: var(--caldo); }

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

/* El premio de Sernatur va como placa aparte, ancha. */
.premio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  align-items: center;
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(227,164,85,.3);
  background: rgba(227,164,85,.07);
  margin-bottom: 3rem;
}
.premio__laurel {
  font-family: var(--fuente-titulo);
  font-size: 2.6rem;
  color: var(--caldo);
  line-height: 1;
}
.premio h3 {
  font-size: 1.25rem;
  color: var(--hueso);
  margin-bottom: .25rem;
}
.premio p { margin: 0; font-size: .95rem; color: var(--hueso-suave); }

.resenas { display: grid; gap: 1.2rem; }
.resena {
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(252,248,238,.14);
  background: var(--fierro-2);
}
.resena blockquote {
  margin: 0 0 .8rem;
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--hueso);
}
.resena p { margin: 0 0 .8rem; font-size: .98rem; color: var(--hueso-suave); }
.resena footer {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--caldo);
}
.resena footer a { color: inherit; }

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

/* --------------------------------------------------------------------------
   13. EVENTOS — banda clara angosta
   -------------------------------------------------------------------------- */
.eventos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem 1.8rem;
  margin: 2.4rem 0;
}
.evento__ico {
  display: block;
  font-size: 1.2rem;
  color: var(--greda);
  margin-bottom: .45rem;
}
.evento h3 {
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: .2rem;
}
.evento p { margin: 0; font-size: .9rem; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   14. RESERVAS POR WHATSAPP — sin backend
   -------------------------------------------------------------------------- */
.cotizador {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid rgba(252,248,238,.14);
  border-radius: var(--radio);
  background: var(--fierro-2);
}
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hueso-suave);
}
.opcional { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }

.campo input,
.campo select,
.campo textarea {
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  color: var(--hueso);
  background: var(--fierro-3);
  border: 1px solid rgba(252,248,238,.16);
  border-radius: var(--radio-chico);
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .3s var(--curva), background-color .3s var(--curva);
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: rgba(227,164,85,.45); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--caldo);
  background: #3a2b1d;
}
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(217,205,182,.5); }
/* El icono del selector de fecha es negro sobre fondo oscuro y se pierde. */
.campo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); cursor: pointer; }

.cotizador__resumen {
  padding: 1rem 1.1rem;
  border-radius: var(--radio-chico);
  background: rgba(227,164,85,.08);
  border: 1px solid rgba(227,164,85,.2);
}
.cotizador__lineas { margin: 0; font-size: .93rem; color: var(--hueso-suave); }
.cotizador__lineas b { color: var(--caldo); font-weight: 600; }

.cotizador__acciones { align-items: flex-start; }
.cotizador__error {
  margin: .8rem 0 0;
  font-size: .88rem;
  color: #f0a58f;
}

.nota-reserva {
  margin: 1.6rem 0 0;
  font-size: .85rem;
  color: rgba(217,205,182,.75);
  text-align: center;
}

@media (max-width: 640px) {
  .cotizador { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   15. GALERÍA
   Cada hueco con su propia mezcla de degradados + veta fina: tres degradados
   idénticos seguidos se leen como un error de carga.
   -------------------------------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.galeria__foto {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  min-height: 220px;
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(145deg, var(--greda) 0%, var(--fierro-3) 60%, var(--aji) 100%);
}
.galeria__foto:nth-child(2) {
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(160deg, var(--caldo) 0%, var(--greda) 55%, var(--fierro-3) 100%);
}
.galeria__foto:nth-child(3) {
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(125deg, var(--huerta) 0%, var(--fierro-3) 58%, var(--greda) 100%);
}
.galeria__foto:nth-child(4) {
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(150deg, var(--enlozado) 0%, var(--fierro-3) 55%, var(--aji) 100%);
}
.galeria__foto:nth-child(5) {
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(140deg, var(--aji) 0%, var(--greda) 50%, var(--caldo) 100%);
}
.galeria__foto:nth-child(6) {
  background:
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.028) 0 2px,
      rgba(0,0,0,.028) 2px 5px),
    linear-gradient(155deg, var(--fierro-3) 0%, var(--huerta) 55%, var(--enlozado) 100%);
}

/* La primera foto manda: ocupa doble ancho y doble alto en escritorio. */
@media (min-width: 700px) {
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .galeria__foto--principal { grid-column: span 2; grid-row: span 2; }
}

.galeria__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--curva);
}
.galeria__foto:hover img { transform: scale(1.05); }

/* Sin el archivo, la imagen se retira del todo y queda el degradado solo. Sin
   esto el navegador estampa su ícono de imagen rota sobre el placeholder. */
.sin-foto img { display: none; }

/* Mientras la foto no está pegada, el hueco dice QUÉ foto va ahí, con el
   mismo lenguaje punteado de los datos de ejemplo: así la demo se lee como
   "esto se completa con sus fotos reales", no como imágenes caídas. El texto
   sale de data-pendiente y solo aparece bajo .sin-foto: al pegar el archivo,
   la chapa desaparece sola. */
.galeria__foto::after,
.panel__foto::after {
  content: attr(data-pendiente);
  position: absolute;
  left: .9rem;
  bottom: .9rem;
  z-index: 1;
  display: none;
  padding: .45rem .8rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hueso);
  background: rgba(26,19,16,.55);
  border: 1px dashed rgba(252,248,238,.45);
  max-width: calc(100% - 1.8rem);
}
/* En el panel de la historia la máscara funde el borde izquierdo (y el de
   abajo en móvil): la chapa va arriba a la derecha, donde nada la borra. */
.panel__foto::after { left: auto; bottom: auto; right: .9rem; top: .9rem; }

.galeria__foto.sin-foto::after,
.panel__foto.sin-foto::after { display: inline-block; }

/* --------------------------------------------------------------------------
   16. CÓMO LLEGAR
   -------------------------------------------------------------------------- */
.llegar { display: grid; gap: 2.5rem; }

.datos-llegada {
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem 1.5rem;
  margin: 1.8rem 0 2rem;
}
.datos-llegada dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aji);
  margin-top: 1rem;
}
.datos-llegada dd { margin: 0; color: var(--tinta-suave); }

.mapa {
  position: relative;
  min-height: 380px;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--crema-2);
  background: linear-gradient(150deg, var(--enlozado) 0%, var(--huerta) 55%, var(--fierro-3) 100%);
}
.mapa__aviso {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  border: 0;
  background: rgba(26,19,16,.45);
  color: var(--hueso);
  cursor: pointer;
  font-family: var(--fuente-cuerpo);
  transition: background-color .3s var(--curva);
}
.mapa__aviso:hover { background: rgba(26,19,16,.3); }
.mapa__ico { font-size: 2rem; }
.mapa__texto { display: flex; flex-direction: column; gap: .2rem; }
.mapa__texto b { font-size: 1.05rem; }
.mapa__texto em { font-style: normal; font-size: .84rem; color: var(--hueso-suave); }
.mapa__marco { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

@media (min-width: 900px) {
  .llegar { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start; }
  .datos-llegada { grid-template-columns: 150px 1fr; }
  .datos-llegada dt { margin-top: .55rem; }
  .datos-llegada dd { margin-top: .55rem; }
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .6rem; }
.faq__item {
  border: 1px solid var(--crema-2);
  border-radius: var(--radio-chico);
  background: rgba(255,255,255,.45);
  overflow: hidden;
  transition: border-color .3s var(--curva);
}
.faq__item[open] { border-color: rgba(166,75,42,.4); }
.faq__item summary {
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.2rem;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  position: absolute;
  right: 1.3rem;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--greda);
  border-bottom: 1.5px solid var(--greda);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--curva);
}
.faq__item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq__item p {
  margin: 0;
  padding: 0 1.2rem 1.2rem;
  color: var(--tinta-suave);
  font-size: .96rem;
}
/* La tarjeta recorta lo que se salga, así que acá el dato de ejemplo no se
   marca con el punto de afuera sino con el borde izquierdo. */
.faq__item.es-ejemplo::before { display: none; }
.faq__item.es-ejemplo {
  border-left: 3px solid rgba(166,75,42,.5);
  border-left-style: dashed;
}

/* --------------------------------------------------------------------------
   18. CONTACTO Y PIE
   -------------------------------------------------------------------------- */
.contacto { display: grid; gap: 0; }
.contacto__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(252,248,238,.12);
}
.contacto__item:last-child { border-bottom: 0; }
.contacto__etiqueta {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--caldo);
}
.contacto__valor {
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--hueso);
  text-decoration: none;
}
a.contacto__valor { transition: color .3s var(--curva); }
a.contacto__valor:hover { color: var(--caldo); }
.contacto__redes { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 1.1rem; }
.contacto__redes a { text-decoration: none; transition: color .3s var(--curva); }
.contacto__redes a:hover { color: var(--caldo); }

@media (min-width: 700px) {
  .contacto__item { grid-template-columns: 180px 1fr; align-items: baseline; gap: 1.5rem; }
}

.pie {
  position: relative;
  z-index: 1;
  background: var(--fierro);
  color: var(--hueso-suave);
  padding: 2.2rem 0;
  border-top: 1px solid rgba(252,248,238,.1);
}
.pie__interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  font-size: .85rem;
}
.pie p { margin: 0; }
.pie__marca { color: var(--hueso); }

/* --------------------------------------------------------------------------
   19. ACCESO FIJO A WHATSAPP
   Placa rectangular anclada al borde, no la burbuja verde de siempre.
   -------------------------------------------------------------------------- */
.wa-fijo {
  position: fixed;
  right: 0;
  bottom: 2.2rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.3rem;
  background: var(--fierro);
  color: var(--hueso);
  text-decoration: none;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid rgba(252,248,238,.16);
  border-right: 0;
  transition: background-color .4s var(--curva), color .4s var(--curva);
}
.wa-fijo svg { flex: none; color: var(--caldo); transition: color .4s var(--curva); }
.wa-fijo:hover { background: var(--greda); color: var(--hueso); }
.wa-fijo:hover svg { color: var(--hueso); }

/* En el celular pasa a ser una barra al pie: es donde el pulgar llega solo. */
@media (max-width: 700px) {
  .wa-fijo {
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;
    border: 0;
    border-top: 1px solid rgba(252,248,238,.16);
    padding: 1.05rem 1rem;
  }
  /* Sin esto la barra tapa el final del pie. */
  .pie { padding-bottom: 5rem; }
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE DE NAVEGACIÓN
   -------------------------------------------------------------------------- */
@media (max-width: 940px) {
  .hamburguesa { display: block; }
  .cabecera__cta { display: none; }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    background: rgba(26,19,16,.97);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(252,248,238,.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height .42s var(--curva);
  }
  .nav--abierto { max-height: 400px; }
  .nav__lista { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1.4rem; }
  .nav__lista a { display: block; padding: .85rem 0; font-size: 1.05rem; }

  .cifras { grid-template-columns: repeat(2, 1fr); margin-top: 3rem; }
  .hero { padding-top: 6.5rem; }
}

@media (max-width: 560px) {
  .hero__acciones .boton { width: 100%; }
  .premio { grid-template-columns: 1fr; gap: .6rem; }
}

/* --------------------------------------------------------------------------
   21. MOVIMIENTO REDUCIDO
   Se apaga lo intrusivo: los bucles del humo, las chispas y el vaivén del
   hero. Los fundidos y los hovers se quedan, porque si se apagan todos el
   sitio se ve muerto y en muchos Windows esta preferencia viene de fábrica.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Se apagan todos los bucles: manchas, vahos, chispas, el vaivén del hero,
     la flecha y el pulso del cartel. Las manchas quedan quietas, que igual
     dan profundidad. */
  .humo__mancha,
  .humo__vaho,
  .hero__fondo img,
  .hero__flecha span,
  .estado--abierto .estado__punto,
  .seccion--oscura::after,
  .hero::after { animation: none; }

  /* Las especias sí se retiran enteras: son partículas, justo lo que molesta. */
  .especias { display: none; }

  /* Los vahos sin animación se quedarían congelados fuera de cuadro con
     opacidad 0, así que se les da una posición fija y visible. */
  .humo__vaho { opacity: .35; transform: translate3d(90vw, 0, 0); }

  /* El fundido se mantiene; se van el desplazamiento y el desenfoque. */
  .js .reveal { transform: none; filter: none; transition: opacity .6s ease; }

  .galeria__foto:hover img { transform: none; }
}