/* ==========================================================================
   Maquiavelo's Hair Studio — Hoja de estilos principal
   Mobile-first · Sin frameworks · Paleta cerrada (ver :root)
   --------------------------------------------------------------------------
   Índice
   01. Tokens (custom properties)
   02. Reset y base
   03. Tipografía
   04. Utilidades y layout
   05. Botones y enlaces
   06. Header / navegación
   07. Hero
   08. Secciones y tarjetas
   09. Placeholders de imagen
   10. Tabla de precios
   11. FAQ
   12. Contacto / mapa
   13. Footer
   14. Botón flotante de WhatsApp
   15. Movimiento (reveal) y reduced-motion
   ========================================================================== */

/* 01. TOKENS ---------------------------------------------------------------
   Contraste verificado (WCAG 2.1) — ronda «profundidad» (oliva #4A5A2E):
   #1A1A1A / #FAF7F2 16.3:1 · #1A1A1A / #F0E6D8 14.1:1 · #1A1A1A / #C9A961 7.7:1
   #1A1A1A / #E8EDE0 14.6:1 · #1A1A1A / #E8DCC8 12.9:1 · #1A1A1A / #FFFFFF 17.4:1
   #5A5A5A / #FAF7F2 6.5:1  · #5A5A5A / #F0E6D8 5.6:1  · #5A5A5A / #FFFFFF 6.9:1
   #5A5A5A / #E8EDE0 5.8:1  · #5A5A5A / #E8DCC8 5.1:1  · #5A5A5A / #EAE6D9 5.5:1
   OLIVA #4A5A2E como texto: #FAF7F2 7.0:1 · #FFFFFF 7.5:1 · #F0E6D8 6.1:1 ·
   #E8EDE0 6.3:1 · #E8DCC8 5.6:1 · #EAE6D9 6.0:1 · #E8D4A8 5.2:1 → pasa AA en
   TODOS los fondos claros: un solo oliva, sin conmutación por fondo.
   Sobre el footer oliva: #FAF7F2 7.0:1 · #F0E6D8 6.1:1 · #E8D4A8 5.2:1 (texto);
   #C9A961 3.3:1 → solo filetes/decoración (≥3:1 no textual), nunca texto.
   #C9A961 / #FAF7F2 2.1:1 → el dorado NUNCA se usa para texto informativo:
   solo bordes, filetes, ornamentos decorativos (aria-hidden) y fondos de botón
   o de banda con texto #1A1A1A.                                               */
:root {
  /* Paleta obligatoria */
  --c-bg: #FAF7F2;          /* fondo principal (marfil) */
  --c-bg-alt: #F0E6D8;      /* fondo alterno (arena) */
  --c-card: #FFFFFF;        /* tarjetas */
  --c-gold: #C9A961;        /* acento principal */
  --c-gold-soft: #E8D4A8;   /* acento secundario */
  --c-olive: #4A5A2E;       /* acento secundario (oliva profundo): AA sobre todos los fondos claros */
  --c-olive-dark: var(--c-olive); /* alias heredado (antes #5A6248); ya no hay segundo oliva */
  --c-bg-sage: #EAE6D9;     /* fondo alterno beige verdoso (1–2 secciones) */
  --c-text: #1A1A1A;        /* texto principal */
  --c-text-2: #5A5A5A;      /* texto secundario */
  --c-bg-olive-soft: #E8EDE0; /* oliva muy claro: fondo de galería (ronda «profundidad») */
  --c-bg-sand-deep: #E8DCC8;  /* arena intensa: sección de visita/contacto */

  /* Variantes transparentes de la misma paleta */
  --c-gold-line: rgba(201, 169, 97, 0.45);
  --c-gold-faint: rgba(201, 169, 97, 0.18);
  --c-text-line: rgba(26, 26, 26, 0.12);
  --c-shadow: rgba(26, 26, 26, 0.07);
  --c-bg-glass: rgba(250, 247, 242, 0.92);
  --c-ivory-line: rgba(250, 247, 242, 0.22); /* filetes sobre el footer oliva */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.04);

  /* Oliva para texto: el mismo en todos los fondos claros (≥5.1:1) */
  --c-olive-text: var(--c-olive);

  /* Tipografía */
  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-script: 'Dancing Script', 'Brush Script MT', cursive;

  /* Escala tipográfica fluida (≈ 1.25 móvil → 1.333 escritorio) */
  --fs-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --fs-sm: clamp(0.88rem, 0.86rem + 0.12vw, 0.94rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --fs-md: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-lg: clamp(1.4rem, 1.25rem + 0.75vw, 1.9rem);
  --fs-xl: clamp(1.9rem, 1.55rem + 1.6vw, 3rem);
  --fs-2xl: clamp(2.5rem, 1.9rem + 3vw, 4.6rem);
  --fs-script: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);

  /* Espaciado */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --section-y: clamp(2.4rem, 1.8rem + 2.5vw, 4rem);
  --gutter: clamp(1.25rem, 0.8rem + 2.5vw, 3rem);
  --container: 72rem;
  --container-narrow: 46rem;

  /* Otros */
  --radius: 4px;
  --radius-lg: 14px;
  --arch: 999px 999px var(--radius) var(--radius);
  --header-h: 4.5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 0.35s var(--ease);
}

/* 02. RESET Y BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem); /* anclas bajo header sticky */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
::selection { background: var(--c-gold-soft); color: var(--c-text); }

/* Foco visible: anillo oscuro (≥3:1 sobre todos los fondos) + halo dorado */
:focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--c-gold-faint);
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 1000;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-gold);
  color: var(--c-text);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top 0.2s;
}
.skip-link:focus { top: var(--sp-4); }

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

