/* ============================================================
   Aqua Beauty Salón — web-2026 · v3 "Noir & Silver Aqua"
   Estructura del template aprobado (arcos, marquesinas, script
   Great Vibes + Playfair + Montserrat) con la paleta del logo:
   negro frío + plata/platino metálico + azul aqua de la gota.
   ============================================================ */

:root {
  --noir: #08090b;
  --noir-2: #0e1013;
  --noir-3: #15181c;
  --panel: rgba(255, 255, 255, .03);
  --text: #f2f5f7;
  --soft: #d0d6db;
  --muted: #9aa4ad;
  --line: rgba(190, 203, 214, .16);
  --line-strong: rgba(190, 203, 214, .34);
  --silver: #dfe4e8;
  --silver-mid: #b7c1ca;
  --steel: #8593a1;
  --ink: #1c2229;
  --ink-deep: #0c1014;
  --aqua: #85aed8;
  --aqua-deep: #5d87b5;
  /* El azul de marca cuando lleva un dato encima y no un adorno. --aqua-deep
     sobre tarjeta clara da 3,5:1: sobra para una estrella o un separador,
     falta para un precio a 11px (AA pide 4,5). Este llega a 5,2:1 sin salirse
     del tono. Usar en texto que la clienta necesita leer, no en decoración. */
  --aqua-ink: #446b96;
  --grad-metal: linear-gradient(112deg, #d9dee2 0%, #f5f7f9 20%, #c0c7cd 45%, #8f98a2 72%, #ccd3d9 100%);
  /* El mismo metal, pero en el azul del logo: idéntico ángulo y las cinco
     paradas en el mismo sitio y con la misma claridad, solo subida la
     saturación y girado el tono al 208-211 de la marca. Así la banda sigue
     leyéndose como chapa pulida y no como un rectángulo de color plano.
     El tramo más oscuro (#7598bd) da 6,4:1 con el texto casi negro que lleva
     encima, o sea que el peor punto de la banda sigue pasando AA. */
  --grad-aqua: linear-gradient(112deg, #cfdeed 0%, #f4f8fb 20%, #aec9e0 45%, #7598bd 72%, #c0d6e7 100%);
  --grad-text: linear-gradient(100deg, #eef2f5 5%, #c2cfdc 45%, #85aed8 95%);
  /* El gris del logo, medido: de los 17.918 píxeles grises de `img/logo.png`
     —descontando el azul de la gota, el blanco puro y el negro— la media sale
     #C7C5C1: tono 39, saturación 5,3%, claridad 77%. O sea, plata prácticamente
     neutra con un asomo de calidez.
     Aquí va ese mismo tono y esa misma saturación subidos a claridad 90%, que es
     lo que lo vuelve "tenue": se lee como gris al lado del blanco de #salon y del
     negro de las secciones vecinas, sin llegar a ser una placa pesada. */
  --gris-logo: #e7e6e4;
  --radius: 18px;
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, .8);
  --shadow-metal: 0 14px 38px -14px rgba(146, 163, 180, .4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted);
  background: var(--noir);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: var(--aqua); text-decoration: none; }
/* El navegador le pone a cada <button> un borde "outset" de 2 px y su propia
   tipografía. Se veía en las marcas del hero, que salían como ocho cajitas
   dibujadas en vez de ocho rayitas. Se apaga aquí para todos. */
button { font: inherit; color: inherit; border: 0; background: none; }
strong { color: var(--soft); font-weight: 500; }

::selection { background: var(--aqua-deep); color: #fff; }

/* ---------- utilidades tipográficas ---------- */

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1.25;
}

h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: .12em; }
h3 { font-size: 17px; letter-spacing: .14em; }

/* palabra caligráfica dentro de un titular en caps */
.sc {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.62em;
  line-height: .6;
  vertical-align: -0.06em;
  padding-right: .12em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 16px;
}

.sec-head { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.sec-head .sec-sub { margin-top: 18px; font-size: 15px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.center { text-align: center; }

.section { padding: 104px 0; position: relative; }
.section-panel { background: var(--noir-2); }

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-metal {
  background: var(--grad-metal);
  color: var(--ink-deep);
  box-shadow: var(--shadow-metal);
}
.btn-metal:hover { filter: brightness(1.06); box-shadow: 0 18px 44px -14px rgba(146, 163, 180, .55); }

.btn-outline {
  border: 1px solid var(--line-strong);
  color: var(--silver);
  background: transparent;
}
.btn-outline:hover { border-color: var(--silver); background: rgba(223, 228, 232, .07); }

/* variantes sobre banda plateada */
.btn-noir {
  background: var(--noir);
  color: var(--silver);
  box-shadow: 0 16px 36px -16px rgba(5, 8, 12, .55);
}
.btn-noir:hover { color: #fff; }
.btn-outline-ink {
  border: 1.5px solid rgba(12, 16, 20, .55);
  color: var(--ink-deep);
}
.btn-outline-ink:hover { background: rgba(12, 16, 20, .12); }

.btn-xl { padding: 19px 40px; font-size: 12.5px; }

.ico-wa { width: 17px; height: 17px; fill: currentColor; flex: none; }

.text-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aqua);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
}
.text-link:hover { color: #fff; border-color: var(--aqua); }

/* Enlace destacado: la misma letra del .text-link pero dentro de una pastilla
   con filo aqua. Se usa donde el enlace es el paso siguiente y no una nota al
   pie — hoy, la ficha de Google con las reseñas de verdad. */
.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 18px;
  border: 1px solid var(--aqua);
  border-radius: 999px;
  background: rgba(133, 174, 216, .1);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--aqua);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.link-chip .ico-g { width: 14px; height: 14px; flex: none; }
.link-chip .chip-arrow { transition: transform .25s ease; }
.link-chip:hover {
  background: var(--aqua);
  color: var(--ink-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -18px var(--aqua);
}
.link-chip:hover .chip-arrow { transform: translateX(3px); }

/* ---------- nav ---------- */

/* La barra va en negro macizo, no en cristal. Con el negro traslúcido, la
   barra y la placa del logo eran dos capas distintas sobre dos trozos distintos
   del video: cada una tomaba un gris y en la juntura se veía la costura. En
   opaco las dos son exactamente la misma tinta y la lengüeta del logo se lee
   como si la barra se abombara para sostenerlo. */
.nav {
  /* De estas cinco medidas sale toda la geometría del logo colgante; están
     aquí para que escritorio y móvil no puedan descuadrarse por separado. */
  --nav-pad: 14px;     /* aire arriba y abajo de la barra */
  --logo-h: 100px;     /* alto visible del logo */
  --logo-up: 8px;      /* lo que sube dentro de la barra */
  --logo-fila: 46px;   /* lo que ocupa en la rejilla = alto real del menú */
  --logo-air: 8px;     /* aire bajo el logo, dentro de la placa */

  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--noir);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }

.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--nav-pad) 28px;
  /* por encima del panel móvil: el logo se sale de la barra y si no, el panel
     desplegado le cortaría la parte de abajo */
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.nav-side { display: flex; align-items: center; gap: 30px; }
.nav-side.right { justify-content: flex-end; }

.nav-side a:not(.btn) {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--soft);
  transition: color .2s ease;
}
.nav-side a:not(.btn):hover { color: var(--silver); }

/* --- el logo cuelga de la barra ---
   El logo mide 100 px pero la barra sigue midiendo lo mismo que antes (46 px de
   fila + 28 de padding). El truco son los márgenes negativos del img: la caja
   que ocupa en la rejilla sigue siendo de 46 px (100 − 8 − 46) aunque se dibuje
   entero, así que sobresale por debajo sin empujar el menú ni el hero. El
   ancho sí lo aporta el img, y por eso la columna del medio se sigue
   reservando su sitio y los enlaces de los lados no se le acercan.
   La placa es el ::before: el mismo negro de la barra, arrancando por encima
   del borde de arriba y con las esquinas de abajo redondeadas. Al ser opaca y
   del mismo color, que se solape con la barra da igual: la parte de arriba se
   funde con ella y solo se ve la lengüeta que sobresale. */
.nav-logo { position: relative; display: block; }
.nav-logo::before {
  content: '';
  position: absolute;
  /* arranca 2 px por encima del borde de arriba de la barra: así no hay manera
     de que asome una raya entre las dos, ni por redondeo de píxeles */
  top: calc(-1 * var(--nav-pad) - 2px);
  /* baja lo que sobresale el logo (alto − lo que sube − la fila) más el aire */
  bottom: calc(var(--logo-up) + var(--logo-fila) - var(--logo-h) - var(--logo-air));
  left: -26px; right: -26px;
  border-radius: 0 0 28px 28px;
  background: var(--noir);
}
.nav-logo img {
  position: relative;    /* por encima de la placa */
  display: block;
  height: var(--logo-h);
  width: auto;
  margin-top: calc(-1 * var(--logo-up));
  margin-bottom: calc(var(--logo-up) + var(--logo-fila) - var(--logo-h));
}

.btn-nav { padding: 11px 22px; font-size: 10px; }

/* ---------- idioma ---------- */

