/* ==========================================================================
   Ccesco Studio — Editorial Mono
   Único stylesheet del sitio. Los tokens son normativos (DESIGN.md).
   Mobile-first · breakpoints operativos: 375 / 768 / 1024 / 1440.
   Reglas duras: B/N estricto, cero sombras, cero gradientes, cero radios,
   solo se animan transform y opacity, gating triple para reveals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens (DESIGN.md)
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-ink: #111111;
  --color-paper: #FAFAFA;
  --color-gray-strong: #3D3D3D;
  --color-gray-mid: #5C5C5C;
  --color-gray-on-dark: #8C8C8C;
  --color-danger: #7A1111;       /* semántico exclusivo admin (DESIGN.md) */
  --color-warning: #7A6211;      /* semántico exclusivo admin (DESIGN.md) */
  /* Hairlines opacas: valor adoptado del vocabulario FBS (spec adaptación §1).
     Cambio de VALOR en props existentes: cero diffs de selectores. */
  --hairline: #E4E4E4;
  --hairline-dark: #333333;

  /* Spacing */
  --sp-3xs: 4px;
  --sp-2xs: 8px;
  --sp-xs: 12px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 48px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;
  --sp-4xl: 128px;
  --sp-5xl: 192px;
  --gutter: clamp(20px, 5vw, 64px);

  /* Header height */
  --header-h: 77px;

  /* Motion */
  --dur-feedback: 180ms;
  --dur-reveal: 650ms;
  --dur-cinematic: 900ms;
  --dur-marquee: 28s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);

  /* Type families */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Type scale (clamp de implementación, DESIGN.md §Typography) */
  --fs-section: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
  --fs-row: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* body-md */
  line-height: 1.65;
  font-weight: 400;
}

@media (max-width: 479px) {
  body { font-size: 1rem; }
}

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

figure { margin: 0; }

ul, ol { margin: 0; padding: 0; }

p { margin: 0; }

/* Foco visible universal: currentColor funciona sobre papel y sobre tinta */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Skip-link: primer elemento de body, visible al recibir foco */
.skip-link {
  position: absolute;
  left: var(--sp-md);
  top: var(--sp-md);
  z-index: 100;
  padding: var(--sp-sm) var(--sp-md);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;     /* control, no micro-badge (spec §3.4) */
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--sp-xl)));
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Contenedor editorial: márgenes grandes, no contenedores gigantes */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ritmo vertical entre secciones: 3xl mobile → 4xl/5xl desktop */
.section {
  padding-block: var(--sp-2xl);
}

@media (min-width: 1024px) {
  .section { padding-block: var(--sp-3xl); }
}

@media (min-width: 1440px) {
  .section { padding-block: var(--sp-4xl); }
}

/* --------------------------------------------------------------------------
   3. Tipografía (escala DESIGN.md)
   -------------------------------------------------------------------------- */
.display-hero {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.5rem + 4vw, 5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 125;
  margin: 0;
}

.display-section {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 125;
  margin: 0;
}

.heading-row {
  font-family: var(--font-display);
  font-size: var(--fs-row);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
  font-variation-settings: 'wdth' 112;
  margin: 0;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.45;
}

.label-caps {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta-num {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  font-feature-settings: 'tnum' 1;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 125;
}

/* Enlaces inline: subrayado 1px offset 3px */
.inline-link {
  color: var(--color-gray-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.inline-link:hover { color: var(--color-ink); }

/* Fotografía: tratamiento monocromo uniforme (D3) — solo galería y servicio */
.gallery__item img,
.service-row__float img {
  filter: grayscale(1) contrast(1.05);
}

/* Fallback onerror (delegado en utils.js): bloque tipográfico, nunca ícono roto */
.img-fallback {
  background: var(--color-ink);
  position: relative;
}

.img-fallback::after {
  content: "CCESCO";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: var(--fs-row);
letter-spacing: 0.02em;
color: var(--color-paper);
  font-variation-settings: 'wdth' 125;
}

/* --------------------------------------------------------------------------
   4. Botones (rectángulo perfecto, label caps, una línea)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-sm) var(--sp-lg);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-feedback) var(--ease-inout),
    color var(--dur-feedback) var(--ease-inout),
    border-color var(--dur-feedback) var(--ease-inout);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn--primary:hover {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--ghost {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Variante de la banda invertida (btn-xl-inverse, design.md §8):
   papel sobre tinta; hover espejo: fondo transparente + borde papel */
.btn--inverse {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

.btn--inverse:hover {
  background: transparent;
  color: var(--color-paper);
  border-color: var(--color-paper);
}

.btn--compact {
  min-height: 44px;
  padding: var(--sp-xs) var(--sp-md);
}

.btn--xl {
  min-height: 64px;
  padding: var(--sp-lg) var(--sp-xl);
}

/* --------------------------------------------------------------------------
   5. Header fijo mínimo
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h, 77px);
  z-index: 20;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--color-paper);
  transition: background var(--dur-feedback) var(--ease-inout),
              border-color var(--dur-feedback) var(--ease-inout),
              color var(--dur-feedback) var(--ease-inout);
}

.site-header.scrolled {
  background: rgba(250, 250, 250, 0.92);
  border-bottom-color: var(--hairline);
  color: var(--color-ink);
}

/* Header sin hero (reservar.html, 404, admin): texto oscuro sobre fondo claro.
   La clase .header (index.html) ya overridea esto; este bloque cubre las
   páginas que usan solo .site-header sin hero detrás. */
.site-header:not(.header) {
  background: var(--color-paper);
  border-bottom-color: var(--hairline);
  color: var(--color-ink);
  height: auto;
}

.site-header:not(.header) .site-header__link { color: var(--color-gray-strong); }
.site-header:not(.header) .site-header__link:hover { color: var(--color-ink); opacity: 1; }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xs) var(--sp-md);
  padding-block: var(--sp-xs);
}

.site-header__brand {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Mobile 375: nav en la misma fila que brand + toggle, lista como dropdown */
.site-header__nav {
  display: flex;
  align-items: center;
}

.site-header__list {
  display: flex;
  gap: var(--sp-lg);
  list-style: none;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header__link:hover { opacity: 0.7; }

.site-header__link[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Scrolled state: restore normal header colors */
.site-header.scrolled .site-header__link { color: var(--color-gray-strong); }
.site-header.scrolled .site-header__link:hover { color: var(--color-ink); opacity: 1; }
.site-header.scrolled .site-header__link[aria-current="true"] { color: var(--color-ink); }

@media (min-width: 768px) {
  .site-header__inner {
    flex-wrap: nowrap;
    padding-block: var(--sp-sm);
  }

  .site-header__nav {
    order: 0;
    width: auto;
    overflow-x: visible;
  }

  .site-header__list { gap: var(--sp-xl); }
}

/* --------------------------------------------------------------------------
    6. Hero — full-bleed + panel frosted (estilo thefaleros, identidad Ccesco)
    -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-ink);
  background: var(--color-paper);
}

/* Fondo fotográfico a pantalla completa */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.05);
}

/* Layout: contenido a la izquierda */
.hero__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

/* Panel frosted glass oscuro — tinta sobre hero */
.hero__content {
  max-width: min(600px, 100%);
  padding: clamp(var(--sp-lg, 1rem), 4vw, var(--sp-3xl, 3rem));
  background: rgba(17, 17, 17, 0.85);
  border: 1px solid rgba(250, 250, 250, 0.18);
  color: var(--color-paper);
}

/* Tipografía dentro del panel (texto claro sobre oscuro) */
.hero__eyebrow {
  margin-bottom: var(--sp-md, 1rem);
  color: var(--color-gray-on-dark);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.5rem + 4vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  margin-bottom: var(--sp-sm, 0.5rem);
  color: var(--color-paper);
  overflow-wrap: break-word;
}

.hero__subtitle {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: var(--sp-lg, 1.5rem);
  color: var(--color-gray-on-dark);
}

.hero__lead {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  line-height: 1.55;
  margin-bottom: var(--sp-xl, 2rem);
  color: var(--color-gray-on-dark);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md, 1rem);
}

/* Fila de rating: pin + dirección + enlace Maps (contexto oscuro) */
.hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2xs);
  margin-top: var(--sp-lg);
  font-size: 0.875rem;
  color: var(--color-gray-on-dark);
}

