/* ==========================================================================
   BENVOLENTIERI — secciones
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;              /* svh evita el salto por la barra del móvil */
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.hero-fondo { position: absolute; inset: 0; z-index: -2; }

.hero-foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.9s var(--seco);
}
.hero-foto.viva { opacity: 1; }
.hero-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ken Burns: muy lento y con poco recorrido. Las fotos vienen a ~1200 px,
     así que un zoom fuerte delataría la falta de resolución. */
  animation: kenburns 22s ease-out both;
}
.hero-foto.viva img { animation-play-state: running; }
@keyframes kenburns {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -1.6%, 0); }
}

/* Dos velos: uno vertical para el texto de abajo y otro lateral para el aire
   de la izquierda. Además tapan la falta de nitidez de los originales. */
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--carbon) 1%, rgba(11,13,10,.72) 32%, rgba(11,13,10,.18) 68%, rgba(11,13,10,.5) 100%),
    linear-gradient(105deg, rgba(11,13,10,.78) 0%, rgba(11,13,10,.28) 46%, transparent 74%);
}

.hero-cuerpo {
  position: relative;
  width: var(--ancho);
  margin-inline: auto;
  padding-block: clamp(7rem, 16vh, 11rem) clamp(6rem, 14vh, 9rem);
  max-width: 1280px;
}

.hero-ante {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--oro-claro);
  margin-bottom: clamp(1rem, 2.4vw, 1.7rem);
}

.hero h1 {
  font-size: var(--t-hero);
  line-height: .88;
  letter-spacing: -.035em;
  color: var(--marfil);
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}
/* El titular va envuelto en un <span> para poder cambiarlo de idioma sin
   destruir su estructura. Necesita caja propia porque dentro lleva un <em>
   que sí es de bloque. */
.hero h1 > span { display: block; }

.hero h1 em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: .42em;
  letter-spacing: .01em;
  color: var(--oro-claro);
  margin-top: .18em;
  text-shadow: none;
}

.hero-sub {
  margin-top: clamp(1.2rem, 2.6vw, 1.9rem);
  max-width: 40ch;
  font-size: var(--t-m);
  color: var(--txt-2);
  line-height: 1.7;
}

.hero-acc {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
}

/* Chips con los datos duros: nota de Google y ubicación. */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: clamp(1.8rem, 3.6vw, 2.8rem);
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
  border-top: 1px solid rgba(237,230,212,.13);
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.hero-chip { display: flex; align-items: center; gap: .5rem; }
.hero-chip strong { color: var(--marfil); font-weight: 500; }
.estrellas { color: var(--oro); letter-spacing: .1em; }

/* Indicador de scroll */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 2.6vw, 1.8rem);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--txt-3);
  transition: opacity var(--medio) var(--seco);
}
.hero-scroll.ido { opacity: 0; }
.hero-scroll i {
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--oro), transparent);
  transform-origin: top;
  animation: caer 2.3s var(--suave) infinite;
}
@keyframes caer {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(42px); opacity: 0; }
}

/* Puntitos que marcan qué foto del hero se ve. */
.hero-puntos {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(2rem, 6vw, 4rem);
  display: grid;
  gap: .7rem;
}
.hero-punto {
  width: 26px; height: 2px;
  background: rgba(237,230,212,.25);
  transition: background var(--medio) var(--seco), width var(--medio) var(--suave);
}
.hero-punto.viva { background: var(--oro); width: 40px; }

/* ==========================================================================
   INTRO EDITORIAL — «Una passione italiana»
   Composición asimétrica: la foto vertical se sale del carril del texto.
   ========================================================================== */

.passione { position: relative; overflow: hidden; }

.passione-rejilla {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.passione-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.passione-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Marco dorado desplazado: da profundidad sin una sombra pesada. */
.passione-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--oro);
  transform: translate(clamp(10px, 1.6vw, 20px), clamp(10px, 1.6vw, 20px));
  pointer-events: none;
  opacity: .5;
}

.passione-txt { max-width: 56ch; }
.passione h2 {
  font-size: var(--t-xxl);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  color: var(--tinta);
}
.passione p { margin-top: 1.3rem; }
.passione .firma { margin-top: clamp(1.6rem, 3vw, 2.2rem); display: block; }

/* Cifras: 5,0 en Google · 10 opiniones · 7 pizzas */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(22,24,15,.14);
}
.cifra-n {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--verde);
}
.cifra-t {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6B6C5C;
  margin-top: .5rem;
  line-height: 1.5;
}

/* ==========================================================================
   LA NOSTRA CUCINA
   ========================================================================== */