/* Dos botones pegados dentro de una cápsula. Es el mismo gesto que un
   interruptor: se ve de un vistazo en qué idioma está la página y cuál es la
   otra opción, sin abrir nada. */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  background: rgba(255, 255, 255, .03);
}
.lang button {
  font: inherit;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.lang button:hover { color: var(--silver); }
.lang button.is-on {
  color: var(--ink-deep);
  background: var(--grad-metal);
}

/* ---------- menú móvil ---------- */

/* La hamburguesa solo existe de 920 para abajo; aquí se declara y el media
   query la enciende. Tres líneas que al abrir se cruzan: la de en medio se
   apaga y las otras dos giran sobre el mismo centro. */
.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: -9px;      /* que el icono, no su caja, quede a ras del borde */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--silver);
  border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 10px 24px 26px;
  background: var(--noir);   /* el mismo negro macizo de la barra */
  border-bottom: 1px solid var(--line);
  /* se abre desplegándose hacia abajo; el hidden de HTML lo quita del todo
     cuando está cerrado, para que no le robe el tabulador a nadie */
  transform-origin: top center;
  animation: drawer-in .26s ease both;
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.nav-drawer nav { display: flex; flex-direction: column; }
.nav-drawer nav a {
  padding: 13px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--soft);
  border-bottom: 1px solid var(--line);
}
.nav-drawer nav a:last-child { border-bottom: 0; }
.drawer-cta { width: 100%; margin-top: 18px; justify-content: center; }
.drawer-foot {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- hero ---------- */

/* El hero es la única zona clara del sitio, y es a propósito: las 7 modelos se
   grabaron sobre ciclorama blanco, así que el fondo del video y el fondo de la
   página son el mismo material. La modelo no va metida en ninguna tarjeta: el
   video sale a sangre, con los bordes ya fundidos a blanco desde el encoder, y
   se posa directamente sobre la página. Por eso el fondo tiene que ser blanco
   puro y liso — cualquier degradado o tinte delataría dónde acaba el video.
   Todo el texto de aquí dentro usa la paleta invertida (--h-*), calculada para
   leerse sobre blanco. */
.hero {
  --h-ink: #0c1014;                 /* titulares — 17:1 sobre el fondo */
  --h-body: rgba(12, 16, 20, .74);  /* párrafos — 7.9:1 */
  --h-mute: rgba(12, 16, 20, .62);  /* apoyos pequeños — 5.2:1, sigue pasando AA */
  --h-line: rgba(12, 16, 20, .14);
  --h-card: rgba(255, 255, 255, .72);

  /* Alto del video en pantalla. De aquí sale todo lo demás: el ancho (12:5),
     el hueco que se le deja en la rejilla y dónde se cuelgan las flechas. */
  /* El 54vw solo entra en ventanas más altas que anchas de la cuenta (iPad
     apaisado, 1024×768): allí el 84vh haría a la modelo tan ancha que el botón
     de WhatsApp acabaría encima de su pelo. En un portátil normal —16:10 o más
     panorámico— no llega a mandar y el alto lo sigue poniendo la altura. */
  --video-h: clamp(330px, min(84vh, 54vw), 840px);
  --modelo: calc(var(--video-h) * .90);   /* lo que ocupa la modelo, no el video */

  position: relative;
  /* El hero deja de ser 100vh. El video se cuelga por ABAJO —los pies en el
     canto inferior—, así que el hueco entre la barra y la cabeza vale
     alto del hero − barra − alto de la modelo: crece con la pantalla y no hay
     manera de cerrarlo desde dentro. Con 92vh y el tope de 940 px ese hueco se
     queda en ~120 px en un portátil y no se dispara en un monitor grande;
     además el canto de la sección siguiente asoma, que invita a bajar. */
  min-height: 92vh;
  min-height: min(92svh, 940px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  color: var(--h-ink);
}

/* palabra gigante al fondo (firma de la referencia).
   Va POR ENCIMA del video, no detrás: detrás la taparía el blanco del propio
   video. En multiply, sobre el blanco de los márgenes se ve tal cual y sobre la
   modelo —que a esa altura ya se está fundiendo a blanco— no llega a ensuciar. */
.hero-word {
  position: absolute;
  left: 50%;
  bottom: -.05em;
  transform: translateX(-50%);
  z-index: 2;
  mix-blend-mode: multiply;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(150px, 27vw, 400px);
  line-height: .8;
  letter-spacing: -.02em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(180deg, rgba(12, 16, 20, .085) 0%, rgba(12, 16, 20, .015) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sin z-index a propósito: si abriera contexto de apilado, el video que cuelga
   de aquí dentro quedaría por encima de la palabra del fondo y no habría forma
   de meterla entre medias. El orden se arma con z-index sueltos: video 1,
   palabra 2, textos 4. */
/* Estirado a todo el alto del hero (de ahí el stretch de arriba) y repartiendo
   el sobrante por dentro. Antes iba pegado abajo y medía lo que medía su
   contenido: como el video no cuenta para el alto (va absoluto), lo que sobraba
   hasta los 100vh se amontonaba ARRIBA y dejaba una banda blanca muerta entre la
   barra y los chips. Ahora los chips quedan justo debajo de la barra y el hueco
   se lo queda la rejilla, que centra los textos contra la modelo. */
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 112px 30px 52px;
}

/* fila de chips */
.hero-top { position: relative; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(20px, 5.5vh, 56px); }
.hchip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--h-line);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--h-body);
}
.hchip svg { width: 13px; height: 13px; fill: var(--aqua-deep); flex: none; }
.hchip .star { color: var(--aqua-deep); }

/* La columna del medio no lleva el video dentro: lleva el HUECO que la modelo
   necesita. El video va aparte, a sangre y por debajo. Se deja algo más
   estrecho que la modelo (.66 y no .90) porque el texto puede pisarle las
   puntas del pelo sin problema — ahí el video ya casi es blanco. El factor
   bajó de .70 a .66 al crecer la modelo: si se mantiene, la columna del medio
   se come a las de los lados y el botón de WhatsApp ya no cabe de una línea. */
.hero-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--video-h) * .66) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  /* se queda el alto sobrante del hero y centra su fila dentro: así el texto
     sigue cayendo a la altura de la cara de la modelo, no arriba del todo */
  flex: 1 0 auto;
  align-content: center;
}
.hero-left  { grid-column: 1; }
.hero-stage { grid-column: 2; }
.hero-right { grid-column: 3; }
.hero-left, .hero-right {
  position: relative;
  z-index: 4;
  /* Las dos columnas se declaran contenedor para poder medir el cuerpo de los
     titulares contra SU ancho (cqi) y no contra el de la ventana. Es lo que
     hace que las frases se queden en dos líneas exactas a cualquier tamaño:
     el texto no se parte porque no cabe, se encoge lo justo. */
  container-type: inline-size;
}

/* --- pila de textos que cambian con la modelo ---
   Los 7 bloques viven en la misma celda de rejilla, así que el contenedor mide
   lo que mide el más alto y nada de lo que va debajo se mueve al pasar de un
   slide al siguiente. El que sale se apaga primero; el que entra arranca 180 ms
   después, para que no se crucen dos textos encima del mismo sitio. */
.hs-stack { display: grid; }
.hs-stack > * {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
.hs-stack > .is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s ease .18s, transform .55s ease .18s, visibility 0s;
}

/* columna izquierda */
/* Dos líneas, siempre. El <br> del HTML pone la segunda; el nowrap impide que
   el navegador meta una tercera cuando la mitad no cabe. Para que "no quepa" no
   ocurra nunca, el cuerpo lleva un tope en cqi: 11,2 % del ancho de la columna,
   que es lo que mide la mitad más larga de las dieciséis (ocho titulares por
   dos idiomas) con la Playfair cargada. Medido, no estimado: ver
   _tools/_hero-dos-lineas.py. La primera declaración es el respaldo para
   navegadores sin unidades de contenedor. */
.hero-title {
  text-transform: none;
  font-weight: 500;
  font-size: clamp(32px, 3.9vw, 52px);
  font-size: min(clamp(32px, 3.9vw, 52px), 11cqi);
  line-height: 1.04;
  letter-spacing: -.004em;
  color: var(--h-ink);
  white-space: nowrap;
}
.hero-scribble {
  display: block;
  width: min(258px, 80%);
  height: auto;
  color: var(--aqua-deep);
  margin: 12px 0 22px;
}
.hs-subs { margin-bottom: 28px; }
.hero-sub { max-width: 350px; color: var(--h-body); font-size: 14.5px; }
.hero-sub strong { color: var(--h-ink); }

.hero-cta { padding: 9px 9px 9px 27px; }
.cta-arrow {
  width: 36px; height: 36px;
  flex: none;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--silver);
  display: grid;
  place-items: center;
}
.cta-arrow svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: var(--ink-deep);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La línea de debajo del botón dice dos cosas que quitan fricción antes de
   escribir —que se contesta hoy y que también se atiende en inglés— y en gris
   claro no la leía nadie. Pasa a cápsula con punto vivo: sigue siendo letra
   pequeña, pero se ve. El punto late porque "hoy mismo" es una promesa de
   tiempo; sin movimiento la cápsula se lee como un sello más. */
.hero-micro {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(93, 135, 181, .32);
  background: rgba(133, 174, 216, .13);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--h-ink);
}
.hero-micro strong { color: var(--h-ink); font-weight: 600; }
.hero-micro .hm-sep { color: var(--aqua-deep); opacity: .55; }
.hero-micro .hm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fa86f;
  box-shadow: 0 0 0 3px rgba(47, 168, 111, .18);
  animation: hm-late 2.6s ease-in-out infinite;
}
@keyframes hm-late {
  0%, 100% { box-shadow: 0 0 0 3px rgba(47, 168, 111, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(47, 168, 111, .05); }
}

/* --- columna del medio: las 7 modelos ---
   .hero-stage se queda estático (sin position) para que .hs-viewport se cuelgue
   de .hero-inner y pueda salirse a sangre. Sigue sirviendo de zona de hover:
   es la franja vertical donde está la modelo. */
.hero-stage {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
}

/* La capa del video. Más ancha que la ventana a propósito: sus bordes ya son
   blanco puro, así que lo que se sale no se ve, y a cambio la modelo se puede
   mostrar grande sin que el encuadre la apriete. */
.hs-viewport {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  transform: translateX(-50%);
  height: var(--video-h);
  width: calc(var(--video-h) * 2.4);   /* el lienzo es 12:5 */
  pointer-events: none;
}

.hs-frame { position: relative; display: grid; width: 100%; height: 100%; }
.hs-slide {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* un segundo de cruce, y el cruce ocurre sobre el último segundo de metraje:
     el turno de main.js es de 7 s y el clip dura 7,96, así que la que se va
     sigue moviéndose mientras entra la siguiente. Si el fundido empezara al
     acabar el video se vería el cuadro congelado y luego el cambio. */
  transition: opacity 1s ease;
}
.hs-slide.is-on { opacity: 1; }

/* flechas: solo al pasar el ratón por la zona de las modelos. Se cuelgan del
   ancho de la modelo, no del video, que es mucho más ancho y las mandaría
   fuera de la pantalla. Van oscuras porque caen sobre blanco. */
.hero-arrow { display: none; }
.js .hero-arrow {
  position: absolute;
  top: 46%;
  z-index: 4;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(12, 16, 20, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px -10px rgba(10, 14, 20, .6);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.88);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.js .hero-arrow svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-arrow-prev { left: calc(50% - var(--modelo) / 2 - 62px); }
.hero-arrow-next { left: calc(50% + var(--modelo) / 2 + 16px); }

.js .hero-stage:hover .hero-arrow,
.js .hero-arrow:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.js .hero-arrow:hover { background: var(--noir); transform: translateY(-50%) scale(1.08); }

/* con el dedo no hay "posar el ratón": ahí se quedan puestas */
@media (hover: none) {
  .js .hero-arrow { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
}

/* pie + marcas de progreso: al fondo del hero, centrados bajo la modelo. Ahí
   el video ya lleva un 20% de fundido a blanco, así que se leen sobre limpio
   sin necesidad de ninguna caja. */
.hs-under {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 4;
  transform: translateX(-50%);
  width: min(var(--modelo), 82vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hs-cap {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--h-mute);
}
/* Ocho rayitas, no ocho botones: la que está sonando se estira y se va
   llenando de azul mientras dura el turno, así el pie hace de reloj además de
   índice. El relleno va en el azul de la marca —no en negro— para que la única
   nota de color del hero sea la misma que la del resto del sitio. */
.hs-ticks { list-style: none; display: flex; align-items: center; gap: 7px; flex: none; }
.hs-ticks button {
  display: block;
  width: 15px; height: 19px;
  padding: 8px 0;          /* zona de toque cómoda sin engordar la marca */
  cursor: pointer;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.hs-ticks i {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: rgba(12, 16, 20, .16);
  position: relative;
  overflow: hidden;
  transition: background .3s ease;
}
.hs-ticks button:hover i { background: rgba(12, 16, 20, .34); }
.hs-ticks button:focus-visible { outline: 2px solid var(--aqua-deep); outline-offset: 3px; border-radius: 4px; }
.hs-ticks button.is-on { width: 44px; }
.hs-ticks button.is-on i,
.hs-ticks button.is-on:hover i { background: rgba(93, 135, 181, .24); }
/* la barrita se llena en los 7 s que tarda en empezar el cruce */
.hs-ticks i::after {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--aqua-deep);
  border-radius: 999px;
}
.hs-ticks button.is-on i::after { animation: tick-fill 7s linear forwards; }
.hero.is-paused .hs-ticks button.is-on i::after { animation-play-state: paused; }
@keyframes tick-fill { from { right: 100%; } to { right: 0; } }

/* columna derecha */
.hero-right { display: flex; flex-direction: column; align-items: flex-end; }
/* misma regla de dos líneas que a la izquierda: aquí la segunda la pone el
   <span> en bloque en vez de un <br>, y el tope va más suelto porque estas
   frases son más cortas y el cuerpo, más chico */
.hero-claim {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(25px, 2.85vw, 41px);
  font-size: min(clamp(25px, 2.85vw, 41px), 11.3cqi);
  line-height: 1.06;
  text-align: right;
  color: var(--h-ink);
  white-space: nowrap;
}
/* el azul solo aparece en texto grande: sobre claro da 3.4:1, suficiente para
   titular y no para letra chica */
.hero-claim span { display: block; color: var(--aqua-deep); }

.hero-card {
  position: relative;
  margin-top: clamp(24px, 6vh, 68px);
  max-width: 330px;
  border: 1px solid var(--h-line);
  background: var(--h-card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 22px;
}
.hero-card ul { list-style: none; display: grid; gap: 13px; padding-right: 34px; align-content: start; }
.hero-card li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--h-body); }
.hero-card .m { color: var(--aqua-deep); font-size: 10px; line-height: 1.9; flex: none; }
.card-arrow {
  position: absolute;
  top: 15px; right: 15px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink-deep);
  display: grid;
  place-items: center;
  transition: transform .25s ease;
  z-index: 2;
}
.card-arrow:hover { transform: translate(2px, -2px); }
.card-arrow svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: var(--silver);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--h-line);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
}
.hero-faces { display: flex; flex: none; }
.hero-faces span {
  width: 32px; height: 32px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #7fa6cf, #5d87b5);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.hero-faces span:first-child { margin-left: 0; }
.hero-proof p { font-size: 11px; line-height: 1.45; color: var(--h-mute); }
.hero-proof strong { color: var(--h-ink); }

/* ---------- bandas marquee ---------- */

/* La de arriba va en el azul del logo; la de las reseñas (.ticker-quotes) se
   queda negra, que es donde vive la cita. */
.ticker {
  background: var(--grad-aqua);
  overflow: hidden;
  padding: 15px 0;
  position: relative;
  z-index: 3;
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.ticker span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-deep);
}
.ticker i { font-style: normal; color: rgba(12, 16, 20, .55); font-size: 10px; }