.hero__rating .icon { color: var(--color-paper); }

.hero__rating a {
  color: var(--color-paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.hero__rating a:hover { text-decoration-thickness: 2px; }

/* Botón primario del hero sobre panel oscuro: papel invertido para que resalte */
.hero__ctas .btn--primary {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}
.hero__ctas .btn--primary:hover {
  background: transparent;
  color: var(--color-paper);
  border-color: var(--color-paper);
}

/* WhatsApp button — verde sobre hero oscuro */
.btn--whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.btn--whatsapp:hover {
  background: #1da851;
  border-color: #1da851;
  color: #fff;
}

/* Mobile: panel full-width abajo, hero contenido en una pantalla */
@media (max-width: 767.98px) {
  .hero {
    align-items: flex-end;
    padding-top: var(--header-h);
    padding-bottom: var(--sp-lg, 1.5rem);
  }
  .hero__content {
    max-width: 100%;
    padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  }
  .hero__eyebrow { margin-bottom: var(--sp-xs); }
  .hero__title {
    font-size: clamp(2rem, 9vw, 2.5rem);
    margin-bottom: var(--sp-sm);
  }
  .hero__subtitle {
    font-size: 0.95rem;
    margin-bottom: var(--sp-sm);
  }
  .hero__lead {
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: var(--sp-md);
  }
  .hero__ctas {
    gap: var(--sp-sm);
    margin-bottom: var(--sp-2xs);
  }
  .hero__ctas .btn--lg {
    min-height: 48px;
    padding: var(--sp-xs) var(--sp-md);
  }
  .hero__rating { margin-top: var(--sp-sm); font-size: 0.8rem; }
}

/* Pantallas muy angostas (≤374px): comprime el hero para que siga
   cabiendo en una pantalla sin scroll vertical */
@media (max-width: 374.98px) {
  .hero {
    padding-bottom: var(--sp-md, 1rem);
  }
  .hero__content {
    padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  }
  .hero__eyebrow {
    font-size: 0.72rem;
    margin-bottom: var(--sp-2xs);
  }
  .hero__title {
    font-size: clamp(1.75rem, 9vw, 2rem);
    margin-bottom: var(--sp-xs);
    line-height: 1;
  }
  .hero__subtitle {
    font-size: 0.85rem;
    margin-bottom: var(--sp-xs);
  }
  .hero__lead {
    font-size: 0.8rem;
    line-height: 1.35;
    margin-bottom: var(--sp-sm);
  }
  .hero__ctas {
    gap: var(--sp-2xs);
    margin-bottom: var(--sp-2xs);
  }
  .hero__rating { margin-top: var(--sp-2xs); }
}

/* --------------------------------------------------------------------------
   7. Marquee (banda de tinta, loop CSS puro)
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--color-ink);
  color: var(--color-paper);
  height: 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-scroll var(--dur-marquee) linear infinite;
}

.marquee__group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.marquee__item,
.marquee__sep {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 125;
  margin-right: var(--sp-xl);
}

/* Separador «·» hereda papel: sin gris propio (spec adaptación §2.3) */

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Pausa del loop en hover (y :focus-within por simetría, inocua: la banda
   es aria-hidden sin descendientes enfocables). Solo donde hay hover real. */
@media (hover: hover) {
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track {
    animation-play-state: paused;
  }
}

/* Reduce-motion v2 (espejo literal FBS styles.css L358–361 + reservar.css
   L263–265): banda con altura propia del contenido y pista en wrap para que
   el texto colapse a multilínea 100% visible — jamás recortado por la
   altura/overflow fijos (AC-2). */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    height: auto;
    min-height: 64px;
    padding-block: var(--sp-md);
  }

  .marquee__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
  }

  .marquee__item,
  .marquee__sep { white-space: normal; }
}

/* --------------------------------------------------------------------------
   8. Sobre nosotros (#nosotros)
   -------------------------------------------------------------------------- */
.about__title { margin-bottom: var(--sp-md); }

.about__lead {
  color: var(--color-ink);
  max-width: 65ch;
  margin-bottom: var(--sp-md);
}

.about__text {
  color: var(--color-gray-strong);
  max-width: 65ch;
}

@media (min-width: 768px) {
  .about__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-lg);
  }

  .about__title { grid-column: 1 / span 6; }

  .about__body {
    grid-column: 7 / span 6;
    margin-top: var(--sp-2xl);   /* arranque escalonado */
  }
}

/* --------------------------------------------------------------------------
   9. Servicios — lista editorial numerada (#servicios)
   -------------------------------------------------------------------------- */
.services__title { margin-bottom: var(--sp-xl); }

.services__list { list-style: none; }

.services__note {
  margin-top: var(--sp-lg);
  color: var(--color-gray-strong);
}

