/* Angel Perruquers — hoja de estilos del tema
 *
 * Este fichero NO se compila de nada: es la fuente y es lo que se sirve.
 * Antes vivía en assets/dist/ junto a un SCSS paralelo que no compilaba nadie,
 * así que tocar el SCSS no cambiaba la web. Se edita aquí, a mano.
 *
 * CSS nuevo, AL FINAL del fichero: a igual especificidad gana la última regla.
 * Y al tocar este fichero, sube AP_VERSION en functions.php o el navegador de
 * quien ya haya entrado seguirá con la versión vieja hasta una semana.
 */

/* ============================================================
   TIPOGRAFÍAS PROPIAS — v1.9.0
   ============================================================ */

/* Antes se pedían a fonts.googleapis.com en cada visita: dos dominios más que
   resolver, dos conexiones TLS que abrir y una hoja de estilos que BLOQUEA el
   pintado, más la IP del visitante enviada a Google antes de aceptar nada.
   Ahora los ficheros están aquí y salen del mismo servidor que el resto.

   Son variables: un solo fichero cubre los pesos 300 a 500, en vez de un
   fichero por peso. Subconjunto latino, que es lo que necesitan el castellano,
   el catalán y el inglés.

   font-display: swap → el texto se ve desde el primer momento con la
   tipografía del sistema y cambia cuando llega la buena. Nunca una pantalla
   en blanco esperando a una fuente. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   CUSTOM PROPERTIES (design tokens)
   ============================================================ */
:root {
  --color-paper:      #F6F3EE;
  --color-paper-deep: #EDE7DE;
  --color-ink:        #1A1A1A;
  --color-ink-soft:   #4A4744;
  --color-accent:     #8B6F47;
  --color-line:       #DCD5C9;
  --color-white:      #FFFFFF;
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-display: clamp(3rem, 8vw, 7.5rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4.5rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 3rem);
  --fs-h3:      clamp(1.375rem, 2.2vw, 2rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.125rem);
  --fs-lead:    clamp(1.125rem, 2vw, 1.5rem);   /* entradilla: taglines, citas, nombres de servicio */
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-micro:   0.6875rem;                      /* etiquetas mínimas */
  --fs-number:  clamp(5rem, 16vw, 14rem);       /* las cifras grandes */
  --lh-display: 0.95;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --ls-display: -0.02em;
  --ls-eyebrow: 0.16em;
  --ls-heading: -0.01em;
  --max-width:  1440px;
  --padding-x:  clamp(1.25rem, 5vw, 6rem);
  /* Tres ritmos, no uno. Antes todas las secciones tenían el mismo aire
     arriba y abajo y la página salía plana: respiraba igual antes del
     manifiesto que antes de la lista de precios. */
  --section-py:    clamp(4.5rem, 8vw, 9rem);    /* el de trabajo */
  --section-py-lg: clamp(6.5rem, 12vw, 14rem);  /* los dos momentos de respirar */
  --section-py-sm: clamp(2rem, 4vw, 3.5rem);    /* tejido conectivo */
  --grid-gap:   clamp(0.75rem, 2vw, 2rem);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
  --duration-slow:  900ms;
  --duration-xslow: 1200ms;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; }
p + p { margin-top: 1em; }
table { border-collapse: collapse; border-spacing: 0; }

/* ============================================================
   BASE UTILITIES
   ============================================================ */