.cucina-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem);
}
.cucina-cab h2 { font-size: var(--t-xxl); margin-top: 1rem; }
.cucina-cab p { max-width: 34ch; }

.cucina-rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
/* La primera se levanta un poco: rompe la fila y evita el aire de plantilla.
   Va en `--desfase` y no en `transform` directo: el inclinado 3D también
   escribe `transform`, y si los dos compiten gana el ultimo y se pierde
   el escalonado. `05-efectos.css` los compone en una sola declaracion. */
.cucina-rejilla > :nth-child(odd) { --desfase: clamp(-28px, -2.4vw, 0px); }

/* ==========================================================================
   LA CARTA
   ========================================================================== */

.carta { position: relative; }

.carta-cab { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.carta-cab h2 { font-size: var(--t-xxl); margin-top: 1rem; }
.carta-cab p { margin: 1rem auto 0; max-width: 46ch; }

/* -- Pestañas */
.solapas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(22,24,15,.12);
}
.solapa {
  position: relative;
  padding: .7rem 1.15rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7A7B69;
  transition: color var(--corto) var(--seco);
}
.solapa:hover { color: var(--tinta); }
.solapa[aria-selected='true'] { color: var(--verde); }
.solapa::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -.95rem;
  width: 0; height: 2px;
  background: var(--verde);
  transform: translateX(-50%);
  transition: width var(--medio) var(--suave);
}
.solapa[aria-selected='true']::after { width: 62%; }
.solapa i {
  font-family: var(--serif);
  font-style: italic;
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--oro);
  display: block;
  margin-top: .1rem;
}

/* -- Panel */
.carta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.carta-panel[hidden] { display: none; }

/* El cambio de pestaña: entra deslizando y aclarando. */
.carta-panel { animation: entraPanel .5s var(--suave) both; }
@keyframes entraPanel {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

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

.plato {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .6rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(22,24,15,.16);
  transition: padding-left var(--medio) var(--suave);
}
.plato:hover { padding-left: .5rem; }
.plato:last-child { border-bottom: 0; }

.plato-n {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.42rem);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.25;
}
/* `display:block` es obligatorio aquí. Es un <span> dentro de un <div> normal,
   no de una rejilla, así que `grid-column` no hace absolutamente nada: sin el
   block la descripción se queda EN LÍNEA pegada al nombre del plato
   («MarinaraTomate, ajo y anchoas.»). */
.plato-d {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: #6A6B59;
  line-height: 1.5;
  margin-top: .18rem;
  max-width: 52ch;
}
/* El precio en cifra tabular para que la columna quede a plomo. */
.plato-p {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--verde);
  white-space: nowrap;
}
.plato-p sup { font-size: .62em; top: -.5em; position: relative; margin-right: 1px; }

/* Marca de la casa: una hoja pequeña, no una estrella de plantilla. */
.plato-fav {
  display: inline-block;
  width: .5rem; height: .5rem;
  margin-left: .5rem;
  border-radius: 50% 0;
  background: var(--oro);
  transform: rotate(-20deg);
  vertical-align: middle;
}

.grupo-t {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 2rem 0 .3rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(201,162,74,.35);
}
.grupo-t:first-child { margin-top: 0; }

/* -- Lateral con la foto y el aviso */
.carta-lado { position: sticky; top: 7rem; display: grid; gap: 1.4rem; }
/* Tope de altura: «Entradas» tiene 4 platos y la foto a 4:5 sobresalía por
   debajo de la lista, dejando un hueco muerto en la columna izquierda. */
.carta-lado-foto { aspect-ratio: 4 / 5; max-height: min(46vh, 420px); overflow: hidden; }
.carta-lado-foto img { width: 100%; height: 100%; object-fit: cover; }
.carta-lado-lema {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-l);
  color: var(--verde);
  line-height: 1.35;
}

.carta-pie {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(22,24,15,.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.carta-nota {
  font-family: var(--sans);
  font-size: .78rem;
  color: #7A7B69;
  max-width: 52ch;
}

/* ==========================================================================
   APERITIVO — la sección del bar, la más oscura del sitio
   ========================================================================== */

.aperitivo {
  position: relative;
  background: var(--carbon);
  overflow: hidden;
}
/* Mancha de color que respira. Fija y muy difusa: da profundidad sin coste. */
.aperitivo::before {
  content: '';
  position: absolute;
  width: 60vmax; height: 60vmax;
  top: -18vmax; right: -18vmax;
  background: radial-gradient(circle, rgba(178,91,52,.16), transparent 62%);
  animation: respirar 15s ease-in-out infinite alternate;
  pointer-events: none;
}
.aperitivo::after {
  content: '';
  position: absolute;
  width: 52vmax; height: 52vmax;
  bottom: -20vmax; left: -14vmax;
  background: radial-gradient(circle, rgba(30,91,55,.2), transparent 64%);
  animation: respirar 19s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
@keyframes respirar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 5%, 0) scale(1.14); }
}