/* Fila: índice de revista, jamás card */
.service-row {
  position: relative;
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--hairline);  /* máximo un borde por fila */
  color: var(--color-ink);
  transition:
    background-color var(--dur-feedback) var(--ease-inout),
    color var(--dur-feedback) var(--ease-inout);
}

.service-row:first-child { border-top: 1px solid var(--hairline); }

.service-row__index {
  display: block;
  color: var(--color-gray-strong);
  margin-bottom: var(--sp-2xs);
}

.service-row__name { margin-bottom: var(--sp-2xs); }

.service-row__meta {
  display: flex;
  gap: var(--sp-lg);
  color: var(--color-gray-mid);
}

/* Flecha diagonal decorativa (junto al precio) */
.service-row__arrow {
  display: none;
}

/* Imagen flotante del hover: oculta por defecto; solo existe donde hay hover real */
.service-row__float {
  display: none;
}

/* Hover/focus SOLO con puntero fino (touch: fila estática, sin falsa affordance) */
@media (hover: hover) and (pointer: fine) {

  /* Desktop ≥768: anatomía [índice 3ch][nombre 1fr][precio][duración][flecha] */
  .service-row {
    display: grid;
    grid-template-columns: 3ch minmax(0, 1fr) auto auto auto;
    column-gap: var(--sp-lg);
    align-items: baseline;
    padding: var(--sp-md) var(--sp-md);
  }

  .service-row:first-child { border-top: 1px solid var(--hairline); }

  .service-row__index { margin-bottom: 0; }
  .service-row__name { margin-bottom: 0; }

  .service-row__arrow {
    display: inline-flex;
    align-self: center;
    opacity: 0;
    transform: translate(calc(-1 * var(--sp-2xs)), var(--sp-2xs));
    transition:
      opacity var(--dur-feedback) var(--ease-out-expo),
      transform var(--dur-feedback) var(--ease-out-expo);
  }

  /* Inversión de fila al hover */
  .service-row:hover {
    background: var(--color-ink);
    color: var(--color-paper);
  }

  .service-row:hover .service-row__index,
  .service-row:hover .service-row__meta { color: inherit; }

  .service-row:hover .service-row__arrow {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* Imagen flotante b/n: fade + scale 0.96→1, posicionada a la derecha */
  .service-row__float {
    display: block;
    position: absolute;
    right: var(--sp-xl);
    top: 50%;
    width: 280px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transform: translateY(-50%) scale(0.96);
    transition:
      opacity var(--dur-reveal) var(--ease-out-expo),
      transform var(--dur-reveal) var(--ease-out-expo);
  }

  .service-row__float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .service-row:hover .service-row__float {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Teclado: :focus-within dispara SOLO la inversión, sin imagen flotante */
.service-row:focus-within {
  background: var(--color-ink);
  color: var(--color-paper);
}

.service-row:focus-within .service-row__index,
.service-row:focus-within .service-row__meta { color: inherit; }

/* Reduced-motion: inversión instantánea, sin imagen flotante ni flecha animada */
@media (prefers-reduced-motion: reduce) {
  .service-row,
  .service-row__arrow,
  .service-row__float {
    transition: none;
  }

  .service-row__float { display: none !important; }
}

/* --------------------------------------------------------------------------
   10. Barberos / Equipo (#equipo)
   -------------------------------------------------------------------------- */
.team__title { margin-bottom: var(--sp-md); }

.team__text {
  color: var(--color-ink);
  max-width: 65ch;
  margin-bottom: var(--sp-lg);
}

.team__ig { width: 100%; }

@media (min-width: 768px) {
  .team__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-lg);
  }

  .team__title { grid-column: 1 / span 4; }

  .team__body {
    grid-column: 5 / span 8;
    margin-top: var(--sp-2xl);
  }

  .team__ig { width: auto; }
}

/* Equipo con catálogo real: nombres como filas heading-row con hairlines */
.team__names { list-style: none; }

.team__names li {
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--hairline);
}

.team__names li:first-child { border-top: 1px solid var(--hairline); }

/* --------------------------------------------------------------------------
   11. Galería (#galeria)
   -------------------------------------------------------------------------- */
.gallery__title { margin-bottom: var(--sp-xl); }

.gallery__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

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

.gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile 375: secuencia editorial vertical (jerarquía preservada, NO stack
   uniforme): ancho alterno 100%/85%, alineación alterna izq/der */
.gallery__item--a { width: 100%; aspect-ratio: 3 / 4; }
.gallery__item--b { width: 85%; margin-left: auto; aspect-ratio: 4 / 5; }
.gallery__item--c { width: 100%; aspect-ratio: 16 / 10; }
.gallery__item--d { width: 85%; aspect-ratio: 4 / 5; }
.gallery__item--e { width: 100%; margin-left: auto; aspect-ratio: 3 / 4; }

@media (min-width: 768px) {
  .gallery__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--sp-lg);
  }

  .gallery__item { width: auto; margin-left: 0; }

  .gallery__item--a { grid-column: 1 / span 3; }
  .gallery__item--b { grid-column: 4 / span 3; margin-top: var(--sp-xl); }
  .gallery__item--c { grid-column: 1 / span 4; margin-top: var(--sp-3xl); }
  .gallery__item--d { grid-column: 5 / span 2; margin-top: var(--sp-3xl); }
  .gallery__item--e { grid-column: 3 / span 4; margin-top: var(--sp-3xl); }
}

@media (min-width: 1024px) {
  .gallery__grid {
    grid-template-columns: repeat(12, 1fr);
  }

  /* Spans y offsets escalonados: ritmo editorial, ≥2 tamaños de celda (AC-7) */
  .gallery__item--a { grid-column: 1 / span 7; margin-top: 0; }
  .gallery__item--b { grid-column: 8 / span 5; margin-top: var(--sp-4xl); }
  .gallery__item--c { grid-column: 1 / span 5; margin-top: var(--sp-3xl); }
  .gallery__item--d { grid-column: 6 / span 4; margin-top: var(--sp-4xl); }
  .gallery__item--e { grid-column: 10 / span 3; margin-top: var(--sp-2xl); }
}

/* --------------------------------------------------------------------------
   12. CTA reserva WhatsApp (#reserva) — segunda inversión estructural
   -------------------------------------------------------------------------- */
.booking-cta {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: var(--sp-2xl);
}

.booking-cta__title { margin-bottom: var(--sp-md); }

.booking-cta__text {
  color: var(--color-gray-on-dark);
  max-width: 65ch;
  margin-bottom: var(--sp-xl);
}

.booking-cta__btn { width: 100%; }

@media (min-width: 768px) {
  .booking-cta__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-lg);
  }

  /* Columnas 9–12: espacio negativo puro. La asimetría ES la composición. */
  .booking-cta__title { grid-column: 1 / span 8; }

  .booking-cta__text { grid-column: 1 / span 6; margin-bottom: 0; }

  .booking-cta__btn {
    grid-column: 1 / span 4;
    width: auto;
    justify-self: start;
    margin-top: var(--sp-xl);
  }
}

/* --------------------------------------------------------------------------
   13. Contacto (#contacto)
   -------------------------------------------------------------------------- */
.contact__title { margin-bottom: var(--sp-xl); }

.contact__data { margin: 0; }

.contact__row {
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--hairline);
}

.contact__row:first-child { border-top: 1px solid var(--hairline); }

.contact__row dt {
  color: var(--color-gray-strong);
  margin-bottom: var(--sp-2xs);
}

.contact__row dd {
  margin: 0;
  color: var(--color-ink);
}

.contact__phone {
  color: var(--color-ink);
  text-decoration: none;
}

.contact__phone:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Tabla de horarios tipográfica */
.hours {
  width: 100%;
  border-collapse: collapse;
}

.hours caption {
  text-align: left;
  color: var(--color-gray-strong);
  padding-bottom: var(--sp-sm);
}

.hours__row th,
.hours__row td {
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: baseline;
}

.hours__row th {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-strong);
}

.hours__row td {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum' 1;
  font-variation-settings: 'wdth' 110;
  color: var(--color-ink);
}

.hours__row--closed td { color: var(--color-gray-mid); }

.contact__maps {
  margin-top: var(--sp-lg);
  width: 100%;
}

@media (min-width: 768px) {
  .contact__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-lg);
  }

  .contact__left { grid-column: 1 / span 7; }

  .contact__right {
    grid-column: 8 / span 5;
    margin-top: var(--sp-2xl);
  }

  /* dt/dd alineados en columnas */
  .contact__row {
    display: grid;
    grid-template-columns: 10rem 1fr;
    column-gap: var(--sp-lg);
    align-items: baseline;
  }

  .contact__row dt { margin-bottom: 0; }

  .contact__maps { width: auto; }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--sp-2xl) var(--sp-xl);
}

.site-footer__brand {
  color: var(--color-ink);
  margin-bottom: var(--sp-xl);
  overflow-wrap: anywhere;      /* el wordmark gigante puede romper línea */
}

.site-footer__descriptor {
  color: var(--color-gray-mid);
  margin-bottom: var(--sp-lg);
}

.site-footer__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  margin-bottom: var(--sp-lg);
}

.site-footer__nav-list .inline-link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__nav-list .site-footer__book {
  font-weight: 500;
}

.site-footer__ig {
  display: block;
  margin-bottom: var(--sp-lg);
}

.site-footer__legal {
  color: var(--color-gray-mid);
}

/* Mobile: wordmark → descriptor → nav apilada → IG → legal */
.site-footer__meta {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .site-footer__brand { margin-bottom: var(--sp-2xl); }

  .site-footer__meta {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-lg);
    row-gap: var(--sp-md);
    align-items: start;
    border-top: 1px solid var(--hairline);
    padding-top: var(--sp-lg);
  }

  .site-footer__nav { grid-column: 1 / span 4; }

  .site-footer__nav-list {
    flex-direction: column;
    gap: var(--sp-2xs);
    margin-bottom: 0;
  }

  .site-footer__ig { grid-column: 5 / span 3; margin-bottom: 0; }
  .site-footer__legal { grid-column: 10 / span 3; }
}

/* --------------------------------------------------------------------------
   15. Página 404 (.error-page)
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.error-page__main {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--sp-2xl);
}

.error-page__numeral {
  margin-top: var(--sp-4xl);
  margin-bottom: var(--sp-lg);
}

.error-page__message {
  color: var(--color-ink);
  max-width: 65ch;
  margin: 0 0 var(--sp-lg);   /* h1: neutraliza margen UA (antes era <p>) */
}

.error-page__footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--sp-md);
}

/* --------------------------------------------------------------------------
   16. Animación: gating triple (única regla que oculta contenido)
   js-enabled (hay JS) + anim-ready (GSAP cargó) + sin motion-reduce.
   Sin ninguna de las tres: todo el contenido está visible (AC-13).
   -------------------------------------------------------------------------- */
.js-enabled.anim-ready:not(.motion-reduce) [data-reveal] {
  opacity: 0;
}

/* ==========================================================================
   17. Reservar (wizard)
   Página reservar.html + booking.js. Misma disciplina b/n estricta:
   hairlines, inversión tinta/papel, cero radios, sombras, color o spinners.
   ========================================================================== */

/* Contenedor: full-width mobile; contenido ~840px desde 768 */
@media (min-width: 768px) {
  .wizard .container { max-width: calc(840px + (2 * var(--gutter))); }
}

/* Utilidad: radio de servicio oculto (lo genera booking.js) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Stepper: fila horizontal; activo tinta plena + subrayado 1px */
.stepper {
  display: flex;
  gap: var(--sp-md);
  margin: var(--sp-xl) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--hairline);
}

.stepper__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2xs);
  padding-bottom: var(--sp-xs);
  margin-bottom: -1px;                       /* el subrayado tapa la hairline */
  border-bottom: 1px solid transparent;
  color: var(--color-gray-mid);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stepper__num { font-variant-numeric: tabular-nums; }

.stepper__item.is-done { color: var(--color-gray-strong); }

.stepper__item.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

@media (max-width: 767px) {
  .stepper { justify-content: space-between; gap: var(--sp-sm); }
  .stepper__label { display: none; }         /* solo numerales */
  .stepper__item.is-active .stepper__label { display: inline; }
}

/* Paneles y acciones */
.wizard__panel { margin-top: var(--sp-xl); }

.wizard__panel-title { margin-bottom: var(--sp-md); }

.wizard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
}

/* Filas de servicio: heredan la lista editorial de §9; aquí solo la
   selección persistente en inversión b/n (hover/focus ya vienen de §9) */
#services-grid .service-row { cursor: pointer; display: block; }

/* Hint de campo (formato esperado) — tipografía meta, sin error */
.field__hint {
  margin: var(--sp-2xs) 0 0;
  color: var(--color-gray-mid, var(--color-gray-strong));
  font-size: 0.8125rem;
}

/* Reintento de carga de horarios */
.timeslot-retry { margin-top: var(--sp-sm); }

