@font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/bricolage-grotesque-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('assets/fonts/figtree-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('assets/fonts/figtree-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* ===========================================================================
   Bouclé Peluquería — styles.css
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía · 5. Componentes
   6. Secciones · 7. Efectos · 8. Responsive · 9. Reduced-motion
   =========================================================================== */

/* =============================================================
   1. TOKENS — cambiar la paleta entera de la web es editar ESTE bloque
   ============================================================= */
:root {
  /* Color — reparto 60 (base) / 30 (tinta) / 10 (acento) */
  --c-base:        #FAF6F1;   /* crema cálido, nunca blanco puro */
  --c-base-2:      #F4EDE5;   /* superficie alterna */
  --c-tinta:       #2A2320;   /* marrón grisáceo muy oscuro, nunca negro */
  --c-apagado:     #6E635C;   /* textos secundarios */
  --c-acento:      #9C3D6B;   /* terracota apagada — CTA, onda y poco más */
  --c-acento-osc:  #7D2F55;   /* hover del acento */
  --c-acento-suave:#F3E2EA;   /* fondo tenue del acento */
  --c-linea:       #E6DCD2;   /* bordes y separadores */
  --c-sobre-acento:#FFFFFF;   /* texto sobre el acento */

  /* Sombra — la única de la web, para despegar el botón flotante del texto */
  --sombra-flotante: 0 6px 20px -10px rgba(42, 35, 32, .55);
  --velo-lupa: rgb(20 14 10 / .62);   /* fondo oscuro detrás de la foto ampliada */

  /* Tipografía */
  --fuente-display: "Bricolage Grotesque", system-ui, sans-serif;
  --fuente-texto:   "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala modular 1.250 sobre 17px */
  --t-base: 17px;
  --t-md:   clamp(19px, 1.2vw + 15px, 21px);
  --t-lg:   clamp(22px, 1.8vw + 16px, 27px);
  --t-xl:   clamp(26px, 2.6vw + 17px, 33px);
  --t-2xl:  clamp(30px, 3.4vw + 18px, 42px);
  --t-3xl:  clamp(34px, 4.6vw + 19px, 52px);
  --t-4xl:  clamp(34px, 6vw + 18px, 65px);

  /* Espaciado — unidad 8 */
  --e-1: 8px;  --e-2: 16px; --e-3: 24px; --e-4: 32px;
  --e-5: 40px; --e-6: 48px; --e-8: 64px; --e-10: 80px;
  --sec-pad:  clamp(72px, 11vw, 144px);
  --gutter:   20px;
  --ancho:        1120px;
  --ancho-texto:  680px;
  --nav-alto:     56px;

  /* Formas */
  --radio:       6px;
  --radio-boton: 999px;

  /* Movimiento — una sola curva y una sola duración */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  200ms;
}

@media (min-width: 960px) {
  :root { --nav-alto: 72px; --gutter: 32px; }
}

/* Modo oscuro — mismo sistema, otros valores */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --c-base:        #191411;
    --c-base-2:      #221B17;
    --c-tinta:       #F2EAE2;
    --c-apagado:     #B3A79D;
    --c-acento:      #E39AC0;
    --c-acento-osc:  #ECB2D0;
    --c-acento-suave:#2E1D26;
    --c-linea:       #352B25;
    --c-sobre-acento:#191411;
    --sombra-flotante: 0 6px 20px -10px rgba(0, 0, 0, .7);
    --velo-lupa: rgb(0 0 0 / .74);
  }
}
:root[data-tema="oscuro"] {
  --c-base:        #191411;
  --c-base-2:      #221B17;
  --c-tinta:       #F2EAE2;
  --c-apagado:     #B3A79D;
  --c-acento:      #E39AC0;
  --c-acento-osc:  #ECB2D0;
  --c-acento-suave:#2E1D26;
  --c-linea:       #352B25;
  --c-sobre-acento:#191411;
  --sombra-flotante: 0 6px 20px -10px rgba(0, 0, 0, .7);
  --velo-lupa: rgb(0 0 0 / .74);
}

/* =============================================================
   2. RESET Y BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--c-base);
  color: var(--c-tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Safari anterior a 16 no entiende overflow:clip. Sin esto, el sangrado del
   hero le sacaría una barra horizontal de 8px. */
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
address { font-style: normal; }

