/* =====================================================================
   LORENA CAMPILLO — v4 «Luz de espejo» · secciones
   Mobile-first. El hero tiene tres composiciones según el hueco que deja
   la pantalla: vertical (móvil y tableta), diagonal (escritorio) y
   compacta (móvil en horizontal). Siempre cabe entero, sin scroll.
   ===================================================================== */

/* =====================================================================
   CABECERA: la banda negra de su web
   ===================================================================== */
.cab {
  position: sticky; top: 0; z-index: 50;
  height: var(--cab-h);
  background: rgba(0, 0, 0, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--blanco);
  --foco: var(--blanco);
}
.cab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255, 255, 255, .14);
  opacity: 0; transition: opacity .3s var(--e-out);
}
.cab.con-borde::after { opacity: 1; }
.cab__in { display: flex; align-items: center; gap: 12px; height: 100%; }
.cab__logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; flex-shrink: 0; }
.cab__logo img { height: 22px; width: auto; transition: transform .5s var(--e-out); }
.cab__logo:hover img { transform: translateY(-1px) scale(1.03); }
.cab__nav, .cab__tel { display: none; }
.cab__acc { display: flex; align-items: center; gap: 8px; }
.cab__menu {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--blanco); transition: transform .2s var(--e-out);
}
.cab__menu:active { transform: scale(.92); }
.cab__menu .ico { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity .15s, transform .3s var(--e-out); }
.cab__menu .ico--cerrar { opacity: 0; transform: rotate(-90deg) scale(.6); }
.cab__menu[aria-expanded='true'] .ico--abrir { opacity: 0; transform: rotate(90deg) scale(.6); }
.cab__menu[aria-expanded='true'] .ico--cerrar { opacity: 1; transform: none; }

/* Menú móvil: hoja negra a pantalla completa */
.menu {
  position: fixed; left: 0; right: 0; top: var(--cab-h); bottom: 0; z-index: 49;
  background: var(--negro); color: var(--blanco); --foco: var(--blanco);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu__in { display: flex; flex-direction: column; min-height: 100%; padding-top: 12px; padding-bottom: 32px; }
.menu__lista { list-style: none; }
.menu__lista a {
  display: flex; align-items: center; min-height: 64px; padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--display); font-size: 2.3rem; line-height: 1.1; text-decoration: none;
}
.menu__lista a:active { opacity: .6; }
.menu__pie { margin-top: auto; padding-top: 28px; display: grid; gap: 16px; justify-items: start; }
html.menu-abierto { overflow: hidden; }

@media (min-width: 400px) { .cab__logo img { height: 25px; } }
@media (min-width: 1024px) {
  .cab__in { gap: 28px; }
  .cab__logo { margin-right: 0; }
  .cab__logo img { height: 30px; }
  .cab__nav { display: block; margin-inline: auto; }
  .cab__nav ul { display: flex; gap: 4px; list-style: none; }
  .cab__nav a {
    position: relative; display: block; padding: 10px 12px;
    font-size: .96rem; font-weight: 500; text-decoration: none; color: rgba(255, 255, 255, .86);
  }
  .cab__nav a::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px;
    background: var(--oro); transform: scaleX(0); transform-origin: right;
    transition: transform .4s var(--e-out);
  }
  .cab__nav a:hover { color: var(--blanco); }
  .cab__nav a:hover::after, .cab__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  .cab__menu, .menu { display: none !important; }
  .cab__acc { gap: 22px; }
}
@media (min-width: 1200px) {
  .cab__tel {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font-size: .96rem; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
  }
  .cab__tel:hover span { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--oro); }
}

/* =====================================================================
   1 · HERO: el tocador
   Su retrato, en el espejo de tocador de una estilista: marco negro con
   bombillas y, metidas en el marco, cinco cosas de verdad que llevan al
   resto de la página (sus trabajos, la cita, el salón, sus premios y una
   pregunta). Tres composiciones según el hueco: vertical (móvil y
   tableta), a dos lados (escritorio) y compacta (móvil en horizontal).
   Siempre cabe entero, sin scroll, y nada tapa ni recorta la foto.
   El espejo se mide en --u, la centésima parte del alto de la foto:
   marco 90 × 115 u, foto 75 × 100 u, banda de bombillas 7,5 u. Los
   objetos se miden en --uo (--u × --k) y crecen siempre hacia fuera.
   ===================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(100vh - var(--cab-h));
  height: calc(100svh - var(--cab-h));
  min-height: 300px;
  background: var(--negro); color: var(--blanco);
  --foco: var(--blanco);
  container-type: size;
}

.hero__escena {
  position: relative;
  height: 100%;
  display: grid;
  /* Vertical: nombre · tocador · subtítulo · botones */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'nombre' 'tocador' 'sub' 'acciones';
  justify-items: center;
  row-gap: clamp(4px, 1.1cqh, 12px);
  padding-block: clamp(6px, 1.3cqh, 18px) clamp(10px, 2cqh, 24px);
}
.hero__texto { display: contents; }
.hero__titulo { grid-area: nombre; font-weight: 400; text-align: center; margin-bottom: clamp(0px, .9cqh, 10px); }
/* Su nombre, como un rótulo de luz: las letras se encienden con las bombillas */
.hero__nombre {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: min(calc((100cqw - 2 * var(--gutter)) / 7.15), 8cqh, 6.5rem);
  line-height: .95; letter-spacing: .01em; white-space: nowrap;
  text-shadow: 0 0 .4em rgba(255, 255, 255, .28);
}
.hero__palabra { display: inline-block; }
.hero__nombre .l { display: inline-block; }
.hero__sub {
  grid-area: sub;
  font-size: clamp(.875rem, .8rem + .4vw, 1.0625rem); font-weight: 500; line-height: 1.35; letter-spacing: .02em;
  color: rgba(255, 255, 255, .78); text-align: center;
}
.hero__acciones {
  grid-area: acciones;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
}
/* En vertical, los objetos del espejo ya llevan a cada parte: el enlace solo si sobra alto */
.hero__acciones .enlace { display: none; flex-basis: 100%; justify-content: center; }
/* Móviles muy estrechos: los dos botones caben en una fila */
@media (max-width: 380px) {
  .hero__acciones .boton { min-height: 48px; padding: 0 1.1em; }
}
@media (min-width: 600px) and (min-height: 900px) {
  .hero__acciones .enlace { display: inline-flex; }
}