.ticker-quotes { background: var(--noir-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticker-quotes .ticker-track { animation-duration: 52s; }
.ticker-quotes span {
  color: var(--soft);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: none;
  font-size: 13px;
}
.ticker-quotes i { color: var(--aqua-deep); }

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

/* ---------- sobre el salón ---------- */

.about-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 70px;
  align-items: center;
}

.about-visual { position: relative; }

/* El video de Adriana va suelto, como el del hero: sin marco, sin borde, sin
   sombra y sin esquinas redondeadas. Funciona por lo mismo que allí — los
   cantos del metraje ya son casi blancos (#F7F7F4 arriba, #FFF9FF a los lados,
   #F0F0F0 abajo), así que sobre el fondo claro de la sección se funden solos y
   la figura no parece pegada encima: parece recortada.

   La proporción es la del metraje, 896x1080, no una a medida: así se ve
   entero. Con un aspect-ratio distinto el object-fit recortaría, que es
   justo lo que no queremos. */
.frame-video {
  position: relative;
  margin: 0;
  aspect-ratio: 896 / 1080;
}

/* Los dos cantos horizontales se deshacen; los verticales no hace falta, porque
   a los lados el metraje ya es #FFF9FF y se funde solo.

   ARRIBA (0 → 1,5%). El techo del salón no es blanco, es #F8F8F8: medida la
   fila 0 en los 480 fotogramas, la luma media es 247,7 y la peor 235. Contra el
   #fff de la sección eso son entre 7 y 20 puntos de salto, y un salto de 20
   puntos en una línea recta de 896 px de ancho se ve como una raya gris, que es
   el corte que había que quitar.
   El desvanecido tiene que ser corto: lo oscuro de verdad —la cabeza— empieza
   en la fila 21 en el peor fotograma del bucle, y una fila antes, la 20, ya
   marca 161. Hasta la 16 inclusive el pixel más oscuro de los 480 fotogramas es
   235, o sea que la franja del degradado solo contiene casi-blanco. 1,5% son
   16,2 filas: se lleva por delante el canto y se queda a casi 5 filas de rozar
   el pelo. En pantalla son unos 9 px de fundido en escritorio y 6 en móvil,
   de sobra para repartir 20 puntos de luma sin que el ojo encuentre un borde.

   ABAJO (90% → 100%). Otro problema, otra razón. En 174 de los 480 fotogramas
   —el 36%— la falda crece y se sale por abajo del encuadre, y sin marco que la
   contenga el video acabaría en una raya negra cortada a cuchillo. Aquí no
   termina: se deshace, igual que los pies de la modelo del hero sobre el
   blanco. */
.frame-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* misma proporción que el marco: no llega a recortar */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 1.5%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 1.5%, #000 90%, transparent 100%);
}

/* La chapita va centrada y a la altura de los zapatos, que están entre el 89% y
   el 96,7% de la altura del metraje. Cae justo encima y les pasa por delante:
   es lo que disimula el momento en que los zapatos desaparecen y, de paso,
   tapa el arranque del desvanecido de arriba, que es donde más se vería.

   Medido fotograma a fotograma, la mancha oscura que llega al canto de abajo
   nunca se sale de x=320 a x=547 de los 896 de ancho; la chapa va de 151 a 744.
   La cubre entera, con casi 20 puntos de margen por cada lado, siempre.

   Se centra con left/right/margin y no con translateX porque el paralaje de
   .apila-live ya le escribe un transform a este mismo elemento: si el centrado
   también fuera un transform, uno pisaría al otro y la chapa saldría disparada
   al borde en cuanto empezara el scroll. */
.about-badge {
  position: absolute;
  left: 0; right: 0; bottom: 3.5%;
  width: max-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  background: rgba(8, 9, 11, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--silver);
  text-align: center;
}

.about-copy h2 { margin-bottom: 24px; }
.about-copy p + p { margin-top: 16px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 38px 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 38px);
  color: var(--text);
  line-height: 1;
}
.stat-num sup { font-size: .5em; color: var(--aqua); }
.stat-label {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- el salón, en claro ---
   Este módulo era negro como el resto hasta que entró el video. El video está
   rodado contra la pared blanca del salón, reventada de luz: puesto sobre
   fondo negro no se leía como una foto dentro de la página, se leía como un
   agujero de luz, y por contraste simultáneo dejaba el texto de al lado
   pareciendo apagado aunque no lo estuviera.

   Así que la banda se aclara y el fondo del video se funde con ella. No es un
   invento para esta sección: el sitio ya alterna bandas claras y oscuras —
   .signature hace exactamente esto — y con el equipo (oscuro) montándose
   encima por el scroll, el cambio de claro a oscuro además hace más evidente
   cuál de las dos capas está delante.

   Todo lo de aquí abajo es lo mismo de siempre girado al revés: los grises
   claros del tema oscuro no llegan a 4,5:1 sobre blanco y hay que sustituirlos
   uno a uno. */
/* Blanco puro, el mismo del hero, y por el mismo motivo: los cantos del video
   son casi blancos (#F7F7F4 arriba, #FFF9FF a los lados), así que sobre #fff
   no queda ni rastro del rectángulo. Con el degradado claro que había antes,
   el canto de abajo del metraje —#F0F0F0— se recortaba contra un fondo que a
   esa altura ya iba por #dde4ea, y se veía. */
#salon {
  background: #fff;
  color: var(--ink);
}
#salon .eyebrow { color: rgba(12, 16, 20, .62); }
#salon h2 { color: var(--ink-deep); }
/* La palabra caligráfica es un degradado recortado sobre el texto. El de serie
   va de blanco a azul claro: sobre esta banda desaparecería. Mismo recurso,
   tonos invertidos.

   background-image y no el atajo background: el atajo devuelve background-clip
   a border-box y le arranca a .sc el `background-clip: text` que es justo lo
   que recorta el degradado contra las letras. Con el atajo, "nuestro salón"
   sale en color transparent —invisible— sobre un rectángulo de degradado. */
#salon .sc { background-image: linear-gradient(100deg, #1c2229 5%, #446b96 58%, #5d87b5 95%); }
/* Solo los párrafos de texto corrido, que son los únicos <p> sin clase. Con un
   simple "#salon .about-copy p" este color se llevaba por delante al volanta y
   a los tres números de las estadísticas —más específico que #salon .stat-num—
   y los dejaba del mismo gris que el cuerpo: legible, pero sin jerarquía. */
#salon .about-copy > p:not([class]) { color: #3c454e; }
#salon strong { color: var(--ink-deep); font-weight: 600; }
#salon em { color: var(--ink); }

#salon .stats { border-color: rgba(12, 16, 20, .16); }
#salon .stat-num { color: var(--ink-deep); }
#salon .stat-num sup { color: var(--aqua-ink); }   /* el azul claro no llega a AA aquí */
#salon .stat-label { color: rgba(12, 16, 20, .62); }

/* La chapita se queda oscura a propósito: cae sobre la parte blanca del video
   y en negro es lo único que se lee ahí. */

/* ---------- servicios insignia (carril + panel) ---------- */

.signature {
  /* distancia del borde de la ventana al contenido del .wrap (1180 + 28+28).
     --sbw (ancho de la barra de scroll) lo pone main.js; sin JS son ~7px de más. */
  --gutter: max(28px, calc(50vw - var(--sbw, 0px) / 2 - 562px));
  background: var(--grad-metal);
  padding: 70px 0 84px;
  overflow: hidden;               /* el carril se sale por la izquierda a propósito */
}
.signature .eyebrow { color: rgba(12, 16, 20, .62); margin-bottom: 0; }
.signature h2 { color: var(--ink-deep); }
.signature .sc {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #fff;
  text-shadow: 0 2px 18px rgba(12, 16, 20, .3);
}

.sig-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.sig-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 30vw, 420px);
  gap: 28px;
  align-items: start;
}

/* --- carril horizontal --- */

.sig-left { min-width: 0; }

.sig-rail-shell {
  position: relative;
  margin-left: calc(-1 * var(--gutter));   /* a sangre por la izquierda */
  background: #f4f7f9;
  border-radius: 0 22px 22px 0;
  padding: 14px 14px 14px 0;
  box-shadow: 0 24px 46px -30px rgba(10, 14, 20, .5);
}

/* Cinta infinita: main.js clona las tarjetas y arrastra scrollLeft. Sin
   padding-left, así el bucle empieza en 0 y las tarjetas entran y salen por
   el borde de la ventana. Tampoco lleva scroll-snap: pelearía con el arrastre. */