::selection { background: var(--c-acento); color: var(--c-sobre-acento); }

:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 3px;
  border-radius: 3px;
}

[id] { scroll-margin-top: calc(var(--nav-alto) + 24px); }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenedor--estrecho { max-width: 800px; }

.salto {
  position: fixed; top: -100px; left: var(--gutter); z-index: 999;
  background: var(--c-tinta); color: var(--c-base);
  padding: 12px 20px; border-radius: var(--radio-boton);
  transition: top var(--dur) var(--ease);
}
.salto:focus { top: 12px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.apagado { color: var(--c-apagado); }

/* Datos de maqueta — visibles a propósito mientras es una demo */
.dato-ejemplo { color: inherit; }
.dato-pendiente {
  color: var(--c-acento);
  font-size: 14px;
  letter-spacing: .01em;
}
.aviso {
  margin-top: var(--e-4);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-apagado);
  max-width: var(--ancho-texto);
  padding-left: 14px;
  border-left: 2px solid var(--c-linea);
}
.aviso--pendiente { border-left-color: var(--c-acento); }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1, h2, h3 {
  font-family: var(--fuente-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.02em; }

.antetitulo {
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-apagado);
  margin-bottom: var(--e-2);
}

.entradilla {
  margin-top: var(--e-3);
  max-width: 62ch;
  font-size: var(--t-md);
  color: var(--c-apagado);
}

.texto-largo p { max-width: 66ch; }
.texto-largo p + p { margin-top: var(--e-3); }

.enlace {
  color: var(--c-acento);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
.enlace:hover { color: var(--c-acento-osc); }

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Botones — mismo radio en toda la web --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radio-boton);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn--acento { background: var(--c-acento); color: var(--c-sobre-acento); }
.btn--acento:hover { background: var(--c-acento-osc); }
.btn--grande { min-height: 54px; padding: 14px 28px; font-size: 17px; }
.btn--linea {
  border: 1px solid var(--c-linea);
  color: var(--c-tinta);
  background: transparent;
}
.btn--linea:hover { border-color: var(--c-acento); color: var(--c-acento); }
.btn--texto {
  padding: 12px 8px;
  color: var(--c-apagado);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.btn--texto:hover { color: var(--c-tinta); }

/* --- Marca --- */
.marca { display: inline-block; line-height: 1; }
.marca__palabra {
  font-family: var(--fuente-display);
  font-size: 24px;
  letter-spacing: -0.02em;
}
.marca__onda {
  display: block;
  width: 62px; height: 8px;
  margin-top: 3px;
  color: var(--c-acento);
}

/* --- La onda: un gesto por pantalla --- */
.onda { display: block; color: var(--c-acento); }
.onda--separador {
  width: 220px; height: 16px;
  margin: 0 auto var(--e-8);
  opacity: .85;
}
.onda--figura {
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  width: 100%; height: 18px;
}
.onda--pasos {
  display: none;
  position: absolute;
  left: 6%; right: 6%; top: 22px;
  width: 88%; height: 20px;
  opacity: .5;
}

/* --- Nav --- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: color-mix(in srgb, var(--c-base) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.nav.is-desplazado { border-bottom-color: var(--c-linea); }
@supports not (backdrop-filter: blur(10px)) { .nav { background: var(--c-base); } }

.nav__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3);
  height: var(--nav-alto);
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav__enlaces { display: none; gap: var(--e-3); }
.nav__enlaces a {
  font-size: 15px;
  color: var(--c-apagado);
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__enlaces a:hover { color: var(--c-tinta); border-bottom-color: var(--c-acento); }
.nav__enlaces a[aria-current="true"] { color: var(--c-tinta); border-bottom-color: var(--c-acento); }
.nav__cta { min-height: 40px; padding: 8px 18px; font-size: 15px; }

/* --- Sello de Google --- */
.sello {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: var(--e-4);
  font-size: 15px;
  color: var(--c-apagado);
}
a.sello:hover .sello__texto { color: var(--c-tinta); }
.sello__nota {
  font-family: var(--fuente-display);
  font-size: 22px;
  color: var(--c-tinta);
  font-variant-numeric: tabular-nums;
}

/* --- Carta de precios --- */
.carta {
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-6);
}
.carta__titulo {
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-acento);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--c-linea);
}
.carta__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--c-linea);
}
.carta__nombre { font-size: var(--t-md); line-height: 1.3; }
.carta__detalle {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-apagado);
  max-width: 54ch;
}
.carta__precio {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  white-space: nowrap;
  color: var(--c-tinta);
}
.carta__nota {
  margin-top: var(--e-5);
  max-width: var(--ancho-texto);
  font-size: var(--t-md);
  line-height: 1.6;
}
.seccion__cta { margin-top: var(--e-5); }