/* 03. TIPOGRAFÍA ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); font-weight: 600; }
p { text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }
em.accent, .accent-italic { font-style: italic; }

.lead {
  font-size: var(--fs-md);
  color: var(--c-text-2);
  line-height: 1.6;
  max-width: 38rem;
}
.muted { color: var(--c-text-2); }
.small { font-size: var(--fs-sm); }

/* Eyebrow: etiqueta pequeña sobre títulos, con filete dorado decorativo */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: clamp(0.94rem, 0.9rem + 0.12vw, 1rem); /* 15–16 px */
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-olive-text);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}
/* Clase heredada: hoy todas las eyebrows son oliva */
.eyebrow--olive { color: var(--c-olive-text); }

/* Script (Dancing Script) — siempre en color de texto, nunca dorado */
.script {
  font-family: var(--f-script);
  font-weight: 600;
  font-size: var(--fs-script);
  line-height: 1.2;
  color: var(--c-text);
}

/* Ornamento decorativo (dorado permitido: aria-hidden en el HTML) */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--c-gold);
  margin-block: var(--sp-5);
}
.ornament::before, .ornament::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--c-gold-line);
}
.ornament svg { width: 14px; height: 14px; }

/* 04. UTILIDADES Y LAYOUT ------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--c-bg); }
.section--sage { background: var(--c-bg); }
/* (Antes: conmutación a #5A6248 en fondos arena. Con #4A5A2E ya no hace falta.) */
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: var(--sp-4); color: var(--c-text-2); }
.section-head .eyebrow { color: var(--c-olive-text); } /* la eyebrow no hereda el gris del párrafo */

/* Fila "título + enlace" en cabeceras de sección */
.section-head--row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
}
.section-head--row > div { max-width: 40rem; }

.grid { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); }
@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 56em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
}

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }

/* 05. BOTONES Y ENLACES --------------------------------------------------- */
a { color: var(--c-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--c-gold); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;               /* objetivo táctil cómodo */
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn svg { width: 18px; height: 18px; flex: none; }

/* Primario: fondo dorado + texto #1A1A1A (7.7:1) */
.btn--primary { background: var(--c-gold); color: var(--c-text); border-color: var(--c-gold); }
.btn--primary:hover { background: var(--c-gold-soft); border-color: var(--c-gold); box-shadow: 0 8px 24px var(--c-gold-faint); }

/* Contorno oscuro */
.btn--outline { background: transparent; color: var(--c-text); border-color: var(--c-text); }
.btn--outline:hover { background: var(--c-text); color: var(--c-bg); }

/* Fantasma (enlace con icono) */
.btn--ghost { background: transparent; color: var(--c-text); padding-inline: var(--sp-3); }
.btn--ghost:hover { text-decoration: underline; text-decoration-color: var(--c-gold); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--c-olive-text);
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 2px;
  transition: color var(--t), border-color var(--t);
}
.link-arrow::after { content: "→"; transition: transform var(--t); }
.link-arrow:hover::after { transform: translateX(4px); }
/* Hover: el subrayado pasa de dorado a oliva (el texto ya es oliva) */
.link-arrow:hover { color: var(--c-olive-dark); border-bottom-color: var(--c-olive-dark); }
/* Variante neutra para tarjetas en secciones que ya tienen 3 elementos oliva */
.link-arrow--quiet, .link-arrow--quiet:hover { color: var(--c-text); border-bottom-color: var(--c-gold); }

/* 06. HEADER / NAVEGACIÓN ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg-glass);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--c-gold-faint);
  transition: box-shadow var(--t);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px var(--c-shadow); }

.header-inner {
  width: min(100% - 2 * var(--gutter), 80rem);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* Logo de texto (hasta recibir assets/logo.png) */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--c-text);
  line-height: 1;
  white-space: nowrap;
}
.logo__name { font-family: var(--f-script); font-weight: 700; font-size: 1.7rem; }
.logo__sub {
  font-family: var(--f-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

/* Botón hamburguesa (móvil) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--c-gold-line);
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--c-text);
  transition: transform var(--t), opacity var(--t);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Panel de navegación — móvil: desplegable bajo el header */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-gold-line);
  box-shadow: 0 20px 40px var(--c-shadow);
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
/* Sin JS el menú queda visible (progresivo); con JS se oculta hasta abrir */
.js .site-nav:not(.is-open) { display: none; }

.nav-list { list-style: none; padding: 0; }
.nav-list a {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--f-display);
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-text-line);
}
.nav-list a[aria-current="page"] { font-style: italic; }
.nav-list a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 0.6rem;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--c-olive);
}
.nav-cta { margin-top: var(--sp-5); width: 100%; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }
.header-cta { display: none; }

/* Escritorio: menú en línea */
@media (min-width: 75em) {
  .nav-toggle { display: none; }
  .site-nav, .js .site-nav:not(.is-open) {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
  .nav-list { display: flex; gap: clamp(0.9rem, 0.2rem + 1vw, 1.6rem); }
  .nav-list a {
    position: relative;
    padding: 0.4rem 0;
    font-family: var(--f-body);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 0;
  }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--c-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t);
  }
  .nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-list a[aria-current="page"]::after { background: var(--c-olive); }
  .nav-list a[aria-current="page"] { font-style: normal; font-weight: 600; }
  .nav-list a[aria-current="page"]::before { display: none; }
  .nav-cta { display: none; }
  .header-cta { display: inline-flex; min-height: 42px; padding: 0.55rem 1.3rem; }
}

/* 07. HERO ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(3.5rem, 2rem + 5vw, 7rem);
  overflow: hidden;
}
/* Halo de luz natural (decorativo) */
.hero::before {
  content: "";
  position: absolute;
  inset: 15% -25% auto auto;
  width: 90vw; height: 90vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, var(--c-gold-faint) 0%, rgba(250, 247, 242, 0) 65%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: center;
}
@media (min-width: 56em) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.hero__title { font-size: var(--fs-2xl); line-height: 1.02; }
.hero__title .script-line {
  display: block;
  font-family: var(--f-script);
  font-weight: 600;
  font-size: 0.62em;
  letter-spacing: 0;
  margin-bottom: 0.1em;
}
.hero__tagline {
  margin-top: var(--sp-5);
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--c-text);
}
.hero__sub { margin-top: var(--sp-3); }
.hero .btn-row { margin-top: var(--sp-6); }

/* Marco de la imagen del hero: arco con filete dorado desplazado */
.hero__media { position: relative; isolation: isolate; max-width: 30rem; width: 100%; margin-inline: auto; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0.7rem -0.7rem -0.7rem 0.7rem;
  border: 1px solid var(--c-gold);
  border-radius: var(--arch);
  z-index: -1;
}
.hero__media .media { border-radius: var(--arch); }
@media (max-width: 55.99em) { .hero__media { width: calc(100% - 0.7rem); margin-left: 0; } }
@media (min-width: 56em) { .hero__media::after { inset: 1.1rem -1.1rem -1.1rem 1.1rem; } }

/* Hero de página interior */
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(2rem, 1rem + 3vw, 4rem); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: var(--sp-5); }

/* Migas de pan */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; font-size: var(--fs-xs); color: var(--c-text-2); margin-bottom: var(--sp-5); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-gold); }
.breadcrumb a { color: var(--c-text-2); }
.breadcrumb [aria-current="page"] { color: var(--c-text); }

/* 08. SECCIONES Y TARJETAS ------------------------------------------------ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-card);
  border: 1px solid var(--c-gold-faint);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px var(--c-shadow); border-color: var(--c-gold-line); }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--c-text-2); font-size: var(--fs-sm); }
.card .link-arrow { margin-top: auto; align-self: flex-start; }
.card > .card__body { flex: 1; margin-bottom: var(--sp-5); }

/* Número decorativo de tarjeta */
.card__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-2);
  margin-bottom: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
}
.card__num::after { content: ""; flex: 1; height: 1px; background: var(--c-gold-faint); }

/* Precio destacado en tarjeta */
.card__price {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  color: var(--c-text);
  margin-bottom: var(--sp-4);
}
.card__price small { font-family: var(--f-body); font-size: var(--fs-xs); color: var(--c-text-2); letter-spacing: 0.08em; text-transform: uppercase; display: block; }

/* Tarjeta con imagen arriba */
.card--media { padding: 0; overflow: hidden; }
.card--media .media { border-radius: 0; border-width: 0 0 1px; }
.card--media .card__content { padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); display: flex; flex-direction: column; flex: 1; }

/* Firma / sobre nosotros */
.about__quote {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  line-height: 1.45;
}
.signature { margin-top: var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); }
.signature .script { font-size: 2rem; }

/* Lista de marcas (texto, sin logos) */
.brand-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) clamp(1.25rem, 0.5rem + 3vw, 3rem);
  list-style: none;
  padding: var(--sp-5) 0;
  border-block: 1px solid var(--c-gold-line);
}
.brand-list li {
  font-family: var(--f-display);
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tipos de producto */
.product-types { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.product-type { text-align: center; align-items: center; }
.product-type__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-4);
  display: grid; place-items: center;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  color: var(--c-text);
}
.product-type__icon svg { width: 24px; height: 24px; }

/* Testimonios placeholder */
.testimonial {
  border-style: dashed;
  border-color: var(--c-gold-line);
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
}
.testimonial:hover { transform: none; box-shadow: none; }
.testimonial__mark { font-family: var(--f-display); font-size: 3rem; line-height: 1; color: var(--c-gold); }
.testimonial p { font-style: italic; }

/* Banda destacada (prueba de color gratis) */
.highlight {
  position: relative;
  background: var(--c-gold-soft);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.2rem + 3vw, 4rem);
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  overflow: hidden;
}
.highlight .btn--primary { background: var(--c-card); border-color: var(--c-card); justify-self: start; }
.highlight .btn--primary:hover { background: var(--c-bg); border-color: var(--c-text); }
.highlight > * { position: relative; z-index: 1; }
.highlight::after {
  content: "";
  position: absolute;
  right: -5rem; bottom: -9rem;
  width: 14rem; height: 14rem;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  pointer-events: none;
}
.highlight p { color: var(--c-text); }
.highlight__badge {
  justify-self: start;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--c-card);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
}
@media (min-width: 56em) {
  .highlight { grid-template-columns: 1fr auto; }
}

/* Técnica (página color) */
.technique h3 { font-size: var(--fs-lg); font-weight: 500; }
.technique .card__num { margin-bottom: var(--sp-3); }

/* Antes / Después */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ba-pair figure { position: relative; }
.ba-tag {
  position: absolute;
  left: var(--sp-3); top: var(--sp-3);
  z-index: 1;
  background: var(--c-card);
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.ba-tag--after { background: var(--c-gold); }
.ba-caption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-2); }

/* CTA final: tarjeta blanca con doble filete dorado sobre marfil */
.cta-final { text-align: center; background: var(--c-bg); }
.cta-final .cta-card {
  position: relative;
  background: var(--c-card);
  border: 1px solid var(--c-gold);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
  box-shadow: 0 0 0 6px var(--c-card), 0 0 0 7px var(--c-gold-line);
}
.cta-final h2 { max-width: 20ch; margin-inline: auto; }
.cta-final .btn-row { justify-content: center; margin-top: var(--sp-6); }

/* Lista de horario */
.hours { list-style: none; padding: 0; }
.hours li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-text-line); }
.hours li span:first-child { font-weight: 600; }

/* Galería (preview) */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.5rem, 0.3rem + 1vw, 1rem); }
@media (min-width: 56em) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid .media { aspect-ratio: 1 / 1; }
}

/* 09. PLACEHOLDERS DE IMAGEN ---------------------------------------------
   Uso: <div class="media ar-4x5"> <span class="media__label">…</span> </div>
   Para cambiar por foto real: reemplazar el <span> por el <img> comentado
   dentro del mismo bloque. .media conserva proporción y recorte (cover).   */
.media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-gold);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Cuando la foto ya existe, se quita el borde del placeholder */
.media:has(img) { border-color: transparent; }
.media__label {
  max-width: 80%;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--c-text-2);
  padding: var(--sp-3);
}
.media__label::before {
  content: "";
  display: block;
  width: 28px; height: 28px;
  margin: 0 auto var(--sp-2);
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--c-gold) 0 3px, rgba(201, 169, 97, 0) 4px);
}
.media--white { background: var(--c-card); }

/* Proporciones */
.ar-1x1 { aspect-ratio: 1 / 1; }
.ar-4x5 { aspect-ratio: 4 / 5; }
.ar-3x4 { aspect-ratio: 3 / 4; }
.ar-4x3 { aspect-ratio: 4 / 3; }
.ar-16x9 { aspect-ratio: 16 / 9; }

.gallery-grid .media { transition: transform var(--t); }
.gallery-grid a:hover .media { transform: scale(0.985); }

/* 10. TABLA DE PRECIOS ---------------------------------------------------- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-card);
  border: 1px solid var(--c-gold-faint);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.price-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  padding-bottom: var(--sp-4);
}
.price-table caption span { display: block; font-family: var(--f-body); font-size: var(--fs-sm); color: var(--c-text-2); margin-top: var(--sp-1); }
.price-table th, .price-table td { text-align: left; padding: var(--sp-4) var(--sp-5); vertical-align: top; }
.price-table thead th {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-2);
  border-bottom: 1px solid var(--c-gold);
  background: var(--c-card);
}
.price-table tbody tr + tr > * { border-top: 1px solid var(--c-text-line); }
.price-table .group-row th {
  background: var(--c-bg-alt);
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 500;
  font-style: italic;
  padding-block: var(--sp-3);
}
.price-table tbody th[scope="row"] { font-weight: 600; }
.price-table td.desc { color: var(--c-text-2); font-size: var(--fs-sm); }
.price-table td.price { white-space: nowrap; font-family: var(--f-display); font-size: var(--fs-md); text-align: right; }
.price-table thead th:last-child { text-align: right; }
.price-table .price--consult { font-family: var(--f-body); font-size: var(--fs-sm); font-style: italic; color: var(--c-text-2); }
.price-table .price--free {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--c-gold);
  color: var(--c-text);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}

/* Móvil: cada fila se apila como tarjeta (la semántica de tabla se conserva) */
@media (max-width: 39.99em) {
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table tbody tr { padding: var(--sp-4) var(--sp-5); }
  .price-table tbody tr + tr > * { border-top: 0; }
  .price-table tbody tr + tr { border-top: 1px solid var(--c-text-line); }
  .price-table th, .price-table td { padding: 0; }
  .price-table .group-row { padding: 0; }
  .price-table .group-row th { padding: var(--sp-3) var(--sp-5); }
  .price-table td.desc { margin-top: var(--sp-1); }
  .price-table td.price { text-align: left; margin-top: var(--sp-2); }
  .price-table caption { display: block; }
}
.table-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-2); }

/* 11. FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--c-gold-line); }
.faq details { border-bottom: 1px solid var(--c-gold-line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  font-family: var(--f-body);
  font-size: 1.1rem;
  transition: transform var(--t);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__answer { padding: 0 0 var(--sp-5); color: var(--c-text-2); max-width: 44rem; }

/* 12. CONTACTO / MAPA ----------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 56em) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; } }
.contact-block + .contact-block { margin-top: var(--sp-6); }
.contact-block h3 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: var(--sp-2);
}
.contact-block address { font-style: normal; font-size: var(--fs-md); font-family: var(--f-display); }
.map-frame {
  position: relative;
  min-height: 320px;
  height: 100%;
  border: 1px solid var(--c-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-alt);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 13. FOOTER (claro) ------------------------------------------------------ */
.site-footer {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-gold-line);
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  font-size: var(--fs-sm);
}
.footer-grid { display: grid; gap: var(--sp-7) var(--sp-6); }
@media (min-width: 40em) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-brand .logo__name { font-size: 2.2rem; }
.footer-brand .tagline { margin-top: var(--sp-3); font-family: var(--f-display); font-style: italic; font-size: var(--fs-md); }
.site-footer h2 {
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-olive-text); /* sustituido en la sección 18 (footer oliva) */
  margin-bottom: var(--sp-4);
}
.footer-list { list-style: none; padding: 0; }
.footer-list li + li { margin-top: var(--sp-2); }
.footer-list a { text-decoration: none; }
.footer-list a:hover { text-decoration: underline; text-decoration-color: var(--c-gold); }
.site-footer address { font-style: normal; }
.footer-bottom {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-gold-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
}
.footer-bottom a { color: var(--c-text); }
.footer-bottom p + p { margin-top: 0; }

/* 14. BOTÓN FLOTANTE DE WHATSAPP ----------------------------------------- */
.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--c-gold);
  color: var(--c-text);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(26, 26, 26, 0.18);
  transition: transform var(--t), box-shadow var(--t), background-color var(--t);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { transform: translateY(-3px) scale(1.04); background: var(--c-gold-soft); }

/* 15. MOVIMIENTO ---------------------------------------------------------- */
/* El contenido solo se oculta si hay JS (clase .js en <html>) y el usuario
   no pidió reducir movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal-d1 { transition-delay: 0.08s; }
  .js .reveal-d2 { transition-delay: 0.16s; }
  .js .reveal-d3 { transition-delay: 0.24s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ajustes menores del footer */
.footer-note, .footer-contact { margin-top: var(--sp-4); }

/* Utilidades de margen superior */
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

/* Antes/Después: contenedor relativo para la etiqueta */
.ba-item { position: relative; }