.aperitivo-rejilla {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.aperitivo-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.aperitivo-foto img { width: 100%; height: 100%; object-fit: cover; }

.aperitivo h2 { font-size: var(--t-xxl); margin-top: 1rem; color: var(--marfil); }
.aperitivo .firma { display: block; margin-top: 1rem; }
.aperitivo p { margin-top: 1.3rem; }

.copas {
  display: grid;
  gap: .1rem;
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
}
.copa {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .5rem 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(237,230,212,.1);
}
.copa-n {
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 600;
  color: var(--marfil);
}
.copa-d {
  grid-column: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--txt-3);
}
.copa-p {
  grid-row: 1; grid-column: 2;
  font-family: var(--sans);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--oro);
}

/* ==========================================================================
   VINO — banda ancha con la foto de fondo
   ========================================================================== */

.vino {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.vino-fondo { position: absolute; inset: 0; z-index: -2; }
.vino-fondo img { width: 100%; height: 100%; object-fit: cover; }
.vino-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(11,13,10,.93) 0%, rgba(11,13,10,.74) 42%, rgba(107,31,43,.32) 100%);
}
.vino-txt { position: relative; max-width: 46ch; }
.vino h2 { font-size: var(--t-xxl); margin-top: 1rem; color: var(--marfil); }
.vino p { margin-top: 1.3rem; }

.vino-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.8rem;
}
.vino-lista li {
  padding: .5rem 1rem;
  border: 1px solid rgba(230,206,142,.3);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

/* ==========================================================================
   LA NOSTRA STORIA
   ========================================================================== */

.storia-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.storia h2 { font-size: var(--t-xxl); margin-top: 1rem; }
.storia p { margin-top: 1.3rem; }
.storia .firma { display: block; margin-top: 2rem; }
.storia-foto { aspect-ratio: 4 / 5; overflow: hidden; }
.storia-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Ruta España → Panamá. Cuenta la historia sin un párrafo más. */
.ruta {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
  margin-top: clamp(1.8rem, 3.4vw, 2.4rem);
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(22,24,15,.14);
  background: rgba(250,245,233,.5);
}
.ruta-sitio { display: grid; gap: .18rem; }
.ruta-sitio b {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tinta);
}
.ruta-sitio span {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7A7B69;
}
.ruta-flecha {
  flex: 1;
  height: 1px;
  min-width: 26px;
  background: repeating-linear-gradient(90deg,
    var(--oro) 0 5px, transparent 5px 10px);
  position: relative;
}
.ruta-flecha::after {
  content: '';
  position: absolute;
  right: -1px; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid var(--oro);
  border-right: 1px solid var(--oro);
  transform: translateY(-50%) rotate(45deg);
}

/* ==========================================================================
   GALERÍA — mosaico editorial con `columns`
   Sin cálculo en el scroll y funciona aunque el JS falle.
   ========================================================================== */

.galeria-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.galeria-cab h2 { font-size: var(--t-xxl); margin-top: 1rem; }

.mosaico {
  columns: 3;
  column-gap: clamp(.55rem, 1.1vw, .9rem);
}
.mosaico > * {
  break-inside: avoid;
  margin-bottom: clamp(.55rem, 1.1vw, .9rem);
}

.pieza {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--carbon-2);
  isolation: isolate;
}
.pieza img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--suave), filter var(--medio) var(--seco);
}
.pieza:hover img, .pieza:focus-visible img { transform: scale(1.06); }

.pieza::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,13,10,.8), transparent 55%);
  opacity: 0;
  transition: opacity var(--medio) var(--seco);
}
.pieza:hover::after, .pieza:focus-visible::after { opacity: 1; }

.pieza-pie {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 1rem 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--marfil);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--medio) var(--seco), transform var(--medio) var(--suave);
}
.pieza:hover .pieza-pie, .pieza:focus-visible .pieza-pie {
  opacity: 1; transform: none;
}

/* Al enfocar una foto, las hermanas se apagan. */
.mosaico:hover .pieza { filter: brightness(.62) saturate(.8); }
.mosaico:hover .pieza:hover { filter: none; }
.mosaico .pieza { transition: filter var(--medio) var(--seco); }

/* ==========================================================================
   OPINIONES
   ========================================================================== */