/* Acciones del wizard full-width en mobile (R7) */
@media (max-width: 767px) {
  .wizard__actions .btn-primary,
  .wizard__actions .btn-ghost {
    width: 100%;
  }
}

.service-row.is-selected,
.service-row.is-selected:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.service-row.is-selected .service-row__index,
.service-row.is-selected .service-row__meta,
.service-row.is-selected .service-row__price,
.service-row.is-selected .service-row__dur { color: inherit; }

/* Calendario: grilla de 7, días ≥44px, hoy marcado, cerrado apagado */
.calendar { margin-top: var(--sp-lg); }

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-2xs);
  border-bottom: 1px solid var(--hairline);
}

.calendar__nav {
  appearance: none;
  background: none;
  border: 0;
  padding: var(--sp-2xs) var(--sp-sm);
  min-height: 44px;
  font: inherit;
  color: var(--color-ink);
  cursor: pointer;
}

.calendar__month {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tira horizontal de días (reemplaza grilla de mes) */
.calendar__strip {
  display: flex;
  gap: var(--sp-2xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-sm) 0;
  scroll-snap-type: x mandatory;
}

.calendar__strip::-webkit-scrollbar { height: 0; }

.day {
  appearance: none;
  background: none;
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 68px;
  height: 80px;
  padding: var(--sp-2xs) var(--sp-2xs);
  font: inherit;
  color: var(--color-ink);
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  overflow: hidden;
  transition:
    background-color var(--dur-feedback) var(--ease-inout),
    color var(--dur-feedback) var(--ease-inout),
    border-color var(--dur-feedback) var(--ease-inout),
    box-shadow var(--dur-feedback) var(--ease-inout);
}

.day__dow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  line-height: 1;
}

.day__num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.day__slots {
  color: var(--color-gray-mid);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  line-height: 1;
  width: 100%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.day.is-today {
  border-color: var(--color-ink);
  border-width: 2px;
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

.day.is-today .day__dow {
  color: var(--color-ink);
}

/* Dot indicator: día con slots disponibles */
.day.has-slots::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-ink);
  margin: 2px auto 0;
}

.day.is-selected.has-slots::after,
.day:hover.has-slots::after {
  background: var(--color-paper);
}

.day.is-closed {
  color: var(--color-gray-mid);
  opacity: 0.35;
  cursor: default;
  border-style: dashed;
}

.day.is-selected {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15);
}

.day.is-selected .day__slots { color: inherit; }
.day.is-selected .day__dow { color: inherit; }

@media (hover: hover) and (pointer: fine) {
  .day:not(.is-closed):not(.is-selected):hover {
    background: var(--color-ink);
    color: var(--color-paper);
    border-color: var(--color-ink);
  }

  .day:hover .day__slots { color: inherit; }
  .day:hover .day__dow { color: inherit; }
}

@media (max-width: 767.98px) {
  .day { width: 60px; height: 72px; }
  .day__dow { font-size: 0.625rem; }
  .day__num { font-size: 1.125rem; }
  .day__slots { font-size: 0.5625rem; }
}

/* Franjas horarias */
.timeslot-empty {
margin: var(--sp-md) 0 0;
color: var(--color-gray-strong);
font-size: 1rem;
}

/* Transición suave al cargar franjas */
.timeslot-group {
  animation: timeslot-in 0.3s var(--ease-out-expo) both;
}

@keyframes timeslot-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .timeslot-group { animation: none; }
}

/* Encabezado de franja (Mañana/Tarde) */
.timeslot-group__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  margin: var(--sp-md) 0 var(--sp-2xs);
  padding-bottom: var(--sp-2xs);
  border-bottom: 1px solid var(--hairline);
}

.timeslot-group__label:first-child {
  margin-top: 0;
}

.timeslot {
  appearance: none;
  background: none;
  border: 1px solid var(--hairline);
  min-height: 44px;
  padding: var(--sp-2xs) var(--sp-sm);
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  cursor: pointer;
  transition:
    background-color var(--dur-feedback) var(--ease-inout),
    border-color var(--dur-feedback) var(--ease-inout),
    color var(--dur-feedback) var(--ease-inout);
}

.timeslot.is-selected {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

@media (hover: hover) and (pointer: fine) {
  .timeslot:not(.is-selected):hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-paper);
  }
}

/* Formulario: label caps, input a hairline, error sin color (b/n) */
.field { margin-top: var(--sp-md); }

.field__label {
display: block;
margin-bottom: var(--sp-2xs);
color: var(--color-gray-strong);
font-size: 0.8125rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: var(--sp-2xs) 0;
  font: inherit;
  color: var(--color-ink);
}

.field textarea {
  resize: vertical;
  min-height: 96px;
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--color-ink); }

.field input::placeholder { color: var(--color-gray-mid); }

.field__error {
  margin: var(--sp-2xs) 0 0;
  min-height: 1.25em;
  color: var(--color-gray-strong);
  font-size: 0.8125rem;
}

.field--error .field__label { color: var(--color-ink); }

.field--error input,
.field--error select,
.field--error textarea { border-bottom-color: var(--color-ink); }

/* El error queda señalado por label + campo a tinta plena (18.1:1) y el
   role/alert existente: sin prefijo decorativo «— » (spec §2.3/P3-9) */

/* Botones del wizard (también usados por el fallback noscript) */
.btn-primary,
.btn-ghost {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-xs) var(--sp-lg);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-feedback) var(--ease-inout),
    border-color var(--dur-feedback) var(--ease-inout),
    color var(--dur-feedback) var(--ease-inout),
    opacity var(--dur-feedback) var(--ease-inout);
}

.btn-primary {
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  color: var(--color-paper);
}

.btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-primary.loading {
  opacity: 0.55;
  cursor: progress;                          /* sin spinner */
}

.btn-ghost {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:not(:disabled):not(.loading):hover {
    background: var(--color-paper);
    color: var(--color-ink);
  }

  .btn-ghost:hover { border-color: var(--color-ink); }
}

/* Cargando, vacío, resúmenes y alerta inline */
.wizard__loading {
  margin: var(--sp-lg) 0;
  color: var(--color-gray-mid);
}

.wizard__empty {
  margin-top: var(--sp-md);
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.wizard__empty h3 { margin: 0 0 var(--sp-2xs); }

.wizard__empty p {
  margin: 0 0 var(--sp-md);
  color: var(--color-gray-strong);
}

.summary-item {
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--hairline);
}

.summary-item:first-child { border-top: 1px solid var(--hairline); }

.summary-item strong {
margin-right: var(--sp-2xs);
color: var(--color-gray-strong);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.12em;
  text-transform: uppercase;
}