/* --- Galería --- */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 24px);
  margin-top: var(--e-6);
}
.galeria img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--c-base-2);
}

/* --- Lupa de galería: solo existe si hay JS; sin JS no estorba --- */
.lupa {
  /* El reset pone margin:0 a todo y eso anula el centrado nativo del dialog */
  margin: auto;
  width: min(92vw, 560px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: var(--c-base);
  color: var(--c-tinta);
  overflow: hidden;
}
/* El respaldo es obligatorio: en navegadores anteriores a 2024 ::backdrop no
   hereda las variables de :root y sin él la foto ampliada flotaría sin velo.
   Si cambias --velo-lupa, cambia también este valor. */
.lupa::backdrop { background: var(--velo-lupa, rgb(20 14 10 / .62)); }
.lupa img { width: 100%; height: auto; display: block; }
.lupa__pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--c-apagado);
  border-top: 1px solid var(--c-linea);
}
.lupa__cerrar {
  flex: none;
  min-height: 40px; padding: 8px 16px;
  border-radius: var(--radio-boton);
  background: var(--c-acento);
  color: var(--c-sobre-acento);
  font-size: 14px; font-weight: 600;
}
.lupa__cerrar:hover { background: var(--c-acento-osc); }

/* Las fotos solo se anuncian como pulsables cuando el JS ha montado la lupa */
.js-lupa .galeria li { cursor: zoom-in; }
.js-lupa .galeria li:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 4px; border-radius: var(--radio); }

/* --- Equipo --- */
.equipo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--e-8);
}
.marcador {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background: var(--c-acento-suave);
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
}
.marcador .onda {
  width: 54%; height: 12px;
  opacity: .55;
}
.marcador--cuadrado { aspect-ratio: 1 / 1; }
.marcador__etiqueta {
  font-size: 9px;
  text-align: center;
  padding: 0 6px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-apagado);
}
.ficha__nombre {
  margin-top: 12px;
  font-family: var(--fuente-display);
  font-size: var(--t-md);
}
.ficha__rol { margin-top: 2px; }
/* Un marcador de dato pendiente nunca manda sobre la tipografía de la ficha */
.ficha__nombre.dato-pendiente { font-family: var(--fuente-texto); font-size: 14px; }

/* --- Pasos --- */
.pasos {
  position: relative;
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-6);
}
.paso__numero {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--c-acento);
  border-radius: 50%;
  background: var(--c-base);
  font-family: var(--fuente-display);
  font-size: 19px;
  color: var(--c-acento);
}
.paso__titulo { margin: var(--e-3) 0 var(--e-1); }
.paso p { max-width: 46ch; color: var(--c-apagado); }

/* --- Opiniones --- */
.nota-google {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  margin-top: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--c-linea);
}
.nota-google__numero {
  font-family: var(--fuente-display);
  font-size: var(--t-3xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nota-google__texto { color: var(--c-apagado); }
.opiniones {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--e-5);
}
.opinion {
  padding: var(--e-3);
  border: 1px solid var(--c-linea);
  border-radius: var(--radio);
  background: var(--c-base);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.opinion:hover { transform: translateY(-2px); border-color: var(--c-acento); }
.opinion__firma { margin-top: var(--e-2); }

/* --- FAQ --- */
.faq { margin-top: var(--e-5); border-top: 1px solid var(--c-linea); }
.faq__item { border-bottom: 1px solid var(--c-linea); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  min-height: 56px;
  padding: var(--e-2) 0;
  font-size: var(--t-md);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--c-acento);
  border-bottom: 1.5px solid var(--c-acento);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq__item summary:hover { color: var(--c-acento); }
.faq__respuesta { padding-bottom: var(--e-3); }
.faq__respuesta p { max-width: 66ch; color: var(--c-apagado); }

/* --- Dónde estamos --- */
.local { display: grid; gap: var(--e-6); margin-top: var(--e-5); }
.local__intro { max-width: 52ch; color: var(--c-apagado); }
.datos { margin-top: var(--e-4); }
.datos__fila {
  display: grid;
  gap: 4px;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--c-linea);
}
.datos dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-apagado);
}
.datos dd { margin: 0; }
.local__mapa {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--c-linea);
  background: var(--c-base-2);
}
.local__mapa iframe {
  width: 100%;
  height: 320px;
  border: 0;
  filter: saturate(.85) contrast(1.02);
}