.sig-rail {
  list-style: none;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sig-rail::-webkit-scrollbar { display: none; }
.sig-rail > li { flex: 0 0 auto; }

.sig-card {
  display: block;
  position: relative;
  width: clamp(150px, 15.5vw, 194px);
  aspect-ratio: 1 / 1.03;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 34px -22px rgba(10, 14, 20, .6);
  transition: transform .35s ease;
}
.sig-card:hover { transform: translateY(-6px); }
.sig-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.sig-card:hover img { transform: scale(1.05); }
.sig-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 10, 14, .04) 48%, rgba(8, 9, 11, .68) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.sig-label {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 2;
  text-align: center;
  background: rgba(8, 9, 11, .5);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(240, 245, 249, .34);
  border-radius: 999px;
  padding: 9px 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}

/* flechas del carril — solo sirven con JS, así que sin JS no aparecen */
.rail-nav { display: none; }
.js .rail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  /* el aro fino la mantiene legible aunque caiga sobre una foto clara */
  box-shadow: 0 0 0 1px rgba(12, 16, 20, .1), 0 8px 20px -6px rgba(10, 14, 20, .45);
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.rail-nav svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--ink-deep);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-nav:hover { transform: translateY(-50%) scale(1.08); }
/* de extremo a extremo de la concha: la cinta no tiene principio ni final */
.rail-prev { left: 20px; }
.rail-next { right: 26px; }

/* --- bloque de texto --- */

.sig-copy { margin-top: 40px; }
.sig-copy h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.18; }
.sig-lead {
  max-width: 430px;
  margin-top: 22px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(12, 16, 20, .78);
}
.sig-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  max-width: 430px;
}
.sig-tags li {
  border: 1px solid rgba(12, 16, 20, .3);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(12, 16, 20, .8);
}

/* --- panel grande --- */

/* sin overflow:hidden — las pastillas blancas asoman por los lados,
   asi que el redondeo va en la imagen y en el velo */
.sig-panel {
  position: relative;
  aspect-ratio: 3 / 4.1;
  background: var(--noir);
  border-radius: 24px;
  box-shadow: 0 34px 60px -34px rgba(10, 14, 20, .7);
}
.sig-panel > * { position: relative; z-index: 3; }
.sig-panel > img {
  z-index: 1;
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: 50% 28%;
}
.sig-panel::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(8, 9, 11, .5) 0%, rgba(8, 9, 11, .04) 36%, rgba(8, 9, 11, .84) 100%),
    linear-gradient(90deg, rgba(8, 9, 11, .5) 0%, transparent 48%);
}

.sig-steps {
  position: absolute;
  top: 22px; left: 20px;
  list-style: none;
  display: grid;
  gap: 9px;
}
.sig-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(240, 245, 249, .45);
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--silver);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sig-steps .n {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.sig-steps li.is-on {
  background: var(--grad-metal);
  border-color: transparent;
  color: var(--ink-deep);
}
.sig-steps li.is-on .n { background: var(--noir); color: var(--silver); }

.sig-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--ink-deep);
  box-shadow: 0 12px 26px -12px rgba(10, 14, 20, .6);
  white-space: nowrap;
}
.sig-pin .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aqua-deep);
  flex: none;
}
.sig-pin-a { top: 36%; right: -10px; }
.sig-pin-b { bottom: 22%; left: -14px; }

.sig-panel figcaption {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(240, 245, 249, .82);
}

/* ---------- nota de traducción (reseñas) ---------- */

/* Marca de "esto se tradujo". Las reseñas son de clientas reales y la mayoría
   están escritas en español; en la versión en inglés se enseñan traducidas, y
   decirlo es la diferencia entre traducir y poner palabras en boca de alguien.
   Solo aparece en inglés porque solo existe dentro de los data-en. */
.tr-note {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Vive siempre dentro de una tarjeta clara, así que el gris del tema oscuro
     al 80% se quedaba en 3,2:1 a 9 px: se veía como una mancha, no como una
     frase. Este da 5,9:1. Importa porque es la advertencia de que la reseña está
     traducida, y eso o se lee o no sirve de nada. */
  color: #5c656d;
}

/* ---------- menú por categoría — tarjetas con miniatura ---------- */

/* Referencia de Gustavo (fila de tarjetas de un programa deportivo): píldoras
   de atributo arriba, titular grande, contenido, foto abajo y una píldora de
   acción encima de la foto; la primera tarjeta en color pleno y las flechas
   del carrusel en la cabecera. Se copia esa composición, no la paleta: la
   banda ya es metálica, así que las tarjetas van en blanco frío y la
   destacada en noir. El contraste lo pone el negro, no un color nuevo.

   Toda la tarjeta es el enlace a WhatsApp. Antes solo lo era el "Pedir mi
   precio →" del pie, que en móvil es un objetivo de 11 px de alto. */

/* La barra fija mide 75px. Sin este margen de salto, "Ver el menú completo" y
   las tarjetas del carril dejaban su destino justo debajo del negro. */
.menu-block, .mcard { scroll-margin-top: 96px; }

.menu-block { margin-top: 78px; }

.menu-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
/* La línea sale del pseudo-elemento, que en el DOM va el último. Sin este
   order las flechas quedarían pegadas al texto y la raya al borde. */
.menu-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(12, 16, 20, .3), transparent);
  order: 1;
}
.menu-head .eyebrow { flex: none; margin: 0; }
.menu-head .menu-nav { order: 2; }

/* Las flechas solo sirven cuando el carril se desborda; main.js decide si el
   contenedor lleva el atributo hidden. */
.menu-nav { flex: none; display: flex; gap: 10px; }
/* El display de autor pisa al display:none que el navegador le da a [hidden]:
   sin esta línea las flechas salían siempre, también donde no hay nada que
   desplazar. */
.menu-nav[hidden] { display: none; }
.mnav {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--noir);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.mnav svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: var(--silver);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mnav:hover { transform: scale(1.08); }
.mnav[disabled] { opacity: .3; cursor: default; transform: none; }

/* El carril va a sangre por la derecha: el margen negativo lo estira hasta el
   borde de la ventana (--gutter es esa distancia exacta, barra de scroll
   descontada) y las tarjetas, de ancho fijo, se salen de la pantalla. La
   última asoma cortada por el canto del monitor: es la señal de que hay más y
   de que el carril se arrastra.

   El padding derecho no se ve al principio —vive dentro de la zona que rueda—
   pero manda en el final del recorrido: al terminar de rodar, la última
   tarjeta queda alineada con el borde del .wrap, como el resto de la página. */
.menu-track {
  list-style: none;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-right: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 10px 0;   /* aire para la sombra al levantarse */
  scroll-behavior: smooth;
}
.menu-track::-webkit-scrollbar { display: none; }
/* La tarjeta mide un tercio y pico de lo que se ve, no una cuarta parte del
   .wrap: así en cualquier monitor se asoman 3,35 tarjetas y la cuarta queda
   partida por el borde, del portátil de 1280 al monitor de 2560.

   Ojo con el 100%: en flex-basis se mide contra la caja de contenido, que aquí
   es el ancho del .wrap (el padding derecho queda fuera). Por eso hay que
   sumarle el --gutter para llegar al ancho visible de verdad. Los 42px son los
   2,35 huecos de 18px que caben en ese tramo.

   Los topes: 300px para empalmar sin salto con la medida de tablet (≤920px),
   y 470px para que en una pantalla muy ancha la tarjeta no se vuelva un cartel. */
.menu-slot {
  flex: 0 0 clamp(300px, calc((100% + var(--gutter) - 42px) / 3.35), 470px);
  min-width: 0;
  display: flex;              /* estira la tarjeta a lo alto del carril */
  scroll-snap-align: start;
}

.mcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #f4f7f9;
  border-radius: 22px;
  /* la tarjeta ahora crece con la pantalla: si el aire de dentro se quedara en
     18px fijos, en un monitor ancho el texto nadaría pegado al borde */
  padding: clamp(18px, 1.4vw, 24px);
  box-shadow: 0 22px 44px -28px rgba(10, 14, 20, .55);
  transition: transform .35s ease, box-shadow .35s ease;
}
.mcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 54px -26px rgba(10, 14, 20, .6);
}

.mcard-top { display: flex; align-items: flex-start; gap: 10px; }
.mcard-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.mcard-pills li {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(12, 16, 20, .07);
  color: rgba(12, 16, 20, .72);
  white-space: nowrap;
}
.mcard-glyph {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--noir);
  color: var(--silver);
}
.mcard-glyph .ico-wa { width: 14px; height: 14px; }

/* El h3 global va a 17px con .14em de tracking: a este cuerpo las palabras se
   despegan y "TRATAMIENTOS Y ALISADOS" ocupa tres líneas. */
.mcard h3 {
  margin-top: 18px;
  font-size: clamp(19px, 1.65vw, 25px);
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--ink-deep);
}
.mcard-lead {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(12, 16, 20, .66);
}

.menu-lines { list-style: none; }
.menu-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
}
.menu-line .item {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .05em;
  color: rgba(12, 16, 20, .82);
}
.menu-line .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(12, 16, 20, .24);
  transform: translateY(-4px);
}
/* Era un rombo decorativo a 9px. Ahora es el precio, que es de lo poco
   que la clienta viene a buscar aquí: sube de cuerpo, coge peso y se
   prohíbe partirse en dos líneas ("100$ / paquete" es un solo dato). */
.menu-line .mark {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--aqua-ink);
}
/* La leyenda del +. Va dentro de .menu-note, que flota sobre el degradado
   metálico de la sección: el fondo va de casi blanco a gris medio según
   dónde caiga. Por eso el + no se fía del azul y tira de negro con peso —
   sobre gris medio el azul de marca se queda en 2,2:1. Y hay que ganarle
   en especificidad a ".menu-note p", que manda 14,5px. */
.menu-note .menu-key {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(12, 16, 20, .12);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .01em;
  color: rgba(12, 16, 20, .78);
}
.menu-note .menu-key strong {
  color: var(--ink-deep);
  font-weight: 700;
}
.mcard .menu-lines { margin-top: 15px; }

/* margin-top:auto = las cuatro fotos alineadas abajo aunque una categoría
   tenga cinco líneas y otra dos. La tarjeta ya mide lo mismo (flex stretch). */
.mcard-photo {
  position: relative;
  margin-top: auto;
  padding-top: 22px;
}
.mcard-photo img {
  width: 100%;
  /* el height="640" del <img> es una pista de presentacion que fija la altura
     en pixeles, y con altura explicita el navegador ignora aspect-ratio */
  height: auto;
  aspect-ratio: 1.16 / 1;
  object-fit: cover;
  object-position: 50% 26%;   /* el pelo y la cara, no el suelo del salón */
  border-radius: 16px;
}
.mcard-more {
  position: absolute;
  left: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 5px 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink-deep);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mcard-arrow {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--noir);
  display: grid;
  place-items: center;
  transition: transform .3s ease;
}
.mcard-arrow svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: var(--silver);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mcard:hover .mcard-arrow { transform: translateX(3px); }

/* --- la destacada: extensiones ---
   Es el servicio que traen las reseñas ("desde Tampa viajé para hacérmelas")
   y el que lleva el pin del panel, así que va primera y en negro. */