/* ---- El tocador: el espejo, su luz y lo que hay metido en el marco ---- */
.tocador {
  grid-area: tocador; justify-self: stretch; align-self: stretch; min-height: 0;
  container-type: size;
  display: grid; place-items: center;
  /* Escala de los objetos y lo que sobresalen del marco, en uo: arriba, derecha, abajo, izquierda.
     Ya solo cuelga la escarapela por abajo: arriba no hay que reservar. */
  --k: 1; --pt: 4; --pr: 1.5; --pb: 21.5; --pl: 1.5;
}
.tocador__espejo {
  --fh: min(
    calc(100cqh / (1.15 + var(--k) * (var(--pt) + var(--pb)) / 100)),
    calc(100cqw / (.9 + var(--k) * (var(--pl) + var(--pr)) / 100)),
    var(--fh-max, 1500px));
  --u: calc(var(--fh) / 100);
  --uo: calc(var(--u) * var(--k));
  position: relative;
  width: calc(var(--u) * 90); height: calc(var(--u) * 115);
  margin: calc(var(--uo) * var(--pt)) calc(var(--uo) * var(--pr)) calc(var(--uo) * var(--pb)) calc(var(--uo) * var(--pl));
}
/* La luz que el espejo echa sobre la pared */
.tocador__luz {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .15), rgba(255, 255, 255, .055) 55%, rgba(255, 255, 255, 0));
  transform: scale(1.9, 1.45);
}
/* El marco: laca negra ancha, con canto de luz */
.tocador__marco {
  position: absolute; inset: 0; z-index: 1;
  border-radius: calc(var(--u) * 1.8);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, .05)),
    linear-gradient(var(--carbon), #050505);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 0 0 calc(var(--u) * .7) rgba(0, 0, 0, .55),
    0 calc(var(--u) * 3) calc(var(--u) * 9) rgba(0, 0, 0, .8);
}
/* Bombillas de camerino: cristal, casquillo y halo. El halo queda debajo de la foto */
.bombilla {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--u) * 3.9); height: calc(var(--u) * 3.9); border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--k-luz, 1));
  background: radial-gradient(circle at 36% 32%, #5C5C5C, #262626 62%, #0E0E0E);
  box-shadow: 0 0 0 calc(var(--u) * .45) #0A0A0A, 0 0 0 calc(var(--u) * .45 + 1px) rgba(255, 255, 255, .16);
}
.bombilla::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #FFFFFF 0 34%, #F4F4F4 55%, #D6D6D6 80%, #B4B4B4);
  box-shadow: 0 0 calc(var(--u) * .9) rgba(255, 255, 255, .95);
}
.bombilla::after {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: 560%; height: 560%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .44), rgba(255, 255, 255, .15) 38%, rgba(255, 255, 255, 0));
}
/* La foto, intacta y por encima de todo lo del espejo */
.tocador__foto {
  position: absolute; z-index: 4;
  left: calc(var(--u) * 7.5); top: calc(var(--u) * 7.5);
  width: calc(var(--u) * 75); height: calc(var(--u) * 100);
  max-width: none;
  object-fit: contain; /* nunca recorta */
  background: var(--negro);
}
/* El canto interior del marco: lo que se mete en el espejo queda debajo de él */
.tocador__labio {
  position: absolute; z-index: 5; pointer-events: none;
  left: calc(var(--u) * 6.1); top: calc(var(--u) * 6.1);
  width: calc(var(--u) * 77.8); height: calc(var(--u) * 102.8);
  border: calc(var(--u) * 1.4) solid #070707;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .13);
}

/* ---- Los objetos: cada uno es un enlace ----
   El enlace nunca baja de 44 px y solo crece hacia fuera del espejo; el objeto
   se ancla dentro por el lado que toca el marco (--fx, --fy) */