.summary-note {
margin: var(--sp-md) 0 0;
color: var(--color-gray-strong);
font-size: 1rem;
}

.form-alert {
margin: 0 0 var(--sp-md);
padding: var(--sp-sm) var(--sp-md);
border: 1px solid var(--color-ink);
font-size: 1rem;
}

/* Foco visible: hairline a tinta; papel cuando el elemento está invertido */
.calendar__nav:focus-visible,
.day:focus-visible,
.timeslot:focus-visible,
.btn-ghost:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 1px solid var(--color-ink);
  outline-offset: 2px;
}

.day.is-selected:focus-visible,
.timeslot.is-selected:focus-visible,
.btn-primary:focus-visible {
  outline: 1px solid var(--color-paper);
  outline-offset: 2px;
}

.service-row:focus-within {
  outline: 1px solid var(--color-paper);
  outline-offset: -1px;
}

/* Reduced motion: inversiones instantáneas */
@media (prefers-reduced-motion: reduce) {
  .day,
  .timeslot,
  .btn-primary,
  .btn-ghost {
    transition: none;
  }
}

/* ==========================================================================
   18. Adaptación identidad FBS (docs/design-adaptacion-fbs.md)
   Dispositivos firma portados + mapeo mono de datos/UI. Apéndice: a igualdad
   de especificidad gana por orden; los selectores compuestos del panel
   inverso ganan además por especificidad ((0,3,0) vs (0,2,0)).
   ========================================================================== */



/* --------------------------------------------------------------------------
    18.2 Sec-head numerado (FBS §1.3): regla a ancho del contenedor, índice
    label-caps debajo, título display existente después. En grids de 12 col el
    dispositivo ocupa fila propia completa; en bloques invertidos usa line-dark.
   -------------------------------------------------------------------------- */
.sec-head {
  border-top: 1px solid var(--color-ink);
  padding-top: var(--sp-xs);
  margin-bottom: var(--sp-md);
  grid-column: 1 / -1;         /* inerte fuera de grid */
}

.sec-head--dark { border-top-color: var(--hairline-dark); }

.sec-head__index { display: block; }

/* --------------------------------------------------------------------------
    18.3 Override mono compartido (spec §3.1/§3.2): una sola voz de control en
    todo el sitio — Space Mono 400, mayúsculas, tracking 0.08em estándar UI.
    Cubre TODAS las variantes de botón: las de la base .btn (.btn--primary,
    .btn--ghost, .btn--inverse, .btn--compact, .btn--xl no redefinen fuente)
    y las raíces del wizard .btn-primary/.btn-ghost (apéndice posterior gana
    al bloque L1426–1476 por orden). Geometrías y alturas intactas.
   -------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-ghost,
.site-header__link,
.field__label,
.summary-item strong,
.hours__row th {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* Datos del calendario y franjas: chips/horas en mono (data-md), geometría intacta */
.calendar__weekday,
.day,
.timeslot,
.hours__row td {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
}

.hours__row td { font-variation-settings: normal; }

/* --------------------------------------------------------------------------
    18.4 Confirmación invertida (#step-4, success-panel-inverse): bloque tinta
    full-bleed espejo de booking-cta. Cascada descendiente COMPLETA: cubre
    también los nodos que booking.js inyecta (.summary-note, .inline-link y
    su hover). Sin clases/ids nuevos que toquen contratos JS. Salvaguarda
    full-bleed: overflow-x: clip global ya vigente en html y body.
   -------------------------------------------------------------------------- */
.wizard__panel--inverse {
  background: var(--color-ink);
  color: var(--color-paper);
  margin-inline: calc(50% - 50vw);
  padding: var(--sp-2xl) var(--sp-xl);
}

/* Botón primario invertido: papel sólido; hover transparente + borde papel */
.wizard__panel--inverse .btn-primary {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  .wizard__panel--inverse .btn-primary:not(:disabled):not(.loading):hover {
    background: transparent;
    border-color: var(--color-paper);
    color: var(--color-paper);
  }
}

/* Resumen: bordes line-dark; strong y nota dinámica en gray-on-dark (5.6:1 AA) */
.wizard__panel--inverse .summary-item { border-bottom-color: var(--hairline-dark); }

.wizard__panel--inverse .summary-item:first-child { border-top-color: var(--hairline-dark); }

.wizard__panel--inverse .summary-item strong,
.wizard__panel--inverse .summary-note { color: var(--color-gray-on-dark); }

/* Links en papel; el feedback hover pasa por el subrayado, jamás tinta sobre
   tinta: (0,3,0) vence al hover genérico .inline-link:hover (0,2,0) por
   especificidad, independientemente del orden de este apéndice */
.wizard__panel--inverse .inline-link { color: var(--color-paper); }

.wizard__panel--inverse .inline-link:hover {
  color: var(--color-paper);
  text-decoration-thickness: 2px;
}

/* Foco anclado a papel en toda la superficie invertida */
.wizard__panel--inverse :focus-visible { outline-color: var(--color-paper); }

/* --------------------------------------------------------------------------
    18.5 Footer compacto (FBS §11.1.4) para reservar.html: marca en línea +
    Inicio + teléfono. El footer aporta contacto, jamás repite la conversión.
   -------------------------------------------------------------------------- */
.site-footer--compact { padding-block: var(--sp-xl); }

.footer-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-md);
}

@media (min-width: 768px) {
  .footer-compact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-lg);
  }
}