/* --- Botón flotante de WhatsApp --- */
.wa-flotante {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radio-boton);
  background: var(--c-acento);
  color: var(--c-sobre-acento);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--sombra-flotante);
  transition: background-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.wa-flotante:hover { background: var(--c-acento-osc); }
/* Sin JS el botón está siempre visible. Con JS aparece tras 400px de scroll. */
.js-wa .wa-flotante { opacity: 0; transform: translateY(8px); pointer-events: none; }
.js-wa .wa-flotante.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* --- Pie --- */
.pie {
  padding-top: var(--e-8);
  /* hueco para que el botón flotante no tape nunca el texto legal */
  padding-bottom: 104px;
  border-top: 1px solid var(--c-linea);
  background: var(--c-base-2);
}
.pie__rejilla { display: grid; gap: var(--e-6); }
.pie__nap { margin-top: var(--e-3); color: var(--c-apagado); font-size: 15px; }
.pie__enlaces { display: grid; gap: 10px; }
.pie__enlaces a {
  font-size: 15px;
  color: var(--c-apagado);
  width: fit-content;
  transition: color var(--dur) var(--ease);
}
.pie__enlaces a:hover { color: var(--c-tinta); }
.pie__legal {
  margin-top: var(--e-8);
  padding-top: var(--e-3);
  border-top: 1px solid var(--c-linea);
  font-size: 13px;
  color: var(--c-apagado);
}
.pie__maqueta { margin-top: 6px; max-width: 70ch; }
.pie__avisos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: var(--e-2);
}
.pie__avisos a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
.pie__avisos a:hover { color: var(--c-tinta); }

/* --- Páginas legales: texto largo, sin adornos --- */
.legal { padding-block: var(--sec-pad); }
.legal__cabecera { margin-bottom: var(--e-6); }
.legal__fecha {
  margin-top: var(--e-3);
  font-size: 14px;
  color: var(--c-apagado);
}
.legal h2 {
  margin-top: var(--e-6);
  font-size: var(--t-lg);
}
.legal h3 {
  margin-top: var(--e-4);
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-acento);
}
.legal p, .legal li { max-width: 68ch; }
.legal p { margin-top: var(--e-2); }
.legal ul { margin-top: var(--e-2); }
.legal li {
  position: relative;
  margin-top: 10px;
  padding-left: 18px;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 5px; height: 1px;
  background: var(--c-acento);
}
.legal dl { margin-top: var(--e-2); }
.legal dt {
  margin-top: var(--e-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-apagado);
}
.legal dd { margin: 2px 0 0; }
.legal__volver { margin-top: var(--e-8); }

/* =============================================================
   6. SECCIONES
   ============================================================= */
.seccion { padding-block: var(--sec-pad); }
.seccion--alterna { background: var(--c-base-2); }
.seccion__cabecera { max-width: 40ch; }
.seccion__cabecera--izq { max-width: 30ch; }

/* --- Hero --- */
.hero {
  padding-top: calc(var(--nav-alto) + var(--e-5));
  padding-bottom: var(--sec-pad);
}
.hero__rejilla { display: grid; gap: var(--e-8); }
.hero__h1 { font-size: var(--t-4xl); }
.hero__sub {
  margin-top: var(--e-3);
  max-width: 44ch;
  font-size: var(--t-md);
  color: var(--c-apagado);
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}
.hero__figura { position: relative; }
.hero__figura img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--c-base-2);
}

.salon { display: grid; gap: var(--e-4); }

/* =============================================================
   7. EFECTOS — pocos, todos con la misma curva y duración
   ============================================================= */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.js-reveal [data-reveal].is-revelado { opacity: 1; transform: none; }