.objeto {
  position: absolute; z-index: 3;
  width: max(44px, calc(var(--uo) * var(--ow))); height: max(44px, calc(var(--uo) * var(--oh)));
  color: var(--negro); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.objeto:focus-visible { outline: none; }
/* Flota con el cursor (el JS pone --px y --py) */
.objeto__flota {
  position: absolute; left: var(--fx, 50%); top: var(--fy, 50%);
  width: calc(var(--uo) * var(--ow)); height: calc(var(--uo) * var(--oh));
  transform: translate(calc(var(--fx, 50%) * -1), calc(var(--fy, 50%) * -1)) translate(calc(var(--px, 0) * var(--prof, 5px)), calc(var(--py, 0) * var(--prof, 5px)));
}
/* Gira desde donde está metido en el marco */
.objeto__cuerpo { position: absolute; inset: 0; transform-origin: var(--pivote, 50% 50%); transform: rotate(var(--r, 0deg)); }
.objeto:focus-visible .objeto__cuerpo { outline: 2px solid var(--blanco); outline-offset: 5px; }
/* El rótulo: sale siempre hacia fuera del espejo, nunca sobre la foto */
.objeto__rotulo {
  position: absolute; z-index: 2; left: var(--lx, 50%); top: var(--ly, 100%);
  transform: translate(var(--ltx, -50%), var(--lty, 0px)) translateY(8px) scale(.9);
  opacity: 0;
  padding: .38em .85em .42em; border-radius: 999px;
  background: rgba(0, 0, 0, .88); color: var(--blanco);
  font-family: var(--sans); font-size: .8125rem; font-weight: 600; line-height: 1.15; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 10px 22px -10px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.objeto:focus-visible .objeto__rotulo { opacity: 1; transform: translate(var(--ltx, -50%), var(--lty, 0px)); }
@media (hover: hover) {
  .objeto:hover .objeto__rotulo { opacity: 1; transform: translate(var(--ltx, -50%), var(--lty, 0px)); }
}
/* En pantallas táctiles y en el móvil, los rótulos se ven siempre */
@media (hover: none), (max-width: 699px) {
  .objeto__rotulo { opacity: 1; transform: translate(var(--ltx, -50%), var(--lty, 0px)); font-size: .6875rem; padding: .34em .75em .38em; }
}

/* La polaroid (formato mini, 54 × 86): pasa sus trabajos, con el nombre del servicio escrito abajo */
.polaroid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 7.4% 7.4% 0;
  border-radius: 3% / 1.9%;
  background: linear-gradient(165deg, #FFFFFF 45%, #ECECEC);
  box-shadow: 0 calc(var(--uo) * .9) calc(var(--uo) * 2.4) rgba(0, 0, 0, .6);
}
.polaroid__foto { position: relative; display: block; flex: none; aspect-ratio: 3 / 4; overflow: hidden; background: #F4F4F4; }
.polaroid__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.polaroid__foto img.activa { opacity: 1; }
.polaroid__pie { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; }
.polaroid__pie > span {
  grid-area: 1 / 1;
  font-family: var(--display); font-size: calc(var(--uo) * 2.5); line-height: 1.1; white-space: nowrap;
  color: var(--negro); opacity: 0;
}
.polaroid__pie > span.activa { opacity: 1; }

/* Una copia en papel del salón: la pared de espejos */
.copia {
  position: absolute; inset: 0; padding: 5%;
  background: #FFFFFF;
  box-shadow: 0 calc(var(--uo) * .9) calc(var(--uo) * 2.4) rgba(0, 0, 0, .6);
}
.copia img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* La tarjeta de cita del salón, con el día y la hora por rellenar */
.tarjeta {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 9%;
  border-radius: calc(var(--uo) * .8);
  background: linear-gradient(170deg, #FFFFFF 50%, #F1F1F1);
  box-shadow: 0 calc(var(--uo) * .9) calc(var(--uo) * 2.4) rgba(0, 0, 0, .6);
}
.tarjeta__casa { font-family: var(--display); font-size: calc(var(--uo) * 1.75); line-height: 1; letter-spacing: .06em; color: var(--humo); }
.tarjeta__titulo { margin-top: 5%; font-family: var(--display); font-size: calc(var(--uo) * 3.9); line-height: 1; color: var(--negro); }
.tarjeta__lineas {
  display: flex; gap: 10%; width: 100%; margin-top: 9%;
  font-size: calc(var(--uo) * 1.45); font-weight: 500; line-height: 1; color: var(--humo);
}
.tarjeta__lineas span { flex: 1; padding-bottom: 2px; border-bottom: 1px solid #BDBDBD; }

/* Una nota doblada, con una de las preguntas que más le hacen */
.nota {
  position: absolute; inset: 0;
  display: grid; place-items: center; padding: 8% 11%;
  background: linear-gradient(170deg, #F4F4F4 0 47%, var(--pared) 48% 100%);
  box-shadow: 0 calc(var(--uo) * .9) calc(var(--uo) * 2.4) rgba(0, 0, 0, .6);
}
.nota::after {
  content: ''; position: absolute; right: 0; top: 0; width: 20%; aspect-ratio: 1;
  background: linear-gradient(225deg, var(--negro) 50%, #C4C5C8 50%);
}
.nota__texto { font-family: var(--display); font-size: calc(var(--uo) * 2.75); line-height: 1.12; text-align: center; color: var(--negro); }

/* La escarapela de oro de sus seis premios, prendida en el marco */
.roseta__vaiven { position: absolute; inset: 0; transform-origin: var(--pivote, 50% 25%); }
.roseta { position: absolute; inset: 0; }
.roseta__plisado {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: repeating-conic-gradient(from 3deg, #E3CC92 0 6deg, #A9843C 6deg 12deg);
  box-shadow: 0 calc(var(--uo) * .8) calc(var(--uo) * 2) rgba(0, 0, 0, .65), inset 0 0 0 max(1px, calc(var(--uo) * .3)) rgba(133, 103, 44, .9);
}
.roseta__centro {
  width: 64%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 40% 34%, #262626, var(--negro) 72%);
  box-shadow: inset 0 0 0 max(1px, calc(var(--uo) * .28)) var(--oro), 0 0 0 max(1px, calc(var(--uo) * .35)) #85672C;
  font-family: var(--sans); font-weight: 300; font-size: calc(var(--uo) * var(--ow) * .38); line-height: 1;
  color: var(--oro); font-variant-numeric: lining-nums;
}
.roseta__cola {
  position: absolute; top: 28%; width: 36%; height: 72%;
  background: linear-gradient(90deg, #85672C, var(--oro) 28%, #E3CC92 50%, var(--oro) 72%, #85672C);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  transform-origin: 50% 0;
}
.roseta__cola--a { left: 14%; transform: rotate(13deg); }
.roseta__cola--b { right: 14%; transform: rotate(-13deg); }

/* ---- Vertical: dos objetos asoman por arriba del marco y tres por abajo ----
   (posición del enlace; --fx/--fy anclan el objeto por el lado del marco; --l* colocan el rótulo) */
.objeto--nota     { --ow: 20; --oh: 15.5; --r: -6deg; --pivote: 74% 92%; --fx: 0%; --fy: 100%; left: calc(var(--u) * -1.5); bottom: calc(100% - var(--u) * 4); --lx: 0%; --ly: 0%; --ltx: 0%; --lty: -55%; }
.objeto--polaroid { --ow: 16; --oh: 25.5; --r: 7deg; --pivote: 34% 94%; --fx: 100%; --fy: 100%; right: calc(var(--u) * 2.5); bottom: calc(100% - var(--u) * 5.2); --lx: 100%; --ly: 0%; --ltx: -100%; --lty: -55%; }
.objeto--tarjeta  { --ow: 26; --oh: 15.6; --r: 4deg; --pivote: 50% 6%; --fx: 0%; --fy: 0%; left: calc(var(--u) * -1.5); top: calc(var(--u) * 108.8); --lx: 0%; --ly: 100%; --ltx: 0%; --lty: -45%; }
.objeto--roseta   { --ow: 13; --oh: 25; --r: 0deg; --pivote: 50% 26%; --fx: 50%; --fy: 0%; left: calc(50% - max(22px, var(--uo) * 6.5)); top: calc(var(--u) * 108); --lx: 50%; --ly: 100%; --ltx: -50%; --lty: -35%; }
.objeto--copia    { --ow: 23.5; --oh: 18.2; --r: -5deg; --pivote: 50% 6%; --fx: 100%; --fy: 0%; right: calc(var(--u) * -1.5); top: calc(var(--u) * 108.8); --lx: 100%; --ly: 100%; --ltx: -100%; --lty: -45%; }

/* ---- A dos lados (escritorio) y compacta (móvil en horizontal): los objetos asoman por los costados ---- */
@media (min-width: 900px) and (min-aspect-ratio: 5/4), (orientation: landscape) and (max-height: 540px) and (max-width: 1023px) {
  /* Ya solo cuelga la escarapela por la izquierda: a la derecha no hay que
     reservar sitio para objetos que no existen. */
  .tocador { --pt: 1; --pr: 4; --pb: 1; --pl: 22.5; }
  .objeto--polaroid { --ow: 21; --oh: 33.4; --r: 7deg; --pivote: 6% 50%; --fx: 0%; --fy: 0%; left: calc(var(--u) * 85); right: auto; top: calc(var(--u) * 4); bottom: auto; --lx: 4%; --ly: 100%; --ltx: 0%; --lty: 16px; }
  .objeto--copia    { --ow: 25; --oh: 19.4; --r: -6deg; --pivote: 6% 50%; --fx: 0%; --fy: 0%; left: calc(var(--u) * 83.6); right: auto; top: calc(var(--u) * 83); --lx: 6%; --ly: 100%; --ltx: 0%; --lty: 12px; }
  .objeto--roseta   { --ow: 17; --oh: 34; --r: -3deg; --pivote: 50% 25%; --fx: 100%; --fy: 0%; left: auto; right: calc(100% - var(--u) * 6.5); top: calc(var(--u) * 10); --lx: 96%; --ly: 100%; --ltx: -100%; --lty: 6px; }
  .objeto--nota     { --ow: 19; --oh: 17; --r: -7deg; --pivote: 92% 50%; --fx: 100%; --fy: 0%; left: auto; right: calc(100% - var(--u) * 5.5); top: calc(var(--u) * 56); bottom: auto; --lx: 96%; --ly: 100%; --ltx: -100%; --lty: 14px; }
  .objeto--tarjeta  { --ow: 27; --oh: 16.5; --r: 5deg; --pivote: 90% 50%; --fx: 100%; --fy: 0%; left: auto; right: calc(100% - var(--u) * 6); top: calc(var(--u) * 92); --lx: 96%; --ly: 0%; --ltx: -100%; --lty: calc(-100% - 14px); }
}

/* ---- A dos lados (escritorio y tableta en horizontal) ---- */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero__escena {
    --pad: clamp(14px, 2.4cqh, 30px);
    /* El ancho del tocador sale del alto: el marco y lo que asoma por los lados */
    --col: min(calc((100cqh - 2 * var(--pad)) / 1.17 * 1.325), calc((min(100cqw, var(--ancho-escena, 1760px)) - 2 * var(--gutter)) * .65));
    max-width: var(--ancho-escena, 1760px);
    grid-template-columns: minmax(0, 1fr) var(--col);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'texto tocador';
    column-gap: clamp(20px, 2.6vw, 48px);
    padding-block: var(--pad);
  }
  .hero__texto {
    grid-area: texto; justify-self: stretch; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    /* Aire por la izquierda: el texto no se pega al borde de la ventana */
    padding-left: clamp(16px, 4.6cqw, 84px);
    container-type: inline-size;
  }
  .hero__titulo { text-align: left; margin-bottom: 0; }
  .hero__nombre { font-size: min(calc(100cqw / 3.85), 19cqh, 11rem); line-height: .9; white-space: normal; }
  .hero__palabra { display: block; }
  /* El subtítulo es una sola frase: no se parte dejando «Madrid» solo. */
  .hero__sub { margin-top: clamp(14px, 2.6cqh, 28px); text-align: left; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); white-space: nowrap; }
  .hero__acciones { justify-content: flex-start; margin-top: clamp(18px, 3.4cqh, 36px); }
  .hero__acciones .enlace { display: inline-flex; flex-basis: auto; margin-left: 8px; }
}

/* ---- Compacta (móvil en horizontal): el tocador a la izquierda ---- */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1023px) {
  .hero__escena {
    --col: calc((100cqh - 16px) / 1.17 * 1.325);
    grid-template-columns: var(--col) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'tocador texto';
    column-gap: clamp(14px, 3vw, 32px);
    padding-block: 8px;
  }
  .hero__texto {
    grid-area: texto; justify-self: stretch; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px;
  }
  .hero__titulo { text-align: left; margin-bottom: 0; }
  .hero__nombre { font-size: min(calc((100cqw - var(--col) - 2 * var(--gutter) - 32px) / 7.15), 15cqh, 3.6rem); }
  .hero__sub { text-align: left; }
  .hero__acciones { justify-content: flex-start; }
  .hero__acciones .enlace { display: none; }
  .objeto__rotulo { opacity: 1; transform: translate(var(--ltx, -50%), var(--lty, 0px)); font-size: .6875rem; padding: .34em .75em .38em; }
  .objeto__rotulo .sin-movil { display: none; }
  .objeto__rotulo .solo-movil { display: inline; }
}

/* =====================================================================
   CABECERAS DE SECCIÓN
   ===================================================================== */
.seccion-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: clamp(40px, 6vw, 84px); }
@media (min-width: 1024px) {
  .seccion-cab { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(40px, 6vw, 96px); }
  .seccion-cab .entradilla { padding-bottom: .6em; }
}

/* =====================================================================
   2 · SERVICIOS: la vitrina
   ===================================================================== */
.servicios { background: var(--blanco); padding-block: var(--sec); }
.vitrina { display: none; }

.carta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 360px);
  gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter));
  padding: 8px var(--gutter) 18px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.carta::-webkit-scrollbar { display: none; }
.serv {
  --k: 0;
  scroll-snap-align: center;
  transform: scale(calc(1 - .07 * var(--k))) translateY(calc(var(--k) * 12px));
  opacity: calc(1 - .45 * var(--k));
  transform-origin: 50% 70%;
}
.serv__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--negro); border-radius: 3px; margin: 0; }
.serv__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Maquillaje: su foto original es pequeña (224 px); se enseña nítida, sobre un fondo de ella misma difuminado */
.serv__foto--pequena .serv__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.75); transform: scale(1.3); }
.serv__foto--pequena .serv__nitida {
  position: absolute; left: 50%; top: 50%; width: min(62%, 240px); height: auto;
  transform: translate(-50%, -50%); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7);
  outline: 6px solid var(--blanco);
}
.serv__cuerpo { position: relative; padding: 20px 2px 6px; display: grid; gap: 12px; justify-items: start; }
.serv__nombre {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--tinta);
}
.serv__nombre .picto { width: 30px; height: 30px; stroke-width: 1.3; }
.serv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.serv__chips li { font-size: .8125rem; line-height: 1.2; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--linea); color: var(--humo); }
.serv__texto { font-size: 1rem; line-height: 1.68; color: var(--texto); max-width: 52ch; }
.carta__pista { margin-top: 4px; font-size: .8125rem; color: var(--humo); }

@media (min-width: 1024px) {
  .servicios__cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 104px); align-items: start; }
  .vitrina {
    display: flex; flex-direction: column; gap: 16px;
    position: sticky; top: calc(var(--cab-h) + 3svh);
    height: calc(100svh - var(--cab-h) - 6svh);
  }
  .vitrina__marco { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--negro); border-radius: 2px; }
  .vitrina__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.07); transition: opacity .8s var(--e-out), transform 1.4s var(--e-out); }
  .vitrina__foto.activa { opacity: 1; transform: none; }
  .vitrina__foto--pequena { display: block; }
  .vitrina__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(24px) brightness(.7); transform: scale(1.3); }
  .vitrina__nitida { position: absolute; left: 50%; top: 50%; width: min(58%, 300px); height: auto; transform: translate(-50%, -50%); outline: 8px solid var(--blanco); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
  /* La luz que barre el marco al cambiar de servicio */
  .vitrina__luz { position: absolute; inset: -10%; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); }
  .vitrina__pie { font-family: var(--display); font-size: clamp(1.8rem, 1.2rem + 1.2vw, 2.6rem); line-height: 1.1; color: var(--tinta); height: 1.2em; overflow: hidden; }
  .vitrina__pie span { display: block; }

  .carta {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr);
    overflow: visible; margin: 0; padding: 0; gap: 0; scroll-snap-type: none;
  }
  .serv {
    --k: 0; transform: none; opacity: 1;
    position: relative; padding-block: clamp(30px, 6.5svh, 64px);
    min-height: 40svh; display: flex; align-items: center;
  }
  /* La línea de cada servicio: gris en reposo, se dibuja en negro al activarse */
  .serv::before, .serv::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
  .serv::before { background: var(--linea); }
  .serv::after { background: var(--tinta); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--e-out); }
  .serv.activo::after { transform: scaleX(1); }
  .serv__foto { display: none; }
  .serv__cuerpo { padding: 0; gap: 16px; }
  .serv__nombre { font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4.4rem); transition: transform .7s var(--e-out), opacity .5s var(--e-out); }
  .serv__nombre .picto { width: .62em; height: .62em; stroke-width: 1; }
  .serv__chips, .serv__texto, .serv__cuerpo > .boton { transition: opacity .5s var(--e-out), transform .7s var(--e-out); }
  .serv:not(.activo) .serv__nombre { opacity: .45; }
  .serv:not(.activo) .serv__chips, .serv:not(.activo) .serv__texto, .serv:not(.activo) .serv__cuerpo > .boton { opacity: .4; transform: translateY(6px); }
  /* En capturas y PDF no hay scroll: todos los servicios se leen completos */
  html.captura .serv:not(.activo) .serv__nombre, html.captura .serv:not(.activo) .serv__chips, html.captura .serv:not(.activo) .serv__texto, html.captura .serv:not(.activo) .serv__cuerpo > .boton { opacity: 1; transform: none; }
  .serv.activo .serv__nombre { transform: translateX(10px); }
  .carta__pista { display: none; }
}