/* --------------------------------------------------------------------------
    18.6 Fallback ≤400px (spec §7.1, verificación obligatoria a 320px): el gap
    de .site-header__inner baja a --sp-2xs (fallback declarado) y el wordmark
    del header compacta un paso, mismo patrón que FBS styles.css L258–263
    ("debajo del breakpoint base el wordmark compacta un paso más"). Medido:
    fila 1 = brand 144px + CTA 122px + gap 8px = 274px ≤ 280px disponibles.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .site-header__inner { gap: var(--sp-2xs); }

  /* compuesto: el brand del header ES el .wordmark (mismo elemento) */
  .site-header__brand.wordmark { font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
    18.7 Hardening Stage D (review-adaptacion-fbs.md): overflow horizontal
    PREEXISTENTE (bisect vs HEAD lo confirma en ambas versiones; el diff no lo
   introdujo y a 768 lo redujo 8px). Se corrige por P1 con cambios mínimos y
    aditivos: cero selectores existentes editados, cero ids/clases nuevos.
   -------------------------------------------------------------------------- */

/* (b) Banda tablet 861–1023: sin toggle, nav horizontal en fila propia con
   scroll. El rango arranca en 861px para no solaparse con el drawer móvil
   (≤860.98px) que ya maneja el toggle + dropdown. */
@media (min-width: 861px) and (max-width: 1023.98px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-header__nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* (c) Contacto 768–900: el min-content de las filas (dt 10rem + tabla de
   horas) superaba el contenedor y COLAPSABA la grilla 12 col (tracks a 0),
   desbordando el botón Maps fuera del viewport. Tracks y columnas internas
   encogibles: la tabla (width:100%) y los textos fluyen dentro de la celda. */
@media (min-width: 768px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contact__row { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
}

/* ==========================================================================
   19. Landing (index.html) — re-tema editorial claro + estructura thefaleros
   Clases exclusivas del landing (.header, .nav*, .hero__rating, .about__media,
   .oval-frame, .equipo__*, .faq*, .location*, .cta-final, .sticky-cta,
   .footer*). El header del landing combina .header + .site-header: por orden
   (este apéndice va después de §5) los overrides de .header vencen a
   .site-header con igual especificidad; el resto de las páginas usa
   .site-header* / .wizard* / .error-page* y no toca estas clases.
   ========================================================================== */

/* El main receptor del skip-link no debe mostrar anillo propio */
#main-content:focus { outline: none; }

/* Anclas seccionadas por el header fijo */
#nosotros, #servicios, #equipo, #faq, #ubicacion {
  scroll-margin-top: calc(var(--header-h) + var(--sp-sm));
}

/* --------------------------------------------------------------------------
   19.1 Eyebrow + section-header (landing)
   -------------------------------------------------------------------------- */
.eyebrow {
  margin: 0 0 var(--sp-xs);
  color: var(--color-gray-strong);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-header { margin-bottom: var(--sp-xl); }

/* --------------------------------------------------------------------------
   19.2 Header del landing (.header sobre .site-header)
   Transparente sobre el hero claro: tinta. Scrolled: papel + hairline.
   -------------------------------------------------------------------------- */
.header {
  color: var(--color-paper);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

.header.scrolled {
  background: rgba(250, 250, 250, 0.92);
  border-bottom-color: var(--hairline);
  color: var(--color-ink);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  height: var(--header-h);
}

.header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.header__actions { display: inline-flex; }

.nav__cta { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  list-style: none;
}

.nav__toggle {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--sp-2xs);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/* Drawer móvil: panel fijo bajo el header (solo <= 860.98px) */
@media (max-width: 860.98px) {
  .header__actions { display: none; }

  .nav__toggle { display: inline-flex; }

  .nav__toggle-close { display: none; }

  /* Swap hamburguesa ⇄ cruz vía :has(); sin soporte queda el menú acorde */
  .nav:has(#nav-menu.is-open) .nav__toggle-open,
  .site-header__inner:has(#nav-menu.is-open) .nav__toggle-open { display: none; }
  .nav:has(#nav-menu.is-open) .nav__toggle-close,
  .site-header__inner:has(#nav-menu.is-open) .nav__toggle-close { display: block; }

  .nav__list {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 19;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--sp-2xs) var(--gutter) var(--sp-lg);
    background: var(--color-paper);
    border-bottom: 1px solid var(--hairline);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--dur-feedback) var(--ease-inout),
      visibility var(--dur-feedback) var(--ease-inout),
      transform var(--dur-feedback) var(--ease-inout);
  }

  .nav__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__list .nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid var(--hairline);
    color: var(--color-ink);
  }

  .nav__list li:first-child .nav__link { border-top: 1px solid var(--hairline); }

  .nav__list .nav__cta {
    display: inline-flex;
    justify-content: center;
    margin-top: var(--sp-md);
  }

  /* Drawer para .site-header__list (reservar.html, 404, admin) —
     mismo patrón visual que .nav__list */
  .site-header__list {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 19;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--sp-2xs) var(--gutter) var(--sp-lg);
    background: var(--color-paper);
    border-bottom: 1px solid var(--hairline);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--dur-feedback) var(--ease-inout),
      visibility var(--dur-feedback) var(--ease-inout),
      transform var(--dur-feedback) var(--ease-inout);
  }

  .site-header__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-header__list .site-header__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid var(--hairline);
    color: var(--color-ink);
  }

  .site-header__list li:first-child .site-header__link { border-top: 1px solid var(--hairline); }
}

/* --------------------------------------------------------------------------
   19.3 Variantes de botón del landing
   -------------------------------------------------------------------------- */
.btn--sm {
  min-height: 44px;
  padding: var(--sp-xs) var(--sp-md);
}

.btn--lg {
  min-height: 62px;
  padding: var(--sp-lg) var(--sp-xl);
}

.btn--outline {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--outline:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   19.4 Iconos inline (sprite SVG)
   -------------------------------------------------------------------------- */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.icon-sm { width: 16px; height: 16px; }

.icon-md { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   19.5 Sobre nosotros — foto oval (única excepción de radio)
   -------------------------------------------------------------------------- */
.about__grid { display: grid; gap: var(--sp-xl); }

.about__content { max-width: 65ch; }

.about__media {
  display: flex;
  justify-content: center;
}

.oval-frame { width: min(440px, 100%); }

.oval-frame__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.oval-frame__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

@media (min-width: 768px) {
  .about__content { grid-column: 1 / span 6; }
  .about__media { grid-column: 7 / span 6; margin-top: var(--sp-2xl); }
}

/* --------------------------------------------------------------------------
   19.6 Equipo — lead + Instagram (sin nombres inventados)
   -------------------------------------------------------------------------- */
.equipo__text {
  max-width: 65ch;
  margin-bottom: var(--sp-lg);
}

.equipo__ig { width: 100%; }

@media (min-width: 768px) {
  .equipo__ig { width: auto; }
}

/* --------------------------------------------------------------------------
   19.7 FAQ — acordeón nativo details/summary, marcador +/− mono
   -------------------------------------------------------------------------- */
.faq__list { border-top: 1px solid var(--hairline); }

.faq__item { border-bottom: 1px solid var(--hairline); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: 48px;
  padding: var(--sp-md) 0;
  cursor: pointer;
  list-style: none;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--fs-row);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  font-variation-settings: 'wdth' 112;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
  content: '+';
  flex: none;
  color: var(--color-gray-strong);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.faq__item[open] .faq__question::after { content: '−'; }

.faq__question:hover { color: var(--color-gray-strong); }

.faq__answer {
  max-width: 65ch;
  padding: 0 0 var(--sp-lg);
  color: var(--color-gray-strong);
}

/* --------------------------------------------------------------------------
   19.8 Ubicación — mapa + info + horarios (grilla 1.2fr/.8fr @1024)
   -------------------------------------------------------------------------- */
.location__grid { display: grid; gap: var(--sp-xl); }

.location__map { border: 1px solid var(--hairline); }

.location__map iframe {
  display: block;
  width: 100%;
}

.location__name {
  margin: 0 0 var(--sp-md);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--fs-row);
  font-weight: 600;
  line-height: 1.2;
  font-variation-settings: 'wdth' 112;
}

.location__address {
  margin: 0;
  font-style: normal;
}

.location__address p {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2xs);
  margin: 0;
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--color-gray-strong);
}

.location__address p:first-child { border-top: 1px solid var(--hairline); }

.location__address .icon { color: var(--color-ink); margin-top: 0.35em; }

.location__address a {
  color: var(--color-ink);
  text-decoration: none;
}

.location__address a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.location__hours { margin-top: var(--sp-lg); }

.location__hours h4 {
  margin: 0 0 var(--sp-2xs);
  color: var(--color-gray-strong);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location__cta { margin-top: var(--sp-lg); }

@media (min-width: 1024px) {
  .location__grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   19.9 CTA final — cierre centrado, hairline superior (reemplaza la banda
   tinta de .booking-cta por papel; igual especificidad, gana por orden)
   -------------------------------------------------------------------------- */
.cta-final {
  background: var(--color-paper);
  color: var(--color-ink);
  border-top: 1px solid var(--hairline);
  padding-block: var(--sp-3xl);
  text-align: center;
}

.cta-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-final__title {
  margin: var(--sp-xs) 0 var(--sp-md);
  max-width: 22ch;
}

.cta-final__promo {
  margin-bottom: var(--sp-xl);
  color: var(--color-gray-mid);
}

/* --------------------------------------------------------------------------
   19.10 Sticky CTA móvil (<=860.98px)
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  right: var(--sp-md);
  bottom: var(--sp-md);
  z-index: 15;
  display: none;
  align-items: center;
  gap: var(--sp-2xs);
  min-height: 48px;
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (max-width: 860.98px) {
  .sticky-cta { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   19.11 Footer del landing
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--sp-xl);
  background: var(--color-paper);
  color: var(--color-ink);
}

.footer__grid {
  display: grid;
  gap: var(--sp-xl);
  padding-bottom: var(--sp-xl);
}

.footer__brand-name {
  display: inline-flex;
  margin-bottom: var(--sp-2xs);
  color: var(--color-ink);
  text-decoration: none;
}

.footer__tagline { color: var(--color-gray-mid); }

.footer__info h3 {
  margin: 0 0 var(--sp-sm);
  color: var(--color-gray-strong);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
}

.footer__links a {
  color: var(--color-gray-strong);
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer__info p { margin: 0 0 var(--sp-2xs); }

.footer__info a {
  color: var(--color-ink);
  text-decoration: none;
}

.footer__info a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer__maps-line { color: var(--color-gray-mid); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm) var(--sp-lg);
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-md);
  color: var(--color-gray-mid);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__panel-link {
  margin-left: auto;
  color: inherit;
  text-decoration: none;
}

.footer__panel-link:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-lg);
  }

  .footer__brand { grid-column: 1 / span 4; }

  .footer__grid > :nth-child(2) { grid-column: 5 / span 2; }
  .footer__grid > :nth-child(3) { grid-column: 8 / span 3; }
  .footer__grid > :nth-child(4) { grid-column: 11 / span 2; }
}

/* Reduced motion: drawer instantáneo */
@media (prefers-reduced-motion: reduce) {
  .nav__list,
  .site-header__list { transition: none; }
}

/* --------------------------------------------------------------------------
   Mobile compact: wizard, calendar, timeslots, forms
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* --- Wizard panels: less vertical space --- */
  .wizard__panel { margin-top: var(--sp-md); }
  .wizard__panel-title { margin-bottom: var(--sp-sm); font-size: 1.125rem; }
  .wizard__lead { font-size: 0.875rem; margin-bottom: var(--sp-sm); }
  .wizard__actions { margin-top: var(--sp-md); gap: var(--sp-xs); }

  /* --- Stepper: more compact --- */
  .stepper { margin-top: var(--sp-md); gap: var(--sp-sm); }
  .stepper__item { font-size: 0.6875rem; padding-bottom: 6px; }

  /* --- Calendar strip: tighter --- */
  .calendar__strip { padding: 6px 0; gap: 4px; }
  .calendar__month { font-size: 0.75rem; }

  /* --- Timeslot groups: less margin --- */
  .timeslot-group__label {
    font-size: 0.6875rem;
    margin: var(--sp-sm) 0 4px;
    padding-bottom: 4px;
  }
  .timeslot-group__label:first-child { margin-top: 0; }

  /* --- Timeslot buttons: compact grid --- */
  .timeslot {
    min-height: 36px;
    padding: 4px 8px;
    font-size: 0.875rem;
  }
  .timeslot-empty { font-size: 0.875rem; margin-top: var(--sp-sm); }

  /* --- Form fields: tighter --- */
  .field { margin-top: 10px; }
  .field__label { font-size: 0.75rem; }
  .field__hint { font-size: 0.75rem; }
  .field__error { font-size: 0.75rem; }
  .field input[type="text"],
  .field input[type="tel"],
  .field textarea {
    padding: 8px;
    font-size: 0.9375rem;
  }

  /* --- Service rows: compact --- */
  #services-grid .service-row {
    padding: 10px 0;
  }
  #services-grid .service-row__name {
    font-size: 0.9375rem;
  }
  #services-grid .service-row__meta {
    font-size: 0.75rem;
  }

  /* --- Confirmation (step-4) --- */
  .wizard__panel--inverse {
    margin-inline: 0;
    padding: var(--sp-lg) var(--sp-md);
  }
  .wizard__panel--inverse .wizard__panel-title {
    font-size: 1.125rem;
  }
  .summary-item {
    padding: 5px 0;
    font-size: 0.8125rem;
  }
  .summary-item strong {
    font-size: 0.625rem;
    display: block;
    margin-bottom: 1px;
    color: var(--color-gray-mid);
  }
  .summary-note {
    font-size: 0.8125rem;
    margin-top: var(--sp-sm);
  }
  .wizard__panel--inverse .wizard__actions {
    flex-direction: column;
    gap: var(--sp-sm);
  }
  .wizard__panel--inverse .wizard__actions .btn-primary,
  .wizard__panel--inverse .wizard__actions .inline-link {
    width: 100%;
    text-align: center;
  }
}