.mcard-star {
  background: var(--noir);
  box-shadow: 0 26px 50px -24px rgba(5, 8, 12, .75);
}
.mcard-star h3 { color: var(--text); }
.mcard-star .mcard-lead { color: var(--soft); }
.mcard-star .mcard-pills li {
  background: rgba(240, 245, 249, .1);
  color: var(--silver);
}
.mcard-star .mcard-glyph { background: var(--grad-metal); color: var(--ink-deep); }
.mcard-star .menu-line .item { color: var(--soft); }
.mcard-star .menu-line .dots { border-bottom-color: rgba(190, 203, 214, .3); }
.mcard-star .menu-line .mark { color: var(--aqua); }

/* --- en escritorio, las cuatro categorías enteras ---

   Son cuatro y nada más: no hay una quinta escondida detrás del borde, así que
   cortar la última por el canto de la pantalla prometía un carril más largo del
   que existe. Por encima de 1180px —donde el .wrap ya tocó su tope de 1180 y el
   ancho deja de crecer— el carril se recoge dentro del .wrap y las cuatro
   tarjetas reparten el ancho a partes iguales: 268px cada una.

   Debajo de esa medida no cambia nada, y es a propósito: cuatro tarjetas en una
   ventana de 900px saldrían a 200px y ahí el menú deja de leerse. Sigue siendo
   un carril que se arrastra, con la última asomando cortada.

   Las flechas se apagan solas: main.js esconde el contenedor cuando el carril no
   se desborda, que es justo lo que pasa aquí.

   Va después de las reglas de .mcard y no junto a .menu-slot porque el cuerpo
   del h3 pelea con el clamp de arriba: misma especificidad, gana el último. */
@media (min-width: 1181px) {
  .menu-track {
    margin-right: 0;
    padding-right: 0;
  }
  .menu-slot {
    flex: 1 1 0;              /* cuatro columnas iguales, sin ancho fijo */
  }
  /* El clamp de arriba está calibrado para una tarjeta de 380px. En una de
     268px, 25px dejaban "TRATAMIENTOS Y ALISADOS" en tres renglones. */
  .mcard h3 { font-size: 21px; }
}

/* --- la nota de evaluación, al pie del módulo --- */

.menu-note {
  margin: 60px auto 0;
  max-width: 760px;
  text-align: center;
  background: rgba(255, 255, 255, .46);
  border: 1px solid rgba(12, 16, 20, .14);
  border-radius: var(--radius);
  padding: 34px 38px;
}
.menu-note p { font-size: 14.5px; color: rgba(12, 16, 20, .78); }
.menu-note strong { color: var(--ink-deep); font-weight: 600; }
.menu-note .btn { margin-top: 22px; }

/* ---------- galería — columnas en arco ----------
   Texto a la izquierda y tres columnas de fotos a la derecha subiendo y
   bajando solas. La cuadrícula anterior enseñaba once fotos a la vez y ninguna
   se miraba; en columna pasa una cada dos segundos por delante de los ojos y
   el módulo respira. El arco (mucho radio arriba y abajo) es el mismo recurso
   de las marquesinas del resto del sitio. */

.gal-section { overflow: hidden; }   /* las columnas se salen por arriba y por abajo */

.gal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 60px;
  align-items: center;
}

.gal-copy .eyebrow { margin-bottom: 14px; }
.gal-copy h2 { margin-bottom: 18px; }
.gal-copy .sec-sub { margin: 0 0 30px; max-width: 480px; }
.gal-follow { margin-bottom: 40px; }

/* La fila de tres datos de abajo: seguidores, reseñas y TV. Son los tres
   avales que ya están comprobados en otras secciones; aquí solo se recuerdan
   junto a las fotos, que es donde la visitante se pregunta si esto es real. */
.gal-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  list-style: none;
}
.gal-facts li { display: flex; flex-direction: column; gap: 5px; }
.gf-n {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--text);
  line-height: 1;
}
.gf-t {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}

.gal-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  height: 620px;
  /* Se desvanecen contra el fondo por arriba y por abajo: sin esto las fotos
     aparecen y desaparecen de golpe y se ve el truco. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.galcol { overflow: hidden; }
.galcol-track {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: gal-sube 42s linear infinite;
  will-change: transform;
}
/* El JS duplica las tarjetas: al llegar a -50% lo que se ve es idéntico al
   principio, así que el salto no existe. La del medio va al revés para que las
   tres no parezcan una sola cortina. */
@keyframes gal-sube {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.galcol:nth-child(2) .galcol-track { animation-direction: reverse; animation-duration: 50s; }
.galcol:nth-child(3) .galcol-track { animation-duration: 36s; }
.gal-cols:hover .galcol-track { animation-play-state: paused; }

.gcard {
  position: relative;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: 130px 130px 130px 130px / 90px 90px 90px 90px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--noir-2);
}
.gcard img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease, filter .4s ease;
}
.gcard:hover img { transform: scale(1.05); filter: brightness(.7); }
.gcard-tag {
  position: absolute;
  left: 10px; right: 10px; bottom: 16px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(8, 9, 11, .74);
  border: 1px solid rgba(190, 203, 214, .32);
  border-radius: 999px;
  padding: 7px 10px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.gcard:hover .gcard-tag, .gcard:focus-visible .gcard-tag { opacity: 1; transform: translateY(0); }

/* ---------- equipo — cartel editorial ----------
   Composición de la referencia: titular gigante a la izquierda, bloque de
   color a la derecha con la foto saliéndose por arriba, dos miniaturas
   redondas mordiendo el canto y, abajo del texto, dos cifras y una flecha.
   El acento no es amarillo sino el platino de la marca, que sobre el noir
   da el mismo golpe de bloque claro que da el amarillo sobre el blanco. */

.team-vp {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 74px;
  align-items: center;
}

/* --- columna de texto --- */

.vp-title {
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: 1;
  letter-spacing: .02em;
  margin-bottom: 34px;
}
/* la palabra caligráfica baja a su propia línea y manda en el bloque, como
   el segundo renglón del cartel de referencia */
.vp-title .sc {
  display: block;
  font-size: 1.36em;
  line-height: .82;
  margin: .02em 0 .2em -.03em;
}
.vp-kicker {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: .155em;
  font-weight: 600;
  letter-spacing: .38em;
  color: var(--steel);
}

/* el párrafo cuelga a la derecha del titular, no debajo */
.vp-intro { max-width: 460px; margin-left: auto; }
.vp-intro > p { font-size: 14.6px; }

/* --- pie: dos cifras y la flecha --- */

/* start y no end: las dos cifras comparten línea base aunque sus pies tengan
   distinto número de renglones */
.vp-foot {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 30px;
  align-items: start;
  margin-top: 42px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.vp-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 4.6vw, 54px);
  line-height: 1;
  letter-spacing: .02em;
  background: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vp-cap {
  margin-top: 10px;
  font-size: 11.6px;
  line-height: 1.62;
  color: var(--muted);
}
.vp-arrow {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--grad-metal);
  color: var(--ink-deep);
  box-shadow: var(--shadow-metal);
  transition: transform .3s ease, filter .3s ease;
}
.vp-arrow svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vp-arrow:hover { transform: translate(3px, -3px); filter: brightness(1.07); }

/* --- bloque de la derecha --- */

.vp-panel { position: relative; }
.vp-block {
  position: relative;
  border-radius: 34px;
  background: var(--grad-metal);
  padding: 20px 20px 24px;
  box-shadow: 0 42px 92px -42px rgba(0, 0, 0, .92);
}
/* margen negativo arriba: la foto se sale del bloque de color igual que la
   modelo de la referencia se sale del panel amarillo */
.vp-photo {
  margin-top: -72px;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 544 / 600;
  box-shadow: 0 26px 58px -26px rgba(6, 9, 13, .8);
}
.vp-photo img { width: 100%; height: 100%; object-fit: cover; }
.vp-sign {
  margin-top: 15px;
  text-align: center;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.25;
  color: var(--ink-deep);
}
.vp-thumbs {
  position: absolute;
  left: -44px;
  top: 32%;
  display: grid;
  gap: 14px;
  z-index: 3;
}
.vp-thumbs figure {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
  border: 5px solid var(--noir-2);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
}
.vp-thumbs img { width: 100%; height: 100%; object-fit: cover; }
/* el botón circular de la esquina, el equivalente del globo de la referencia */
.vp-ig {
  position: absolute;
  top: -20px; right: -18px;
  width: 58px; height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--noir);
  border: 1px solid var(--line-strong);
  color: var(--silver);
  z-index: 3;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.vp-ig svg { width: 22px; height: 22px; fill: currentColor; }
.vp-ig:hover { color: #fff; border-color: var(--aqua); transform: translateY(-2px); }

/* --- la entrada, atada al scroll ---
   main.js escribe en la sección `--p`, de 0 a 1, según lo que ha subido el
   bloque en la ventana: no es un interruptor "ya se ve / no se ve", la
   animación avanza y retrocede con la rueda del ratón.

   Cada pieza toma ese progreso con un retraso propio (`--i`) y lo estira a su
   propio 0→1 (`--q`), que es lo que arma el cartel por capas: primero el
   bloque de la foto, luego el rótulo, el texto y las cifras, y al final las
   miniaturas y el botón de Instagram. Sin JS —o con "reducir movimiento"— la
   clase .vp-live no se pone y no pasa nada de esto: se ve entero y quieto. */
.vp-live .vp-copy > *,
.vp-live .vp-title .sc,
.vp-live .vp-block,
.vp-live .vp-thumbs figure,
.vp-live .vp-ig {
  --q: clamp(0, calc((var(--p, 1) - var(--i, 0)) / .5), 1);
  opacity: var(--q);
}

.vp-live .vp-copy > * {
  transform: translateY(calc((1 - var(--q)) * 34px));
}
.vp-live .vp-copy .eyebrow { --i: 0; }
.vp-live .vp-title { --i: .05; }
/* la palabra caligráfica llega la última y desde un poco más abajo: es la que
   tiene que quedarse en el ojo */
.vp-live .vp-title .sc {
  --i: .09;
  transform: translateY(calc((1 - var(--q)) * 22px));
}
.vp-live .vp-intro { --i: .1; }
.vp-live .vp-foot { --i: .15; }

.vp-live .vp-block {
  --i: .03;
  transform: translateY(calc((1 - var(--q)) * 54px)) scale(calc(.962 + var(--q) * .038));
  will-change: transform, opacity;
}
/* el zoom de la foto va con el progreso crudo, sin desfase: es un movimiento
   largo y lento por debajo de todo lo demás */
.vp-live .vp-photo img { transform: scale(calc(1.1 - var(--p, 1) * .1)); }
/* en Y, no en X: las miniaturas cuelgan fuera del bloque y moverlas de lado
   abriría barra horizontal en móvil */
.vp-live .vp-thumbs figure {
  transform: translateY(calc((1 - var(--q)) * 30px)) scale(calc(.84 + var(--q) * .16));
}
.vp-live .vp-thumbs figure:nth-child(1) { --i: .14; }
.vp-live .vp-thumbs figure:nth-child(2) { --i: .18; }
.vp-live .vp-ig { --i: .22; transform: scale(calc(.6 + var(--q) * .4)); }

/* --- el equipo se monta encima del salón ---
   Al bajar, "Sobre nuestro salón" se queda quieto y "El equipo" sube por
   delante y lo tapa, como quien pone una carta encima de otra. Las dos capas
   no van a la misma velocidad —eso es el paralaje— y la de abajo se apaga
   mientras se va: si las dos conservaran el mismo brillo, el ojo no sabría
   cuál está delante y el efecto se leería como un fallo.

   main.js escribe dos números: `--cover` en el cajón (0→1, lo que el equipo
   lleva tapado) y `--stick` en el salón. Sin JS —o con "reducir movimiento"—
   la clase .apila-live no se pone y las dos secciones van una detrás de otra,
   como toda la vida. */
.apila { position: relative; }

/* El salón se pega por el pie, no por la cabeza: el bloque es más alto que la
   pantalla y, clavándolo arriba, su último párrafo no se llegaría a leer
   nunca. `--stick` es esa distancia —negativa— que deja el pie del salón
   descansando en el pie de la ventana. Y ahí empieza justo el tapado, porque
   el equipo va pegado detrás: las dos cosas arrancan en el mismo píxel. */
.apila-live #salon {
  position: sticky;
  top: var(--stick, 0px);
  z-index: 1;
}

.apila-live #salon .about-grid {
  transform: translateY(calc(var(--cover, 0) * -40px)) scale(calc(1 - var(--cover, 0) * .05));
  transform-origin: 50% 22%;
  /* el apagado va al cuadrado, no en línea recta: a media carrera el salón
     todavía ocupa la mitad de arriba de la pantalla y con una bajada lineal
     ya estaba ilegible. Elevándolo, a mitad de camino conserva el 83% del
     brillo y casi todo el apagón ocurre en el último tramo, cuando ya está
     tapado y a nadie le importa. */
  opacity: calc(1 - var(--cover, 0) * var(--cover, 0) * .68);
  will-change: transform, opacity;
}
/* La foto se retira más deprisa que el texto: 86 px contra 40 px. Esa
   diferencia es todo el truco —dos planos, dos velocidades— y es de donde
   sale la sensación de hondura cuando el equipo pasa por delante. Se mueven
   los dos hijos a la vez (el marco y la chapita del 4.7) para que la chapa no
   se despegue de la foto. */
.apila-live #salon .about-visual > * {
  transform: translateY(calc(var(--cover, 0) * -46px));
}

/* El canto de arriba del equipo: esquinas redondeadas, una sombra que cae
   sobre el salón y un pelo de luz en el filo. Es lo que se ve montarse. No va
   dentro de .apila-live a propósito: sin animación sigue siendo un panel con
   relieve, que es como debe verse igualmente.

   Nada de overflow: hidden aquí — las miniaturas del equipo cuelgan fuera del
   bloque a propósito y se quedarían cortadas. */
#equipo {
  z-index: 2;
  border-radius: 42px 42px 0 0;
  box-shadow: 0 -30px 64px -22px rgba(0, 0, 0, .78),
              inset 0 1px 0 rgba(255, 255, 255, .06);
}

.names {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}
.names li {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
}
.names li:first-child { background: var(--grad-metal); color: var(--ink-deep); border-color: transparent; }

.team-quote {
  margin-top: 8px;
  padding-left: 16px;
  border-left: 2px solid var(--aqua-deep);
  font-style: italic;
  font-size: 14px;
  color: var(--soft);
}
.team-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aqua);
}
/* ---------- reseñas ---------- */

.rev-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: 54px;
  flex-wrap: wrap;
  text-align: left;
}
.rev-big {
  font-family: 'Playfair Display', serif;
  font-size: 74px;
  line-height: 1;
  color: var(--text);
}
.rev-big .rstar { color: var(--aqua); font-size: .45em; vertical-align: .6em; }
.rev-meta p { font-size: 13px; }
.rev-meta .stars { color: var(--aqua); letter-spacing: 4px; font-size: 15px; }

.rev-layout {
  display: grid;
  grid-template-columns: .8fr 1.5fr;
  gap: 44px;
  align-items: stretch;   /* la foto llega hasta abajo, a la altura de las burbujas */
}
/* La foto medía por proporción (3.2/4.6) y se quedaba corta: terminaba a media
   columna de reseñas y el módulo quedaba cojo. Ahora la caja la estira la
   rejilla —vale lo que mida la columna de burbujas— y la imagen la rellena.
   Eso se lleva por delante el position:sticky: un bloque que ya ocupa todo el
   alto de su fila no tiene por dónde deslizarse. */
.rev-photo {
  border-radius: 300px 300px 16px 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  position: relative;
  box-shadow: var(--shadow);
}
/* absoluta a propósito: así la foto no aporta alto y no puede ser ella la que
   decida el alto de la fila. Manda siempre la columna de reseñas. */
.rev-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bubbles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.bubble {
  background: #f4f7f9;
  border-radius: 18px;
  padding: 24px 24px 20px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55);
}
.bubble blockquote {
  font-size: 13.5px;
  line-height: 1.7;
  color: #3c454e;
}
.bubble-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8d0e8, #85aed8);
  color: #14202c;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bubble-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}
.bubble-stars { color: var(--aqua-deep); font-size: 12px; letter-spacing: 2px; }

/* ---------- reseñas sobre el gris del logo ----------

   El módulo pasa de negro a claro, así que todo lo que estaba pensado para
   leerse sobre negro hay que girarlo: los grises claros del tema oscuro se
   quedan en 2:1 sobre este fondo y desaparecen. Mismo trabajo que en #salon.

   El gris va aquí y no en las secciones de al lado a propósito: encima queda la
   banda negra de las citas y debajo el FAQ, también negro. El claro entre dos
   oscuros es lo que separa el bloque; si además fuera blanco competiría con
   #salon, que es el único blanco puro de la página. */
#resenas {
  background: var(--gris-logo);
  color: var(--ink);
}
#resenas .eyebrow { color: rgba(12, 16, 20, .62); }
#resenas h2 { color: var(--ink-deep); }
/* background-image y no el atajo `background`: el atajo devolvería
   background-clip a border-box y le arrancaría a .sc el recorte contra las
   letras, que es justo lo que hace visible el degradado. El tramo claro se
   queda en #4f7aa8 y no en el #5d87b5 de #salon porque sobre este gris aquel
   daba 3,0:1 —el límite exacto del texto grande— y este da 3,6:1. */
#resenas .sc { background-image: linear-gradient(100deg, #1c2229 5%, #40658f 58%, #4f7aa8 95%); }

#resenas .rev-big { color: var(--ink-deep); }
#resenas .rev-big .rstar,
#resenas .rev-meta .stars { color: var(--aqua-ink); }
/* Un escalón por debajo del 4.8, que es el dato: la línea del recuento es pie
   de foto, no titular. */
#resenas .rev-meta p { color: #3c454e; }

/* La pastilla de Google en versión oscura. El texto no usa --aqua-ink porque a
   10,5 px se queda en 4,4:1 —falla AA por una décima—; este azul da 7,3:1 y no
   se sale del tono. Al pasar el ratón se invierte: relleno azul, letra blanca,
   5,5:1. */
#resenas .link-chip {
  border-color: var(--aqua-ink);
  background: rgba(68, 107, 150, .08);
  color: #2f4a68;
}
#resenas .link-chip:hover {
  background: var(--aqua-ink);
  color: #fff;
  box-shadow: 0 16px 34px -18px rgba(68, 107, 150, .8);
}

/* Filo y sombra invertidos: el hilo claro no existe sobre gris claro, y la
   sombra que estaba calculada para caer sobre negro aquí sale como un borrón. */
#resenas .rev-photo {
  border-color: rgba(12, 16, 20, .12);
  box-shadow: 0 26px 54px -30px rgba(12, 16, 20, .45);
}

/* Las tarjetas suben a blanco puro. Con el #f4f7f9 de antes quedaban a 1,16:1
   del fondo —se distinguían, pero justo—; en blanco van a 1,25:1 y, sobre todo,
   dejan de meter un segundo tinte: el gris del logo tira a cálido y aquel
   blanco tiraba a frío. El filo fino hace el trabajo que antes hacía la sombra
   pesada. */
#resenas .bubble {
  background: #fff;
  border: 1px solid rgba(12, 16, 20, .07);
  box-shadow: 0 14px 30px -18px rgba(12, 16, 20, .22);
}

/* ---------- FAQ ---------- */

.wrap-narrow { max-width: 820px; }

.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  font-family: 'Playfair Display', serif;
  font-size: 15.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .2s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--aqua);
  transition: transform .3s ease;
  flex: none;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details[open] summary { color: var(--aqua); }
.faq-list details p {
  padding: 0 4px 26px;
  max-width: 700px;
  font-size: 14.5px;
}

/* ---------- contacto ---------- */

.contact {
  background: var(--grad-metal);
  padding: 100px 0;
}
.contact .eyebrow { color: rgba(12, 16, 20, .7); }
/* la frase de despedida abre la sección: es la misma que cerraba la página
   antes de que esta banda se quedara con el papel de último llamado. En vez
   del degradado metálico —que aquí desaparecería, el fondo ya es plata— va en
   el azul profundo, el mismo que se usa para texto grande sobre claro. */
.contact-script {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.05;
  color: var(--aqua-deep);
  margin-bottom: 2px;
}
.contact h2 { color: var(--ink-deep); }
.contact .sc { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; text-shadow: 0 2px 18px rgba(12, 16, 20, .3); }

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 64px;
  align-items: center;
}

.contact-copy h2 { margin-bottom: 30px; }

.contact-items { display: grid; gap: 22px; margin-bottom: 34px; }
.c-item { display: flex; gap: 16px; align-items: flex-start; }
.c-ico {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: rgba(8, 9, 11, .85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-ico svg { width: 17px; height: 17px; fill: var(--aqua); }
.c-item h3 {
  color: var(--ink-deep);
  font-size: 12px;
  letter-spacing: .24em;
  margin-bottom: 4px;
}
.c-item p, .c-item a { color: rgba(12, 16, 20, .85); font-size: 14.5px; font-weight: 400; }
.c-item a:hover { color: var(--ink-deep); }
.c-item p strong { color: var(--ink-deep); font-weight: 600; }

.contact-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.follow {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.follow span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(12, 16, 20, .7);
}
.follow a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(8, 9, 11, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
.follow a:hover { transform: translateY(-3px); }
.follow svg { width: 16px; height: 16px; fill: var(--aqua); }

.contact-photo {
  border-radius: 300px 300px 16px 16px;
  overflow: hidden;
  aspect-ratio: 3.4 / 4.3;
  box-shadow: 0 30px 60px -26px rgba(10, 14, 20, .55);
  position: relative;
}
.contact-photo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- footer ---------- */

.footer {
  background: var(--noir-2);
  border-top: 1px solid var(--line);
  padding: 64px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 48px;
}
.footer-logo { height: 54px; width: auto; margin-bottom: 16px; }
.footer p { font-size: 13.5px; }
.footer-h {
  font-family: 'Playfair Display', serif;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 14px;
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--silver); }
.footer-base {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  padding-bottom: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-base p { font-size: 11.5px; letter-spacing: .06em; }
.footer-credit { color: var(--steel); }

/* ---------- barra móvil fija ---------- */

.mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(8, 9, 11, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-strong);
  transform: translateY(130%);
  transition: transform .35s ease;
}
.mobilebar.on { transform: translateY(0); }
.mb-wa {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--grad-metal);
  color: var(--ink-deep);
  border-radius: 999px;
  padding: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mb-tel {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.mb-tel svg { width: 18px; height: 18px; fill: var(--aqua); }

/* ---------- reveals ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s ease;
}
.js .reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- responsive ---------- */

@media (max-width: 1020px) {
  /* servicios: el panel grande baja debajo del carril y del texto.
     minmax(0,1fr) y no 1fr: con el mínimo auto, el ancho intrínseco del
     carril (la suma de las 6 tarjetas) ensancha la columna y se sale. */
  .sig-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sig-copy { margin-top: 34px; }
  .sig-panel { aspect-ratio: 4 / 3.1; max-width: 620px; }
  .sig-panel > img { object-position: 50% 34%; }
  .sig-pin-a { top: auto; bottom: 30%; right: -8px; }
  .sig-pin-b { bottom: 16%; left: -8px; }
  .about-grid { gap: 48px; }
  .team-vp { gap: 46px; }
  .vp-thumbs { left: -30px; }
  .rev-layout { grid-template-columns: 1fr; }
  .rev-photo { display: none; }
  /* galería: el texto se pone encima y las columnas debajo, a lo ancho */
  .gal-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .gal-copy .sec-sub { max-width: 620px; }
  .gal-cols { height: 520px; }
}

@media (max-width: 920px) {
  .section { padding: 84px 0; }
  /* barra móvil: hamburguesa · logo · idioma. Los enlaces sueltos y el botón
     de agendar se van al panel; el logo queda centrado porque las columnas de
     los lados siguen siendo 1fr aunque una lleve un botón y la otra dos. */
  .nav-side a:not(.btn) { display: none; }
  .nav-side.left { display: none; }
  .nav-burger { display: flex; }
  .nav-inner { grid-template-columns: 1fr auto 1fr; padding: var(--nav-pad) 20px; gap: 12px; }
  .nav-side.right .btn-nav { display: none; }
  /* el logo también cuelga en móvil, pero más bajito: con 100 px la pastilla
     se comería el sitio de la hamburguesa y del selector de idioma en 375 px.
     Se cambian las cinco medidas y la placa se recalcula sola: no hay dos
     sitios donde el alto del logo y el de su base puedan descuadrarse. */
  .nav {
    --nav-pad: 12px;
    --logo-h: 70px;
    --logo-up: 6px;
    --logo-fila: 40px;
  }
  .nav-logo::before { left: -18px; right: -18px; border-radius: 0 0 22px 22px; }
  /* hero en vertical: primero la modelo, pegada al menú, y el texto debajo de
     ella. En horizontal el reparto izquierda–modelo–derecha se lee de un
     vistazo; apilado, esas mismas tres piezas obligaban a hacer scroll para
     llegar a la cara de la modelo, que es lo que vende el salón.
     La columna de la derecha se esconde entera: sus frases repiten en corto lo
     que ya dicen el titular y el párrafo, y la tarjeta de tres puntos empujaba
     el botón de WhatsApp fuera de la primera pantalla. */
  .hero {
    --video-h: clamp(300px, 44vh, 430px);
    min-height: 0;
    align-items: stretch;
  }
  .hero-inner { padding: 84px 22px 44px; }
  /* minmax(0, 1fr) y no 1fr: el video en flujo mide 2,4 veces su alto —más que
     la pantalla— y con 1fr la columna crecería hasta ese ancho y desbordaría
     la página entera. Con el mínimo a 0 la columna se queda en el ancho útil y
     lo que sobra del video lo recorta el overflow del hero, que es justo lo
     que se busca: modelo grande, bordes ya en blanco fuera de cuadro. */
  .hero-cols { grid-template-columns: minmax(0, 1fr); gap: 0; order: 1; }
  .hero-top { order: 2; margin: 30px 0 0; }
  .hero-left, .hero-stage, .hero-right { grid-column: auto; }
  .hero-right { display: none; }
  /* el video deja de ir a sangre colgado del canto de abajo y pasa a ocupar su
     sitio en la columna. Sigue siendo más ancho que la pantalla —así la modelo
     se ve grande sin recortarle el pelo— y por eso se mantiene centrado con el
     left: 50% de siempre, ahora sobre una caja que sí ocupa alto. */
  .hero-stage { order: -1; position: relative; align-self: auto; justify-content: flex-start; }
  .hs-viewport { position: relative; bottom: auto; }
  /* el pie se apila y se centra: en fila, el rótulo se quedaba con 120 px y se
     partía en cuatro líneas al lado de las marcas */
  .hs-under {
    position: relative;
    left: auto; bottom: auto;
    transform: none;
    margin: 12px auto 0;
    width: min(100%, 460px);
    flex-direction: column;
    gap: 12px;
  }
  .hs-caps { text-align: center; }
  .hero-sub { max-width: 520px; }
  /* la palabra del fondo baja hasta quedar justo detrás del titular: donde
     estaba antes cruzaba el rótulo del video y las marcas, y ahí sí ensuciaba */
  .hero-word {
    bottom: auto;
    top: 53%;
    opacity: .5;   /* detrás del titular tiene que ser textura, no un segundo texto */
    font-size: clamp(72px, 24vw, 190px);
  }
  .about-grid, .team-vp, .contact-grid { grid-template-columns: 1fr; }
  /* el cartel del equipo se apila: el titular deja de ser de póster, el
     párrafo vuelve a la izquierda y el bloque de color se centra */
  .team-vp { gap: 40px; }
  .vp-title { font-size: clamp(38px, 9vw, 58px); }
  .vp-intro { margin-left: 0; max-width: 560px; }
  .vp-panel { width: 100%; max-width: 500px; margin: 0 auto; }
  .vp-thumbs { left: -26px; top: 30%; }
  .vp-thumbs figure { width: 82px; height: 82px; border-width: 4px; }
  .about-visual { max-width: 440px; }
  /* La chapita de Adriana lleva 29 letras en caps y, a una columna, el marco se
     queda en 335 px: con el espaciado de escritorio se partía en dos líneas.
     Apretando el rastreo entra de una en un móvil normal (375 px). Por debajo
     de eso —un SE de 320— no cabe con ninguna talla que siga siendo legible,
     así que ahí se parte a propósito: dos líneas centradas y juntas parecen
     una chapa de dos pisos, que es un resultado digno; encoger la letra hasta
     los 8 px, no. */
  .about-badge { letter-spacing: .16em; padding: 9px 16px; line-height: 1.45; }
  /* el carril deja de repartir el ancho: tarjetas a medida fija y a rodar */
  .menu-slot { flex: 0 0 clamp(248px, 44vw, 300px); }
  .bubbles { grid-template-columns: 1fr; }
  .contact-photo { max-width: 420px; }
  .gal-facts { gap: 16px; }
  .gf-n { font-size: 21px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 820px) {
  .mobilebar { display: flex; }
  body { padding-bottom: 84px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  /* la curva del canto del equipo, a escala de la pantalla: 42 px en un móvil
     se comen media línea de texto en las esquinas */
  #equipo { border-radius: 26px 26px 0 0; }
  .hero { --video-h: clamp(280px, 40vh, 380px); }
  .hero-inner { padding: 78px 20px 40px; }
  .hero-top { gap: 8px; margin-bottom: 22px; }
  .hchip { padding: 8px 14px; font-size: 9px; letter-spacing: .16em; }
  .hero-micro { font-size: 9.5px; letter-spacing: .16em; }
  /* De aquí para abajo la modelo ya ocupa casi todo el ancho, así que la flecha
     colgada de ella se saldría. Se pegan a los cantos de la pantalla: la capa
     del video va centrada, así que su 50% es el centro de la ventana. */
  .hero-arrow-prev { left: calc(50% - 50vw + 12px); }
  .hero-arrow-next { left: calc(50% + 50vw - 58px); }
  .hs-under { width: min(100% - 40px, 420px); }
  .hero-cta, .about-ctas .btn,
  .menu-note .btn, .gal-cta .btn, .contact-ctas .btn {
    width: 100%;
    max-width: 420px;
    white-space: normal;
    line-height: 1.5;
  }
  /* servicios en movil: titular arriba, carril despues */
  .signature { --gutter: 20px; padding: 56px 0 66px; }
  .sig-top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sig-left { display: flex; flex-direction: column; }
  .sig-rail-shell { order: 2; padding: 12px 12px 12px 0; border-radius: 0 18px 18px 0; }
  .sig-copy { order: 1; margin: 0 0 26px; }
  .sig-card { width: 152px; }
  .sig-label { font-size: 8.5px; padding: 8px 8px; letter-spacing: .14em; }
  .js .rail-nav { width: 34px; height: 34px; }
  .rail-prev { left: 14px; }
  .rail-next { right: 16px; }
  .sig-panel { aspect-ratio: 3 / 3.6; }
  .sig-steps li { font-size: 9px; padding: 6px 12px 6px 6px; }
  .sig-steps .n { width: 22px; height: 22px; font-size: 9px; }
  .sig-pin { font-size: 9.5px; padding: 8px 13px; }
  .sig-pin-a { right: 0; }
  .sig-pin-b { left: 0; }
  .menu-block { margin-top: 54px; }
  .menu-head { margin-bottom: 24px; gap: 14px; }
  .mnav { width: 34px; height: 34px; }
  .menu-track { gap: 14px; }
  .menu-slot { flex: 0 0 min(78vw, 300px); }
  .mcard { border-radius: 20px; padding: 16px; }
  .mcard h3 { font-size: 20px; margin-top: 18px; }
  .menu-note { margin-top: 44px; padding: 28px 24px; }
  /* en el móvil caben dos columnas de fotos: con tres, cada arco baja de 100px
     de ancho y la foto deja de leerse. Se esconde la tercera —no se pierde
     ninguna foto que no esté ya en las otras dos— y las que quedan se alargan. */
  .gal-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: 470px; }
  .galcol:nth-child(3) { display: none; }
  .galcol-track { gap: 12px; }
  .gcard { border-radius: 84px 84px 84px 84px / 60px 60px 60px 60px; }
  .gal-facts { grid-template-columns: 1fr; gap: 14px; padding-top: 22px; }
  .gal-facts li { flex-direction: row; align-items: baseline; gap: 10px; }
  .rev-big { font-size: 56px; }
  /* en móvil las miniaturas dejan de colgar del canto —taparían media foto— y
     se ponen en fila sobre la banda de platino, bajo la firma */
  .vp-thumbs {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
  }
  .vp-thumbs figure { width: 64px; height: 64px; border-color: rgba(12, 16, 20, .16); }
  .vp-foot { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .vp-arrow { grid-column: 1 / -1; justify-self: start; }
  .vp-ig { top: -16px; right: -8px; width: 50px; height: 50px; }
  .footer-base { justify-content: center; text-align: center; }
}

/* ---------- accesibilidad ---------- */

/* El enlace de salto. Se guarda arriba, fuera de la pantalla; al recibir el
   foco baja y se planta encima del nav. No usa display:none ni
   visibility:hidden a propósito: eso lo sacaría del orden del tabulador y
   entonces no serviría para nada. */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -140%);
  padding: 12px 22px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--silver);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  transition: transform .18s ease;
}
.skip-link:focus {
  transform: translate(-50%, 0);
}

/* Anillo de foco general. Antes solo lo tenían las flechas del hero, las
   marcas del carrusel y las tarjetas de galería; los demás enlaces y botones
   se quedaban con el anillo por defecto del navegador, que sobre este negro
   apenas se distingue. --aqua-deep da 5,3:1 contra el fondo, que pasa AA.

   Es :focus-visible, no :focus: al hacer clic con el ratón no aparece nada.
   Los tres anillos que ya existían (.hero-arrow, .hs-ticks button, .gcard)
   siguen mandando sobre estas reglas por especificidad: son de clase. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--aqua-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
/* El <main> recibe el foco cuando se usa el enlace de salto. Ahí el anillo
   sobra: rodearía la página entera. */
main:focus-visible {
  outline: none;
}

/* ---------- páginas sueltas (privacidad) ----------

   Comparten hoja y JS con la portada, pero no tienen hero ni menú: solo texto.
   Todos los módulos de main.js están protegidos con su propio `if (!x) return`,
   así que aquí no hace falta un segundo archivo. */

/* La barra sin menú ni hamburguesa. La rejilla sigue siendo de tres columnas
   —1fr auto 1fr, la misma a todos los anchos— y aquí solo se llenan dos, así
   que hay que decirle a cada pieza en cuál va: sin esto el logo se plantaría en
   la primera columna y quedaría pegado al canto izquierdo. */
.nav-legal .nav-logo { grid-column: 2; }
.nav-legal .nav-side.right { grid-column: 3; }

/* En la portada el botón de la barra se esconde en móvil porque su trabajo lo
   hereda la hamburguesa. Aquí no hay hamburguesa: si se escondiera, la única
   salida sería el logo, y un logo no se lee como "salir". Se queda, apretado. */
@media (max-width: 920px) {
  .nav-legal .nav-side.right .btn-nav {
    display: inline-flex;
    padding: 9px 13px;
    font-size: 9px;
    letter-spacing: .12em;
  }
}

/* El texto legal se lee, no se ojea: medida corta, cuerpo algo mayor que el
   del resto del sitio y aire entre bloques. */
/* 166px arriba = los 74 que mide la barra (46 de fila + 28 de padding) más el
   aire de una sección normal. --logo-fila vive en .nav y no llega hasta aquí,
   así que la cuenta va hecha. */
.legal {
  padding: 166px 0 110px;
}
.legal-head { margin-bottom: 54px; }
.legal-head h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  letter-spacing: .1em;
}
.legal-date {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
}
.legal-body > * + * { margin-top: 18px; }
.legal-body h2 {
  margin-top: 52px;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: .16em;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body ul {
  list-style: none;
  margin-top: 14px;
}
.legal-body li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
}
.legal-body li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  color: var(--aqua-deep);
}
.legal-body a { border-bottom: 1px solid rgba(133, 174, 216, .35); }
.legal-note {
  margin-top: 60px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 14.5px;
}

@media (max-width: 560px) {
  /* la barra encoge a 64px en móvil (40 de fila + 24 de padding) */
  .legal { padding: 124px 0 80px; }
  .legal-body h2 { margin-top: 40px; }
  .legal-note { padding: 22px 20px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .hero-micro .hm-dot { animation: none; }
  .nav-drawer { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  /* el arrastre continuo del carril lo apaga main.js; las flechas siguen */
  .btn, .sig-card, .sig-card img, .rail-nav, .gcard img { transition: none; }
  /* las columnas de la galería se quedan quietas; se acorta el alto para que
     no queden dos tercios de columna vacíos debajo de la primera tanda */
  .galcol-track { animation: none; }
  .gal-cols { height: 560px; }
  /* el hero no avanza solo (lo corta main.js) y el cambio de slide es seco:
     nada de fundidos ni de barritas llenándose */
  .hs-stack > *, .hs-slide, .hero-arrow { transition: none; }
  .hs-ticks button.is-on i::after { animation: none; right: 0; }
  .hs-ticks button { transition: none; }
}


/* ============================================================
   PRODUCTOS
   Catálogo (productos.html) y ficha (producto-*.html).
   ============================================================ */

/* La cabecera es fija y mide 74px (--nav-pad x2 + --logo-fila), y encima le
   cuelga el logo. Estas dos páginas empiezan con contenido de verdad pegado
   arriba, así que se les da el mismo aire que a la página legal. */
.prod-intro, .prod-ficha { padding-top: 128px; }

/* El titular del catálogo es el h1 de esa página —una página sin h1 le sale
   cara al buscador y al lector de pantalla—, pero tiene que verse igual que
   cualquier otro titular de sección. La hoja no define tamaño para h1, así
   que se le copia el del h2. */
.prod-intro .sec-head h1 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: .12em; }

/* ---------- migas ---------- */

.migas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 34px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}
.migas a { color: var(--soft); transition: color .2s ease; }
.migas a:hover { color: var(--aqua); }
.migas span[aria-hidden] { color: var(--steel); opacity: .6; }
.migas [aria-current] { color: var(--aqua); }

/* ---------- rejilla de tarjetas ---------- */

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.pgrid-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.pcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s ease, transform .3s ease, background-color .3s ease;
}
.pcard:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .05);
  transform: translateY(-4px);
}
.pcard:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

.pcard-img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin-bottom: 16px;
}
.pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.pcard:hover .pcard-img img { transform: scale(1.05); }

.pcard-rotulo {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--aqua);
}
.pcard-nombre {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  letter-spacing: .05em;
  color: var(--text);
  line-height: 1.25;
}
.pcard-tam { font-size: 12.5px; color: var(--muted); }
.pcard-precio {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  /* con la forma larga, no con el atajo: el atajo reinicia background-clip */
  background-image: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pgrid-mini .pcard { padding: 14px 14px 18px; }
.pgrid-mini .pcard-nombre { font-size: 15px; }
.pgrid-mini .pcard-precio { font-size: 15px; margin-top: 10px; }

/* ---------- cabecera de grupo del catálogo ---------- */

.grupo-head { max-width: 640px; margin: 0 0 36px; }
/* Es un h2 por el esquema de encabezados —cuelga del h1 de la página—, no por
   el tamaño: aquí se le da el suyo, más pequeño que el h2 de sección. */
.grupo-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text);
}
.grupo-head p { margin-top: 12px; font-size: 14.5px; color: var(--soft); }
.prod-grupo { padding: 76px 0; }
.prod-mas { margin-top: 44px; }

/* ---------- ficha: la rejilla ---------- */

.ficha-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* ---------- ficha: galería ---------- */

/* Se queda pegada mientras la columna de la derecha, que es más larga, sigue
   bajando. 94px = los 74 de la barra fija más un respiro. */
.ficha-gal { position: sticky; top: 94px; align-self: start; }

.pgal-marco {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
/* Las fotos van una encima de otra y solo cambia la opacidad: así el alto no
   pega un salto al pasar de una a la siguiente. */
.pgal-vista { position: relative; aspect-ratio: 1 / 1; }
.pgal-vista img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
}
.pgal-vista img.is-on { opacity: 1; }

.pgal-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(8, 9, 11, .68);
  backdrop-filter: blur(6px);
  color: var(--silver);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.pgal-flecha:hover { background: var(--noir); color: var(--aqua); border-color: var(--aqua); }
.pgal-flecha:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.pgal-prev { left: 14px; }
.pgal-next { right: 14px; }

.pgal-cinta {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 9, 11, .72);
  backdrop-filter: blur(6px);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--soft);
}

.pgal-minis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pgal-minis button {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  opacity: .5;
  transition: opacity .25s ease, border-color .25s ease;
}
.pgal-minis button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal-minis button:hover { opacity: .85; }
.pgal-minis button.is-on { opacity: 1; border-color: var(--aqua); }
.pgal-minis button:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* ---------- ficha: la columna de texto ---------- */

.ficha-info h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.12;
  color: var(--text);
}
.ficha-pipe {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--muted);
}
.ficha-desc {
  margin-top: 20px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--soft);
}

.ficha-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ficha-chips span {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
}

/* ---------- ficha: el bloque de compra ---------- */

.compra {
  margin-top: 32px;
  padding: 26px 26px 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
}
.compra-precio { font-size: 14px; color: var(--muted); }
.compra-precio b {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .01em;
  background-image: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.compra-precio span { margin-left: 6px; font-size: 12px; letter-spacing: .16em; }
.compra-fuente { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.compra-tam {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.compra-tam b { color: var(--soft); font-weight: 600; }
.compra-nota {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--aqua-deep);
  background: rgba(133, 174, 216, .07);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--soft);
}

.compra-fila { display: flex; gap: 12px; margin-top: 22px; }
.compra-btn { flex: 1; min-width: 0; padding-left: 20px; padding-right: 20px; }
.compra-btn span { white-space: nowrap; }
.compra-tel { display: flex; width: 100%; margin-top: 10px; }

.cantidad {
  display: flex;
  /* stretch y no center: con center, el <input> se queda con su alto de línea
     —19px— y en el móvil el número deja de ser un sitio donde se pueda tocar
     aunque la pastilla mida 48. */
  align-items: stretch;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--noir);
}
.cantidad button {
  width: 40px;
  height: 100%;
  min-height: 46px;
  border: 0;
  background: none;
  color: var(--soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.cantidad button:hover { color: var(--aqua); background: rgba(255, 255, 255, .05); }
.cantidad button:focus-visible { outline: 2px solid var(--aqua); outline-offset: -2px; }
.cantidad input {
  width: 34px;
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad input:focus-visible { outline: 2px solid var(--aqua); outline-offset: -2px; border-radius: 6px; }

/* Los tres pasos. Es lo que en una tienda sería el plazo de envío: aquí no hay
   envío, hay mostrador, y conviene decirlo antes de que lo pregunten. */
.pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  list-style: none;
}
.pasos li { position: relative; padding: 0 12px; text-align: center; }
.pasos li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
}
.pasos-n {
  display: block;
  margin: 0 auto 8px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 20px;
  color: var(--aqua);
}
.pasos b {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
}
.pasos small { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

.compra-confianza {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.ficha-faq { margin-top: 40px; }
.ficha-faq details:first-child { border-top: 1px solid var(--line); }

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pgrid-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* En una columna la galería ya no tiene junto a qué quedarse quieta. */
  .ficha-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .ficha-gal { position: static; }
  .prod-intro, .prod-ficha { padding-top: 112px; }
  .prod-grupo { padding: 58px 0; }
}

@media (max-width: 560px) {
  .pgrid, .pgrid-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pcard, .pgrid-mini .pcard { padding: 12px 12px 16px; }
  .pcard-nombre, .pgrid-mini .pcard-nombre { font-size: 14.5px; }
  .pcard-precio, .pgrid-mini .pcard-precio { font-size: 15px; }
  .pgal-cinta-sub { display: none; }
  .pgal-minis button { width: 58px; height: 58px; }
  .compra { padding: 20px 18px 22px; }
  /* El botón de comprar se pasa a su propia fila: en 320px no cabe al lado
     del contador sin partir la palabra. */
  .compra-fila { flex-wrap: wrap; }
  .compra-btn { flex: 1 0 100%; }
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: left; }
  .pasos li { padding: 0; text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .pasos li + li::before { display: none; }
  .pasos-n { margin: 0; flex: none; }
  .pasos b, .pasos small { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard-img img, .pgal-vista img, .pgal-flecha, .pgal-minis button { transition: none; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard-img img { transform: none; }
}