/* Tabla compacta (2 columnas, p. ej. precios de color) */
@media (max-width: 39.99em) {
  .price-table--compact tbody tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
  .price-table--compact td.price { margin-top: 0; }
}

/* Monograma decorativo en hero de páginas sin foto (dorado permitido: decorativo) */
.page-hero--deco { position: relative; overflow: hidden; }
.page-hero--deco .container { position: relative; }
@media (min-width: 56em) {
  .page-hero--deco .container::after {
    content: "M";
    position: absolute;
    right: 2rem; top: 50%;
    transform: translateY(-50%);
    width: 17rem; height: 17rem;
    display: grid; place-items: center;
    font-family: var(--f-display);
    font-size: 10rem;
    line-height: 1;
    color: var(--c-gold);
    border: 1px solid var(--c-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 10px var(--c-bg), 0 0 0 11px var(--c-gold-line);
    pointer-events: none;
  }
}

/* ==========================================================================
   16. FASE 2 — Cortes, Tratamientos, Productos
   ========================================================================== */

/* Tarjeta simple sin fondo (Cortes: dama / caballero) */
.split-card {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-gold);
}
.split-card h3 { font-size: var(--fs-lg); font-weight: 500; }
.split-card__price {
  margin-top: var(--sp-5);
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--fs-md);
}

/* Galería vertical (3:4) que no se recorta a 1:1 en escritorio */
@media (min-width: 56em) {
  .gallery-grid--portrait .media { aspect-ratio: 3 / 4; }
}

/* Tratamientos: precio y lista de beneficios */
.treatment h3 { font-size: var(--fs-lg); font-weight: 500; }
.treatment__price {
  margin: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--c-text-2);
}
.check-list { margin-top: var(--sp-4); }
.check-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.check-list li + li { margin-top: var(--sp-2); }
/* Viñeta decorativa dorada (no transmite información) */
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 0.7rem; height: 1px;
  background: var(--c-gold);
}

/* Productos: tarjetas de marca */
.brand-card__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: var(--sp-3);
}
.card .brand-card__tag { color: var(--c-text-2); font-size: var(--fs-xs); }
.brand-card__name {
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-gold-faint);
}
.card .product-type__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 14. FOTOS REALES -------------------------------------------------------- */
/* <picture> no altera el recorte: el <img> sigue ocupando todo el bloque .media */
.media picture { display: contents; }
/* Encuadre vertical cuando el recorte (p. ej. 1:1 en escritorio) cortaría la cabeza */
.media img.pos-top { object-position: 50% 5%; }
.media img.pos-upper { object-position: 50% 18%; }
.media img.pos-high { object-position: 50% 30%; }

/* Testimonios con retrato (textos de ejemplo por confirmar) */
.testimonials { max-width: 52rem; margin-inline: auto; }
.testimonial__photo {
  width: 7.5rem;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--c-card), 0 0 0 5px var(--c-gold-line);
}
.card .testimonial__name { font-style: normal; font-weight: 600; color: var(--c-text); margin-top: var(--sp-3); }
.card .testimonial__note {
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-2);
}
/* Foto apaisada dentro de una sección: ancho limitado para no ampliar la imagen */
.media--narrow { max-width: 48rem; margin-inline: auto; }

/* ==========================================================================
   17. FASE 3 — Galería, Nosotros, Contacto, 404
   Solo tokens de la paleta existente (sin colores nuevos). Movimiento mínimo;
   todas las transiciones quedan anuladas por el bloque prefers-reduced-motion.
   ========================================================================== */

/* 17.1 Botón grande (CTA principal de WhatsApp en Contacto) */
.btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: var(--fs-base); }
.btn--lg svg { width: 22px; height: 22px; }

/* 17.2 GALERÍA — filtros accesibles (aria-pressed). Ocultos sin JS con [hidden]. */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.gallery-filters[hidden] { display: none; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0.55rem 1.2rem;
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid var(--c-gold-line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}
.filter-btn:hover { border-color: var(--c-gold); }
/* Estado activo: dorado + texto oscuro (7.7:1); el grosor también cambia (no solo color) */
.filter-btn[aria-pressed="true"] { background: var(--c-gold); border-color: var(--c-gold); font-weight: 600; }
.filter-btn__count {
  min-width: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--c-bg);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

/* 17.3 GALERÍA — tarjetas */
.gallery-grid--full { list-style: none; padding: 0; row-gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem); }
.gallery-item[hidden] { display: none; }
.gallery-item figure { margin: 0; }
.gallery-item__link { display: block; border-radius: var(--radius); }
.gallery-item__link { cursor: zoom-in; }
.gallery-item figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--c-text-2);
}
.gallery-more {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  text-align: center;
}

/* 17.4 LIGHTBOX (<dialog> creado por site.js). Fondo marfil translúcido: nada oscuro. */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-bg);   /* marfil sólido: luminoso y sin distracciones detrás */
  color: var(--c-text);
}
.lightbox::backdrop { background: var(--c-bg-glass); }
.lightbox__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--gutter) var(--sp-5);
}
.lightbox__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.lightbox__counter { font-size: var(--fs-sm); color: var(--c-text-2); }
.lightbox__stage {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* pista definida: la foto nunca desborda */
  place-items: center;
}
/* <picture> sin caja propia: así la <img> se ajusta al alto disponible del escenario */
.lightbox__stage picture { display: contents; }
.lightbox__stage source { display: none; } /* que <source> no ocupe una fila de la rejilla */
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--c-card);
  border: 1px solid var(--c-gold);
  border-radius: var(--radius);
  box-shadow: 0 0 0 6px var(--c-card), 0 24px 60px var(--c-shadow);
}
.lightbox__caption { text-align: center; max-width: 40rem; margin-inline: auto; }
.lightbox__caption p { font-family: var(--f-display); font-size: var(--fs-md); }
.lightbox__caption .link-arrow { margin-top: var(--sp-3); }
.lightbox__btn {
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  background: var(--c-card);
  color: var(--c-text);
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t);
}
.lightbox__btn:hover { background: var(--c-gold-soft); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }
@media (min-width: 56em) {
  .lightbox__inner { padding-inline: calc(var(--gutter) + 4rem); }
  .lightbox__nav--prev { left: -4rem; }
  .lightbox__nav--next { right: -4rem; }
}
/* Sin scroll de la página mientras el lightbox está abierto */
html.has-lightbox { overflow: hidden; }

