/* ==========================================================================
   Tema Test — Estudio de manicura y belleza (Sevilla)
   Hoja única, mobile-first, sin dependencias.  v2 · «Carta de Atelier»

   La mezcla de las direcciones A y B, decidida por un objetivo: que se
   reserven los servicios CAROS. Cuando A y B se contradecían, gana lo que
   ayuda a reservar (ver direction-approved.md).

   Dos reglas gobiernan toda la hoja:

   1. TIPOGRAFÍA PARTIDA — Cormorant Garamond (la de la marca) para lo que
      se mira: titulares y nombres de servicio, y SIEMPRE por encima de
      20 px, que es donde una serif de contraste alto deja de ser frágil.
      Archivo para lo que se lee y se usa: precios, duraciones, etiquetas,
      navegación y texto corrido. Jost se retira: es una Futura, con la 'a'
      de un solo piso y x-height baja — preciosa en un cartel, cansada en un
      párrafo de móvil.

   2. MOVIMIENTO PARTIDO — la interfaz responde RÁPIDO (180–220 ms) y el
      contenido llega DESPACIO (640–1000 ms). Lo que tocas contesta al
      instante; lo que lees se toma su tiempo. Esa diferencia es lo que hace
      que una animación se sienta con intención en vez de decorativa.

   Índice
   01. Fuentes              07. Héroe               13. CTA final
   02. Tokens               08. Promesa             14. Pie
   03. Base y utilidades    09. Servicios           15. Barra móvil
   04. Lomo y cabecera      10. Galería             16. Visor
   05. Botones y enlaces    11. Equipo              17. Accesibilidad
   06. Aparición            12. Ubicación
   ========================================================================== */

/* 01. Fuentes autoalojadas ------------------------------------------------
   La CSP del sitio es `font-src 'self'`: Google Fonts está bloqueado a
   propósito. Cualquier tipografía nueva vive aquí como woff2 variable. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2-variations'),
       url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* 02. Tokens -------------------------------------------------------------- */
:root {
  /* Paleta de marca — sin tocar. Ver brand-spec.md */
  --paper:      #FBF9F7;
  --paper-alt:  #F4EFEB;
  --sand:       #DDD0C8;
  --sand-deep:  #C9B8AC;
  --ink:        #323232;
  --ink-soft:   #55504C;
  --accent:     #5F4C3E;
  /* TERRACOTA — acento nuevo de marca (aprobado 07-09-2026). Las referencias
     del sector no usan su color en detalles: lo usan en BANDAS a sangre que se
     comen una pantalla entera. Este es para eso. Sobre él va siempre papel:
     #FBF9F7 sobre #B5563A da 4,9:1, que pasa AA para texto normal. */
  --terracota:      #B5563A;
  --terracota-hover:#9C4730;
  --terracota-suave:#F3E2DB;
  --line:       rgba(50, 50, 50, .13);
  --line-fuerte:rgba(50, 50, 50, .26);
  --line-clara: rgba(251, 249, 247, .28);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Ritmo vertical: una escala, no números sueltos */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4.5rem;
  --sec-y: clamp(4rem, 9vw, 8rem);
  --pad-x: clamp(1.25rem, 4vw, 3.5rem);
  --wrap:  76rem;
  --cab-h: 4.5rem;                /* alto de la barra superior fija */
  --radius: 2px;

  /* Movimiento partido (ver cabecera de esta hoja) */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-larga:cubic-bezier(.19, 1, .22, 1);
  --t-tap:  120ms;                /* pulsación */
  --t-ui:   190ms;                /* hover, foco, apertura de menú */
  --t-cont: 700ms;                /* un bloque de contenido entrando */
  --t-img: 1000ms;                /* una foto asentándose */
}

/* 03. Base y utilidades --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;       /* la cabecera móvil no tapa los anclajes */
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Grano de papel sobre TODA la página. Es el detalle que más barato sale y más
   cambia la sensación: el beige plano pasa a leerse como un papel de gramaje.
   El ruido es un PNG de 160px de lado y no un data: URI porque la CSP de estas
   webs es `img-src 'self'`, que bloquea data: — comprobado en consola.
   `pointer-events: none` es obligatorio: sin eso, esta capa se come todos los
   clics de la página. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  background-image: url('../img/grano.png');
  background-size: 160px 160px;
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: .32; } }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
/* RITMO DE LA PÁGINA. Ningún bloque puede tocar a otro del mismo color: dos
   secciones seguidas del mismo fondo se leen como una sola, larguísima. El
   orden de arriba abajo es:
     portada oscura · franja tinta · BANDA terracota · papel alterno ·
     papel · papel alterno · papel · BANDA terracota · pie oscuro
   Y en móvil sube el aire vertical, porque en una pantalla estrecha el color
   de fondo es lo único que separa un bloque del siguiente. */