/* =====================================================================
   3 · PIDE TU CITA: la tarjeta de reserva sobre sus espejos
   Compacta: cada servicio en una línea, los días en una tira estrecha y
   el resguardo como un talón al lado. Lo que deja libre la tarjeta lo
   ganan el titular y la foto de su salón, que se ve alrededor.
   ===================================================================== */
.cita {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(80px, min(11vw, 16svh), 150px);
  color: var(--blanco); background: var(--negro);
  --foco: var(--blanco);
}
.cita__fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .72; transform: scale(var(--zoom, 1.1)); }
/* Oscuro bajo el texto; más claro alrededor de la tarjeta, donde se ven sus espejos */
.cita::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .78) 36%, rgba(0, 0, 0, .42) 66%, rgba(0, 0, 0, .58) 100%),
    linear-gradient(to top, rgba(0, 0, 0, .6), transparent 42%);
}
.cita__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.cita__intro { display: grid; gap: 22px; justify-items: start; align-content: start; }
.cita__intro .titulo { color: var(--blanco); }
.cita__intro .entradilla { color: rgba(255, 255, 255, .8); max-width: 38ch; }

.reserva {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; max-width: 700px;
  background: var(--blanco); color: var(--texto);
  border-radius: 14px;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
  --foco: var(--negro);
}
.reserva__progreso { position: absolute; left: 0; right: 0; top: 0; height: 3px; overflow: hidden; border-radius: 14px 14px 0 0; background: #EEE; }
.reserva__progreso span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #A9843C, #E3CC92 55%, #B8913F);
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.reserva__form { display: grid; gap: 22px; padding: 24px 16px 22px; }
.paso { border: 0; min-width: 0; }
.paso legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 10px; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--tinta); }
/* El número del paso, en Onest (el «1» de Italiana se lee como una «I»); se rellena al completarlo */
.paso__n {
  width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; box-shadow: inset 0 0 0 1px var(--tinta);
  font-size: .75rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums;
}
.paso:has(input:checked) .paso__n,
.paso:has(input[name="nombre"]:not(:placeholder-shown)) .paso__n { background: var(--negro); color: var(--blanco); }

/* Paso 1: los servicios, cada uno en una línea (pictograma y nombre) */
.mosaico-serv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pieza { position: relative; display: block; }
.pieza input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3; }
.pieza__cara {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; height: 100%; padding: 0 12px 0 11px;
  border-radius: 10px; background: var(--suave);
  font-size: .875rem; font-weight: 600; line-height: 1.2;
}
/* La tinta que llena lo elegido desde donde se toca: el mismo gesto que los botones */
.pieza__cara::before, .dia__cara::before {
  content: ''; position: absolute; z-index: 0; left: var(--rx, 50%); top: var(--ry, 50%);
  width: 250%; aspect-ratio: 1; border-radius: 50%;
  background: var(--negro); pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
}
/* Pictograma y nombre se invierten justo donde pasa la tinta */
.pieza__cara > .picto, .pieza__nombre { position: relative; z-index: 1; color: var(--blanco); mix-blend-mode: difference; }
.pieza__cara > .picto { width: 20px; height: 20px; }
.pieza__nombre { white-space: nowrap; }
.pieza:hover .pieza__cara { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--tinta); }
.pieza input:checked + .pieza__cara { box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .7); }
.pieza input:checked + .pieza__cara::before { transform: translate(-50%, -50%) scale(1); }
.pieza input:active + .pieza__cara { transform: scale(.97); }
.pieza input:focus-visible + .pieza__cara { outline: 2px solid var(--negro); outline-offset: 3px; }
/* El visto de oro: al final de la línea si cabe; en móviles estrechos, prendido en la esquina del pictograma */
.pieza__ok {
  position: absolute; z-index: 2; left: 22px; top: calc(50% + 1px);
  width: 16px; height: 16px; display: grid; place-items: center;
  border-radius: 50%; background: var(--oro); color: var(--negro);
  box-shadow: 0 0 0 2px var(--negro);
  opacity: 0; transform: scale(.4);
}
.pieza__ok .ico { width: 10px; height: 10px; stroke-width: 3.2; }
.pieza input:checked + .pieza__cara .pieza__ok { opacity: 1; transform: none; }

/* Paso 2: los días, en una tira estrecha */
.dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dia { position: relative; display: block; }
.dia input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3; }
.dia__cara {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60px; height: 100%; padding: 6px 2px 9px;
  border-radius: 10px; background: var(--suave); text-align: center; line-height: 1.15;
}
.dia__cara::before { width: 330%; }
.dia__cara > * { position: relative; z-index: 1; color: var(--blanco); mix-blend-mode: difference; }
.dia__cara b { font-size: .6875rem; font-weight: 600; }
/* Números en Onest: el «1» de Italiana se confunde con una «I» */
.dia__num { font-family: var(--sans); font-weight: 400; font-size: 1.25rem; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
.dia__cara small { font-size: .6875rem; color: #999; }
/* El subrayado de oro del día elegido */
.dia__cara::after {
  content: ''; position: absolute; z-index: 2; left: 32%; right: 32%; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--oro); transform: scaleX(0);
}
.dia:hover .dia__cara { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--tinta); }
.dia input:checked + .dia__cara { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .7); }
.dia input:checked + .dia__cara::before { transform: translate(-50%, -50%) scale(1); }
.dia input:checked + .dia__cara::after { transform: scaleX(1); }
.dia input:active + .dia__cara { transform: scale(.95); }
.dia input:focus-visible + .dia__cara { outline: 2px solid var(--negro); outline-offset: 3px; }

/* Paso 3: mañana o tarde, con un pulgar que se desliza */
.segmento { position: relative; display: grid; grid-template-columns: repeat(var(--ops, 2), minmax(0, 1fr)); padding: 4px; border-radius: 999px; background: var(--suave); }
.segmento__op { position: relative; z-index: 1; display: block; }
.segmento__op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmento__op span {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 0 7px;
  min-height: 44px; padding: 4px 12px; border-radius: 999px; text-align: center;
  font-size: .875rem; font-weight: 600; line-height: 1.25; color: var(--tinta);
}
.segmento__op small { font-size: .75rem; font-weight: 400; color: var(--humo); }
/* Móvil: el horario siempre debajo, en las dos franjas por igual */
@media (max-width: 559px) { .segmento__op span { flex-direction: column; align-items: center; } }
.segmento__op:hover span { box-shadow: inset 0 0 0 1px var(--tinta); }
.segmento__op:has(input:checked) span { color: var(--blanco); box-shadow: none; }
.segmento__op:has(input:checked) small { color: rgba(255, 255, 255, .72); }
.segmento__op:has(input:disabled) span { opacity: .45; box-shadow: none; }
.segmento__op:has(input:disabled) input { cursor: not-allowed; }
.segmento__op:has(input:enabled:active) span { transform: scale(.97); }
.segmento__op input:focus-visible + span { outline: 2px solid var(--negro); outline-offset: 2px; }
.segmento__pulgar {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--ops, 2));
  border-radius: 999px; background: var(--negro);
  transform: translateX(calc(var(--pos, 0) * 100%));
  opacity: var(--vis, 0);
}