/* 17.5 NOSOTROS */
.facts {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block: 1px solid var(--c-gold-line);
}
@media (min-width: 40em) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-2); }
.facts dd { margin: var(--sp-1) 0 0; font-family: var(--f-display); font-size: var(--fs-lg); }
.signature--center { justify-content: center; }
.center .eyebrow { justify-content: center; }

/* Foto provisional con etiqueta visible (sustituir cuando llegue la foto del equipo) */
.media-provisional { position: relative; margin: 0; }
.provisional-tag {
  position: absolute;
  left: var(--sp-3); bottom: var(--sp-3);
  z-index: 1;
  background: var(--c-card);
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--c-gold-line);
}
.team-list { display: grid; gap: var(--sp-4); }
.team-member {
  background: var(--c-card);
  border: 1px solid var(--c-gold-faint);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.team-member h3 { font-size: var(--fs-lg); font-weight: 500; }
.team-member p { margin-top: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-sm); }
.pending-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text);
  padding: 0.2rem 0.7rem;
  border: 1px dashed var(--c-gold);
  border-radius: 999px;
}

/* 17.6 CONTACTO — tabla de horario */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-2);
  padding-bottom: var(--sp-2);
}
.hours-table thead th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hours-table th, .hours-table td { text-align: left; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-text-line); vertical-align: top; }
.hours-table tbody th { font-weight: 600; padding-right: var(--sp-4); white-space: nowrap; }
.hours-table td { color: var(--c-text-2); }

/* 17.7 CONTACTO — formulario (compone un mensaje de WhatsApp; sin backend) */
.contact-form { gap: var(--sp-5); }
.contact-form:hover { transform: none; box-shadow: none; }
.field { display: grid; gap: var(--sp-2); }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: var(--c-bg);
  border: 1px solid var(--c-gold-line);
  border-radius: var(--radius);
  color: var(--c-text);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-gold); }
/* Error: borde más grueso y oscuro + mensaje de texto (no depende solo del color) */
.field [aria-invalid="true"] { border: 2px solid var(--c-text); }
.card .field__error, .field__error { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.field__error::before { content: "⚠ "; }
.card .field__hint, .field__hint { font-size: var(--fs-xs); color: var(--c-text-2); font-weight: 400; }
.card .form-status, .form-status { font-size: var(--fs-sm); color: var(--c-text); }
.form-status:empty { display: none; }
.form-status.is-notice { padding: var(--sp-3) var(--sp-4); background: var(--c-bg-alt); border-left: 3px solid var(--c-gold); border-radius: var(--radius); }

/* 17.8 PÁGINA 404 — accesos rápidos */
.error-page { min-height: 60vh; }
.quick-links { display: grid; gap: var(--sp-3); max-width: 44rem; }
@media (min-width: 40em) { .quick-links { grid-template-columns: repeat(2, 1fr); } }
.quick-link {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-card);
  border: 1px solid var(--c-gold-faint);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--t);
}
.quick-link:hover { border-color: var(--c-gold); }
.quick-link__name { font-family: var(--f-display); font-size: var(--fs-md); }
.quick-link__desc { font-size: var(--fs-sm); color: var(--c-text-2); }

/* ==========================================================================
   18. RONDA «PROFUNDIDAD» — oliva #4A5A2E, footer oliva, bordes 2px,
   sombras suaves, números decorativos, banda CTA dorada, fotos protagonistas.
   Solo paleta aprobada. Contrastes en el bloque 01 (Tokens).
   ========================================================================== */

/* 18.1 Fondos adicionales (Inicio; uso puntual en otras páginas) */
.section--olive-soft { background: var(--c-bg); }
.section--sand-deep { background: var(--c-bg); }
.section--white { background: var(--c-bg); }

/* 18.2 Eyebrow: filete + punto (motivo gráfico fino, color del texto oliva) */
.eyebrow::before {
  width: 2.6rem;
  height: 5px;
  background:
    radial-gradient(circle, currentColor 0 2px, transparent 2.5px) right center / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) left center / calc(100% - 8px) 1px no-repeat;
}