.seccion { padding-block: var(--sec-y); }
.seccion--alt { background: var(--paper-alt); }
@media (max-width: 700px) { :root { --sec-y: clamp(3.5rem, 14vw, 6rem); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: var(--sp-3) var(--sp-5);
}
.skip-link:focus { left: 0; }

/* Etiqueta de sección. En minúscula y con tracking corto: el «CARTA DE
   SERVICIOS» en versalitas muy espaciadas era el tic de máquina de escribir
   que hacía que la página pareciera una plantilla. */
.eti {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.seccion__head { max-width: 46rem; margin-bottom: var(--sp-7); }
.seccion__title {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -.012em;
  margin-bottom: var(--sp-4);
}
.seccion__lead { color: var(--ink-soft); font-size: 1.0625rem; max-width: 52ch; }

/* 04. Cabecera --------------------------------------------------------------
   Barra superior con el logo a la izquierda, el menú al centro y la píldora de
   reserva a la derecha. No es una preferencia: de las diez referencias que
   sirvieron de brief, las cinco que cargan tienen exactamente esto, y ninguna
   usa un lomo lateral. Es lo que una clienta espera de la web de un salón, y
   pelearse con esa expectativa no es tener personalidad, es dar trabajo. */
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5);
  height: var(--cab-h);
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.cab__marca { display: flex; align-items: center; gap: var(--sp-3); }
.cab__marca img { width: 30px; height: 30px; }
.cab__nombre { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1; letter-spacing: .01em; }

.cab__nav { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.cab__nav a {
  position: relative;
  font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: .35rem;
  transition: color var(--t-ui) var(--ease);
}
.cab__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--terracota); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease);
}
.cab__nav a:hover, .cab__nav a:focus-visible,
.cab__nav a[aria-current="true"] { color: var(--ink); }
.cab__nav a:hover::after, .cab__nav a:focus-visible::after,
.cab__nav a[aria-current="true"]::after { transform: scaleX(1); }

.cab__acc { display: flex; align-items: center; gap: var(--sp-4); }
/* El hueco libre, al lado del botón: «hoy · 19:30» convierte «reservar algún
   día» en «reservar hoy», y es el dato que ninguna de las referencias tiene. */
.hueco { display: none; text-align: right; line-height: 1.15; }
.hueco-eti { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.hueco-val { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--terracota); }
@media (min-width: 1100px) { .hueco:not([hidden]) { display: block; } }

/* Menú móvil */
.burger { display: none; width: 44px; height: 44px; place-items: center; background: none; border: 0; cursor: pointer; }
.burger__caja { display: block; width: 22px; height: 12px; position: relative; }
.burger__linea {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform var(--t-ui) var(--ease);
}
.burger__linea:nth-child(1) { top: 0; }
.burger__linea:nth-child(2) { bottom: 0; }
.burger[aria-expanded="true"] .burger__linea:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__linea:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

.panel-nav {
  position: fixed; inset: 0 0 0 auto; z-index: 99;
  width: min(23rem, 88vw);
  display: none; flex-direction: column; justify-content: center; gap: var(--sp-5);
  padding: var(--sp-8) var(--sp-6);
  background: var(--paper);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
}
.panel-nav.abierto { transform: none; }
.panel-nav a { font-family: var(--serif); font-size: 1.9rem; }
.panel-nav__pie { margin-top: var(--sp-5); font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.velo { position: fixed; inset: 0; z-index: 98; display: none; background: rgba(50,50,50,.4); opacity: 0; transition: opacity var(--t-ui) var(--ease); }
.velo.visible { opacity: 1; }
body.sin-scroll { overflow: hidden; }

@media (max-width: 940px) {
  .cab { grid-template-columns: 1fr auto; }
  .cab__nav { display: none; }
  .burger { display: grid; }
  .panel-nav, .velo { display: flex; }
  .velo { display: block; }
  /* La píldora NO se esconde en móvil: en las referencias está siempre. Se
     encoge y pierde la palabra «cita», que el contexto ya la da. */
  .cab__acc { gap: var(--sp-2); }
  .cab__acc .btn--pildora { padding-inline: 1rem; min-height: 40px; font-size: 11.5px; }
  .cab__acc .btn--pildora .larga { display: none; }
}

.cuerpo { padding-top: var(--cab-h); }

/* 05. Botones y enlaces ---------------------------------------------------
   Pulsar tiene que contestar en 120 ms. Es lo único de la página que se
   permite ser instantáneo. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  min-height: 48px;                            /* objetivo táctil cómodo */
  padding: .7rem 1.5rem;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t-tap) var(--ease),
              color var(--t-tap) var(--ease),
              border-color var(--t-tap) var(--ease),
              transform var(--t-tap) var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }

/* La píldora de reserva. Redonda y en terracota: es el gesto que repiten las
   cinco referencias y el único elemento que no debe parecerse a nada más. */