::selection { background-color: #8B6F47; color: #F6F3EE; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #EDE7DE; }
::-webkit-scrollbar-thumb { background: #DCD5C9; border-radius: 2px; }
:focus-visible { outline: 2px solid #8B6F47; outline-offset: 3px; border-radius: 1px; }

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  padding: 0.5rem 1rem; background: #1A1A1A; color: #F6F3EE;
  font-size: var(--fs-small); font-weight: 500; text-decoration: none;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: 1rem; }

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

.container {
  width: 100%; max-width: var(--max-width);
  margin-inline: auto; padding-inline: var(--padding-x);
}

.section { padding-block: var(--section-py); }
.section--dark { background-color: #1A1A1A; color: #F6F3EE; }
.section--deep { background-color: #EDE7DE; }

.section-number {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); color: #8B6F47; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.5em;
}
.section-number::after { content: '—'; color: #DCD5C9; font-weight: 300; }

/* Reveal por scroll */
/* La animación de entrada SOLO se aplica si el JS ha arrancado (html.js).
   Antes esta regla escondía el contenido sin condición: si el JS no corría
   -- LiteSpeed agrupando o retrasando el fichero, un error, un navegador viejo --
   el H1, el manifiesto, los servicios y los precios quedaban invisibles con la
   página cargada. Sin html.js no hay clip-path y se ve todo: falla abierto. */
html.js [data-reveal] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-slow) var(--ease-out-expo);
}
html.js [data-reveal].is-revealed { clip-path: inset(0 0 0% 0); }
/* Y en cuanto termina la animación se quita del todo (lo hace el JS al detectar
   transitionend). Un elemento con clip-path distinto de `none` no puede usar la
   ruta rápida del compositor NUNCA MÁS: el navegador tiene que recortarlo en
   cada repintado, para siempre. Eran 13 elementos, muchos de ellos bloques
   grandes de texto, encareciendo cada fotograma de scroll mucho después de que
   la animación hubiera acabado. */
html.js [data-reveal].is-settled { clip-path: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { clip-path: none; transition: none; }
}

/* Ruido hero */
.has-noise { position: relative; }
.has-noise::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px; z-index: 0;
}
.has-noise > * { position: relative; z-index: 1; }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
.text-eyebrow {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
.text-manifesto {
  font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: 300; font-style: italic; line-height: 1.25; letter-spacing: -0.01em; color: #1A1A1A;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.875em 2em; font-family: var(--font-ui); font-size: var(--fs-small);
  font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  line-height: 1; border: 1px solid currentColor; border-radius: 0;
  cursor: pointer; text-decoration: none; touch-action: manipulation;
  min-height: 44px; /* tap target mínimo */
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.btn:focus-visible { outline: 2px solid #8B6F47; outline-offset: 3px; }

.btn--primary { background-color: #1A1A1A; color: #F6F3EE; border-color: #1A1A1A; }
.btn--primary:hover { background-color: #8B6F47; border-color: #8B6F47; }

.btn--outline { background-color: transparent; color: #1A1A1A; border-color: #1A1A1A; }
.btn--outline:hover { background-color: #1A1A1A; color: #F6F3EE; }

.btn--outline-light { background-color: transparent; color: #F6F3EE; border-color: #F6F3EE; }
.btn--outline-light:hover { background-color: #F6F3EE; color: #1A1A1A; }

.btn--arrow::after { content: '→'; transition: transform var(--duration-base) var(--ease-out-expo); }
.btn--arrow:hover::after { transform: translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-block: 1.25rem;
  transition: background-color var(--duration-base) var(--ease-standard),
              padding var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled {
  /* SIN backdrop-filter. Aquí había blur(12px).
     
     backdrop-filter obliga al navegador a leer los píxeles que hay detrás del
     elemento, desenfocarlos y recomponerlos EN CADA FOTOGRAMA. La cabecera es
     fija y ocupa todo el ancho, así que en una pantalla de 1440 px eso es
     desenfocar una franja de 1440 px sesenta veces por segundo, y solo mientras
     haces scroll (la clase is-scrolled se pone al pasar de 60 px).
     
     En el móvil la franja mide 375 px: quince veces menos superficie. De ahí que
     el móvil fuera fluido y el escritorio no, y que solo se notara al deslizar.
     
     El fondo ya era opaco al 96%, así que el desenfoque casi no se veía. Se pone
     opaco del todo y no se pierde nada a la vista. */
  background-color: rgb(246, 243, 238);
  padding-block: 0.875rem;
  border-bottom: 1px solid #DCD5C9;
}
.site-header__inner {
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  padding-inline: var(--padding-x); display: flex; align-items: center;
  justify-content: space-between;
}

.site-logo { display: flex; flex-direction: column; gap: 0.1em; text-decoration: none; }
.site-logo__name {
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 400;
  font-style: italic; line-height: 1; color: #1A1A1A; letter-spacing: -0.02em;
}
.site-logo__name span { color: #8B6F47; }
.site-logo__sub {
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}

.primary-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .primary-nav { display: flex; } }
.primary-nav__list { display: flex; align-items: center; gap: 2rem; }
.primary-nav__list a, .primary-nav .menu-item a {
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #1A1A1A;
  position: relative; text-decoration: none; padding-block: 0.25rem;
}
.primary-nav__list a::after, .primary-nav .menu-item a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: #8B6F47;
  transition: width var(--duration-base) var(--ease-out-expo);
}
.primary-nav__list a:hover::after, .primary-nav .menu-item a:hover::after { width: 100%; }
.primary-nav__cta .btn { padding: 0.6em 1.5em; }

/* Hamburger */
.nav-toggle {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 44px; height: 44px; cursor: pointer;
  background: none; border: none; padding: 6px;
  touch-action: manipulation;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; height: 1px; background: #1A1A1A; transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out-expo),
              opacity var(--duration-fast) var(--ease-standard);
  pointer-events: none;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menú móvil overlay */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99; background-color: #F6F3EE;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--padding-x); opacity: 0; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
  overflow-y: auto;
  padding-top: max(5rem, env(safe-area-inset-top) + 4rem);
  padding-bottom: max(2rem, env(safe-area-inset-bottom) + 2rem);
}
.mobile-nav.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }
.mobile-nav__list { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 2.5rem; }
.mobile-nav__item { overflow: hidden; }
.mobile-nav__link {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight: 300; font-style: italic;
  color: #1A1A1A; line-height: 1.1; padding-block: 0.2em;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-out-expo), color var(--duration-fast) var(--ease-standard);
}
.mobile-nav.is-open .mobile-nav__link { transform: translateY(0); }
.mobile-nav.is-open .mobile-nav__item:nth-child(1) .mobile-nav__link { transition-delay: 50ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(2) .mobile-nav__link { transition-delay: 100ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(3) .mobile-nav__link { transition-delay: 150ms; }
.mobile-nav.is-open .mobile-nav__item:nth-child(4) .mobile-nav__link { transition-delay: 200ms; }
.mobile-nav__link:hover, .mobile-nav__link:active { color: #8B6F47; }
.mobile-nav__footer {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: #4A4744;
  border-top: 1px solid #DCD5C9; padding-top: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.mobile-nav__footer p { font-size: var(--fs-small); }

.site-header-spacer { height: 72px; }
.home .site-header-spacer { display: none; }

/* ============================================================
   CURSOR PERSONALIZADO (solo desktop)
   ============================================================ */
body.has-custom-cursor { cursor: none; }
body.has-custom-cursor a,
body.has-custom-cursor button { cursor: none; }
.cursor { display: none; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .cursor { display: block; } }
@media (prefers-reduced-motion: reduce) { .cursor { display: none !important; } }
.cursor__dot {
  width: 6px; height: 6px; background: #1A1A1A; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__ring {
  position: fixed; top: 0; left: 0; width: 32px; height: 32px;
  border: 1px solid rgba(26,26,26,0.3); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  transition: width 0.35s var(--ease-out-expo), height 0.35s var(--ease-out-expo),
              border-color var(--duration-base) var(--ease-standard);
}
body.cursor-expanded .cursor__ring { width: 56px; height: 56px; border-color: #8B6F47; }
body.cursor-expanded .cursor__dot { background: #8B6F47; }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background-color: #1A1A1A; color: #F6F3EE;
  padding: 1.25rem var(--padding-x);
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom) + 1.25rem);
  border-top: 1px solid rgba(74,71,68,0.4);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.cookie-banner__text { font-size: var(--fs-small); color: #DCD5C9; max-width: 55ch; line-height: 1.6; flex: 1 1 200px; }
.cookie-banner__text a { color: #F6F3EE; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 1rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.cookie-banner__accept {
  display: inline-flex; align-items: center; padding: 0.6em 1.25em;
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; line-height: 1;
  border: 1px solid #F6F3EE; border-radius: 0; background: transparent; color: #F6F3EE;
  cursor: pointer; min-height: 44px; touch-action: manipulation;
  transition: background-color var(--duration-base) var(--ease-standard),
  color var(--duration-base) var(--ease-standard);
}
.cookie-banner__accept:hover { background-color: #F6F3EE; color: #1A1A1A; }
.cookie-banner__configure {
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: rgba(246,243,238,0.5); background: none; border: none; cursor: pointer;
  min-height: 44px; touch-action: manipulation;
  transition: color var(--duration-fast) var(--ease-standard);
}
.cookie-banner__configure:hover { color: #F6F3EE; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background-color: #EDE7DE; border-top: 1px solid #DCD5C9; }
.site-footer__main {
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  padding-inline: var(--padding-x); padding-block: clamp(2.5rem, 6vw, 5rem);
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
@media (min-width: 640px) {
  .site-footer__main { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (min-width: 1024px) {
  .site-footer__main { grid-template-columns: 1.5fr 1fr 1fr; }
}
.site-footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.site-footer__tagline { font-family: var(--font-display); font-style: italic; font-size: var(--fs-body); color: #4A4744; max-width: 20ch; }
.site-footer__nav { display: flex; flex-direction: column; gap: 1rem; }
.site-footer__nav-label, .site-footer__contact-label {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744; margin-bottom: 0.5rem;
}
.site-footer__nav ul { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__nav a { font-size: var(--fs-small); color: #4A4744; }
.site-footer__nav a:hover { color: #1A1A1A; }
.site-footer__contact { display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer__contact p { font-size: var(--fs-small); color: #4A4744; line-height: 1.6; }
.site-footer__contact a { color: #4A4744; }
.site-footer__contact a:hover { color: #8B6F47; }
.site-footer__booking-link {
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #8B6F47;
  position: relative;
}
.site-footer__booking-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: #8B6F47;
  transition: width var(--duration-base) var(--ease-out-expo);
}
.site-footer__booking-link:hover::after { width: 100%; }
.site-footer__bottom {
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  padding-inline: var(--padding-x); padding-block: 1.5rem;
  border-top: 1px solid #DCD5C9;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.site-footer__copy { font-size: var(--fs-eyebrow); letter-spacing: 0.04em; color: #4A4744; }
.site-footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-footer__legal a { font-size: var(--fs-eyebrow); letter-spacing: 0.04em; color: #4A4744; }
.site-footer__legal a:hover { color: #1A1A1A; text-decoration: underline; }

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; min-height: 100dvh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap); align-items: center;
  background-color: #F6F3EE; overflow: hidden;
}
.hero__content {
  grid-column: 1 / 8;
  display: flex; flex-direction: column; gap: 2rem;
  padding-top: 5.5rem; padding-bottom: 4rem; padding-inline: var(--padding-x); z-index: 1;
}
@media (max-width: 767px) {
  .hero__content {
    grid-column: 1 / -1;
    padding-top: max(5.5rem, env(safe-area-inset-top) + 5rem);
    padding-bottom: 5rem;
    gap: 1.75rem;
  }
}
.hero__eyebrow {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
@media (max-width: 479px) {
  .hero__eyebrow { font-size: var(--fs-micro); letter-spacing: 0.1em; }
}
.hero__title { display: flex; flex-direction: column; gap: 0; }
.hero__name {
  font-family: var(--font-display); font-size: var(--fs-display); font-weight: 500;
  font-style: italic; line-height: var(--lh-display); letter-spacing: var(--ls-display); color: #1A1A1A;
}
.hero__name span { color: #8B6F47; }
.hero__surname {
  font-family: var(--font-ui); font-size: clamp(0.875rem, 2.5vw, 1.75rem); font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase; color: #4A4744; padding-left: 0.1em;
}
.hero__tagline {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-lead); font-weight: 300; color: #4A4744; max-width: 30ch;
}
.hero__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
@media (max-width: 479px) {
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}
.hero__secondary-link {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #1A1A1A;
  position: relative; text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center;
}
.hero__secondary-link::after {
  content: ''; position: absolute; bottom: 2px; left: 0;
  width: 0; height: 1px; background: #8B6F47;
  transition: width var(--duration-base) var(--ease-out-expo);
}
.hero__secondary-link:hover::after { width: 100%; }
.hero__image-wrap {
  grid-column: 8 / -1; align-self: stretch; position: relative; overflow: hidden;
}
@media (max-width: 767px) { .hero__image-wrap { display: none; } }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero__scroll {
  position: absolute; bottom: 2rem; left: var(--padding-x);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 2;
}
@media (max-width: 479px) { .hero__scroll { display: none; } }
.hero__scroll-label {
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
  writing-mode: vertical-lr; text-orientation: mixed; transform: rotate(180deg);
}
.hero__scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, #8B6F47, transparent);
  animation: scrollLine 2s ease-in-out infinite; transform-origin: top;
}
@media (prefers-reduced-motion: reduce) { .hero__scroll-line { animation: none; background: #8B6F47; } }
@keyframes scrollLine {
  0%   { transform: scaleY(0); opacity: 1; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* HOME — MANIFIESTO */
.intro { padding-block: var(--section-py); }
.intro__inner {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap);
}
.intro__number { grid-column: 1 / 2; padding-top: 0.25em; }
.intro__text {
  grid-column: 3 / 11; font-family: var(--font-display);
  font-size: var(--fs-h2); font-weight: 300; font-style: italic;
  line-height: 1.3; letter-spacing: -0.01em; color: #1A1A1A;
}
@media (max-width: 767px) {
  .intro__number { grid-column: 1 / -1; margin-bottom: 0.5rem; }
  .intro__text { grid-column: 1 / -1; }
}

/* HOME — SERVICIOS */
.services { padding-block: var(--section-py); background-color: #EDE7DE; }
.services__header {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  padding-bottom: 2.5rem; display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid #DCD5C9;
}
.services__title {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400;
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
}
.services__list {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
}
.service-row { border-bottom: 1px solid #DCD5C9; overflow: hidden; }
.service-row__summary {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 1.5rem; padding-block: 1.5rem; cursor: pointer; width: 100%;
  background: none; border: none; text-align: left;
  min-height: 64px; touch-action: manipulation;
}
.service-row__summary:focus-visible { outline: 2px solid #8B6F47; outline-offset: 3px; }
@media (max-width: 479px) {
  .service-row__summary { grid-template-columns: 1fr auto; gap: 1rem; }
}
.service-row__name {
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 400;
  color: #1A1A1A; text-align: left;
  transition: color var(--duration-fast) var(--ease-standard);
}
.service-row__duration { font-size: var(--fs-small); color: #4A4744; white-space: nowrap; }
@media (max-width: 479px) { .service-row__duration { display: none; } }
.service-row__price {
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 400;
  color: #1A1A1A; white-space: nowrap; text-align: right; min-width: 4ch;
}
.service-row__detail { max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease-out-expo); }
.service-row__detail-inner {
  padding-block: 1.25rem 1.5rem; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.service-row__description { font-size: var(--fs-body); color: #4A4744; max-width: 55ch; flex: 1 1 200px; }
.service-row.is-open .service-row__name,
.service-row:hover .service-row__name { color: #8B6F47; }
@media (max-width: 479px) {
  .service-row__detail-inner { flex-direction: column; gap: 1rem; }
  .service-row__detail-inner .btn { width: 100%; justify-content: center; }
}

/* HOME — SOBRE DAVID */
.about { padding-block: var(--section-py); }
.about__inner {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap);
  align-items: center; position: relative;
}
.about__divider {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #DCD5C9;
}
@media (max-width: 767px) { .about__divider { display: none; } }
.about__divider::after {
  content: '02'; position: absolute; top: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); color: #8B6F47; background: #F6F3EE;
  padding: 0.5rem 0; writing-mode: vertical-rl; text-transform: uppercase;
}
.about__image-col { grid-column: 1 / 6; }
@media (max-width: 767px) { .about__image-col { grid-column: 1 / -1; } }
.about__image { width: 100%; aspect-ratio: 3/4; overflow: hidden; }
.about__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .about__image { aspect-ratio: 4/3; max-height: 60vw; } }
.about__content { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 767px) { .about__content { grid-column: 1 / -1; } }
.about__eyebrow {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
.about__name {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400;
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
}
.about__body { font-size: var(--fs-body); color: #4A4744; max-width: 45ch; line-height: var(--lh-body); }
.about__quote {
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); font-weight: 300;
  color: #1A1A1A; padding-left: 1.5rem; border-left: 1px solid #8B6F47; max-width: 35ch;
}

/* HOME — RESEÑAS */
.reviews { padding-block: var(--section-py); background-color: #EDE7DE; overflow: hidden; }
.reviews__inner {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center;
}
.reviews__score-col { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 0.75rem; }
@media (max-width: 767px) { .reviews__score-col { grid-column: 1 / -1; } }
.reviews__number {
  font-family: var(--font-display); font-size: var(--fs-number); font-weight: 300;
  line-height: 1; color: #1A1A1A; letter-spacing: -0.04em;
}
.reviews__count { font-size: var(--fs-small); color: #4A4744; }
.reviews__source {
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
.reviews__carousel-col { grid-column: 7 / -1; }
@media (max-width: 767px) { .reviews__carousel-col { grid-column: 1 / -1; } }
.review-carousel { overflow: hidden; position: relative; }
.review-carousel__track { display: flex; transition: transform var(--duration-xslow) var(--ease-out-expo); user-select: none; }
.review-carousel__item {
  min-width: 100%; flex-shrink: 0; padding: 2rem 0;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.review-carousel__text {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-lead); font-weight: 300;
  line-height: 1.4; color: #1A1A1A; max-width: 30ch;
}
.review-carousel__text::before { content: '\201C'; color: #8B6F47; }
.review-carousel__text::after  { content: '\201D'; color: #8B6F47; }
.review-carousel__author {
  display: flex; flex-direction: column; gap: 0.25rem;
  border-top: 1px solid #DCD5C9; padding-top: 1rem;
}
.review-carousel__name {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #1A1A1A;
}
.review-carousel__service { font-size: var(--fs-eyebrow); color: #4A4744; }
.review-carousel__dots { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.review-carousel__dot {
  width: 24px; height: 4px; background: #DCD5C9; border: none; padding: 0;
  cursor: pointer; border-radius: 2px;
  transition: background var(--duration-base) var(--ease-standard),
  width var(--duration-base) var(--ease-out-expo);
}
.review-carousel__dot.is-active { background: #8B6F47; width: 40px; }

/* HOME — GALERÍA */
.gallery { padding-block: var(--section-py); }
.gallery__header {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  margin-bottom: 2.5rem; display: flex; align-items: baseline; gap: 1.5rem;
}
.gallery__title {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400;
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
}
.gallery__grid {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap);
}
.gallery__item {
  overflow: hidden; border: none; padding: 0; cursor: pointer;
  background: #DCD5C9; display: block;
}
.gallery__item img, .gallery__item picture, .gallery__item picture img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform 600ms var(--ease-out-expo);
}
.gallery__item:hover img, .gallery__item:hover picture img { transform: scale(1.03); }
.gallery__item:focus-visible { outline: 2px solid #8B6F47; outline-offset: 2px; }
.gallery__item:nth-child(1)  { grid-column: 1 / 7;   aspect-ratio: 4/3; }
.gallery__item:nth-child(2)  { grid-column: 7 / 10;  aspect-ratio: 3/4; }
.gallery__item:nth-child(3)  { grid-column: 10 / -1; aspect-ratio: 3/4; }
.gallery__item:nth-child(4)  { grid-column: 1 / 5;   aspect-ratio: 3/4; }
.gallery__item:nth-child(5)  { grid-column: 5 / 9;   aspect-ratio: 3/4; }
.gallery__item:nth-child(6)  { grid-column: 9 / -1;  aspect-ratio: 4/3; }
.gallery__item:nth-child(7)  { grid-column: 1 / 8;   aspect-ratio: 16/9; }
.gallery__item:nth-child(8)  { grid-column: 8 / -1;  aspect-ratio: 3/4; }
.gallery__item:nth-child(9)  { grid-column: 1 / 6;   aspect-ratio: 3/4; }
@media (max-width: 767px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item:nth-child(n) { grid-column: auto !important; aspect-ratio: 1/1; }
  .gallery__item:nth-child(1) { grid-column: 1 / -1 !important; aspect-ratio: 16/9; }
}
@media (max-width: 479px) {
  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__item:nth-child(n) { grid-column: 1 / -1 !important; aspect-ratio: 4/3; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(26,26,26,0.95); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-standard);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__img { max-width: 90vw; max-height: 85dvh; object-fit: contain; display: block; }
.lightbox__close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: #F6F3EE; opacity: 0.6; background: none; border: none; cursor: pointer;
  min-height: 44px; min-width: 44px;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { opacity: 1; }
.lightbox__prev, .lightbox__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #F6F3EE; font-size: 1.5rem; opacity: 0.6;
  background: none; border: none; cursor: pointer;
  min-height: 44px; min-width: 44px;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.lightbox__prev { left: 1.5rem; }
.lightbox__next { right: 1.5rem; }

/* HOME — VISITA */
.visit { padding-block: var(--section-py); background-color: #EDE7DE; }
.visit__inner {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; align-items: start;
}
.visit__map-col { grid-column: 1 / 8; }
@media (max-width: 767px) { .visit__map-col { grid-column: 1 / -1; } }
.visit__map { width: 100%; aspect-ratio: 4/3; background: #DCD5C9; position: relative; overflow: hidden; }
@media (max-width: 767px) { .visit__map { aspect-ratio: 16/9; } }
.visit__directions {
  display: inline-block; margin-top: 1rem;
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #1A1A1A;
  position: relative;
}
.visit__directions::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: #8B6F47;
  transition: width var(--duration-base) var(--ease-out-expo);
}
.visit__directions:hover::after { width: 100%; }
.visit__info-col { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 2.5rem; }
@media (max-width: 767px) { .visit__info-col { grid-column: 1 / -1; } }
.visit__address { border-bottom: 1px solid #DCD5C9; padding-bottom: 1.5rem; }
.visit__address p { font-size: var(--fs-body); color: #1A1A1A; line-height: 1.5; }
.visit__languages {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
.schedule-row {
  display: grid; grid-template-columns: 1fr auto;
  padding-block: 0.75rem; border-bottom: 1px solid #DCD5C9;
}
.schedule-row:first-child { border-top: 1px solid #DCD5C9; }
.schedule-row__day {
  font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
.schedule-row__hours { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 400; color: #1A1A1A; }
.schedule-row.is-closed .schedule-row__hours { color: #DCD5C9; font-style: italic; }

/* HOME — PREMIOS */
.awards {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  padding-block: 2.5rem; border-top: 1px solid #DCD5C9; border-bottom: 1px solid #DCD5C9;
}
.awards__list {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
}
.awards__item {
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
@media (max-width: 479px) {
  .awards__list { justify-content: flex-start; gap: 0.5rem; }
  .awards__separator { display: none; }
  .awards__item { font-size: var(--fs-micro); }
}
.awards__separator { color: #DCD5C9; font-size: var(--fs-small); flex-shrink: 0; line-height: 1; }

/* HOME — CTA FINAL */
.cta-booking { background-color: #1A1A1A; padding-block: clamp(5rem, 12vw, 10rem); }
.cta-booking__inner {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem;
}
@media (max-width: 479px) {
  .cta-booking__inner { align-items: stretch; }
  .cta-booking__inner .btn { width: 100%; justify-content: center; }
}
.cta-booking__title {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 300;
  font-style: italic; line-height: var(--lh-display); letter-spacing: var(--ls-display);
  color: #F6F3EE; max-width: 18ch;
}
.cta-booking__contact { font-size: var(--fs-small); color: rgba(246,243,238,0.5); }
.cta-booking__contact a { color: rgba(246,243,238,0.5); }
.cta-booking__contact a:hover { color: #F6F3EE; }

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */
.page-hero {
  padding-top: clamp(7rem, 15vw, 12rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  border-bottom: 1px solid #DCD5C9;
}
.page-hero__inner {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: end;
}
.page-hero__label {
  grid-column: 1 / 3; font-family: var(--font-ui); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
@media (max-width: 767px) { .page-hero__label { grid-column: 1 / -1; } }
.page-hero__title {
  grid-column: 3 / 11; font-family: var(--font-display); font-size: var(--fs-h1);
  font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
}
@media (max-width: 767px) { .page-hero__title { grid-column: 1 / -1; } }

/* Contacto */
.contact-form-wrap {
  width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--padding-x);
  padding-block: var(--section-py);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap);
}
.form-col { grid-column: 1 / 7; }
.info-col { grid-column: 8 / -1; }
@media (max-width: 767px) {
  .form-col { grid-column: 1 / -1; order: 2; }
  .info-col { grid-column: 1 / -1; order: 1; }
  .info-col > div[style*="padding-top"] { padding-top: 0 !important; }
}

/* Formulario */
.wpcf7-form, .wpforms-form, form[aria-label] { display: flex; flex-direction: column; gap: 1.5rem; }
.form-group, .wpforms-field { display: flex; flex-direction: column; gap: 0.5rem; }
label, .wpforms-field-label {
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #4A4744;
}
input[type=text], input[type=email], input[type=tel], textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid #DCD5C9; padding: 0.875rem 0;
  font-family: var(--font-ui); font-size: var(--fs-body); color: #1A1A1A;
  transition: border-color var(--duration-fast) var(--ease-standard);
  border-radius: 0; outline: none; resize: none; appearance: none;
  -webkit-appearance: none;
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus { border-bottom-color: #1A1A1A; }
input::placeholder, textarea::placeholder { color: #DCD5C9; }
textarea { min-height: 120px; }
input[type=submit], .wpcf7-submit, button[type=submit] {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.875em 2em;
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; line-height: 1;
  border: 1px solid #1A1A1A; border-radius: 0; cursor: pointer;
  background-color: #1A1A1A; color: #F6F3EE; align-self: flex-start; margin-top: 1rem;
  min-height: 44px; touch-action: manipulation;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
input[type=submit]:hover, .wpcf7-submit:hover, button[type=submit]:hover { background-color: #8B6F47; border-color: #8B6F47; }
.wpcf7-not-valid-tip { font-size: var(--fs-small); color: #c0392b; margin-top: 0.25rem; }
@media (max-width: 479px) {
  input[type=submit], .wpcf7-submit, button[type=submit] { align-self: stretch; justify-content: center; }
}

/* 404 */
.error-404 {
  min-height: 80dvh; display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  padding-inline: var(--padding-x); padding-block: var(--section-py);
}
.error-404__number {
  font-family: var(--font-display); font-size: var(--fs-number); font-weight: 300;
  color: #EDE7DE; line-height: 1; letter-spacing: -0.04em; user-select: none;
}
.error-404__title {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 400;
  line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  margin-top: -2rem; position: relative; z-index: 1;
}
.error-404__body { font-size: var(--fs-body); color: #4A4744; margin-top: 1.5rem; max-width: 40ch; line-height: var(--lh-body); }
.error-404__back {
  display: inline-flex; align-items: center; gap: 0.5em; padding: 0.875em 2em;
  margin-top: 3rem; font-family: var(--font-ui); font-size: var(--fs-small);
  font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  border: 1px solid #1A1A1A; border-radius: 0; background: transparent; color: #1A1A1A;
  text-decoration: none; min-height: 44px;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.error-404__back:hover { background-color: #1A1A1A; color: #F6F3EE; }
.error-404__back::after { content: '→'; }

/* Leaflet overrides */
.leaflet-control-zoom a { border-radius: 0 !important; }
.ap-map-tooltip {
  background: #1A1A1A; color: #F6F3EE; border: none; border-radius: 0;
  padding: 0.4em 0.8em; font-family: var(--font-ui); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; box-shadow: none;
}
.ap-map-tooltip::before { display: none; }

/* Equipo — team page */
.team-split {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap);
  align-items: start;
  width: 100%; max-width: var(--max-width); margin-inline: auto;
  padding-inline: var(--padding-x); padding-block: var(--section-py);
}
.team-split__image { grid-column: 1 / 5; }
@media (max-width: 767px) { .team-split__image { grid-column: 1 / -1; } }
.team-split__image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.team-split__content { grid-column: 6 / -1; display: flex; flex-direction: column; gap: 2rem; padding-top: 2rem; }
@media (max-width: 767px) { .team-split__content { grid-column: 1 / -1; padding-top: 0; } }

/* Transiciones de página */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background-color: #F6F3EE; pointer-events: none; opacity: 0;
  transition: opacity 350ms var(--ease-standard);
}

/* ============================================================
   BOOKNETIC — estilos base de integración
   La página /reservar/ cargará los estilos propios del plugin.
   Estos estilos aseguran coherencia visual.
   ============================================================ */
.booknetic-container,
.boo-container { max-width: 900px; margin-inline: auto; }
/* Forzar border-radius 0 en el widget de Booknetic */
.boo-main-container,
.boo-step-container { border-radius: 0 !important; }

/* ============================================================
   UTILIDADES MÓVIL EXTRAS
   ============================================================ */
@media (max-width: 767px) {
  /* Mejora general del espaciado en secciones */
  .section { padding-block: clamp(3.5rem, 8vw, 5rem); }

  /* Asegurar que los grids de 12 cols en páginas internas se colapsen */
  [style*="grid-template-columns:repeat(12,1fr)"],
  [style*="grid-template-columns: repeat(12, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-column:3/10"],
  [style*="grid-column: 3/10"] {
    grid-column: 1 / -1 !important;
  }

  /* Servicios mobile: dar más espacio al nombre */
  .service-row__name { font-size: var(--fs-body); }
}

@media (max-width: 479px) {
  /* Pequeños ajustes extra en pantallas muy pequeñas */
  .site-logo__name { font-size: var(--fs-lead); }
  .awards { padding-block: 2rem; }
  .visit__inner { gap: 2rem; }
  .reviews__inner { gap: 2rem; }
  .about__quote { font-size: var(--fs-body); }
}

/* ============================================================
   PÁGINAS DE TEXTO Y RESERVA — añadido en v1.2.0
   Va al final del fichero a propósito: a igual especificidad
   gana la última regla, así que lo nuevo no queda pisado.
   ============================================================ */

/* Contenido escrito desde el editor (aviso legal, privacidad, cookies).
   No había ningún estilo para esto: el texto salía sin ritmo ni jerarquía. */
.page-prose {
  max-width: 68ch;
  color: var(--color-ink-soft);
  line-height: var(--lh-body);
}
.page-prose > * + * { margin-top: 1.25rem; }
.page-prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-ink);
  margin-top: 3rem;
}
.page-prose h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-top: 2.25rem;
}
.page-prose ul,
.page-prose ol { padding-left: 1.25rem; }
.page-prose li + li { margin-top: 0.5rem; }
.page-prose a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.page-prose a:hover { color: var(--color-accent); }
.page-prose strong { color: var(--color-ink); font-weight: 500; }
.page-prose table { width: 100%; border-collapse: collapse; }
.page-prose th,
.page-prose td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--color-line); }

/* Página de reservas */
.booking-note {
  max-width: 60ch;
  margin: 0 auto 2.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-accent);
  color: var(--color-ink-soft);
}
.booking-fallback { color: var(--color-ink-soft); }
.booking-fallback a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.booking-admin-note {
  padding: 1rem;
  border: 1px solid var(--color-accent);
  margin-bottom: 1.5rem;
  color: var(--color-ink);
}

/* Página de reserva confirmada */
.confirm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 767px) { .confirm-grid { grid-template-columns: 1fr; } }
.confirm-block { color: var(--color-ink-soft); line-height: var(--lh-body); }
.confirm-block .text-eyebrow { margin-bottom: 0.75rem; color: var(--color-ink); }
.confirm-block a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.confirm-block a:hover { color: var(--color-accent); }

/* Resumen de la cita. Nace oculto y solo se enseña si hay datos que enseñar:
   si alguien recarga la página o llega por el historial no hay resumen, y eso
   no puede parecer un error. */
.booking-summary {
  border: 1px solid var(--color-line);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 2.5rem;
}
.booking-summary[hidden] { display: none; }

/* ============================================================
   ARREGLOS DE MÓVIL — añadido en v1.3.0
   Al final del fichero: a igual especificidad gana la última regla.
   ============================================================ */

/* D-2 · Los puntos del carrusel medían 24×4 px. Cuatro píxeles de alto no se
   pueden tocar con un dedo. Se agranda la ZONA TÁCTIL a 44 px sin cambiar nada
   de lo que se ve: la barra pasa a ser un ::before y el botón que la contiene
   crece en transparente a su alrededor. */
.review-carousel__dot {
  width: 24px;
  height: 44px;
  min-width: 44px;
  background: none;
  border-radius: 0;
  display: grid;
  place-items: center;
  transition: none;
}
.review-carousel__dot::before {
  content: '';
  display: block;
  width: 24px;
  height: 4px;
  background: var(--color-line);
  border-radius: 2px;
  transition: background var(--duration-base) var(--ease-standard),
              width var(--duration-base) var(--ease-out-expo);
}
.review-carousel__dot.is-active { background: none; width: 40px; }
.review-carousel__dot.is-active::before { background: var(--color-accent); width: 40px; }
.review-carousel__dots { gap: 0.25rem; margin-top: 0.75rem; }

/* El enlace de saltar al contenido y el logo también quedaban cortos de alto. */
.site-logo { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; }

/* D-1 · El hero ocupaba los 812 px de la pantalla con un contenido de 466 px
   centrado, y la foto está oculta en móvil: sobraba un tercio de la pantalla
   más valiosa del sitio. En móvil se ajusta a su contenido y el botón sube. */
@media (max-width: 767px) {
  .hero {
    min-height: 0;
    align-items: start;
  }
  .hero__content {
    padding-top: max(7rem, env(safe-area-inset-top) + 6rem);
    padding-bottom: 3.5rem;
  }
  /* El indicador de scroll sobra cuando el hero ya no llena la pantalla. */
  .hero__scroll { display: none; }
}

/* El aviso de cookies tapaba un quinto de la primera pantalla y «Configurar»
   era gris sobre fondo oscuro. Se compacta y se sube el contraste. */
@media (max-width: 767px) {
  .cookie-banner__inner { padding-block: 1rem; }
  .cookie-banner__text  { font-size: var(--fs-small); line-height: 1.45; }
}
.cookie-banner__configure { color: var(--color-paper); opacity: 0.85; }
.cookie-banner__configure:hover,
.cookie-banner__configure:focus-visible { opacity: 1; }

/* Foco visible en todo lo que se pueda enfocar con el teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ============================================================
   HERO EN MÓVIL: recuperar la foto — v1.4.0
   ============================================================ */

/* La foto del hero estaba en display:none por debajo de 768 px, así que en el
   móvil quedaba un hueco vacío y la web abría sin ninguna imagen. Ahora se
   muestra como una banda a ancho completo justo DEBAJO del texto.
   
   Debajo y no de fondo, a propósito: para poner texto encima de esta foto en
   una pantalla de 375 px haría falta una capa oscura que se comiera el fondo
   papel y el contraste de la tipografía, que es lo que sostiene el diseño.
   Así se ve la foto entera y el botón de reservar sigue siendo lo primero. */
@media (max-width: 767px) {
  .hero {
    display: flex;
    flex-direction: column;
  }
  .hero__image-wrap {
    display: block;
    position: relative;
    width: 100%;
    /* aspect-ratio reserva el sitio antes de que cargue la imagen: sin esto
       el contenido da un salto cuando llega la foto. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .hero__content { padding-bottom: 2.5rem; }
}

/* En pantallas muy estrechas la foto se hace un poco más alta para que el
   encuadre vertical del retrato no quede recortado en exceso. */
@media (max-width: 479px) {
  .hero__image-wrap { aspect-ratio: 1 / 1; }
}

/* ============================================================
   H1 COMPLETO Y MAPA BAJO DEMANDA — v1.4.0
   ============================================================ */

/* Utilidad que faltaba: texto que leen los buscadores y los lectores de
   pantalla, pero que no ocupa sitio ni se ve. No se usa display:none porque
   eso también lo esconde de los lectores de pantalla, que es lo contrario
   de lo que queremos. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* «Perruquers» pasa de <p> a <span> dentro del H1, así que hay que devolverle
   el comportamiento de bloque o se pega a «Angel» en la misma línea.
   Y `.hero__name span` pintaba de color cuero cualquier span de dentro: antes
   no había ninguno y la regla no hacía nada; ahora habría teñido el apellido. */
.hero__name .hero__surname { display: block; color: #4A4744; }
.hero__name .visually-hidden { color: inherit; }

/* Mapa: marcador con la dirección y un botón, en vez de conectarse solo con
   Stadia Maps y unpkg en cada visita. */
.visit__map { display: grid; place-items: center; background: var(--color-paper-deep); }
.visit__map-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: clamp(1.5rem, 5vw, 3rem); text-align: center;
}
.visit__map-address {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--fs-lead); line-height: 1.4; color: var(--color-ink); margin: 0;
}
.visit__map-note {
  font-size: var(--fs-eyebrow); color: var(--color-ink-soft); max-width: 28ch; margin: 0; line-height: 1.5;
}
/* Cuando el mapa ya está cargado, el marcador desaparece y Leaflet manda. */
.visit__map.is-loaded { display: block; background: none; }
.visit__map.is-loaded .visit__map-placeholder { display: none; }


/* ============================================================
   SCROLL NATIVO — v1.6.0
   ============================================================ */

/* Los enlaces internos (#servicios, #reservar) los animaba Lenis. Sin Lenis
   los anima el propio navegador, que además lo hace fuera del hilo principal.
   scroll-padding-top deja hueco para la cabecera fija, que si no tapa el
   título de la sección a la que saltas. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* NO se usa content-visibility aquí. Se probó y se descartó: si el tamaño
   estimado no acierta, la altura de la página cambia según haces scroll y eso
   produce justo el salto que estamos intentando quitar. No se mete una
   optimización que no se puede medir antes. */

/* ============================================================
   LOGOTIPO EN SVG — v1.8.0
   ============================================================ */

/* El logo pasa de dos <span> de texto a una imagen SVG. Las reglas antiguas
   (.site-logo__name, .site-logo__sub) se quedan en el fichero por si hubiera
   que volver atrás: sin esos elementos en el HTML, no pintan nada. */
.site-logo__img {
  display: block;
  width: auto;
  height: 52px;          /* alto fijo; el ancho lo calcula el navegador */
  max-width: 100%;
}
@media (max-width: 767px) {
  .site-logo__img { height: 42px; }
}
/* En el pie tiene algo más de sitio, así que respira un poco más. */
.site-footer__brand .site-logo__img { height: 52px; }
@media (max-width: 767px) {
  .site-footer__brand .site-logo__img { height: 44px; }
}
/* El enlace ya no necesita ser columna: solo contiene la imagen. */
.site-logo { display: inline-flex; align-items: center; min-height: 44px; }

/* ============================================================
   CABECERA LEGIBLE SOBRE LA FOTO — v1.9.0
   ============================================================ */

/* MEDIDO a 1280 px: la foto del hero empieza en el píxel 759 y cuatro de los
   cinco enlaces del menú caían encima (SERVICIOS 685-760, EQUIPO 792-845,
   GALERÍA 877-937, CONTACTO 969-1046). Texto tinta sobre foto oscura: no se
   leían. El botón «Reservar» sí, porque lleva su propia caja negra.
   
   Solución: la cabecera tiene fondo papel SIEMPRE, no solo al hacer scroll.
   Es lo que la web ya hacía al bajar, así que no introduce un aspecto nuevo,
   y donde no hay foto detrás es invisible: papel sobre papel.
   
   La línea inferior se sigue reservando para cuando hay scroll, para que en
   reposo la cabecera no parezca una barra pegada. */
.site-header {
  background-color: var(--color-paper);
}

/* Y el hueco de seguridad: si algún día la cabecera vuelve a ser transparente,
   que al menos el texto tenga sombra suficiente para leerse sobre la foto. */
@supports not (background-color: var(--color-paper)) {
  .primary-nav__link { text-shadow: 0 1px 2px rgba(246, 243, 238, 0.9); }
}

/* ============================================================
   AFINADO VISUAL — v1.10.0
   ============================================================ */

/* 1. «PERRUQUERS» del hero salía en CURSIVA FALSA.
   
   Al meterlo dentro del <h1> para que el titular tuviera el nombre completo,
   pasó a heredar el font-style:italic del h1. Pero de Inter solo cargamos la
   redonda, así que el navegador la inclinaba él mismo: letras deformadas, no
   una cursiva de verdad. Es de las cosas que hacen que un diseño parezca
   barato sin que sepas por qué. */
.hero__name .hero__surname {
  font-style: normal;
  font-synthesis: none;   /* y que el navegador no se invente ninguna otra */
}

/* 2. La lista de precios no alineaba.
   
   Cada fila era su propia rejilla con columnas «auto», así que cada una
   calculaba su ancho según su texto: las duraciones empezaban en 1189, 1190,
   1232, 1205 y 1205 px, y los precios en 1258, 1260, 1274, 1274 y 1274.
   Cinco filas, cuatro alineaciones distintas.
   
   En una carta de precios los números tienen que formar columna. Ahora las
   columnas son fijas, van a la derecha y los dígitos usan cifras de ancho
   constante, que es lo que hace que un precio quede debajo de otro. */
.service-row__summary {
  grid-template-columns: 1fr 7rem 7rem;
}
.service-row__duration,
.service-row__price {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .service-row__summary { grid-template-columns: 1fr 5.5rem; }
}

/* 3. Dos secciones seguidas con el mismo fondo.
   
   «Reseñas» y «La visita» eran las dos #EDE7DE: juntas formaban un bloque de
   1.437 px sin ninguna separación, y el ritmo claro-oscuro de la página se
   rompía justo ahí. La visita vuelve al papel base. */
.visit { background-color: var(--color-paper); }

/* ============================================================
   RITMO VERTICAL Y ACENTO — v1.10.0
   ============================================================ */

/* El manifiesto y la llamada final son los dos momentos en que la página se
   para a decir algo. Se les da más aire; al resto, menos. Antes todas tenían
   exactamente 140 px y la página no distinguía entre lo importante y el
   tejido que lo une. */
.intro       { padding-block: var(--section-py-lg); }
.cta-booking { padding-block: var(--section-py-lg); }
.awards      { padding-block: var(--section-py-sm); }

/* El acento cuero aparecía en 2 de 103 textos: no llegaba a leerse como un
   sistema, solo como una casualidad. Se le da un trabajo concreto y repetido:
   los precios. Es la columna que el cliente busca, y en cuero se encuentra
   sola sin necesidad de negritas ni cajas. */
.service-row__price { color: var(--color-accent); }

/* ============================================================
   MAPA COMO IMAGEN — v1.12.0
   ============================================================ */

/* Se ve directamente, sin pulsar nada, porque ya no es de un tercero: es una
   imagen de este mismo servidor. Se quitan los estilos del marcador con botón,
   que ya no existe. */
.visit__map {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-paper-deep);
  display: block;
}
@media (max-width: 767px) { .visit__map { aspect-ratio: 16 / 10; } }
.visit__map picture,
.visit__map img { width: 100%; height: 100%; object-fit: cover; display: block; }

.visit__map-acciones {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.visit__map-acciones .visit__directions { margin-top: 0; }

/* ============================================================
   MAPA CLICABLE — v1.13.0
   ============================================================ */

/* El mapa entero abre Google Maps. Como es un enlace, tiene que parecerlo al
   pasar por encima y tiene que verse al llegar con el tabulador. */
a.visit__map { position: relative; cursor: pointer; text-decoration: none; }
a.visit__map img { transition: transform var(--duration-slow) var(--ease-out-expo); }
@media (hover: hover) {
  a.visit__map:hover img { transform: scale(1.03); }
}
a.visit__map:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  a.visit__map img { transition: none; }
  a.visit__map:hover img { transform: none; }
}

/* ============================================================
   CONTACTO DIRECTO — v1.13.0
   Sustituye al formulario que no enviaba nada.
   ============================================================ */

.contacto-directo__intro {
  color: var(--color-ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 34ch;
}

/* El teléfono es el elemento principal de la columna: se lee como un titular
   porque es lo que queremos que haga el visitante. */
.contacto-directo__tel {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  margin-bottom: 2.5rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 0.25rem;
  transition: border-color var(--duration-base) var(--ease-out-expo),
              color var(--duration-base) var(--ease-out-expo);
}
@media (hover: hover) {
  .contacto-directo__tel:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
}

.contacto-directo__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============================================================
   AUDITORÍA v1.13.0 — correcciones medidas el 07/09/2026
   ============================================================ */

/* --- 1. FALSA ALARMA, ANOTADA PARA NO REPETIRLA --------------
   Aquí había un overflow:hidden puesto para arreglar un carrusel que
   "asomaba cortado a media palabra" por el borde derecho. NO ERA UN
   FALLO: .review-carousel ya recortaba de antes. Lo que fotografié era
   una diapositiva a mitad de la transición de deslizamiento.
   Comprobado el 08/09/2026 parando la transición: la reseña se ve
   entera. Se retira la regla, que no hacía nada, y queda escrito el
   error para que nadie lo "arregle" otra vez: para mirar un carrusel
   hay que pararlo primero. */

/* --- 2. OBJETIVOS TÁCTILES -----------------------------------
   Medidos 15 enlaces de menos de 40 px de alto en móvil; los del pie
   median 17 px. Apple pide 44 y Google 48. Con 17 px se falla el dedo
   y se pulsa el de al lado. Se arregla con relleno, que agranda la
   zona sensible SIN mover ni un pixel el texto. */
@media (max-width: 767px) {
  .site-footer__nav ul li a,
  .site-footer__legal a,
  .site-footer__social a,
  .site-footer__contact a,
  .site-footer__booking-link {
    display: inline-block;
    padding-block: 0.75rem;
  }
  /* El relleno de arriba y abajo abre huecos entre los enlaces; el margen
     negativo se los quita al bloque para que el pie no crezca de alto. */
  .site-footer__nav ul,
  .site-footer__legal { margin-block: -0.75rem; }
  .visit__directions { display: inline-block; padding-block: 0.75rem; }
}

/* --- 3. EL ESTADO DE AHORA MISMO -----------------------------
   Lo pinta el navegador (ver initEstadoApertura en main.js). Va aquí
   arriba, al lado de la palabra HORARIO, porque es la respuesta a lo
   primero que se pregunta quien busca una barbería un sábado. */
.visit__schedule-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.visit__schedule-cab .text-eyebrow { margin-bottom: 0; }

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  /* Un punto por encima de --fs-micro. Es el único dato de la página que
     habla del momento presente: si va en la letra más pequeña de todas,
     no lo lee nadie y no sirve de nada haberlo calculado. */
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
@media (max-width: 479px) {
  /* En móvil la cabecera se parte en dos líneas antes que encoger el texto. */
  .estado { white-space: normal; }
}
/* El punto delante. Es el único elemento de toda la web que dice algo
   del momento presente, así que se gana el color. */
.estado::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.estado--abierto  { color: #3F6B4A; }
.estado--cerrando { color: var(--color-accent); }
.estado--cerrado  { color: var(--color-ink-soft); }
.estado--aviso    { color: var(--color-accent); white-space: normal; }

/* El punto de "abierto" late despacio. Solo ese: si latieran todos
   dejaría de significar nada. */
@keyframes ap-latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.estado--abierto::before { animation: ap-latido 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .estado--abierto::before { animation: none; }
}

/* La fila de hoy, marcada. Sin fondos ni cajas: una barra fina a la
   izquierda y el texto en negro en vez de gris. */
.schedule-row.es-hoy {
  position: relative;
  color: var(--color-ink);
}
.schedule-row.es-hoy .schedule-row__day,
.schedule-row.es-hoy .schedule-row__hours {
  color: var(--color-ink);
  font-weight: 500;
}
.schedule-row.es-hoy::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  background: var(--color-accent);
}

/* --- 4. SERVICIOS: LA DURACIÓN VUELVE EN MÓVIL ---------------
   Estaba en display:none por debajo de 480 px. Es justo el dato que
   hace falta para decidir si te da tiempo hoy, y el hueco sobra: en
   vez de esconderla, baja debajo del nombre. */
@media (max-width: 479px) {
  .service-row__duration { display: block; }
  .service-row__summary {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nombre precio"
      "duracion precio";
    row-gap: 0.15rem;
    align-items: baseline;
  }
  .service-row__name     { grid-area: nombre; }
  .service-row__duration {
    grid-area: duracion;
    font-size: var(--fs-micro);
    opacity: 0.75;
    /* A la IZQUIERDA. En pantalla ancha la duración es una columna de la
       carta de precios y va alineada a la derecha con los importes; aquí
       baja debajo del nombre, y con el text-align:right heredado se quedaba
       flotando en mitad de la fila, sin colgar de nada. */
    text-align: left;
  }
  .service-row__price    { grid-area: precio; align-self: center; }
}

/* ============================================================
   REPASO DE DISEÑO — v1.14.0
   Contra el diagnóstico D-01 y D-02 de la auditoría: las siete
   secciones tenían la misma forma, y la de servicios escondía lo
   que más vende. Todos los contrastes de aquí están medidos.
   ============================================================ */

/* --- LOS SERVICIOS SE ABREN, Y AHORA SE NOTA -----------------
   Cada fila despliega su descripción y su botón de reservar. Estaba
   montado desde el principio y funcionaba, pero NADA lo indicaba: ni
   flecha, ni signo, ni cambio al pasar por encima. Una función que
   nadie encuentra es una función que no existe — y aquí lo que no se
   encontraba eran las descripciones y cinco botones de reservar. */

.service-row__summary { grid-template-columns: 1fr 7rem 7rem 1.25rem; }

/* El signo + dibujado con dos degradados, sin ningún elemento extra:
   así vale para las dos ramas de la plantilla (servicios del gestor y
   servicios de respaldo) sin tocar el marcado de ninguna. */
.service-row__summary::after {
  content: "";
  justify-self: end;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  color: var(--color-accent);
  transition: background-size var(--duration-base) var(--ease-out-expo),
              transform var(--duration-base) var(--ease-out-expo);
}
/* Abierta: la barra vertical se encoge y el + se vuelve un −. */
.service-row.is-open .service-row__summary::after {
  background-size: 100% 1px, 1px 0;
}

@media (hover: hover) {
  .service-row__summary:hover .service-row__name { color: var(--color-accent); }
  .service-row__summary:hover::after { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .service-row__summary::after { transition: none; }
  .service-row__summary:hover::after { transform: none; }
}

/* En móvil el indicador ocupa su propia columna a la derecha, y la
   duración sigue debajo del nombre (arreglo B-04). */
@media (max-width: 479px) {
  .service-row__summary {
    grid-template-columns: 1fr auto 1.1rem;
    grid-template-areas:
      "nombre   precio indicador"
      "duracion precio indicador";
  }
  .service-row__summary::after { grid-area: indicador; align-self: center; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .service-row__summary { grid-template-columns: 1fr 5.5rem 1.1rem; }
}

/* --- CIERRE DE LA LISTA DE SERVICIOS -------------------------
   Se acababan los precios y no había dónde pulsar. */
.services__cierre {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--padding-x);
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.services__nota {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 42ch;
}

/* --- LAS RESEÑAS, EN BANDA OSCURA ----------------------------
   El "5,0" con 938 reseñas detrás es lo más contundente de la web y
   estaba sobre el mismo papel que todo lo demás. Ponerlo en tinta hace
   dos cosas a la vez: le da el peso que merece, y rompe la monotonía
   de siete secciones con la misma forma, que es lo que hacía que la
   página se leyera como una plantilla.

   Contrastes medidos sobre #1A1A1A:
     #F6F3EE  15,72:1   texto
     #C09C6A   6,80:1   acento (el #8B6F47 de siempre se queda en 3,70
                        y aquí no llega: en oscuro sube a este)
     #BDB6AC   8,66:1   secundario
   El gris #4A4744 que usaban el contador y la fuente daba 1,89:1, o
   sea ilegible. Por eso se redefinen uno a uno y no solo el fondo. */
.reviews {
  background-color: #1A1A1A;
  color: #F6F3EE;
}
.reviews__number { color: #F6F3EE; }
.reviews__count  { color: #BDB6AC; }
.reviews__source { color: #C09C6A; }

.review-carousel__text { color: #F6F3EE; }
.review-carousel__text::before,
.review-carousel__text::after { color: #C09C6A; }
.review-carousel__author { border-top-color: rgba(246, 243, 238, 0.18); }
.review-carousel__name { color: #F6F3EE; }
.review-carousel__service { color: #BDB6AC; }

/* --- EL HORARIO EN EL PIE ------------------------------------ */
.site-footer__horario { margin-top: 1.75rem; }
.site-footer__horario-fila {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 0.35rem;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
.site-footer__horario-fila span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-ink);
}

/* Los puntos del carrusel, sobre la banda oscura.
   El inactivo (#DCD5C9) se ve de sobra: 12,29:1. El activo usaba el acento
   normal #8B6F47, que sobre negro se queda en 3,70:1 — justo en el mínimo
   de 3:1 para un elemento gráfico, y es el que tiene que CANTAR porque dice
   en qué reseña estás. Sube al acento claro, 6,80:1. */
.reviews .review-carousel__dot.is-active::before { background: #C09C6A; }

/* ============================================================
   REDISEÑO «MENOS» — v1.15.0
   El diagnóstico completo está en inc/diseno.php. Aquí solo lo
   que se resuelve con CSS: apagar adornos, calmar las entradas y
   dejar la escala tipográfica en tamaños con un papel cada uno.
   ============================================================ */

/* --- 1. Adornos apagados --------------------------------------
   Grano, cursor y números de sección. Los otros (etiqueta del hero,
   "Scroll", "EL BARBERO", lema del pie, premios) se apagan en PHP
   detrás de ap_adornos_activos() y ap_awards_activo(). */

/* El grano del hero: un SVG de ruido al 3 % pintado encima de toda la
   sección. No se veía como textura; se veía como pantalla sucia, y
   costaba un repintado de 1440×900 en cada fotograma del hero. */
.has-noise::after { display: none; }

/* El cursor propio está apagado en JS (CURSOR_ACTIVO = false). Sus dos
   <div> siguen en el header; sin JS que los mueva se quedarían pintados
   en la esquina como dos motas. */
.cursor, .cursor__ring { display: none; }

/* Los números de sección: iban 01, 02, 03 en tres secciones de siete y
   no numeraban nada real. Un número que no ordena es decoración. El
   hueco que deja el 01 en la intro se queda a propósito: la sangría que
   le da al manifiesto es lo único bueno que tenía. */
.section-number { display: none; }

/* --- 2. Entradas por scroll: solo un fundido -------------------
   Antes cada bloque entraba con un clip-path que lo "desenrollaba" de
   arriba abajo. Trece bloques haciendo eso es un espectáculo, y lo
   premium no hace espectáculo: aparece. Un fundido corto de opacidad,
   sin desplazamiento ni recorte. Mismo interruptor html.js, mismo
   fallo abierto: sin JS se ve todo desde el primer momento. */
html.js [data-reveal] {
  clip-path: none;
  opacity: 0;
  transition: opacity var(--duration-base) ease-out;
}
html.js [data-reveal].is-revealed { opacity: 1; }
html.js [data-reveal].is-settled  { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transition: none; }
}

/* --- 3. Escala tipográfica: un tamaño, un papel ----------------
   Medidos 17 tamaños distintos en la home. Los que sobraban:

     11 px  --fs-micro     menú del header, etiquetas mínimas
     17 px  "DIRECCIÓN"    una etiqueta que se salió de la escala

   El de 11 se funde con el de 12: no hay ningún texto en esta web
   que necesite ser más pequeño que una etiqueta. Redefinir el token
   aquí abajo lo arregla en todos los sitios donde se usaba, incluido
   el menú, sin tocar ninguna regla.

   La escala que queda, y para qué sirve cada tamaño:

     --fs-number   la cifra del 5,0                    (Fraunces)
     --fs-display  el nombre en el hero                (Fraunces it)
     --fs-h1/h2    títulos de página y de sección      (Fraunces)
     --fs-lead     manifiesto, citas, nombres de servicio, precios
     --fs-body     párrafos                            (Inter)
     --fs-small    notas, horario, pie                 (Inter)
     --fs-eyebrow  etiquetas y menú, en mayúsculas     (Inter)
     y los botones a 14 px en mayúsculas, que es su propio papel. */
:root {
  --fs-micro: var(--fs-eyebrow);
}
/* El menú real de WordPress pinta <a> sin clase dentro de .primary-nav__list;
   .primary-nav__link solo lo lleva el menú de emergencia. Van los dos. */
.primary-nav__list a,
.primary-nav .menu-item a,
.primary-nav__link { font-size: var(--fs-eyebrow); }
.visit__address p.text-eyebrow { font-size: var(--fs-eyebrow); }