.opiniones { background: var(--carbon-2); }
.opiniones-cab { text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.opiniones-cab h2 { font-size: var(--t-xxl); margin-top: 1rem; color: var(--marfil); }

.nota-google {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.2rem;
  padding: .6rem 1.2rem;
  border: var(--borde);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-2);
}
.nota-google b { color: var(--marfil); font-size: 1.05rem; font-weight: 500; }

.carril {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1.2rem;
  /* Oculta la barra sin romper el desplazamiento por teclado ni el táctil. */
  scrollbar-width: none;
}
.carril::-webkit-scrollbar { display: none; }

.opinion {
  flex: 0 0 min(420px, 84vw);
  scroll-snap-align: center;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: var(--borde);
  background: linear-gradient(160deg, rgba(27,31,23,.85), rgba(18,21,15,.85));
}
.opinion-estrellas { color: var(--oro); letter-spacing: .18em; font-size: .95rem; }
.opinion-txt {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--txt);
}
.opinion-txt::before { content: '“'; color: var(--oro); margin-right: .1em; }
.opinion-txt::after  { content: '”'; color: var(--oro); }
.opinion-recorte {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.opinion-quien { margin-top: .2rem; }
.opinion-quien b {
  display: block;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  color: var(--marfil);
}
.opinion-quien span {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--txt-3);
}
.opinion-resp {
  margin-top: .4rem;
  padding: .9rem 1rem;
  border-left: 2px solid var(--verde-hoja);
  background: rgba(30,91,55,.1);
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
  color: var(--txt-2);
}
.opinion-resp b {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde-luz);
  margin-bottom: .3rem;
}

.carril-mandos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.4rem;
}
.carril-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(237,230,212,.2);
  border-radius: 50%;
  color: var(--txt-2);
  transition: background var(--corto) var(--seco), color var(--corto) var(--seco);
}
.carril-btn:hover { background: var(--oro); color: var(--carbon); border-color: var(--oro); }

/* ==========================================================================
   RESERVAS
   ========================================================================== */

.reservar { position: relative; overflow: hidden; }
.reservar-rejilla {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.reservar h2 { font-size: var(--t-xxl); margin-top: 1rem; }
.reservar .firma { display: block; margin-top: .9rem; }

.reservar-datos {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.8rem, 3.4vw, 2.4rem);
  padding-top: clamp(1.6rem, 3vw, 2rem);
  border-top: 1px solid rgba(22,24,15,.14);
}
.reservar-dato { display: flex; gap: .9rem; align-items: flex-start; }
.reservar-dato svg { width: 20px; height: 20px; color: var(--verde); flex-shrink: 0; margin-top: .2rem; }
.reservar-dato b {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7A7B69;
}
.reservar-dato span { font-family: var(--serif); font-size: 1.12rem; color: var(--tinta); }

/* -- Formulario */
.form {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  background: linear-gradient(165deg, rgba(250,245,233,.92), rgba(228,218,193,.6));
  border: 1px solid rgba(201,162,74,.4);
  box-shadow: 0 30px 70px -50px rgba(22,24,15,.7);
}
.form-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }

.campo { display: grid; gap: .45rem; }
.campo label {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6B6C5C;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .85rem .95rem;
  min-height: 48px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(22,24,15,.18);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--tinta);
  transition: border-color var(--corto) var(--seco), background var(--corto) var(--seco);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0;
  border-color: var(--verde);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30,91,55,.13);
}
.campo input::placeholder, .campo textarea::placeholder { color: #9A9B8A; }

/* Aviso de que el formulario abre WhatsApp: nadie debe pulsar a ciegas. */
.form-aviso {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: .76rem;
  line-height: 1.6;
  color: #6B6C5C;
}
.form-aviso svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .2rem; color: var(--verde); }

/* ==========================================================================
   DOVE SIAMO — ubicación y horarios
   ========================================================================== */

.dove { background: var(--carbon-2); }
.dove-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.dove h2 { font-size: var(--t-xxl); margin-top: 1rem; color: var(--marfil); }

.dove-datos { display: grid; gap: 1.4rem; margin-top: clamp(1.8rem, 3.4vw, 2.4rem); }
.dove-dato {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid rgba(237,230,212,.09);
}
.dove-dato:last-child { border-bottom: 0; padding-bottom: 0; }
.dove-dato svg { width: 22px; height: 22px; color: var(--oro); margin-top: .25rem; }
.dove-dato b {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: .3rem;
}
/* Solo los `span` y `a` que cuelgan DIRECTAMENTE del dato.
 * Con `.dove-dato span` a secas se llevaba por delante todo lo anidado: la
 * píldora «Por confirmar» salía en serif a 18 px y las horas se pintaban con
 * las cifras de estilo antiguo de Cormorant («I2:00» en vez de «12:00»).
 * Un selector de descendencia se cuela en sitios que no imaginas. */