/* 18.3 Número grande decorativo junto a los títulos (contorno dorado, sin relleno) */
.deco-num {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(3.2rem, 2.4rem + 3vw, 5.5rem);
  line-height: 1.2;
  padding: 0.06em 0.14em 0.02em;
  margin-left: -0.14em;
  letter-spacing: -0.02em;
  color: transparent;
  background-image: linear-gradient(168deg, #9A7526 0%, #D6B96F 26%, #B8923F 50%, #E2C98A 76%, #A57F2C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 0;
  user-select: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .deco-num { color: #A57F2C; } }

/* 18.4 Tarjetas: sombra suave + acento superior oliva (tarjetas de servicio/contenido).
   Decisión: OLIVA para el acento de las tarjetas (señala «contenido/servicio», es corto
   y aparece como un único motivo repetido) y DORADO 2px para los marcos decorativos
   (arco del hero, monogramas, anillos, mapa): el dorado sigue siendo el color «joya». */
.card, .team-member, .quick-link, .price-table { box-shadow: var(--shadow-card); }
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  width: 2.5rem;
  height: 2px;
  background: var(--c-olive);
  border-radius: 0 0 2px 2px;
}
.card.testimonial::before, .card.contact-form::before, .card--media::before { display: none; }
.card:hover { box-shadow: 0 14px 32px var(--c-shadow); }

/* 18.5 Marcos decorativos dorados a 2px */
.hero__media::after { border-width: 2px; }
.page-hero--deco .container::after { border-width: 2px; box-shadow: 0 0 0 10px var(--c-bg), 0 0 0 12px var(--c-gold-line); }
.highlight::after { border-width: 2px; }
.map-frame { border-width: 2px; }
.split-card { border-top-width: 2px; }
.product-type__icon { border-width: 2px; }
.testimonial__photo { box-shadow: 0 0 0 4px var(--c-card), 0 0 0 6px var(--c-gold); }
.lightbox__stage img { border-width: 2px; }

/* 18.6 Iconos en oliva sobre fondos claros (el dorado de los botones conserva #1A1A1A) */
.btn--ghost svg, .btn--outline svg, .product-type__icon { color: var(--c-olive); }
.btn--outline:hover svg { color: currentColor; }
.link-arrow--quiet::after { color: var(--c-olive); }
/* Flotante de WhatsApp: se mantiene dorado (acción principal) con aro marfil para que se
   distinga también sobre la banda dorada y el footer oliva. Icono #1A1A1A 7,7:1. */
.wa-float { box-shadow: 0 0 0 3px var(--c-bg), 0 10px 28px rgba(26, 26, 26, 0.18); }

/* 18.7 FOOTER OLIVA (única zona oscura aprobada) */
.site-footer {
  background: var(--c-olive);
  color: var(--c-bg-alt);                   /* #F0E6D8 6.1:1 */
  border-top: 0;
  box-shadow: inset 0 3px 0 var(--c-gold);  /* filete dorado superior (decorativo) */
}
.site-footer h2 { color: var(--c-gold-soft); }  /* #E8D4A8 5.2:1 */
.site-footer .logo, .site-footer .logo__name { color: var(--c-bg); }
.site-footer .logo__sub { color: var(--c-gold-soft); }
.site-footer .tagline { color: var(--c-bg); }   /* 7.0:1 */
.site-footer .muted, .site-footer address { color: var(--c-bg-alt); }
.site-footer a { color: var(--c-bg); }          /* 7.0:1 */
.site-footer .footer-list a:hover, .site-footer a:hover { text-decoration: underline; text-decoration-color: var(--c-gold); }
.site-footer .hours li { border-bottom-color: var(--c-ivory-line); }
.site-footer .hours li span:first-child { color: var(--c-bg); }
.footer-bottom { border-top-color: var(--c-ivory-line); color: var(--c-bg-alt); }
.footer-bottom a { color: var(--c-bg); text-decoration: underline; text-decoration-color: var(--c-gold); }
/* Foco visible sobre oliva: anillo marfil (7.0:1) en lugar del negro (2.3:1) */
.site-footer :focus-visible { outline-color: var(--c-bg); box-shadow: 0 0 0 6px rgba(250, 247, 242, 0.25); }

.cta-final .btn--primary:hover { background: var(--c-bg); box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12); }
.cta-final .btn--outline { border-color: var(--c-text); color: var(--c-text); }
.cta-final .btn--outline svg { color: currentColor; }
.cta-final .btn--outline:hover { background: var(--c-text); color: var(--c-bg); }
.cta-final :focus-visible { box-shadow: 0 0 0 6px rgba(250, 247, 242, 0.6); }

/* 18.9 HERO DE INICIO: 90vh en escritorio, foto más grande */
@media (min-width: 56em) {
  .hero--home {
    min-height: calc(90vh - var(--header-h));
    min-height: calc(90svh - var(--header-h));
    display: flex;
    align-items: center;
  }
  .hero--home > .container { width: min(100% - 2 * var(--gutter), 78rem); }
  .hero--home .hero__grid { grid-template-columns: 1fr 1fr; }
  /* La foto (4:5) cabe entera en el 90vh: ancho limitado por el alto disponible */
  .hero--home { padding-block: var(--sp-6); }
  .hero--home .hero__media { max-width: min(34rem, calc((90svh - var(--header-h) - 5rem) * 0.8)); }
}

/* 18.10 GALERÍA 2×2 (Inicio) con fotos grandes */
.container--gallery { width: min(100% - 2 * var(--gutter), 62rem); }
.gallery-grid--2x2 { grid-template-columns: repeat(2, 1fr); gap: clamp(0.6rem, 0.3rem + 1.4vw, 1.5rem); }
@media (min-width: 56em) { .gallery-grid--2x2 .media { aspect-ratio: 4 / 5; } }
.gallery-grid--2x2 .media { box-shadow: var(--shadow-card); }

/* 18.11 BANDA DE FOTO A TODO EL ANCHO (+ tarjeta superpuesta en Inicio) */
.photo-band { position: relative; }
.photo-band__media {
  height: clamp(16rem, 42vw, 34rem);
  border: 0;
  border-radius: 0;
  background: var(--c-bg-alt);
}
.photo-band__media img.pos-band { object-position: 50% 35%; }
/* Filete dorado 2px bajo la banda (decorativo) */
.photo-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-gold); }
.photo-band-section { padding-bottom: var(--section-y); }
.band-card {
  position: relative;
  margin-top: clamp(-7rem, -4rem - 3vw, -3rem);
  max-width: 44rem;
  background: var(--c-card);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  box-shadow: var(--shadow-card), 0 24px 60px var(--c-shadow);
}
.band-card::before {                        /* acento oliva, mismo motivo que las tarjetas */
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  width: 2.5rem;
  height: 2px;
  background: var(--c-olive);
}
/* Móvil: separación entre título y texto de la tarjeta */
.band-card__body { margin-top: var(--sp-5); }
/* Escritorio: tarjeta ancha en dos columnas (título | texto) para no dejar vacío a la derecha */
@media (min-width: 56em) {
  .band-card { max-width: none; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-7); align-items: start; }
  .band-card__body { margin-top: 0; padding-top: var(--sp-6); }
}
/* Tarjetas centradas: el acento oliva también se centra */
.card.product-type::before { left: 50%; transform: translateX(-50%); }