.btn--pildora {
  background: var(--terracota); border-color: var(--terracota); color: var(--paper);
  border-radius: 999px; padding-inline: 1.6rem;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
.btn--pildora:hover { background: var(--terracota-hover); border-color: var(--terracota-hover); }
.btn:active { transform: translateY(1px); }
.btn--linea { background: transparent; color: var(--ink); }
.btn--linea:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--claro { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--claro:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Sobre la fotografía de la portada. Borde a .55 y no a .3: en una foto clara
   un borde tenue desaparece y el botón deja de leerse como botón. */
.btn--linea-clara { background: transparent; color: var(--paper); border-color: rgba(251, 249, 247, .55); }
.btn--linea-clara:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--sm { min-height: 40px; padding: .45rem 1.1rem; font-size: 13px; }
.btn--bloque { width: 100%; }

/* Enlace de texto: el subrayado crece desde la izquierda. */
.enlace {
  position: relative; display: inline-block; padding-bottom: 2px;
  color: var(--accent); font-weight: 500;
}
.enlace::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease);
}
.enlace:hover::after, .enlace:focus-visible::after { transform: scaleX(1); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 06. Aparición al entrar en pantalla -------------------------------------
   Con IntersectionObserver y no con `animation-timeline: view()`: el timeline
   de CSS sigue detrás de una bandera en Firefox estable, así que con view()
   una parte de las clientas no vería nunca la animación. Aquí se ve igual en
   todos los navegadores, y se apaga entero con «reducir movimiento». */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-cont) var(--ease-larga),
                transform var(--t-cont) var(--ease-larga);
  }
  .reveal.visible { opacity: 1; transform: none; }

  /* Las fotos entran un pelín grandes y se posan. Ese «asentarse» es lo que
     da la sensación de calma que pedía la dirección B. */
  .reveal-foto img { transform: scale(1.05); transition: transform var(--t-img) var(--ease-larga); }
  .reveal-foto.visible img { transform: none; }

  /* Una regla que se dibuja: el gesto de la dirección A. */
  .regla { transform: scaleX(0); transform-origin: left; transition: transform 560ms var(--ease-larga); }
  .regla.visible { transform: scaleX(1); }
}

/* 07. Portada -------------------------------------------------------------
   Esto ya no es un héroe partido en dos: es una CUBIERTA. La versión anterior
   dejaba el titular a un tercio del ancho en una pantalla de 1440 y no mandaba
   nadie; una portada que no se atreve se lee como plantilla, por buena que sea
   la tipografía.

   La foto ocupa la pantalla entera dentro de un marco de papel —el margen
   blanco que la convierte en lámina y no en fondo—, y el texto vive ABAJO a la
   izquierda sobre un velo real. El velo no es decoración: es lo que separa
   «texto encima de una foto» (que era el fallo de la web original: 15px a peso
   300 sobre unas manos) de una cubierta editorial. Medido: el titular sale por
   encima de 12:1 sobre el velo. */
.portada { padding: 0; }
.portada__lamina {
  position: relative;
  height: calc(100svh - var(--cab-h));
  min-height: 34rem;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.portada__lamina picture { display: block; width: 100%; height: 100%; }
.portada__lamina img { width: 100%; height: 100%; object-fit: cover; }

/* KEN BURNS. Un zoom lentísimo, 28 segundos de ida y otros tantos de vuelta.
   Es lo que hace que la página se vea VIVA en el primer segundo, sin tener que
   tocar ni bajar nada: hasta ahora todo el movimiento del sitio era
   microinteracción —solo existía si pulsabas o hacías scroll— y la primera
   impresión era la de una página quieta.
   Va sobre el <picture> y no sobre la <img>, que ya lleva el `transform` de la
   aparición: dos animaciones peleándose por la misma propiedad se anulan. */
@media (prefers-reduced-motion: no-preference) {
  .portada__lamina picture { animation: kenburns 56s ease-in-out infinite; transform-origin: 54% 46%; }
  @keyframes kenburns {
    0%, 100% { transform: scale(1.02); }
    50%      { transform: scale(1.13); }
  }
}

/* EL VELO. Aquí está la diferencia entre una cubierta editorial y el error de
   la web original —15px a peso 300 encima de unas manos—, así que no se deja
   al azar de la fotografía.

   El velo va sobre el BLOQUE DE TEXTO, no sobre la lámina entera: así el suelo
   de contraste está garantizado caiga donde caiga la foto. `--velo-piso` es el
   peor caso real —el velo a su alfa mínima compuesto sobre blanco puro— y es
   el valor contra el que se comprueba el contraste en la revisión. Si alguien
   sube la transparencia, la comprobación lo canta. */
:root { --velo-piso: rgb(70, 68, 66); }

.portada__lamina::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(26, 24, 22, .38) 0%, rgba(26, 24, 22, 0) 52%);
  pointer-events: none;
}
/* Con el texto centrado, el velo tiene que serlo también: un degradado desde
   abajo dejaría el nombre —que está en mitad de la pantalla— sobre la parte sin
   velar. `--velo-piso` sigue siendo el peor caso contra el que se comprueba. */
.portada__txt::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(24, 22, 20, .72) 0%, rgba(24, 22, 20, .52) 45%, rgba(24, 22, 20, .34) 100%),
    linear-gradient(to bottom, rgba(24, 22, 20, .26), rgba(24, 22, 20, .44));
  pointer-events: none;
}

.portada__txt {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-7) clamp(1.5rem, 4vw, 4rem);
  text-align: center;
  color: var(--paper);
}
.portada .eti { color: var(--sand); margin-bottom: var(--sp-4); }

/* Escala: el titular es lo más grande de la web con diferencia. Una cubierta
   que no domina no es una cubierta. */
/* El NOMBRE del estudio, y es lo más grande de la web con diferencia. En las
   cinco referencias la portada la ocupa el nombre del salón, no una frase:
   Strange Bird lo pone a 114px, Blonde Faith a 64px. Aquí escala hasta 176px.
   Sale de `data-nombre`, o sea del nombre que el negocio tiene en su panel. */
.portada__nombre {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.25rem, 12vw, 11rem);
  line-height: .9;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* La frase, debajo y a tamaño medio: sigue siendo el <h1> editable del panel. */
.portada__title {
  max-width: 22ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: .0;
  font-style: italic;
  color: var(--sand);
  text-wrap: balance;
}
.portada__lead {
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  font-weight: 500;                       /* sobre foto nunca se baja de 500 */
  color: rgba(251, 249, 247, .92);
  margin-bottom: var(--sp-6);
}
.portada__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); }

/* Marca y sello, arriba: el sello dice el argumento que sostiene el precio. */
.portada__alto {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 4vw, 4rem);
  color: var(--paper);
}
.portada__sello {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(251, 249, 247, .82);
  padding: .5rem .9rem;
  border: 1px solid rgba(251, 249, 247, .35);
}
.portada__anio { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .04em; }

/* El motivo de la marca, grabado sobre la foto. Recortar la fotografía entera
   con la almendra convertía la portada en un adorno y le quitaba a la imagen su
   trabajo; el mismo motivo como sello grande dice lo mismo sin estorbar. */
.portada__marca {
  position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(2rem, 6vw, 5rem); z-index: 1;
  width: clamp(4.5rem, 9vw, 8rem); height: auto;
  color: var(--paper); opacity: .28;
  pointer-events: none;
}
@media (max-width: 700px) { .portada__marca { display: none; } }

/* Aviso de scroll: una línea que respira. Se apaga con «reducir movimiento». */
.portada__bajar {
  position: absolute; left: 50%; bottom: 0; z-index: 1;
  width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, rgba(251,249,247,0), rgba(251,249,247,.7));
  transform-origin: bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .portada__bajar { animation: respirar 2.6s var(--ease) infinite; }
  @keyframes respirar {
    0%, 100% { transform: scaleY(.45); opacity: .35; }
    50%      { transform: scaleY(1);   opacity: .9; }
  }
}

/* Tira de datos: las tres preguntas de quien entra por primera vez y el
   argumento que sostiene el precio. Va pegada a la cubierta, sin aire entre
   medias: la lámina y la tira son una sola pieza. */
/* Franja de datos, en TINTA y a sangre justo debajo de la portada. Prolonga la
   oscuridad de la cubierta en vez de adelantar el terracota: cuando iba en
   naranja quedaba pegada a la banda de servicios —también naranja— y las dos
   se leían como un único bloque de color continuo.
   Así el terracota aparece solo dos veces, muy separadas, y pega más fuerte. */
.tira {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ink); color: var(--paper);
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  border-top: 3px solid var(--terracota);
}
.tira > div { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-right: 1px solid rgba(251,249,247,.18); }
.tira > div:last-child { border-right: 0; padding-right: 0; }
.tira dt { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,249,247,.72); margin-bottom: var(--sp-1); }
.tira dd { font-size: 14.5px; font-weight: 500; }
.tira a { border-bottom: 1px solid rgba(251,249,247,.5); }
.tira .enlace { color: var(--paper); }
.tira .enlace::after { background: var(--paper); }

@media (max-width: 1079px) {
  .portada { padding: 0; }
  /* Menos el alto de la cabecera fija: `.cuerpo` empuja la página 3,75rem hacia
     abajo, así que una lámina de 100svh acaba justo esos 60px por debajo del
     borde de la pantalla y se lleva por delante el último botón. Medido. */
  .portada__lamina { height: calc(100svh - var(--cab-h)); }
  .portada__txt { padding-bottom: var(--sp-6); }
}
@media (max-width: 560px) {
  /* El año se parte en dos líneas y se echa encima del sello: en un móvil no
     aporta nada, así que se va. */
  .portada__anio { display: none; }
  .portada__nombre { font-size: clamp(2.75rem, 13vw, 4rem); }
  .portada__title { font-size: 1.15rem; }
  /* En un móvil la cubierta no aguanta dos botones: el segundo se salía por
     debajo del borde de la pantalla (medido, 868px de fondo en una ventana de
     844). Y tampoco los necesita — la acción principal se queda como botón y
     la secundaria pasa a enlace, que es lo que es. Reservar sigue además en la
     barra fija de abajo. */
  .portada__acciones { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .portada__acciones .btn--linea-clara {
    min-height: 0; padding: 0; border: 0; background: none;
    align-self: flex-start;
    font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid rgba(251, 249, 247, .55);
    padding-bottom: 3px;
  }
  .portada__acciones .btn--linea-clara:hover { background: none; color: var(--paper); border-bottom-color: var(--paper); }
}
@media (max-width: 1079px) {
  .tira { grid-template-columns: 1fr 1fr; }
  .tira > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .tira > div { padding-left: 0; }
}
@media (max-width: 440px) {
  .tira { grid-template-columns: 1fr; }
  .tira > div { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .tira > div:last-child { border-bottom: 0; }
}


/* 07b. El motivo de la marca ----------------------------------------------
   El logotipo es una almendra: la silueta de una uña. Estaba usada una sola
   vez, a 30px, en una esquina. Aquí pasa a ser el elemento que cose la página:
   separa las secciones y marca el agua detrás de la frase de la promesa. Una
   web cara tiene un gesto que sólo puede ser suyo; este ya estaba en la marca,
   sin usar. */
.almendra { display: block; margin: 0 auto; color: var(--sand-deep); }
.divisor {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sp-5);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.divisor::before, .divisor::after { content: ''; height: 1px; background: var(--line); }
.divisor .almendra { width: 20px; height: 32px; }

.promesa { position: relative; overflow: hidden; }
/* Marca de agua: grande, casi invisible, detrás del texto. A .06 no se «ve»,
   se nota — que es justo lo que tiene que hacer una marca de agua. */
.promesa__agua {
  position: absolute; right: -4vw; top: 50%; transform: translateY(-50%);
  width: min(38vw, 26rem); height: auto;
  color: var(--sand); opacity: .06; pointer-events: none;
}
.promesa > .wrap { position: relative; }
@media (max-width: 900px) { .promesa__agua { right: -22vw; width: 60vw; } }

/* 08. Promesa de marca ---------------------------------------------------- */
.promesa__claim {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  max-width: 24ch;
  margin-bottom: var(--sp-8);
}
.pilares { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-5); }
.pilar { padding-top: var(--sp-4); border-top: 1px solid var(--line-fuerte); }
.pilar__n { font-family: var(--serif); font-size: 1.25rem; color: var(--sand-deep); line-height: 1; }
.pilar__title { font-size: 1.0625rem; font-weight: 600; margin: var(--sp-3) 0 var(--sp-2); }
.pilar p { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 900px) { .pilares { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pilares { grid-template-columns: 1fr; } }

/* 08a. Marquesina -----------------------------------------------------------
   Una tira de texto en bucle. Dos de las cinco referencias la llevan, y es la
   pieza que resuelve de verdad «la página no se mueve»: está siempre en
   marcha, no espera a que nadie haga nada.

   El truco para que el bucle no dé el salto: el contenido va DUPLICADO en el
   HTML y la animación desplaza exactamente el 50%. Al llegar al final, la
   segunda copia está justo donde estaba la primera y el corte es invisible.
   La copia duplicada lleva aria-hidden: un lector de pantalla no tiene por qué
   oír la misma frase dos veces. */
.marquesina {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--sp-4);
  border-block: 1px solid rgba(251, 249, 247, .14);
}
.marquesina__pista { display: flex; width: max-content; }
.marquesina__grupo {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  padding-right: clamp(2rem, 5vw, 4.5rem);
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}
.marquesina__grupo span { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.marquesina__grupo span::after {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--terracota); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .marquesina__pista { animation: desfilar 34s linear infinite; }
  @keyframes desfilar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
/* Con «reducir movimiento» no desfila: se queda quieta y se puede leer. */
@media (prefers-reduced-motion: reduce) { .marquesina { overflow-x: auto; } }

/* 08b. Bandas y mosaico -----------------------------------------------------
   La pieza que más separa a las referencias de lo que había: usan su color en
   BANDAS que se comen la pantalla entera, y presentan los servicios como un
   mosaico de fotos antes de dar un solo precio. Primero se ve el trabajo, y
   luego se mira lo que cuesta. */
.banda {
  background: var(--terracota);
  color: var(--paper);
  padding-block: var(--sec-y);
}
.banda .eti { color: rgba(251, 249, 247, .78); }
.banda .seccion__title { color: var(--paper); }
.banda .seccion__lead { color: rgba(251, 249, 247, .88); }
.banda__head { text-align: center; max-width: 44rem; margin: 0 auto var(--sp-7); }
.banda__head .seccion__lead { margin-inline: auto; }

.mosaico { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 1.2vw, 1rem); }
.mosaico a {
  position: relative; display: block; aspect-ratio: 3/4; overflow: hidden;
  background: rgba(0, 0, 0, .2);
}
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 620ms var(--ease-larga); }
.mosaico a:hover img, .mosaico a:focus-visible img { transform: scale(1.06); }
/* El velo del pie es fijo, no un hover: el nombre del servicio tiene que
   leerse siempre, también en un móvil donde no hay hover que valga. */