.dove-dato > div > span,
.dove-dato > div > a { font-family: var(--serif); font-size: 1.14rem; color: var(--txt); }
.dove-dato a:hover { color: var(--oro-claro); }

/* -- Horarios */
.horario { display: grid; gap: .1rem; }
.horario-fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 1px solid rgba(237,230,212,.07);
  font-family: var(--sans);
  font-size: .92rem;
}
.horario-fila:last-child { border-bottom: 0; }
.horario-fila span:first-child { color: var(--txt-2); }
.horario-fila span:last-child { color: var(--marfil); font-variant-numeric: tabular-nums; }
.horario-fila.hoy span { color: var(--oro-claro); font-weight: 500; }
.horario-fila.hoy span:first-child::after {
  content: ' · hoy';
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.servicios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.4rem;
}
.servicio {
  padding: 1rem .9rem;
  border: var(--borde);
  text-align: center;
}
.servicio svg { width: 20px; height: 20px; color: var(--oro); margin: 0 auto .5rem; }
.servicio b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--marfil);
}
.servicio span {
  display: block;
  font-family: var(--sans);
  font-size: .74rem;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
  margin-top: .2rem;
}

/* -- Mapa
   La columna del mapa es bastante más corta que la de horarios y dejaba
   media sección vacía a la derecha. Pegajosa, acompaña la lectura. */
.dove-rejilla > :last-child { position: sticky; top: 7rem; }

.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: var(--borde);
  background: var(--carbon-3);
}
.mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) invert(.92) hue-rotate(180deg) contrast(.9); }

/* Marcador de posición hasta que el visitante acepta cargar el mapa: así no
   se llama a Google sin permiso y no cuesta nada al cargar la página. */
.mapa-tapa {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
  background:
    linear-gradient(rgba(11,13,10,.7), rgba(11,13,10,.85)),
    var(--carbon-3);
}
.mapa-tapa p { font-family: var(--sans); font-size: .85rem; color: var(--txt-2); max-width: 32ch; }

/* ==========================================================================
   PIE
   ========================================================================== */

.pie {
  position: relative;
  background: var(--carbon);
  padding-top: clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
}

.pie-lema {
  font-family: var(--display);
  font-size: clamp(1.7rem, 5.2vw, 4.2rem);
  line-height: 1.06;
  color: var(--marfil);
  text-align: center;
  max-width: 20ch;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}
.pie-lema em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--oro);
}

.pie-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: clamp(2.4rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(237,230,212,.1);
}
.pie h4 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1.1rem;
}
.pie-lista { display: grid; gap: .6rem; }
.pie-lista a, .pie-lista span { font-size: .92rem; color: var(--txt-2); }
.pie-lista a:hover { color: var(--marfil); }

.pie-marca { display: grid; gap: 1.1rem; align-content: start; }
.pie-marca svg { width: 64px; height: auto; }
.pie-marca p { font-size: .9rem; color: var(--txt-3); max-width: 34ch; }

.redes { display: flex; gap: .6rem; }
.red {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(237,230,212,.18);
  border-radius: 50%;
  color: var(--txt-2);
  transition: background var(--corto) var(--seco), color var(--corto) var(--seco),
              border-color var(--corto) var(--seco), transform var(--corto) var(--suave);
}
.red:hover {
  background: var(--oro); color: var(--carbon);
  border-color: var(--oro); transform: translateY(-3px);
}
.red svg { width: 18px; height: 18px; }

.pie-fondo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--sans);
  font-size: .76rem;
  color: var(--txt-3);
}

/* Tricolor italiano: tres milímetros de línea, nada más. */
.tricolor {
  display: inline-flex;
  width: 34px; height: 3px;
  vertical-align: middle;
  margin-right: .6rem;
}
.tricolor i { flex: 1; }
.tricolor i:nth-child(1) { background: #1E5B37; }
.tricolor i:nth-child(2) { background: var(--marfil); }
.tricolor i:nth-child(3) { background: #A62334; }

/* Aviso de demo. Es una pieza comercial: que quede claro. */
.aviso-demo {
  padding: .7rem 1rem;
  background: rgba(178,91,52,.14);
  border-top: 1px solid rgba(178,91,52,.3);
  font-family: var(--sans);
  font-size: .74rem;
  color: #C9A78F;
  text-align: center;
}
.aviso-demo a { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; }