[data-reveal-grupo] > :nth-child(2) { transition-delay: 60ms; }
[data-reveal-grupo] > :nth-child(3) { transition-delay: 120ms; }
[data-reveal-grupo] > :nth-child(4) { transition-delay: 180ms; }
[data-reveal-grupo] > :nth-child(5) { transition-delay: 240ms; }
[data-reveal-grupo] > :nth-child(6) { transition-delay: 300ms; }
[data-reveal-grupo] > :nth-child(7) { transition-delay: 360ms; }

.galeria img { transition: opacity var(--dur) var(--ease); }
.galeria li:hover img { opacity: .92; }

/* =============================================================
   8. RESPONSIVE — móvil primero
   ============================================================= */
@media (min-width: 540px) {
  .hero__acciones { gap: var(--e-3); }
  .pie__enlaces { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
  .pie { padding-bottom: var(--e-8); }
  .carta { grid-template-columns: repeat(2, 1fr); gap: var(--e-6) var(--e-8); }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .local { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--e-8); }
  .local__mapa iframe { height: 380px; }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
  .onda--pasos { display: block; }
  .pie__rejilla { grid-template-columns: 1.2fr 1fr; }
}

@media (min-width: 960px) {
  .nav__enlaces { display: flex; }
  .hero { padding-top: calc(var(--nav-alto) + var(--e-10)); }
  .hero__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--e-10);
  }
  /* La foto sale del contenedor y llega al borde de la pantalla. El tope de
     -200px evita que en monitores muy anchos se coma la composición. */
  .hero__figura {
    margin-right: max(-200px, calc((100vw - min(100vw, var(--ancho))) / -2 - var(--gutter)));
  }
  .hero__figura img { border-radius: var(--radio) 0 0 var(--radio); }
  .salon { grid-template-columns: 1fr 1.2fr; gap: var(--e-10); align-items: start; }
  .seccion__cabecera--izq { max-width: 22ch; }
  .equipo { max-width: 760px; gap: var(--e-4); }
}

@media (min-width: 1280px) {
  .hero__rejilla { gap: calc(var(--e-10) + var(--e-4)); }
}

/* =============================================================
   9. REDUCED-MOTION — solo se desactivan las animaciones de entrada
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Tarjeta del hero (demo sin fotos: datos reales de su plataforma de reservas) */
.tarjeta-hero { position: relative; overflow: hidden; background: var(--c-base-2); border: 1px solid var(--c-linea); border-radius: calc(var(--radio) * 2); padding: var(--e-4) var(--e-3) var(--e-6); }
.tarjeta-hero__nota { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.tarjeta-hero__num { font-family: var(--fuente-display); font-size: clamp(56px, 9vw, 84px); line-height: 1; color: var(--c-tinta); }
.tarjeta-hero__estrellas { color: var(--c-acento); letter-spacing: .12em; font-size: 18px; }
.tarjeta-hero__texto { margin: 6px 0 var(--e-3); color: var(--c-apagado); }
.tarjeta-hero__lista { list-style: none; margin: 0 0 var(--e-4); padding: 0; border-top: 1px solid var(--c-linea); }
.tarjeta-hero__lista li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-linea); }
.tarjeta-hero__lista li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarjeta-hero__btn { width: 100%; justify-content: center; text-align: center; }
.tarjeta-hero__onda { position: absolute; left: 0; right: 0; bottom: 10px; width: 100%; height: 14px; color: var(--c-acento); opacity: .5; }
.carta__precio--consultar { color: var(--c-apagado); font-size: 15px; }


/* ---- Pasada de oficio ---------------------------------------------------- */
h1, h2, h3, .marca__palabra, .sello__nota, .nota-google__numero, .tarjeta-hero__num, .paso__numero { font-weight: 600; }
h1, h2 { letter-spacing: -0.03em; }
.aviso { border-left-width: 1px; }
::selection { background: var(--c-acento); color: var(--c-sobre-acento); }
html { caret-color: var(--c-acento); accent-color: var(--c-acento); }
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 3px; border-radius: 4px; }
.carta__precio, .tarjeta-hero__lista span:last-child, .sello__nota { font-variant-numeric: tabular-nums; }
html { scrollbar-color: var(--c-linea) transparent; }
.ficha__rol, .ficha__nombre { overflow-wrap: anywhere; }
@media (max-width: 600px) { .equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }