/* ==========================================================================
   THE BARBER SEVILLA · hoja común del rediseño (15-09-2026)

   Dirección aprobada: thecodtlabs-audit/the-barber-rediseno/direction-approved.md
   La MARCA es la del dueño y no se toca: carbón, dorado y crema; Playfair Display
   para titulares, Source Serif 4 para leer, Geist para etiquetas y cifras, Hanken
   Grotesk para la marca. Motivos sacados del propio local:
     · la BALDOSA hidráulica del suelo, como filete fino entre secciones;
     · la TARIFA en pizarra con puntos guía, como el cartel de toda barbería;
     · el equipo ENMARCADO, como los retratos de la pared;
     · la foto del local con una tarjeta encima.
   La PORTADA es la de antes (foto a sangre y texto centrado), por decisión de Ian.

   Reglas que no se rompen: texto ≥ 12 px, contraste ≥ 4,5:1, nada se anima si
   el visitante pide menos movimiento, y sin JavaScript todo se ve.
   OJO: se sirve con caché inmutable de un año. Al tocarla, subir ?v= en las páginas.
   ========================================================================== */

:root {
  --carbon: #16130f;
  --carbon-2: #1e1b17;
  --carbon-3: #2A2924;
  --carbon-hondo: #100e0a;
  --oro: #c9a84c;
  --oro-claro: #dcc07a;
  --oro-texto: #7f6419;          /* dorado para texto sobre crema: 5,1:1 */
  --crema: #F5F2ED;
  --arena: #EDE8DF;
  --claro: rgba(245, 242, 237, 0.86);
  --tenue: rgba(245, 242, 237, 0.66);
  --oscuro-2: rgba(22, 19, 15, 0.76);
  --linea-oro: rgba(201, 168, 76, 0.32);
  --linea-clara: rgba(245, 242, 237, 0.12);
  --linea-oscura: rgba(22, 19, 15, 0.16);
  --f-titular: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-texto: 'Source Serif 4', Georgia, serif;
  --f-eti: 'Geist', ui-monospace, 'SFMono-Regular', monospace;
  --f-marca: 'Hanken Grotesk', system-ui, sans-serif;
  --ancho: 1320px;
  --lado: clamp(18px, 4vw, 48px);
  --alto-barra: 64px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--carbon);
  color: var(--crema);
  font: 400 17px/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* 02-10-2026 · Cifras de caja alta en TODA la web. Playfair trae por defecto
     las de estilo antiguo (el 3 y el 9 bajan de la línea): «13€» o «Desde 2012»
     se leían como plantilla. Source Serif y Geist ya son de caja alta: a ellas
     no les cambia nada. OJO: el atajo `font:` REINICIA esto, así que cada regla
     que pone Playfair con `font:` lo repite detrás (la prueba lo vigila). Los
     precios, además, de ancho fijo. */
  font-variant-numeric: lining-nums;
  font-synthesis: none;
}
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
[id] { scroll-margin-top: 88px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--lado); }
.eti {
  font: 600 12px/1.35 var(--f-eti);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eti-num { display: inline-flex; align-items: center; gap: 12px; color: var(--oro); }
.eti-num .num { font-variant-numeric: tabular-nums; }
/* Sin la raya de delante (16-09-2026, Ian): la etiqueta se sostiene sola. */
.seccion-clara .eti-num, .seccion-arena .eti-num { color: var(--oro-texto); }

/* ── Botones ──────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 13px/1.2 var(--f-eti);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.15s;
}
.boton:active { transform: scale(0.98); }
.boton-oro { background: var(--oro); color: var(--carbon); }
.boton-oro:hover { background: var(--oro-claro); }
.boton-linea { border-color: rgba(245, 242, 237, 0.34); color: var(--crema); }
.boton-linea:hover { border-color: var(--oro); color: var(--oro); }
.boton-linea-oscura { border-color: rgba(22, 19, 15, 0.4); color: var(--carbon); }
.boton-linea-oscura:hover { border-color: var(--carbon); background: var(--carbon); color: var(--crema); }
.boton-grande { min-height: 60px; padding: 0 36px; font-size: 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1.3 var(--f-eti);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.enlace-flecha:hover { color: var(--oro); }

/* ── Barra superior (teléfono, dirección, horario) · solo en pantallas anchas ── */
.util { background: var(--carbon-hondo); border-bottom: 1px solid var(--linea-clara); color: var(--tenue); }
.util .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.util a { text-decoration: none; }
.util a:hover { color: var(--oro); }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cab {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 19, 15, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea-clara);
  transition: box-shadow 0.3s;
}
.cab.con-sombra { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.cab .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.cab-marca {
  font: 700 18px/1 var(--f-marca);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
  white-space: nowrap;
}
.cab-nav { display: none; gap: 30px; }
.cab-nav a { color: var(--claro); text-decoration: none; }
.cab-nav a:hover, .cab-nav a[aria-current="page"] { color: var(--oro); }
.cab-der { display: flex; align-items: center; gap: 20px; }
.cab-tel { display: none; color: var(--claro); text-decoration: none; font: 500 14px/1 var(--f-eti); letter-spacing: 0.06em; }
.cab-tel:hover { color: var(--oro); }
.cab .boton { min-height: 44px; padding: 0 22px; font-size: 12px; }
@media (min-width: 640px) { .cab-tel { display: inline; } }
@media (min-width: 1080px) { .cab-nav { display: flex; } }

/* ── La baldosa: el suelo del local, como filete fino ─────────────────────
   Primera versión: 56 px de alto con cuartos de círculo en gris. Cortaba la
   lectura como un parche; ahora es una cenefa de 20 px, solo pétalos dorados. */
.baldosa {
  height: 20px;
  background-color: var(--carbon-hondo);
  background-size: 20px 20px;
  background-position: center;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 56 56'%3E%3Cg fill='%23c9a84c' fill-opacity='0.8'%3E%3Cellipse cx='28' cy='16' rx='5' ry='10'/%3E%3Cellipse cx='28' cy='40' rx='5' ry='10'/%3E%3Cellipse cx='16' cy='28' rx='10' ry='5'/%3E%3Cellipse cx='40' cy='28' rx='10' ry='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Secciones ────────────────────────────────────────────────────────── */
.seccion { padding-block: clamp(64px, 9vw, 128px); }
.seccion-clara { background: var(--crema); color: var(--carbon); }
.seccion-arena { background: var(--arena); color: var(--carbon); }
.seccion-oscura { background: var(--carbon); color: var(--crema); }
.titulo-seccion {
  font: 400 clamp(34px, 4.8vw, 66px)/1.06 var(--f-titular); font-variant-numeric: lining-nums;
  letter-spacing: -0.015em;
}
.cabecera-seccion { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 64px); }
.cabecera-seccion p.intro { max-width: 46ch; font-size: 18px; color: var(--tenue); }
.seccion-clara .cabecera-seccion p.intro { color: var(--oscuro-2); }
.pie-foto { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--tenue); }
.seccion-clara .pie-foto { color: var(--oscuro-2); }