/* Paso 4: nombre y teléfono, con la etiqueta que sube */
.campos { display: grid; gap: 8px; }
.campo { position: relative; display: block; }
.campo input {
  width: 100%; height: 48px; padding: 17px 14px 3px;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco);
  font-size: 1rem; color: var(--tinta);
}
.campo input:hover { border-color: var(--humo); }
.campo input:focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; border-color: var(--negro); }
.campo span {
  position: absolute; left: 15px; top: 50%; pointer-events: none;
  font-size: .9375rem; line-height: 1.2; color: var(--humo);
  transform-origin: left center; transform: translateY(-50%);
}
.campo input:focus + span, .campo input:not(:placeholder-shown) + span { transform: translateY(-118%) scale(.76); }

/* El resguardo: un talón que se rellena solo, con la hoja del día y el sello */
.ticket {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start;
  grid-template-areas: "cab fecha" "sello fecha" "lista lista" "acciones acciones" "nota nota";
  column-gap: 14px;
  padding: 22px 16px 20px;
  background: #F7F7F7; border-top: 2px dashed #D6D6D6; border-radius: 0 0 14px 14px;
}
.ticket__cab { grid-area: cab; font-family: var(--display); font-size: 1.75rem; line-height: 1.05; color: var(--tinta); }
.ticket__lista { grid-area: lista; margin-top: 10px; }
.ticket__lista > div { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dotted #CFCFCF; }
.ticket__lista dt { font-size: .75rem; color: var(--humo); }
.ticket__lista dd { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--tinta); overflow-wrap: anywhere; }
.ticket__lista dd.vacio { font-weight: 400; color: #8A8A8A; }
.ticket__sello {
  grid-area: sello; justify-self: start; align-self: center;
  padding: 4px 10px 3px; border: 2px solid var(--oro-osc); border-radius: 4px;
  font-family: var(--display); font-size: 1.05rem; line-height: 1.2; letter-spacing: .1em; color: var(--oro-osc);
  opacity: 0; transform: rotate(-8deg);
}
.reserva.lista .ticket__sello { opacity: 1; }
.ticket__acciones { grid-area: acciones; display: grid; gap: 8px; margin-top: 16px; }
.ticket .boton { min-height: 48px; padding-inline: 1.2em; font-size: .9375rem; }
.ticket__nota { grid-area: nota; margin-top: 10px; font-size: .8125rem; line-height: 1.45; color: var(--humo); }
.ticket__nota.aviso { color: var(--tinta); font-weight: 600; }

/* Móviles muy estrechos: todo cabe sin perder el pictograma */
@media (max-width: 359px) {
  .reserva__form, .ticket { padding-inline: 12px; }
  .pieza__cara { gap: 7px; padding: 0 8px; font-size: .8125rem; }
  .pieza__cara > .picto { width: 18px; height: 18px; }
  .pieza__ok { left: 17px; }
}
@media (min-width: 360px) {
  /* Seis días en fila, nunca más anchos de 60 px */
  .dias { grid-template-columns: repeat(6, minmax(0, 60px)); justify-content: space-between; }
  .campos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 414px) {
  .pieza__ok { position: relative; left: auto; top: auto; margin-left: auto; width: 18px; height: 18px; box-shadow: none; }
  .pieza__ok .ico { width: 11px; height: 11px; }
}
@media (min-width: 560px) {
  .reserva__form { padding: 26px 24px 24px; }
  .ticket { padding: 24px 24px 22px; }
}
/* El resguardo pasa al lado, como el talón de un billete; el sello cae en el hueco sobre los botones */
@media (min-width: 720px) {
  .reserva { grid-template-columns: minmax(0, 1fr) minmax(0, 252px); }
  .reserva__form { gap: 20px; }
  .ticket {
    grid-template-areas: "cab fecha" "lista lista" "sello sello" "acciones acciones" "nota nota";
    grid-template-rows: auto auto 1fr auto auto;
    padding: 26px 20px 22px;
    border-top: 0; border-left: 2px dashed #D6D6D6; border-radius: 0 14px 14px 0;
  }
  .ticket__lista { margin-top: 14px; }
  .ticket__sello { justify-self: end; margin: 14px 8px 4px 0; font-size: 1.25rem; }
}
/* Tableta en vertical: la tarjeta, de margen a margen */
@media (min-width: 720px) and (max-width: 899px) {
  .reserva { max-width: none; }
}
@media (min-width: 1180px) {
  .cita__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 680px); column-gap: clamp(48px, 6vw, 112px); align-items: center; }
  .cita__intro { gap: 28px; }
  .cita__intro .titulo { font-size: clamp(5.75rem, 2rem + 5vw, 8rem); }
}

/* =====================================================================
   4 · EL SALÓN: la pared de espejos
   ===================================================================== */