/* ==========================================================================
   19. HERO FIJO (STICKY) EN INICIO — la sección siguiente sube por encima
   Solo con: movimiento permitido + diseño a 2 columnas (≥56em = 896px) + alto
   suficiente (≥36em = 576px). En móvil/tablet vertical el hero apilado es más
   alto que la pantalla: fijarlo escondería la foto, así que fluye normal.
   Alto con svh (estable en iOS Safari con barra dinámica) y respaldo en vh.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) and (min-width: 56em) and (min-height: 36em) {
  .hero--home {
    position: sticky;
    top: calc(var(--header-h) + 1px);   /* justo bajo el header (+ filete 1px): el hero no se mueve */
    z-index: 1;
    height: calc(100vh - var(--header-h) - 1px);
    height: calc(100svh - var(--header-h) - 1px);
    min-height: 0;
  }
  .hero--home .hero__media {
    max-width: min(34rem, calc((100vh - var(--header-h) - 5rem) * 0.8));
    max-width: min(34rem, calc((100svh - var(--header-h) - 5rem) * 0.8));
  }
  /* Capa que sube: opaca, por encima del hero, con halo dorado muy suave */
  .stage-over {
    position: relative;
    z-index: 2;
    background: var(--c-bg);
    box-shadow: 0 -12px 40px rgba(201, 169, 97, 0.15);
  }
  /* Velo marfil justo encima del borde: el contenido del hero se desvanece antes del corte */
  .stage-over::after {
    content: "";
    position: absolute;
    inset: auto 0 100%;
    height: 1.75rem;
    background: linear-gradient(to bottom, rgba(250, 247, 242, 0), rgba(250, 247, 242, 0.85));
    pointer-events: none;
  }
  /* Degradado marfil progresivo: el borde superior se funde con el fondo del hero */
  .stage-over > .section:first-child { position: relative; }
  .stage-over > .section:first-child::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: clamp(3.5rem, 2rem + 5vw, 7rem);
    background: linear-gradient(to bottom, var(--c-bg) 0%, rgba(250, 247, 242, 0.6) 45%, rgba(250, 247, 242, 0) 100%);
    pointer-events: none;
  }
  .stage-over > .section:first-child > .container { position: relative; }

  /* Ken Burns muy lento ligado al scroll: 1 → 1.06 durante el primer viewport.
     CSS scroll-driven donde existe; si no, site.js escribe --kb (rAF + passive). */
  .hero--home .hero__media img {
    transform: scale(var(--kb, 1));
    transform-origin: 50% 40%;
    will-change: transform;
  }
  @supports (animation-timeline: scroll()) {
    .hero--home .hero__media img {
      animation: hero-kb linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 100vh;
    }
  }
}
@keyframes hero-kb { from { transform: scale(1); } to { transform: scale(1.06); } }

/* 20. UN SOLO FONDO + ACENTO OLIVA (ronda 2026-10-01)
   Decision: se unifica todo el fondo a --c-bg (marfil) para que no haya
   'bloques' de color entre secciones. El contraste lo dan el pie oliva, la
   banda dorada final, los numeros decorativos y estos titulos en oliva. */
.card h3, .price-table h3 { color: var(--c-olive); }

/* 21. HERO — PALABRAS QUE ROTAN (2026-10-01)
   CSS puro, sin JavaScript. Todas las palabras ocupan la MISMA celda de grid,
   asi el contenedor mide lo que la mas larga y no hay saltos de linea.
   Orden del hero: h1 -> "Especialistas en ..." (grande) -> lema (pequeno).
   Sin cursor: solo fundido + un desplazamiento vertical muy corto. */
.hero__rotate {
  margin-top: var(--sp-5);
  font-size: clamp(1.45rem, 1.05rem + 2vw, 2.9rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em;
}
.hero__rotate-prefix { color: var(--c-text-2); }
.hero__rotate-track { display: inline-grid; min-width: 0; }
.hero__rotate-item {
  grid-area: 1 / 1;
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-olive);
  opacity: 0;
  transform: translateY(0.3em);
  animation: hero-rotate 24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.hero__rotate-item:nth-child(1) { animation-delay: 0s; }
.hero__rotate-item:nth-child(2) { animation-delay: 4s; }
.hero__rotate-item:nth-child(3) { animation-delay: 8s; }
.hero__rotate-item:nth-child(4) { animation-delay: 12s; }
.hero__rotate-item:nth-child(5) { animation-delay: 16s; }
.hero__rotate-item:nth-child(6) { animation-delay: 20s; }
@keyframes hero-rotate {
  0%    { opacity: 0; transform: translateY(0.3em); }
  2%    { opacity: 1; transform: translateY(0); }
  14%   { opacity: 1; transform: translateY(0); }
  16.7% { opacity: 0; transform: translateY(-0.3em); }
  100%  { opacity: 0; transform: translateY(-0.3em); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__rotate-item { animation: none; opacity: 0; transform: none; }
  .hero__rotate-item:first-child { opacity: 1; }
}
.hero__tagline { margin-top: var(--sp-2); }
.hero__title .script-line { font-size: 0.7em; }
/* 23. AJUSTE FINAL (2026-10-01)
   1) Se retiro la BANDA DORADA del CTA (bloque 18.8): sobre una pagina ya
      toda marfil, el bloque mostaza pesaba y desentonaba. Vuelve el diseno
      original documentado en el bloque "CTA final": tarjeta blanca con doble
      filete dorado sobre marfil. El footer oliva se mantiene: es la unica
      zona oscura y hace de cierre (igual que la referencia Lumen Studio).
   2) El rotador baja de tamano en movil para no desbordar a lo ancho. */
.cta-final .btn--primary { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-text); }