/* ── Portada: la de antes, foto a sangre y texto centrado ─────────────── */
.portada {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(560px, 88vh, 920px);
  overflow: hidden;
  background: var(--carbon);
  text-align: center;
}
.portada-fondo { position: absolute; inset: 0; z-index: -1; }
.portada-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0.7; }
.portada-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 19, 15, 0.45) 0%, rgba(22, 19, 15, 0.15) 45%, rgba(22, 19, 15, 0.6) 100%);
}
.portada-contenido { display: grid; justify-items: center; padding-block: clamp(56px, 9vw, 112px); }
.portada-contenido h1, .portada-contenido p { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 0, 0, 0.6); }
.hero-nota {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 9px 20px;
  border: 1px solid rgba(201, 168, 76, 0.7);
  border-radius: 999px;
  background: rgba(22, 19, 15, 0.6);
  color: var(--oro);
  font: 600 12px/1.2 var(--f-eti);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.hero-nota:hover { background: rgba(201, 168, 76, 0.2); border-color: var(--oro); }
.hero-nota-estrella { font-size: 15px; letter-spacing: 0; }
.portada-titulo {
  max-width: 14ch;
  font: 400 clamp(46px, 8vw, 112px)/1.06 var(--f-titular); font-variant-numeric: lining-nums;
  letter-spacing: -0.015em;
  color: #fff;
}
.portada-entradilla { margin-top: 26px; max-width: 42ch; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.5; color: rgba(245, 242, 237, 0.9); }
.portada .acciones { justify-content: center; margin-top: 40px; gap: 16px; }
/* 02-10-2026 · Eran los únicos botones de la web en Playfair negrita y con
   esquinas de 8 px: el resto (cabecera, carta, cierre, reserva) son píldoras en
   Geist. Mismo lenguaje que todos; conservan el tamaño grande de la portada. */
.boton-portada {
  min-height: 60px;
  padding: 0 38px;
  font-size: 14px;
}
.boton-portada.boton-linea { border-color: rgba(255, 255, 255, 0.28); background: rgba(22, 19, 15, 0.2); color: #fff; }
.boton-portada.boton-linea:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.portada-direccion { margin-top: 30px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); }
.portada-direccion a { text-decoration: none; }
.portada-direccion a:hover { color: var(--oro); }

/* ── Franja de datos bajo la portada ──────────────────────────────────── */
.ficha { background: var(--carbon-2); border-top: 1px solid var(--linea-oro); border-bottom: 1px solid var(--linea-clara); }
.ficha ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--ancho);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ficha li { padding: 34px var(--lado) 36px; border-right: 1px solid var(--linea-clara); }
.ficha li:last-child { border-right: 0; }
.ficha strong { display: block; font: 400 clamp(19px, 1.9vw, 24px)/1.25 var(--f-titular); font-variant-numeric: lining-nums; margin-bottom: 6px; color: #fff; }
.ficha span { font-size: 15.5px; line-height: 1.5; color: var(--tenue); }

/* ── Tarifa ───────────────────────────────────────────────────────────── */
.tarifa { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.tarifa-lado { position: sticky; top: 120px; display: grid; gap: 20px; }
.tarifa-lado p { max-width: 36ch; font-size: 18px; color: var(--oscuro-2); }
.pizarra {
  position: relative;
  background: var(--carbon);
  color: var(--crema);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px);
  box-shadow: 0 30px 60px -30px rgba(22, 19, 15, 0.55);
}
.pizarra::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid var(--linea-oro);
  border-radius: 2px;
  pointer-events: none;
}
.pizarra-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--linea-oro); }
.pizarra-cab b { font: italic 400 clamp(34px, 3.4vw, 46px)/1 var(--f-titular); font-variant-numeric: lining-nums; color: var(--oro); }
.pizarra-cab .eti { color: var(--tenue); }
.fila { display: flex; align-items: center; gap: 18px; padding: 16px 0; text-decoration: none; border-bottom: 1px solid var(--linea-clara); }
.fila:last-of-type { border-bottom: 0; }
/* Rectangular 3:4, sin el arco de arriba (16-09-2026, Ian). Las fotos ya son 600×800. */
.fila-foto { width: 54px; height: 72px; flex: none; border-radius: 2px; object-fit: cover; border: 1px solid var(--linea-oro); }
.fila-nom { display: grid; gap: 2px; min-width: 0; }
.fila-nom b { font: 400 clamp(20px, 2vw, 26px)/1.2 var(--f-titular); font-variant-numeric: lining-nums; transition: color 0.2s; }
.fila-nom small { font-size: 15px; line-height: 1.4; color: var(--tenue); }
.fila-puntos { flex: 1; min-width: 20px; align-self: center; border-bottom: 1px dotted rgba(201, 168, 76, 0.5); }
.fila-precio { margin-left: auto; text-align: right; white-space: nowrap; }
.fila-precio b { display: block; font: 500 clamp(26px, 2.4vw, 34px)/1 var(--f-titular); font-variant-numeric: lining-nums tabular-nums; color: var(--oro); }
.fila-precio .eti { color: var(--tenue); }
.fila:hover .fila-nom b { color: var(--oro); }
.pizarra-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linea-oro); }
.pizarra-pie .eti { color: var(--tenue); }

/* ── Equipo enmarcado ─────────────────────────────────────────────────── */
.equipo-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 28px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.equipo-cab p.intro { max-width: 38ch; font-size: 18px; color: var(--tenue); }
.marcos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); gap: clamp(16px, 3vw, 40px); }
.marco { display: block; text-decoration: none; }
.marco-lienzo { padding: 14px; background: var(--carbon-hondo); border: 1px solid var(--linea-oro); }
.marco-paspartu { position: relative; padding: 10px; background: var(--carbon-3); }
.marco-paspartu img, .marco-vacio { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; transition: filter 0.4s; }
.marco-vacio { background: var(--carbon-2); }
.marco:hover .marco-paspartu img { filter: brightness(1.06); }
.marco-aviso { position: absolute; top: 20px; right: 20px; padding: 5px 10px; background: rgba(22, 19, 15, 0.8); border: 1px solid var(--linea-clara); border-radius: 999px; color: var(--claro); }
.marco-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 4px 0; }
.marco-pie b { font: 400 24px/1.15 var(--f-titular); font-variant-numeric: lining-nums; }
.marco-pie .eti { color: var(--oro); }
.marco-reservar { margin-top: 10px; padding: 0 4px; color: var(--tenue); }
.marco:hover .marco-reservar { color: var(--oro); }
/* Sobre crema, el dorado de las etiquetas no llega a 4,5:1: se usa el oscuro. */
.seccion-clara .marco-pie .eti, .seccion-arena .marco-pie .eti { color: var(--oro-texto); }
.seccion-clara .marco-reservar, .seccion-arena .marco-reservar { color: var(--oscuro-2); }
.seccion-clara .marco:hover .marco-reservar { color: var(--oro-texto); }

/* ── El local ─────────────────────────────────────────────────────────── */
.local { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
.local-foto { position: relative; }
.local-foto::before {
  content: '';
  position: absolute;
  inset: -16px 16px 16px -16px;
  border: 1px solid var(--oro-texto);
  opacity: 0.45;
  pointer-events: none;
}
.seccion-oscura .local-foto::before { border-color: var(--oro); opacity: 0.35; }
.local-foto img { position: relative; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.local-tarjeta {
  position: relative;
  z-index: 1;
  margin-left: -72px;
  background: var(--carbon);
  color: var(--crema);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  gap: 18px;
  box-shadow: 0 30px 60px -30px rgba(22, 19, 15, 0.6);
}
.local-tarjeta .eti-num { color: var(--oro); }
.local-tarjeta .titulo-seccion { font-size: clamp(32px, 3.6vw, 52px); }
.local-cita { font: italic 400 clamp(21px, 2.2vw, 28px)/1.35 var(--f-titular); font-variant-numeric: lining-nums; color: var(--oro); }
.local-texto { font-size: 17px; color: var(--claro); }

/* ── Valoración ───────────────────────────────────────────────────────── */
.valoracion { text-align: center; }
.valoracion .eti-num { justify-content: center; }
/* OJO especificidad: la cifra también es un <p>, y `.valoracion p` le ganaba a
   `.valoracion-num` a secas (salía a 28 px). Por eso va con el padre delante. */
.valoracion p { margin: 16px auto 34px; max-width: 30ch; font: italic 400 clamp(21px, 2.2vw, 28px)/1.35 var(--f-titular); font-variant-numeric: lining-nums; color: var(--claro); }
.valoracion .valoracion-num { margin: 18px auto 0; max-width: none; font: 400 clamp(104px, 16vw, 220px)/1 var(--f-titular); font-variant-numeric: lining-nums; font-style: normal; color: var(--oro); letter-spacing: -0.03em; }
/* La estrella debajo de la cifra, con aire: pegada, se leía «4,★7». */
.valoracion .valoracion-num::after { content: '★★★★★'; display: block; margin-top: 30px; font-size: 26px; line-height: 1; letter-spacing: 0.3em; margin-right: -0.3em; }
.valoracion .acciones { justify-content: center; }

/* ── Preguntas frecuentes ─────────────────────────────────────────────── */
.preguntas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.preguntas-lado { position: sticky; top: 120px; display: grid; gap: 18px; }
.preguntas-lado p { max-width: 34ch; font-size: 18px; color: var(--oscuro-2); }
.preguntas-lado a { color: var(--carbon); text-decoration-color: var(--oro); text-underline-offset: 3px; }
.faq-lista { border-top: 1px solid var(--linea-oscura); }
.faq-item { border-bottom: 1px solid var(--linea-oscura); }
.faq-item summary {
  position: relative;
  display: block;
  padding: 24px 52px 24px 0;
  cursor: pointer;
  list-style: none;
  font: 400 clamp(19px, 1.9vw, 24px)/1.35 var(--f-titular); font-variant-numeric: lining-nums;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border-right: 1.5px solid var(--oro-texto);
  border-bottom: 1.5px solid var(--oro-texto);
  transform: rotate(45deg);
  transition: transform 0.3s var(--curva), margin 0.3s var(--curva);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:hover { color: var(--oro-texto); }
.faq-resp { padding: 0 0 28px; font-size: 17px; line-height: 1.7; color: var(--oscuro-2); }
.faq-resp p + p { margin-top: 10px; }
.faq-resp a { color: var(--carbon); text-decoration-color: var(--oro); text-underline-offset: 3px; }
.faq-precios { margin: 0 0 14px; padding: 0; list-style: none; max-width: 520px; }
.faq-precios li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dotted rgba(22, 19, 15, 0.28); }
.faq-precios li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--carbon); }

/* ── Visita ───────────────────────────────────────────────────────────── */
.visita { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.visita-datos { display: grid; gap: 24px; }
.visita address { font-style: normal; font: 400 clamp(21px, 2vw, 26px)/1.4 var(--f-titular); font-variant-numeric: lining-nums; }
.horario { display: grid; border-top: 1px solid var(--linea-clara); }
.horario div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linea-clara); }
.horario dt { color: var(--claro); }
.horario dd { font: 500 14px/1.5 var(--f-eti); letter-spacing: 0.04em; color: var(--oro); text-align: right; }
.horario dd.cerrado { color: var(--tenue); }
.visita-bus { font-size: 16px; color: var(--tenue); }
.mapa-marco { padding: 12px; border: 1px solid var(--linea-oro); }
.mapa iframe { display: block; width: 100%; height: clamp(300px, 38vw, 500px); border: 0; filter: grayscale(0.25) contrast(1.05); background: var(--carbon-2); }

/* ── Cierre ───────────────────────────────────────────────────────────── */
.cierre { text-align: center; }
.cierre .eti-num { justify-content: center; }
.cierre h2 { margin: 18px auto 36px; max-width: 16ch; font: 400 clamp(40px, 6.4vw, 92px)/1.02 var(--f-titular); font-variant-numeric: lining-nums; letter-spacing: -0.02em; }
.cierre .acciones { justify-content: center; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie { background: var(--carbon-hondo); border-top: 1px solid var(--linea-oro); color: var(--tenue); padding-block: 72px 32px; }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; }
.pie-marca { font: 700 20px/1 var(--f-marca); letter-spacing: 0.04em; text-transform: uppercase; color: var(--oro); text-decoration: none; }
.pie p, .pie address { margin-top: 14px; font-style: normal; font-size: 16px; line-height: 1.7; }
.pie h3 { color: var(--oro); }
.pie ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--oro); }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--linea-clara); }
/* Pie centrado (16-09-2026, Ian). */
.pie { text-align: center; }
.pie ul { justify-items: center; }

/* ── Páginas interiores ───────────────────────────────────────────────── */
.pagina-cab { padding-block: clamp(52px, 7vw, 104px); }
.pagina-cab h1 { margin-top: 18px; font: 400 clamp(46px, 7vw, 104px)/1 var(--f-titular); font-variant-numeric: lining-nums; letter-spacing: -0.025em; }
.pagina-cab p { margin-top: 22px; max-width: 46ch; font-size: clamp(18px, 1.55vw, 21px); color: var(--claro); }
.subnav { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 30px; }
.subnav a { color: var(--claro); text-decoration: none; border-bottom: 1px solid var(--linea-oro); padding-bottom: 4px; }
.subnav a:hover { color: var(--oro); border-color: var(--oro); }

/* Servicios, uno a uno */
.servicios { display: grid; gap: clamp(64px, 9vw, 128px); }
.servicio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.servicio-invertido .servicio-foto { order: 2; }
.servicio-foto { position: relative; }
.servicio-foto::before { content: ''; position: absolute; inset: -14px -14px 14px 14px; border: 1px solid var(--oro-texto); opacity: 0.4; pointer-events: none; }
.servicio-invertido .servicio-foto::before { inset: -14px 14px 14px -14px; }
img.sv-img-inner { position: relative; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.servicio-txt { display: grid; gap: 14px; }
.servicio-txt h2 { font: 400 clamp(32px, 3.6vw, 52px)/1.06 var(--f-titular); font-variant-numeric: lining-nums; }
.servicio-txt p { font-size: 18px; color: var(--oscuro-2); max-width: 40ch; }
.servicio-precio { display: flex; align-items: baseline; gap: 16px; padding-block: 6px 10px; }
.servicio-precio b { font: 500 clamp(38px, 3.6vw, 54px)/1 var(--f-titular); font-variant-numeric: lining-nums tabular-nums; color: var(--oro-texto); }
.servicio-precio .eti { color: var(--oscuro-2); }

/* Cómo se reserva */
.pasos-rejilla { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pasos-rejilla .local-foto img { aspect-ratio: 4 / 5; }
.svx-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; border-top: 1px solid var(--linea-clara); }
.svx-pasos li { counter-increment: paso; position: relative; padding: 26px 0 26px 76px; border-bottom: 1px solid var(--linea-clara); font-size: 17px; line-height: 1.6; color: var(--tenue); }
.svx-pasos li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 20px; font: italic 400 34px/1 var(--f-titular); font-variant-numeric: lining-nums; color: var(--oro); }
.svx-pasos strong { display: block; margin-bottom: 4px; font: 400 23px/1.25 var(--f-titular); font-variant-numeric: lining-nums; color: var(--crema); }

/* Antes de venir */
.svx-antes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea-oscura); }
.svx-antes > div { padding: 28px 28px 0 0; }
.svx-antes > div + div { padding-left: 28px; border-left: 1px solid var(--linea-oscura); }
.svx-antes dt { color: var(--oro-texto); margin-bottom: 10px; }
.svx-antes dd { font-size: 17px; line-height: 1.65; color: var(--oscuro-2); }
.svx-antes a { color: var(--carbon); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* Información: tarjetas y textos legales, sobre carbón */
.info-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.info-tarjeta { padding: 24px; background: var(--carbon-2); border: 1px solid var(--linea-clara); }
.info-tarjeta dt { color: var(--oro); margin-bottom: 8px; }
.info-tarjeta dd { font-size: 18px; color: var(--crema); }
.info-tarjeta a { text-decoration: none; }
.info-tarjeta a:hover { color: var(--oro); }
.legal { max-width: 68ch; font-size: 16px; line-height: 1.75; color: var(--tenue); }
.legal h3 { margin: 34px 0 10px; font: 400 23px/1.25 var(--f-titular); font-variant-numeric: lining-nums; color: var(--crema); }
.legal p + p { margin-top: 12px; }
.legal strong { color: var(--claro); font-weight: 600; }

/* ── Barra de acción del móvil ────────────────────────────────────────── */
.barra-accion { display: none; }
@media (max-width: 1023px) {
  .barra-accion {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(16, 14, 10, 0.96);
    border-top: 1px solid var(--linea-oro);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  body { padding-bottom: calc(var(--alto-barra) + env(safe-area-inset-bottom)); }
}
.barra-accion a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid rgba(245, 242, 237, 0.18);
  border-radius: 999px;
  color: var(--crema);
  font: 600 12px/1 var(--f-eti);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.barra-accion a.barra-accion-principal { background: var(--oro); border-color: var(--oro); color: var(--carbon); }
.barra-accion svg { width: 18px; height: 18px; flex: none; }

/* ── Tabletas y móviles (≤ 960 px) ────────────────────────────────────── */
@media (max-width: 960px) {
  .util .contenedor { justify-content: center; }
  .util .solo-ancho { display: none; }
  .ficha ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha li { padding: 26px 20px; border-bottom: 1px solid var(--linea-clara); }
  .ficha li:nth-child(2n) { border-right: 0; }
  .ficha li:nth-last-child(-n+2) { border-bottom: 0; }
  .tarifa, .preguntas, .visita, .pasos-rejilla, .local { grid-template-columns: 1fr; }
  .tarifa-lado, .preguntas-lado { position: static; }
  .equipo-cab { grid-template-columns: 1fr; }
  .local-tarjeta { margin: -56px 20px 0; }
  .local-foto .pie-foto { display: none; }
  /* Los filetes desplazados de las fotos se salían hacia el margen: fuera en estrecho. */
  .local-foto::before, .servicio-foto::before { display: none; }
  .servicio { grid-template-columns: 1fr; }
  .servicio-invertido .servicio-foto { order: 0; }
  .svx-antes { grid-template-columns: 1fr; }
  .svx-antes > div, .svx-antes > div + div { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--linea-oscura); }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-rejilla > div:first-child { grid-column: 1 / -1; }
}

/* ── Móvil (≤ 600 px): lo que se ve con el pulgar ─────────────────────── */
@media (max-width: 600px) {
  /* En el móvil la barra de abajo ya lleva reservar y llamar: arriba sobraba. */
  .util { display: none; }
  .cab .contenedor { min-height: 60px; }
  .cab-marca { font-size: 15px; letter-spacing: 0.06em; }
  .cab .boton { min-height: 40px; padding: 0 18px; }

  .portada { min-height: calc(100svh - 60px - var(--alto-barra)); }
  .portada-contenido { padding-block: 40px 44px; }
  .portada-fondo img { object-position: 62% center; }
  .hero-nota { margin-bottom: 22px; padding: 8px 16px; letter-spacing: 0.12em; }
  .portada-titulo { font-size: clamp(42px, 12.4vw, 54px); line-height: 1.04; }
  .portada-entradilla { margin-top: 18px; font-size: 17px; }
  .portada .acciones { flex-direction: column; align-items: stretch; width: 100%; margin-top: 30px; gap: 12px; }
  .boton-portada { min-height: 56px; padding: 0 18px; font-size: 13px; letter-spacing: 0.1em; }
  .portada-direccion { margin-top: 24px; font-size: 14px; }

  .ficha li { padding: 20px 16px; }
  .ficha strong { font-size: 18px; }
  .ficha span { font-size: 14.5px; }
  /* La franja, en carrusel (16-09-2026, Ian): en rejilla 2×2 ocupaba media
     pantalla. Cada dato ocupa casi el ancho y el siguiente asoma por el borde,
     que es lo que dice «desliza» sin tener que escribirlo. Sin JS funciona igual:
     es scroll nativo con imán; el JS solo añade los puntos. */
  .ficha { padding-bottom: 16px; }
  .ficha ul {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lado);
    padding-inline: var(--lado);
    gap: 10px;
    padding-top: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ficha ul::-webkit-scrollbar { display: none; }
  .ficha li,
  .ficha li:nth-child(2n),
  .ficha li:nth-last-child(-n+2) {
    flex: 0 0 80%;
    scroll-snap-align: start;
    border: 1px solid var(--linea-clara);
    border-radius: 14px;
    padding: 20px 18px;
  }
  .ficha li:last-child { margin-right: var(--lado); }
  .ficha ul:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
  .ficha-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .ficha-puntos button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
    background: var(--linea-clara); cursor: pointer; transition: width 0.25s, background 0.25s;
  }
  .ficha-puntos button[aria-current="true"] { width: 22px; background: var(--oro); }

  .seccion { padding-block: 60px; }
  .cabecera-seccion { margin-bottom: 28px; }
  .acciones .boton { flex: 1 1 auto; }

  .pizarra { padding: 26px 18px 22px; }
  .pizarra::before { inset: 7px; }
  .pizarra-cab b { font-size: 34px; }
  .pizarra-cab .eti { display: none; }
  .fila { gap: 12px; padding: 14px 0; }
  .fila-foto { width: 45px; height: 60px; }
  .fila-puntos { display: none; }
  .fila-nom b { font-size: 19px; }
  .fila-nom small { font-size: 13.5px; }
  .fila-precio b { font-size: 25px; }
  .pizarra-pie { flex-direction: column; align-items: stretch; text-align: center; }

  .marcos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .marco-lienzo { padding: 7px; }
  .marco-paspartu { padding: 5px; }
  .marco-pie { flex-direction: column; gap: 4px; padding-top: 12px; }
  .marco-pie b { font-size: 18px; }
  .marco-aviso { top: 12px; right: 12px; }

  .local-tarjeta { margin: -40px 12px 0; padding: 28px 22px; gap: 14px; }

  .valoracion p { font-size: 20px; }
  .valoracion .valoracion-num::after { margin-top: 22px; }

  .faq-item summary { padding: 20px 40px 20px 0; font-size: 18.5px; }
  .faq-resp { font-size: 16px; }

  .visita address { font-size: 21px; }
  .horario div { flex-direction: column; gap: 2px; }
  .horario dd { text-align: left; }
  .mapa-marco { padding: 7px; }
  .mapa iframe { height: 300px; }

  .cierre h2 { font-size: 40px; }

  .pie { padding-block: 52px 28px; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 28px; }
  .pie-legal { margin-top: 36px; flex-direction: column; align-items: center; }

  .pie-foto span + span { display: none; }

  .pagina-cab h1 { font-size: 46px; }
  .servicio-txt h2 { font-size: 32px; }
  /* La foto del local, apaisada: en vertical empujaba los pasos fuera de la vista. */
  .pasos-rejilla .local-foto img { aspect-ratio: 16 / 10; }
  .svx-pasos li { padding: 22px 0 22px 58px; }
  .svx-pasos li::before { font-size: 28px; top: 20px; }
  .svx-pasos strong { font-size: 20px; }
  /* La dirección a lo ancho; teléfono y reservas, lado a lado. */
  .info-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .info-rejilla > div:first-child { grid-column: 1 / -1; }
  .info-tarjeta { padding: 18px; }
  .info-tarjeta dd { font-size: 17px; }
}

@media (max-width: 360px) {
  .barra-accion { grid-template-columns: 1.3fr 1fr; gap: 6px; padding-inline: 8px; }
  .barra-accion a { font-size: 12px; gap: 5px; letter-spacing: 0; }
  .barra-accion svg { width: 15px; height: 15px; }
}

/* ── Aparición al bajar ───────────────────────────────────────────────────
   Solo si hay JavaScript (clase .js en <html>) y el visitante no pide menos
   movimiento. El guion enseña todo a los 2,5 s aunque nadie haga scroll. */
@media (prefers-reduced-motion: no-preference) {
  .js .aparece { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--curva), transform 0.9s var(--curva); }
  .js .aparece.visto { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .faq-item summary::after, .cab, .hero-nota { transition: none; }
}

/* ── SEO local (22-09-2026) ──────────────────────────────────────────────
   El h1 de la portada dice «Barbería en Sevilla: corte de pelo y arreglo de
   barba». Entero en grande no cabía en la primera pantalla del móvil: la
   segunda mitad va en una línea menor y los dos puntos solo los lee quien no
   ve la página (buscadores y lectores de pantalla). */
.oculto-visual {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.portada-titulo-sub {
  display: block;
  margin-top: 14px;
  font: italic 400 clamp(22px, 2.6vw, 36px)/1.25 var(--f-titular); font-variant-numeric: lining-nums;
  letter-spacing: 0;
  color: var(--oro-claro);
}
.portada .acciones .boton-portada { min-width: 0; }
/* La foto del escaparate va en <picture> (AVIF y WebP): que ocupe como antes el <img>. */
.portada-fondo picture { display: block; width: 100%; height: 100%; }

/* El barrio: texto a dos columnas, como las preguntas. */
.barrio { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.barrio-lado { display: grid; gap: 18px; }
.barrio-texto { display: grid; gap: 16px; max-width: 62ch; font-size: 18px; color: var(--oscuro-2); }
.barrio-texto a { color: var(--carbon); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* Las páginas de cada servicio. */
.pagina-cab .acciones { margin-top: 30px; }
.migas { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 6px; padding: 0; list-style: none; color: var(--tenue); }
.migas li + li::before { content: '/'; margin-right: 10px; color: var(--linea-oro); }
.migas a { color: var(--tenue); text-decoration: none; }
.migas a:hover { color: var(--oro); }
.servicio-foto picture, .servicio-foto img { display: block; }
.servicio-txt .pizarra { margin-top: 10px; }
.servicio-txt .pizarra .fila-nom small { max-width: 32ch; }
.otros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.otro { display: grid; gap: 8px; padding: 26px; border: 1px solid var(--linea-oscura); text-decoration: none; background: var(--crema); transition: border-color 0.2s; }
.otro:hover { border-color: var(--oro-texto); }
.otro b { font: 400 24px/1.2 var(--f-titular); font-variant-numeric: lining-nums; color: var(--carbon); }
.otro span { font-size: 16px; color: var(--oscuro-2); }
.otro .eti { color: var(--oro-texto); }

@media (max-width: 960px) {
  .barrio { grid-template-columns: 1fr; }
  .otros { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Reservar a lo ancho; llamar y cómo llegar, lado a lado debajo. */
  .portada .acciones { display: grid; grid-template-columns: 1fr 1fr; }
  .portada .acciones .boton-oro { grid-column: 1 / -1; }
  .portada .acciones .boton-linea { min-height: 52px; padding: 0 12px; font-size: 13px; letter-spacing: 0.08em; }
  .portada-titulo-sub { margin-top: 10px; font-size: 21px; }
  .barrio-texto { font-size: 16.5px; }
  .otro { padding: 20px; }
}

/* ── REDISEÑO 24-09-2026 ─────────────────────────────────────────────────
   Nuestros trabajos: una rejilla preparada para las fotos reales que traiga
   el dueño. Cada hueco tiene su proporción fija, así que cambiar un archivo
   por otro no mueve nada de sitio (ni provoca saltos al cargar). */
.trabajos {
  display: grid;
  /* Se llena sola: con cuatro fotos hace cuatro huecos; con seis, seis. Así el
     día que lleguen las fotos reales no hay que tocar la maqueta ni queda una
     foto sola en su fila. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.trabajo { margin: 0; position: relative; overflow: hidden; background: var(--carbon-2); }
/* Todas con la misma proporción: al sustituir una foto por otra, nada se mueve. */
.trabajo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }

/* La frase del dueño, destacada dentro de la historia. */
.historia-cita {
  margin: 6px 0 0;
  font: italic 400 clamp(21px, 2.4vw, 30px)/1.3 var(--f-titular); font-variant-numeric: lining-nums;
  color: var(--oro-texto);
  max-width: 18ch;
}

/* Lo que hace cada barbero, debajo de su nombre. */
.marco-bio { margin: 6px 4px 0; font-size: 15px; line-height: 1.5; color: var(--tenue); }
.seccion-clara .marco-bio, .seccion-arena .marco-bio { color: var(--oscuro-2); }

@media (max-width: 960px) {
  .historia-cita { max-width: none; }
}
@media (max-width: 600px) {
  .trabajos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .marco-bio { font-size: 13.5px; }
}

/* ── Servicios sin foto propia (25-09-2026) ──────────────────────────────────
   De las fotos del proyecto solo hay cinco escenas distintas, y diez servicios.
   Antes una regla comodin mandaba todo lo que no casaba a la misma imagen de
   corte: seis de diez filas ensenyaban la misma foto. Ahora cada escena va al
   servicio que de verdad ensenya y el resto se queda sin foto, que es la misma
   decision que ya se tomo en la pantalla de reserva: o es suya o no hay.

   En la carta de la portada el hueco se RESERVA aunque este vacio, para que los
   nombres de todas las filas sigan alineados; una lista con los textos a dos
   alturas se lee como un fallo de maquetacion, no como una decision. */
.fila-foto-hueco { border-color: transparent; background: none; }

/* En la pagina de servicios la tarjeta es de dos columnas (foto | texto). Sin
   foto pasa a una, o el texto se quedaria apretado contra un hueco vacio.
   `:has()` no lo entienden los navegadores viejos: ahi la tarjeta se queda a dos
   columnas con una vacia, que es exactamente lo que ya pasaba antes. */
.servicio:not(:has(.servicio-foto)) { grid-template-columns: 1fr; }
.servicio:not(:has(.servicio-foto)) .servicio-txt p { max-width: 60ch; }

/* ── Lista larga del dueño (02-10-2026) ──────────────────────────────────── */

/* La cuenta de Instagram, debajo de los botones de «Nuestros trabajos». */
.trabajos-cuenta { margin-top: 16px; text-align: center; color: var(--oro-texto); }
.trabajos-cuenta a { text-decoration: none; }
.trabajos-cuenta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* El cargo puede ser largo («Fundador de The Barber Sevilla»): debajo del
   nombre, no a su lado, o empuja el nombre a dos líneas. */
.marco-pie-cargo { flex-direction: column; align-items: flex-start; gap: 6px; }

/* Reseñas: tres tarjetas iguales en ordenador, una debajo de otra en móvil. */
.opiniones-cab { text-align: center; justify-items: center; display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.opiniones-cab .eti-num { justify-content: center; }
.opiniones-cab p.intro { max-width: 44ch; font-size: 18px; color: var(--tenue); }
.resenas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.resena { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.6vw, 36px); background: var(--carbon-2); border: 1px solid var(--linea-oro); }
.resena-estrellas { color: var(--oro); font-size: 18px; letter-spacing: 0.22em; line-height: 1; }
.resena blockquote { flex: 1; font: italic 400 clamp(18px, 1.5vw, 20px)/1.5 var(--f-titular); font-variant-numeric: lining-nums; color: var(--claro); }
.resena-autor { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--linea-clara); }
.resena-autor b { font-weight: 600; color: var(--crema); }
.resena-autor .eti { color: var(--tenue); }
.opiniones-acciones { justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* El botón de «Cómo llegar» dentro de una respuesta. */
.faq-boton { margin-top: 16px; }

/* El mapa, antes de cargarlo: ocupa lo mismo que el mapa, así nada salta. */
.mapa-abrir {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  width: 100%; height: clamp(300px, 38vw, 500px); padding: 24px;
  border: 0; cursor: pointer; text-align: center; color: var(--crema);
  background:
    linear-gradient(rgba(201, 168, 76, 0.07) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(201, 168, 76, 0.07) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--carbon-2);
  font: inherit;
}
.mapa-pin { width: 44px; height: 44px; color: var(--oro); }
.mapa-abrir-dir { font: 400 clamp(19px, 1.8vw, 23px)/1.4 var(--f-titular); font-variant-numeric: lining-nums; }
.mapa-abrir-nota { max-width: 34ch; font-size: 13px; color: var(--tenue); }
.mapa-abrir:hover .boton-linea { border-color: var(--oro); color: var(--oro); }
.mapa-marco iframe { display: block; width: 100%; height: clamp(300px, 38vw, 500px); border: 0; filter: grayscale(0.25) contrast(1.05); background: var(--carbon-2); }

.legal ul { margin: 12px 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: 8px; }
.legal ul + p { margin-top: 12px; }

@media (max-width: 960px) {
  .resenas { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .mapa-abrir, .mapa-marco iframe { height: 300px; }
  .resena-estrellas { font-size: 16px; }
}

/* ── LA TIENDA (19-10-2026) ──────────────────────────────────────────────
   Los productos que el dueño vende en el local: se apartan aquí y se pagan al
   recogerlos. La tarjeta repite el motivo de la pizarra de la carta: nombre y
   precio unidos por los puntos guía. Sin foto, el nombre en el marco dorado. */
.tienda-pasos { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; padding: 0; list-style: none; color: var(--claro); }
.tienda-pasos .num { color: var(--oro); margin-right: 6px; }
.tienda-aviso-llamar { margin-bottom: 32px; padding: 16px 20px; border: 1px solid var(--linea-oscura); font-size: 17px; color: var(--oscuro-2); }
.tienda-aviso-llamar a { color: var(--carbon); text-decoration-color: var(--oro); }
/* Filtros por tipo (19-10-2026): píldoras como el botón de línea, la elegida en carbón. */
.tienda-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 36px); }
.tienda-filtros[hidden] { display: none; }
.filtro { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(22, 19, 15, 0.4); background: none;
  color: var(--carbon); font: 600 12px/1.2 var(--f-eti); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.filtro:hover { border-color: var(--carbon); }
.filtro[aria-pressed="true"] { background: var(--carbon); border-color: var(--carbon); color: var(--crema); }
.estante { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); }
.estante-vacio { grid-column: 1 / -1; max-width: 52ch; display: grid; gap: 12px; font-size: 18px; color: var(--oscuro-2); }
.producto { display: flex; flex-direction: column; }
.producto-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--carbon); border-radius: 2px; }
.producto-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Hasta 3 fotos (19-10-2026): se deslizan dentro del marco; los puntos los pone escaparate.js. */
.producto-galeria { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.producto-galeria::-webkit-scrollbar { display: none; }
.producto-galeria img { flex: 0 0 100%; scroll-snap-align: start; }
.galeria-puntos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 4px; }
.galeria-puntos button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.galeria-puntos button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(245, 242, 237, 0.55); box-shadow: 0 0 0 1px rgba(22, 19, 15, 0.25); transition: background-color 0.2s, transform 0.2s; }
.galeria-puntos button[aria-current="true"]::before { background: var(--crema); transform: scale(1.25); }
.producto-sin-foto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 28px; text-align: center; color: var(--oro);
}
.producto-sin-foto::before { content: ''; position: absolute; inset: 12px; border: 1px solid var(--linea-oro); border-radius: 2px; }
.producto-sin-foto b { font: italic 400 clamp(24px, 2.4vw, 30px)/1.15 var(--f-titular); font-variant-numeric: lining-nums; }
.producto-agotado { position: absolute; left: 14px; top: 14px; padding: 6px 10px; background: var(--crema); color: var(--carbon); }
.producto-txt { display: flex; flex-direction: column; gap: 8px; flex: 1; padding-top: 18px; }
.producto-tipo { color: var(--oro-texto); }
.producto-linea { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.producto-nombre { font: 400 clamp(21px, 1.9vw, 25px)/1.2 var(--f-titular); font-variant-numeric: lining-nums; min-width: 0; }
.producto-linea .fila-puntos { align-self: auto; min-width: 16px; border-bottom-color: rgba(127, 100, 25, 0.55); transform: translateY(-5px); }
.producto-precio { font: 500 clamp(21px, 1.9vw, 25px)/1.2 var(--f-titular); font-variant-numeric: lining-nums tabular-nums; color: var(--oro-texto); white-space: nowrap; }
.producto-desc { font-size: 16px; line-height: 1.55; color: var(--oscuro-2); }
.producto-boton { margin-top: auto; align-self: flex-start; min-height: 46px; padding: 0 24px; cursor: pointer; background: transparent; }
.producto-txt .producto-boton { margin-top: 10px; }
.producto.en-carrito .producto-boton { background: var(--carbon); border-color: var(--carbon); color: var(--crema); }
.producto.agotado .producto-foto { opacity: 0.55; }
.producto-boton:disabled { opacity: 0.45; cursor: not-allowed; }

/* Lo elegido: una barra abajo (en el móvil, encima de la de reservar). */
.carrito {
  position: fixed; z-index: 70; right: clamp(12px, 3vw, 32px); bottom: clamp(12px, 3vw, 32px);
  display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 22px;
  background: var(--carbon-hondo); color: var(--crema); border: 1px solid var(--oro); border-radius: 999px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
.carrito[hidden] { display: none; }
.carrito-txt { font-size: 16px; }
.carrito .boton { min-height: 46px; cursor: pointer; }
@media (max-width: 1023px) {
  .carrito { left: 10px; right: 10px; bottom: calc(var(--alto-barra) + 8px + env(safe-area-inset-bottom)); justify-content: space-between; }
  .con-carrito body { padding-bottom: calc(var(--alto-barra) + 76px + env(safe-area-inset-bottom)); }
}

/* La ventana de apartar: hoja desde abajo en el móvil, caja centrada en grande. */
.apartar { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(16, 14, 10, 0.72); }
.apartar[hidden] { display: none; }
.panel-abierto, .panel-abierto body { overflow: hidden; }
.apartar-caja {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  padding: 34px clamp(20px, 4vw, 40px) calc(28px + env(safe-area-inset-bottom));
  background: var(--carbon); color: var(--crema); border-top: 1px solid var(--oro);
}
@media (min-width: 700px) { .apartar { align-items: center; } .apartar-caja { border: 1px solid var(--linea-oro); border-radius: 4px; } }
.apartar-x { position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; border: 0; background: none; color: var(--tenue); font-size: 18px; cursor: pointer; }
.apartar-x:hover { color: var(--oro); }
.apartar h2 { margin: 12px 0 22px; font: 400 clamp(28px, 3.4vw, 38px)/1.1 var(--f-titular); font-variant-numeric: lining-nums; }
.ap-lineas { border-top: 1px solid var(--linea-clara); }
.ap-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea-clara); }
.ap-nombre { font-size: 17px; }
.ap-mando { display: inline-flex; align-items: center; gap: 8px; }
.ap-mando button { width: 38px; height: 38px; border: 1px solid var(--linea-oro); border-radius: 50%; background: none; color: var(--crema); font-size: 18px; cursor: pointer; }
.ap-mando button:disabled { opacity: 0.35; cursor: not-allowed; }
.ap-num { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.ap-precio { min-width: 72px; text-align: right; color: var(--oro); font-variant-numeric: tabular-nums; }
.ap-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 16px 0 24px; }
.ap-total .eti { color: var(--tenue); }
.ap-total b { font: 500 28px/1 var(--f-titular); font-variant-numeric: lining-nums tabular-nums; color: var(--oro); }
.ap-campo { display: grid; gap: 8px; margin-bottom: 16px; }
.ap-campo .eti { color: var(--tenue); }
.ap-campo small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ap-campo input {
  min-height: 50px; padding: 0 14px; border: 1px solid rgba(245, 242, 237, 0.24); border-radius: 2px;
  background: var(--carbon-2); color: var(--crema); font: 400 17px/1.3 var(--f-texto);
}
.ap-campo input:focus { outline: none; border-color: var(--oro); }
.ap-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ap-error { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid #e07a5f; background: rgba(224, 122, 95, 0.12); font-size: 16px; }
.ap-enviar { width: 100%; cursor: pointer; }
.ap-letra { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--tenue); }
.ap-letra a { color: var(--claro); }
.ap-ok p { margin-bottom: 14px; font-size: 18px; color: var(--claro); }
.ap-ok b { color: var(--crema); }
.ap-ok .boton { margin-top: 10px; cursor: pointer; background: transparent; }
@media (max-width: 600px) {
  .estante { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .producto-linea { flex-direction: column; gap: 4px; }
  .producto-linea .fila-puntos { display: none; }
  .producto-desc { font-size: 15px; }
  .producto-boton { padding: 0 16px; width: 100%; }
  .producto-sin-foto { padding: 18px; }
}

/* La rebaja (20-10-2026): el precio normal tachado, en pequeño, delante del de hoy. */
.producto-antes { font-size: .72em; color: var(--oscuro-2); text-decoration-thickness: 1px; margin-right: .2em; }