.salon { background: var(--pared); color: var(--texto); padding-block: var(--sec); overflow: hidden; }
.salon__texto { display: grid; gap: 14px; color: var(--texto); max-width: 60ch; }
.pared {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 48px) clamp(16px, 4vw, 44px);
  align-items: start;
  padding-bottom: 30px;
}
.espejo--pared:nth-child(even) { margin-top: 56px; }
.espejo--pared .espejo__marco { padding: clamp(6px, .8vw, 10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 34px 60px -34px rgba(0, 0, 0, .55); }
/* Sobre su pared clara, el LED se ve como un halo blanco más intenso */
.espejo--pared .espejo__marco::before { box-shadow: 0 0 10px 3px #fff, 0 0 34px 10px rgba(255, 255, 255, .95), 0 0 90px 30px rgba(255, 255, 255, .7); }
.espejo__luna { position: relative; display: block; overflow: hidden; aspect-ratio: 10 / 17; background: #111; }
.espejo__luna img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; transform: translateY(var(--py, 0%)); }
/* La luz que responde al cursor (la mueve movimiento.css; en reposo no se ve nada).
   La pared apila aparte: el LED de cada espejo queda detrás de todos los marcos.
   El halo de la revelación (::before del marco), que siempre ha quedado bajo el
   fondo de la sección, se recorta dentro de su marco: el reposo no cambia. */
.pared { isolation: isolate; }
.espejo--pared { position: relative; }
.espejo--pared .espejo__marco { overflow: hidden; }
/* El LED: la fuente queda metida tras el marco (inset) y solo asoma su luz, nunca su borde */
.espejo--pared::before {
  content: ''; position: absolute; inset: 22px; z-index: -1; border-radius: 3px; pointer-events: none;
  box-shadow: 0 0 16px 26px #fff, 0 0 50px 36px rgba(255, 255, 255, .9), 0 0 130px 60px rgba(255, 255, 255, .6);
  opacity: 0;
}
/* En la luna: un velo para bajar la luz y el reflejo del cristal */
.espejo--pared .espejo__luna::before,
.espejo--pared .espejo__luna::after { content: ''; position: absolute; pointer-events: none; opacity: 0; }
.espejo--pared .espejo__luna::before { inset: 0; z-index: 1; background: var(--negro); }
.espejo--pared .espejo__luna::after {
  inset: -12% -40%; z-index: 2;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .38) 47%, transparent 53%, transparent 55.4%, rgba(255, 255, 255, .34) 56.4%, transparent 57.4%);
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 36%, #000 64%, transparent 94%);
  mask-image: linear-gradient(180deg, transparent 6%, #000 36%, #000 64%, transparent 94%);
}
.salon__pie { display: grid; gap: 36px; margin-top: clamp(40px, 6vw, 90px); }
.salon__cita p {
  font-family: var(--display); font-size: clamp(2.1rem, 1.3rem + 3vw, 4.4rem); line-height: 1.1;
  color: var(--tinta); max-width: 22ch; text-wrap: balance;
}
.salon__cita .w { transition: opacity .5s var(--e-out); }

@media (min-width: 1024px) {
  .seccion-cab--salon { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pared { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .espejo--pared:nth-child(even) { margin-top: 0; }
  .espejo--pared:nth-child(2) { margin-top: 110px; }
  .espejo--pared:nth-child(3) { margin-top: 36px; }
  .espejo--pared:nth-child(4) { margin-top: 150px; }
  .salon__pie { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; column-gap: 48px; }
  .salon__pie .acciones { justify-content: flex-end; }
}

/* =====================================================================
   5 · TRAYECTORIA
   ===================================================================== */
.trayectoria { background: var(--negro); color: var(--blanco); padding-block: var(--sec); --foco: var(--blanco); }
.tray { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.tray__lorena { display: grid; gap: 30px; align-content: start; justify-items: start; }
/* Un marco de oro, como el de un diploma. La foto, con el encuadre de su web. */
.marco-oro { position: relative; margin: 0; padding: 12px; border: 1px solid rgba(201, 165, 92, .6); width: min(100%, 460px); }
.marco-oro::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(201, 165, 92, .22); pointer-events: none; }
.marco-oro img { display: block; width: 100%; height: auto; }
.marco-oro::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(227, 204, 146, .4) 50%, transparent 62%);
  transform: translateX(-130%);
}
.tray__cita p { font-family: var(--display); font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.12; max-width: 20ch; }
.tray__cita footer { margin-top: 12px; font-size: .9rem; color: var(--humo-claro); }
.tray__texto { display: grid; gap: 20px; align-content: start; }
.tray__texto .titulo { color: var(--blanco); }
.tray__sub { font-family: var(--display); font-size: clamp(1.8rem, 1.25rem + 1.8vw, 2.8rem); line-height: 1.12; color: var(--oro); max-width: 24ch; }
.tray__texto .entradilla { color: rgba(255, 255, 255, .72); }
.tray__texto .acciones { margin-top: 18px; }

/* La línea de tiempo: el hilo de oro avanza con la lectura */
.linea { position: relative; margin-top: 18px; padding-left: 34px; --prog: 1; }
.linea::before, .linea::after { content: ''; position: absolute; left: 6px; top: 26px; bottom: 30px; width: 1px; }
.linea::before { background: rgba(255, 255, 255, .14); }
.linea::after { background: linear-gradient(180deg, #E3CC92, var(--oro)); transform-origin: top; transform: scaleY(var(--prog)); }
.hito {
  position: relative;
  display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 2px 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.hito:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }
/* La medalla de cada hito sobre el hilo */
.hito::before {
  content: ''; position: absolute; left: -34px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
  border-radius: 50%; background: var(--negro); box-shadow: inset 0 0 0 1.5px var(--oro);
}
.hito::after {
  content: ''; position: absolute; left: -34px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
  border-radius: 50%; background: var(--oro);
  box-shadow: 0 0 0 5px rgba(201, 165, 92, .18), 0 0 18px 2px rgba(201, 165, 92, .55);
}
.hito__año { font-family: var(--display); font-size: 2.1rem; line-height: 1; color: var(--oro); }
.hito__nombre { font-weight: 600; line-height: 1.35; color: var(--blanco); }
.hito__quien { font-size: .875rem; line-height: 1.45; color: var(--humo-claro); margin-top: 2px; }
.hito__logo {
  display: none; width: 66px; height: 66px; padding: 6px; border-radius: 6px;
  background: var(--blanco); place-items: center;
}
.hito__logo img { max-height: 100%; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.08); }
.hito--inicio .hito__año { color: var(--blanco); }
@media (min-width: 560px) {
  .hito { grid-template-columns: 78px minmax(0, 1fr) auto; }
  .hito__logo { display: grid; }
}
@media (min-width: 1024px) {
  .tray { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(56px, 7vw, 120px); align-items: start; }
  .tray__lorena { position: sticky; top: calc(var(--cab-h) + 5svh); }
}

/* =====================================================================
   6 · PREGUNTAS FRECUENTES: una conversación
   ===================================================================== */
.preguntas { background: var(--blanco); padding-block: var(--sec); }
.preguntas__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.preguntas__intro { display: grid; gap: 20px; justify-items: start; align-content: start; }
.preguntas__otra { color: var(--texto); font-weight: 500; }

.chat {
  display: flex; flex-direction: column; width: 100%; max-width: 680px;
  border-radius: 24px; overflow: hidden;
  background: var(--suave);
  box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .06);
}
.chat__cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--negro); color: var(--blanco); }
.chat__avatar {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6); font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em;
}
.chat__nombre { font-weight: 600; line-height: 1.2; }
.chat__estado { font-size: .8125rem; color: var(--humo-claro); line-height: 1.3; }
.chat__mensajes {
  display: flex; flex-direction: column; gap: 10px;
  height: clamp(320px, 50svh, 470px); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 16px;
}
.burbuja {
  max-width: 84%; padding: 11px 15px 12px; border-radius: 18px;
  font-size: .97rem; line-height: 1.55;
}
.burbuja--salon { align-self: flex-start; background: var(--blanco); color: var(--texto); border-bottom-left-radius: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); transform-origin: 0 100%; }
.burbuja--yo { align-self: flex-end; background: var(--negro); color: var(--blanco); border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.burbuja a { color: inherit; font-weight: 600; }
.escribiendo { align-self: flex-start; display: inline-flex; gap: 5px; padding: 15px 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--blanco); }
.escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: #9A9A9A; }
.chat__preguntas { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: var(--blanco); border-top: 1px solid #E8E8E8; }
.chat__preguntas[hidden] { display: none; }
.pregunta-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--tinta); background: var(--blanco); color: var(--tinta);
  font-size: .92rem; font-weight: 500; line-height: 1.25; text-align: left;
  transition: transform .45s var(--e-muelle);
}
.pregunta-btn:hover { transform: translateY(-3px); background: var(--negro); color: var(--blanco); }
.pregunta-btn:active { transform: scale(.95); }
.pregunta-btn.hecha { border-color: var(--linea); color: var(--humo); }
.pregunta-btn.hecha:hover { color: var(--blanco); }
.pregunta-btn .ico { width: 15px; height: 15px; stroke-width: 2.4; color: var(--oro-osc); }
.pregunta-btn:not(.hecha) .ico { display: none; }