.mosaico figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(24, 22, 20, .82), rgba(24, 22, 20, 0));
  font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.15;
  color: var(--paper);
}
.mosaico figure { margin: 0; }
@media (max-width: 900px) { .mosaico { grid-template-columns: 1fr 1fr; } }

/* 09. Servicios y precios -------------------------------------------------
   El corazón de la página. Dos columnas densas de carta + una ficha lateral
   que se queda pegada mientras se leen los precios: la prueba (foto del
   estudio), la letra pequeña y el botón de reservar, al lado del dinero. */
/* La carta va dentro de su propio contenedor porque es datos.js quien lo
   rellena: puede traer dos categorías o seis, y la rejilla tiene que aguantar
   cualquiera de las dos sin que haya que tocar nada. */
.serv__cols {
  display: grid;
  grid-template-columns: 1fr 19rem;
  gap: var(--sp-7) clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.serv__carta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  align-content: start;
}
.carta { break-inside: avoid; }
.carta__title {
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
  margin-top: var(--sp-7);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-fuerte);
}
.carta:nth-of-type(1) .carta__title, .carta:nth-of-type(2) .carta__title { margin-top: 0; }

/* OJO: esta estructura la impone `datos.js`, que reconstruye la carta con los
   servicios, precios y duraciones REALES del panel de citas. Si el negocio
   cambia un precio ahí, aquí cambia solo. Por eso el CSS se escribe contra su
   marcado —`.item__main` y `.item__meta`— y la plantilla estática usa el mismo:
   las dos vías tienen que verse idénticas. */
.lista-precios { margin: 0; padding: 0; list-style: none; }
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-4) var(--sp-3) var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-ui) var(--ease);
}
.item__main { min-width: 0; }
/* La duración encima y el precio debajo, los dos alineados a la derecha. El
   orden lo fija datos.js y se respeta: la duración pequeña hace de etiqueta y
   el precio aterriza debajo con todo el peso. Alineados a la derecha, la
   columna de precios se compara en vertical de un vistazo. */
.item__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; }
/* Al pasar por encima se tiñe la fila entera: en una lista de doce precios,
   saber qué línea estás leyendo importa más que cualquier adorno. */
.item:hover { background: color-mix(in srgb, var(--sand) 42%, transparent); }

/* Nombre en serif: un servicio de 50 € no puede llamarse igual que un enlace
   del menú. A 1.35rem la Cormorant está muy por encima del tamaño en el que
   se vuelve frágil. */
.item__name {
  font-family: var(--serif);
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  transition: color var(--t-ui) var(--ease);
}
.item:hover .item__name { color: var(--accent); }

/* El precio en Archivo con cifras tabulares: la columna cuadra al milímetro
   y se compara de un vistazo, que es justo lo que hace quien duda entre la
   semipermanente de 25 € y la rusa de 32 €. */
/* La cifra manda y la moneda acompaña: el € a .55em y elevado deja de competir
   con el número y la columna se alinea por el dígito, que es lo que se compara
   cuando alguien duda entre la semipermanente de 25 y la rusa de 32. */
.item__price {
  display: inline-flex; align-items: flex-start; gap: .12em;
  font-weight: 700; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
  justify-content: flex-end;
  min-width: 3.75rem;
}
.item__cifra { font-size: 1.65rem; line-height: 1; }
.item__moneda { font-size: .72rem; font-weight: 600; line-height: 1; padding-top: .28em; color: var(--ink-soft); }
.item__desc { font-size: 14px; color: var(--ink-soft); max-width: 44ch; margin: .25rem 0 0; }

/* La duración sube de rango. En gris diminuto, «120 min» daba miedo; bien
   compuesta al lado del precio dice «dos horas de oficio para ti», que es
   exactamente el argumento de los servicios caros. */
.item__time {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right;
}

/* Ficha lateral pegada. Va en su propia columna, con la carta entera al lado
   en una sola fila: así `position: sticky` la acompaña durante TODA la carta.
   (Si la ficha ocupara solo una fila de la rejilla, dejaría de pegarse en
   cuanto empezara la siguiente: sticky no sale de su área de rejilla.) */
.serv__ficha { position: sticky; top: var(--sp-6); align-self: start; }
.serv__ficha figure { overflow: hidden; background: var(--paper-alt); aspect-ratio: 4/5; }
.serv__ficha figure img { width: 100%; height: 100%; object-fit: cover; }
.serv__ficha .nota {
  font-size: 13px; color: var(--ink-soft); line-height: 1.65;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}

@media (max-width: 1240px) {
  .serv__cols { grid-template-columns: 1fr; }
  .serv__ficha {
    position: static;
    display: grid; grid-template-columns: 16rem 1fr; gap: var(--sp-5);
    align-items: center;
    margin-top: var(--sp-7); padding-top: var(--sp-6);
    border-top: 1px solid var(--line-fuerte);
  }
  .serv__ficha figure { aspect-ratio: 4/3; }
  .serv__ficha .nota { border: 0; padding-top: 0; }
}
@media (max-width: 760px) {
  .serv__carta { grid-template-columns: 1fr; }
  .carta:nth-of-type(2) .carta__title { margin-top: var(--sp-7); }
  .serv__ficha { grid-template-columns: 1fr; }
}

/* 10. Galería -------------------------------------------------------------
   Cuatro fotos a sangre, de borde a borde, sin el ancho de lectura. Antes eran
   ocho dentro del `wrap` — y cuatro de ellas no eran de manicura: un interior
   de PELUQUERÍA con sillones de barbero y tres bodegones de maquillaje. Menos
   fotos y más grandes se lee más caro, y sobre todo dejan de contradecir lo
   que dice el titular. */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 1.6vw, 1.5rem); padding-inline: var(--pad-x); }
.galeria__item { position: relative; overflow: hidden; background: var(--sand); }
/* El recorte sale del logotipo: la mitad superior de la almendra es,
   literalmente, la punta de una uña. Es el mismo motivo que separa las
   secciones y que marca el agua de la promesa — cuatro apariciones de la misma
   forma es lo que convierte un dibujo en un sistema. */
.galeria__link {
  display: block; aspect-ratio: 4/5;
  border-radius: 46% 46% 4px 4px / 34% 34% 4px 4px;
  overflow: hidden;
}
.galeria__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms var(--ease-larga); }
.galeria__link:hover img, .galeria__link:focus-visible img { transform: scale(1.045); }
.galeria__pie {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: linear-gradient(transparent, rgba(50, 50, 50, .85));
  color: var(--paper); font-size: 12px; font-weight: 500;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.galeria__link:hover .galeria__pie,
.galeria__link:focus-visible .galeria__pie { opacity: 1; transform: none; }
@media (max-width: 900px) { .galeria { grid-template-columns: repeat(2, 1fr); } }

/* Cursor propio de la galería. El puntero del sistema se apaga solo dentro de
   la galería; el nodo lo mueve main-v2.js con transform. */
@media (hover: hover) and (pointer: fine) {
  .galeria, .galeria * { cursor: none; }
}
.cursor-ver {
  position: fixed; left: 0; top: 0; z-index: 140;
  display: grid; place-items: center;
  width: 4.75rem; height: 4.75rem;
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;   /* la almendra, otra vez */
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.cursor-ver.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cursor-ver { display: none; } }

/* 11. Equipo -------------------------------------------------------------- */
/* CARRUSEL DEL EQUIPO. Aquí sí tiene sentido, y por dos motivos: el panel
   decide cuántas personas hay —hoy seis— así que una rejilla fija se rompe con
   cualquier número, y arrastrar es el gesto natural para una fila de retratos.
   Va con scroll-snap, sin una línea de JavaScript: no hay estado que se
   desincronice, funciona con el dedo, con la rueda y con el teclado, y si algo
   falla lo peor que queda es una lista que se puede desplazar.
   La última tarjeta deja ver un trozo de la siguiente: sin ese asomo, nadie
   sabe que hay más. */
.equipo {
  list-style: none; margin: 0; padding: 0 0 var(--sp-4);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 22rem);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.equipo > * { scroll-snap-align: start; }
.miembro__foto { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--paper-alt); margin-bottom: var(--sp-4); }
.miembro__nombre { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; margin-bottom: var(--sp-1); }
.miembro__rol { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3); }
.miembro__bio { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 820px) {
  .equipo { grid-auto-columns: minmax(13rem, 78vw); }
}


/* 12. Ubicación y horario ------------------------------------------------- */
.ubicacion { display: grid; grid-template-columns: 22rem 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dato { padding-top: var(--sp-4); border-top: 1px solid var(--line); margin-bottom: var(--sp-5); }
.dato:first-child { border-top-color: var(--line-fuerte); }
.dato__title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.dato__body { font-style: normal; font-size: 15px; line-height: 1.7; }
.horario { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.horario th, .horario td { padding: .4rem 0; text-align: left; font-weight: 400; }
.horario td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.horario tr + tr th, .horario tr + tr td { border-top: 1px solid var(--line); }
.dato__nota { font-size: 13px; color: var(--ink-soft); margin-top: var(--sp-3); }

/* El mapa arranca como un panel de papel con el motivo de la marca, no con una
   foto: sólo quedaban cinco imágenes de marca para seis huecos, y la única que
   sobraba era el interior de una peluquería. Un panel se lee como una decisión;
   repetir una foto o enseñar el local equivocado, no. */
.mapa {
  position: relative; aspect-ratio: 3/2; overflow: hidden;
  display: grid; place-content: center; justify-items: center; gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--paper-alt);
  border: 1px solid var(--line);
}
.mapa__marca { width: 3.25rem; height: auto; color: var(--sand-deep); }
.mapa__donde { font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; text-align: center; color: var(--ink); }
.mapa__btn { position: static; }
/* Al cargar el iframe, main-v2.js vacía el contenedor: la rejilla estorbaría. */
.mapa:has(iframe) { display: block; padding: 0; }
.mapa iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .ubicacion { grid-template-columns: 1fr; } }

/* 13. CTA final ----------------------------------------------------------- */
.cta-final {
  background: var(--terracota); color: var(--paper);
  padding-block: calc(var(--sec-y) * 1.15);
  text-align: center;
}
.cta-final .wrap > * { margin-inline: auto; }
.cta-final .eti { color: rgba(251, 249, 247, .78); }
.cta-final__title { font-family: var(--serif); font-size: clamp(2.25rem, 5.5vw, 4rem); letter-spacing: -.015em; margin-bottom: var(--sp-4); }
.cta-final__lead { color: rgba(251, 249, 247, .9); font-size: 1.0625rem; max-width: 44ch; margin-bottom: var(--sp-6); }

/* 14. Pie ----------------------------------------------------------------- */
.pie { background: var(--ink); color: var(--paper); padding-block: var(--sp-8) var(--sp-6); }
.pie__nombre { color: var(--paper); }
.pie__claim, .pie__body { color: rgba(251, 249, 247, .76); }
.pie__title { color: rgba(251, 249, 247, .6); }
.pie__marca img { filter: brightness(0) invert(1); opacity: .85; }
.pie .enlace { color: var(--sand); }
.pie .enlace::after { background: var(--sand); }
.pie__body a:hover { color: var(--paper); }
.pie__legal { border-top-color: rgba(251, 249, 247, .18); color: rgba(251, 249, 247, .6); }
.pie .btn { background: var(--terracota); border-color: var(--terracota); color: var(--paper); }
.pie .btn:hover { background: var(--terracota-hover); border-color: var(--terracota-hover); }
.pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
.pie__marca img { width: 40px; height: 40px; margin-bottom: var(--sp-3); }
.pie__nombre { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: var(--sp-2); }
.pie__claim { font-size: 13.5px; color: var(--ink-soft); max-width: 30ch; }
.pie__title { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.pie__body { font-style: normal; font-size: 14px; line-height: 1.75; }
.pie__body a { transition: color var(--t-ui) var(--ease); }
.pie__body a:hover { color: var(--accent); }
.redes { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); font-size: 13px; }
.pie__legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between;
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
@media (max-width: 900px) { .pie__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie__grid { grid-template-columns: 1fr; } }

/* 15. Barra móvil de reserva ----------------------------------------------
   Aparece al pasar el héroe. En escritorio no hace falta: el botón vive en
   la barra superior, siempre a la vista. */
.cta-movil {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  padding: var(--sp-3) var(--pad-x) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform 280ms var(--ease);
}
.cta-movil.visible { transform: none; }
@media (min-width: 941px) { .cta-movil { display: none; } }

/* 16. Visor (lightbox) ---------------------------------------------------- */
/* ⚠ `.visor[hidden]` NO es opcional. El atributo `hidden` se apoya en la regla
   `[hidden] { display: none }` de la hoja del NAVEGADOR, y cualquier `display`
   que se declare aquí la gana por especificidad de origen. Sin esta línea el
   visor se queda a pantalla completa, invisible (opacity: 0) y con z-index 150,
   comiéndose TODOS los clics de la página: los botones de reservar dejaban de
   funcionar y no se veía nada raro.
   La comprobación automática tampoco lo veía, porque abría la galería con un
   `.click()` de JavaScript, y eso no pasa por el reparto de clics del navegador.
   El mismo caso, por lo mismo, en `.velo`. */
.visor {
  position: fixed; inset: 0; z-index: 150;
  display: grid; grid-template-columns: 4rem 1fr 4rem; align-items: center;
  background: rgba(35, 35, 35, .94);
  opacity: 0; transition: opacity var(--t-ui) var(--ease);
}
.visor[hidden], .velo[hidden] { display: none; }
.visor.abierto { opacity: 1; }
.visor__figura { grid-column: 2; text-align: center; }
.visor__img { max-width: min(90vw, 60rem); max-height: 78vh; margin-inline: auto; object-fit: contain; }
.visor__pie { color: var(--paper); font-size: 13px; margin-top: var(--sp-4); }
.visor__cerrar, .visor__nav {
  background: none; border: 0; color: var(--paper); cursor: pointer;
  width: 44px; height: 44px; font-size: 1.75rem; line-height: 1;
  transition: opacity var(--t-ui) var(--ease);
}
.visor__cerrar { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: 1.5rem; }
.visor__nav:hover, .visor__cerrar:hover { opacity: .6; }
.visor__nav--prev { grid-column: 1; justify-self: center; }
.visor__nav--next { grid-column: 3; justify-self: center; }

/* 17. Accesibilidad ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .galeria__link:hover img { transform: none; }
}
@media (forced-colors: active) {
  .btn { border: 1px solid currentColor; }
  .item { border-bottom: 1px solid currentColor; }
}