@media (min-width: 1024px) {
  .preguntas__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; }
  .chat { justify-self: end; }
}

/* =====================================================================
   7 · NUESTRA UBICACIÓN
   ===================================================================== */
.ubicacion { background: var(--blanco); padding-block: 0 var(--sec); }
.ubicacion__rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: var(--sec); }
.ubicacion__rejilla::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--linea); }
.ubicacion__datos { display: grid; gap: 18px; align-content: start; justify-items: start; }
.ubicacion__dir { font-family: var(--display); font-size: clamp(2.1rem, 1.5rem + 1.8vw, 3.2rem); line-height: 1.08; color: var(--tinta); }
.ubicacion__dir span { display: block; margin-top: 10px; font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--humo); }
.horario { width: 100%; max-width: 460px; font-variant-numeric: tabular-nums; }
.horario th, .horario td { padding: 13px 0; border-bottom: 1px solid var(--linea); font-weight: 400; text-align: left; }
.horario td { text-align: right; }
.horario tr.es-hoy th, .horario tr.es-hoy td { font-weight: 700; color: var(--tinta); }
.horario tr.es-hoy th::after {
  content: 'Hoy'; display: inline-block; margin-left: 10px; padding: 3px 9px;
  border-radius: 999px; background: var(--negro); color: var(--blanco);
  font-size: .72rem; font-weight: 600; vertical-align: 2px;
}
.datos { display: grid; gap: 2px; }
.datos li { display: flex; align-items: center; gap: 12px; }
.datos .ico { color: var(--humo); }
.datos a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 5px; overflow-wrap: anywhere; }
.datos a:hover { text-decoration-color: currentColor; }

.mapa {
  position: relative; min-height: 380px; overflow: hidden; border-radius: 4px;
  /* Mientras carga Google: un plano de calles en su gris */
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27420%27 height=%27420%27%3E%3Cg fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27square%27%3E%3Cpath stroke-width=%2714%27 d=%27M-20 120 440 70M-20 290 440 260M90 -20 140 440M300 -20 270 440%27/%3E%3Cpath stroke-width=%276%27 d=%27M-20 200 440 170M200 -20 215 440M-20 380 260 -20M30 -20 50 440%27/%3E%3C/g%3E%3C/svg%3E") center / 420px 420px,
    var(--pared);
}
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.mapa__pin {
  position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50% 50% 50% 0; background: var(--negro); color: var(--oro);
  transform: translate(-50%, -125%) rotate(-45deg);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .6);
}
.mapa__pin .ico { width: 22px; height: 22px; transform: rotate(45deg); }

@media (min-width: 1024px) {
  .ubicacion__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); }
  .mapa { min-height: 600px; }
}

/* =====================================================================
   PIE
   ===================================================================== */
.pie { background: var(--negro); color: var(--blanco); padding-block: 72px 26px; --foco: var(--blanco); }
.pie__rejilla { display: grid; gap: 30px; }
.pie__marca img { width: 220px; height: auto; }
.pie__marca p { margin-top: 12px; color: var(--humo-claro); }
.pie__tit { font-size: .875rem; font-weight: 600; color: var(--oro); margin-bottom: 8px; }
.pie p { line-height: 1.65; }
.pie__enlaces { display: grid; }
.pie__enlaces a, .pie__base a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 85%; background-repeat: no-repeat;
}
.pie__enlaces a:hover, .pie__base a:hover { background-size: 100% 1px; }
.pie__base { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: 48px; padding-top: 14px; font-size: .875rem; color: var(--humo-claro); }
.pie__base::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255, 255, 255, .14); }
@media (max-width: 1023px) { .pie { padding-bottom: calc(26px + 78px + env(safe-area-inset-bottom)); } }
@media (min-width: 700px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pie__rejilla { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } }

/* =====================================================================
   PEDIR CITA SIEMPRE A MANO
   ===================================================================== */
.flotante { display: none; }
@media (min-width: 1024px) {
  .flotante {
    display: inline-flex; position: fixed; right: 28px; bottom: 28px; z-index: 45;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 18px 40px -14px rgba(0, 0, 0, .6);
    opacity: 0; pointer-events: none;
    transform: translate(var(--mx), calc(var(--my) + 140%)) scale(var(--s));
  }
  .flotante.visible { opacity: 1; pointer-events: auto; transform: translate(var(--mx), var(--my)) scale(var(--s)); }
}
.fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .4);
  transform: translateY(110%);
  --foco: var(--blanco);
}
.fija.visible { transform: none; }
.fija a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; border-radius: 12px; color: var(--blanco); text-decoration: none;
  font-size: .75rem; font-weight: 600; line-height: 1.1;
  transition: transform .2s var(--e-out);
}
.fija a:active { transform: scale(.95); }
.fija .ico { width: 20px; height: 20px; }
.fija__prin { flex-direction: row !important; gap: 8px !important; background: var(--blanco); color: var(--negro) !important; font-size: .98rem !important; border-radius: 999px !important; }
@media (min-width: 1024px) { .fija { display: none; } }

/* Móviles muy estrechos: el hero ya tiene su «Pedir cita» */
@media (max-width: 359px) {
  .cab .boton { display: none; }
}

/* La hoja de calendario del resguardo: el día elegido, como la hoja de un taco */
.ticket__fecha {
  grid-area: fecha; align-self: start;
  display: grid; justify-items: center;
  width: 68px; overflow: hidden;
  border-radius: 8px; background: var(--blanco);
  box-shadow: 0 0 0 1px var(--linea), 0 10px 22px -12px rgba(0, 0, 0, .4);
  perspective: 240px;
}
.ticket__sem { justify-self: stretch; padding: 3px 4px; background: var(--negro); color: var(--blanco); font-size: .6875rem; font-weight: 600; line-height: 1.25; text-align: center; }
.ticket__num { padding-top: 2px; font-family: var(--sans); font-weight: 300; font-size: 1.875rem; line-height: 1.1; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.ticket__mes { padding-bottom: 6px; font-size: .6875rem; line-height: 1.25; color: var(--humo); }
.ticket__fecha.vacia .ticket__num { color: #C9C9C9; }
/* El pie: horario en tres bloques cortos */
.pie__rejilla > div > p + p { margin-top: 6px; }
.pie b { font-weight: 600; }

/* Pantallas muy grandes: la escena se abre para que el espejo llene el alto */
@media (min-width: 1800px) and (min-height: 1000px) and (min-aspect-ratio: 5/4) {
  .hero__escena { --ancho-escena: 2160px; }
}