/* =====================================================================
   LA PELU · Estilistas & Asesores · versión 7 (la tijera de acero en 3D de verdad) + tratamientos del salón (12/10)
   ---------------------------------------------------------------------
   Paleta sacada del propio local: el negro del rótulo, el blanco de su
   letra, el cristal esmerilado del escaparate y el mármol del suelo.
   El color lo pone el pelo (fotos y "Tu tono"); la web se queda quieta.

   Letra: Noto Serif Display fina solo en los titulares, Albert Sans en
   todo lo demás, Allura solo en su nombre (como en su rótulo).

   Movimiento: lo hace el navegador (CSS), solo transform y opacity, con
   una curva de salida rápida. Nada se mueve solo ni sigue al ratón.
   ===================================================================== */

:root {
  /* El local */
  --rotulo: #151413;             /* el negro del rótulo: fondo */
  --rotulo-2: #1B1A18;           /* franjas */
  --rotulo-3: #242220;           /* superficies */
  --tiza: #EDEAE5;               /* el blanco de su letra: titulares */
  --esmerilado: #ADA9A2;         /* el cristal esmerilado: texto */
  --niebla: #8A867F;             /* texto pequeño */
  --marmol: #C9C1B3;             /* el mármol del suelo: el único acento */
  --disco: #DEDCD6;              /* el disco esmerilado del escaparate */
  --linea: rgba(237, 234, 229, 0.10);
  --linea-2: rgba(237, 234, 229, 0.20);
  --abierto: #9CC5A6;            /* solo el punto de "Abierto ahora" */
  --ambar: #F0B429;              /* solo en modo revisión (?revision) */

  --f-titulo: "Noto Serif Display", Georgia, serif;
  --f-texto: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --f-marca: "Allura", "Segoe Script", cursive;

  --ancho: 1120px;
  --margen: clamp(20px, 5vw, 56px);
  --cab: 72px;
  --seccion: clamp(88px, 10vw, 144px);
  --radio: 6px;                  /* superficies y fotos; lo que se pulsa va en píldora */
  --suave: cubic-bezier(0.23, 1, 0.32, 1);     /* salida rápida: entradas y respuestas */
  --vaiven: cubic-bezier(0.77, 0, 0.175, 1);   /* lo que cruza la pantalla: la persiana */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 12px); scrollbar-gutter: stable;
  background: var(--rotulo); color-scheme: dark; overflow-x: clip;
}
html.bloqueado { overflow: hidden; }
body {
  margin: 0; overflow-x: clip;
  background: var(--rotulo); color: var(--esmerilado);
  font-family: var(--f-texto); font-size: 1rem; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 300; color: var(--tiza); }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { background: var(--marmol); color: var(--rotulo); }
:focus-visible { outline: 2px solid var(--tiza); outline-offset: 4px; border-radius: 4px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sin-corte { white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -80px; z-index: 600; background: var(--tiza); color: var(--rotulo); padding: 12px 18px; font-weight: 600; text-decoration: none; border-radius: var(--radio); }
.saltar:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.etiqueta {
  margin: 0 0 18px; margin-right: -0.3em;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--marmol);
}
.titulo {
  font-family: var(--f-titulo); font-weight: 300;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); line-height: 1.15; letter-spacing: -0.005em;
  text-wrap: balance;
}
.titulo em, .portada__titulo em { font-style: italic; color: var(--marmol); }
.seccion { padding: var(--seccion) var(--margen); }
/* Lo que no se ve no se calcula: cada sección se prepara cuando se acerca a la pantalla (el navegador la
   adelanta antes de que llegue) y recuerda su alto. Medido el 12/10: sin esto, abrir la web obligaba a
   colocar 12.900 px de página de golpe en el móvil */
main > .seccion { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.cabeza { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.cabeza__texto { max-width: 54ch; margin: 18px auto 0; }
.cabeza > .boton { margin-top: 30px; }

/* ---------- Botones: todo lo que se pulsa, en píldora ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-texto); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.3;
  text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .16s var(--suave);
}
.boton svg { width: 18px; height: 18px; flex: none; }
.boton:active { transform: scale(0.97); }
.boton--claro { background: var(--tiza); color: var(--rotulo); }
.boton--linea { background: transparent; color: var(--tiza); border-color: var(--linea-2); }
.boton--pequeno { min-height: 44px; padding: 0 18px; font-size: 0.6875rem; }
@media (hover: hover) and (pointer: fine) {
  .boton--claro:hover { background: var(--marmol); }
  .boton--linea:hover { border-color: var(--tiza); background: rgba(237, 234, 229, 0.05); }
}

.redes { display: flex; flex-wrap: wrap; gap: 8px; }
.redes__boton {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--linea-2); color: var(--tiza); text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .16s var(--suave);
}
.redes__boton svg { width: 18px; height: 18px; }
.redes__boton:active { transform: scale(0.95); }
.redes__boton--mini { width: 44px; height: 44px; border-color: transparent; color: var(--esmerilado); }
@media (hover: hover) and (pointer: fine) {
  .redes__boton:hover { background: var(--tiza); color: var(--rotulo); border-color: var(--tiza); }
  .redes__boton--mini:hover { background: rgba(237, 234, 229, 0.06); color: var(--tiza); border-color: transparent; }
}

/* ===================================================================
   INTRO: una tijera corta la pantalla en diagonal y del corte sale su
   logo (2,9 s; siempre; se salta con un toque, "Saltar" o Escape)
   =================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 500; overflow: hidden;
  animation: intro-seguridad .3s 2.95s forwards;        /* acaba sola, haya JS o no */
}
.intro.fuera { display: none; }
.intro.salta { opacity: 0; transition: opacity .3s ease; }
.intro.salta * { animation-play-state: paused !important; }
/* La escena va girada 6 grados: el corte cruza la pantalla en diagonal */
.intro__escena {
  --ancho: calc(100vw + 16vh + 80px); --alto: calc(100vh + 16vw + 80px);
  position: absolute; left: 50%; top: 50%; width: var(--ancho); height: var(--alto);
  transform: translate(-50%, -50%) rotate(-6deg); perspective: 1600px;
}
/* Lo que asoma por el corte: el fondo con su logo */
.intro__fondo { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(50% 36% at 50% 50%, #24211E 0%, var(--rotulo) 72%); }
.intro__marca { display: grid; justify-items: center; text-align: center; opacity: 0; transform: rotate(6deg); }
.intro__ventana { width: 96px; height: 96px; overflow: visible; }
.intro__aro { fill: none; stroke: var(--linea-2); stroke-width: 1; }
.intro__disco { fill: var(--disco); }
.intro__silueta { fill: var(--rotulo); }
.intro__nombre { margin: 12px 0 0; padding: 0 .1em; font-family: var(--f-marca); font-size: 2.5rem; line-height: 1; color: var(--tiza); }
.intro__lema { margin: 6px 0 0; margin-right: -0.42em; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: var(--niebla); }
/* Las dos mitades de la hoja; al separarse se ve el filo del corte */
.intro__hoja { position: absolute; left: 0; right: 0; height: 50%; background: var(--rotulo); backface-visibility: hidden; }
.intro__hoja--arriba { top: 0; transform-origin: 50% 100%; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.9); }
.intro__hoja--abajo { bottom: 0; transform-origin: 50% 0%; box-shadow: 0 -22px 44px -18px rgba(0, 0, 0, 0.9); }
.intro__hoja::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 8%, rgba(237, 234, 229, 0.3) 35%, rgba(237, 234, 229, 0.45) 50%, rgba(237, 234, 229, 0.3) 65%, transparent 92%);
}
.intro__hoja--arriba::after { bottom: 0; }
.intro__hoja--abajo::after { top: 0; }
/* La línea del corte, que crece detrás de la tijera */
.intro__corte {
  position: absolute; left: 0; top: 50%; width: 100%; height: 1px; margin-top: -0.5px;
  background: linear-gradient(90deg, rgba(237, 234, 229, 0.1), rgba(237, 234, 229, 0.8));
  box-shadow: 0 0 12px rgba(237, 234, 229, 0.35);
  transform: scaleX(0); transform-origin: 0 50%;
}
/* La tijera: acero, inclinada en 3D y con su sombra sobre la hoja */
.intro__tijera {
  --t: clamp(150px, 19vw, 240px);
  position: absolute; left: 0; top: 50%; width: var(--t); aspect-ratio: 260 / 120;
  margin-left: calc(var(--t) * -0.577); margin-top: calc(var(--t) * -0.2308);
  perspective: 700px;
}
.intro__giro { width: 100%; height: 100%; transform: rotateX(16deg) rotateY(-14deg); filter: drop-shadow(0 12px 9px rgba(0, 0, 0, 0.65)); }
.tijera { display: block; width: 100%; height: 100%; overflow: visible; }
.tijera__pieza { transform-box: view-box; transform-origin: 132px 60px; }
.tijera__pieza--1 { transform: rotate(-10deg); }
.tijera__pieza--2 { transform: rotate(10deg); }
.intro__saltar {
  position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 14px; border: 0; background: none; cursor: pointer;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--niebla);
}
/* La coreografía arranca sola en CSS desde el primer fotograma: no espera al JS, que en un móvil
   lento puede tardar en llegar (y entonces solo se pone en hora con ella). Al final la capa se aparta sola */
.intro .intro__tijera { animation: tijera-cruza 1.3s cubic-bezier(.45, .05, .3, 1) .15s both; }
.intro .intro__giro { animation: tijera-ladea .43s ease-in-out .15s 3 alternate both; }
.intro .tijera__pieza--1 { animation: corta-1 .215s ease-in-out .15s 6 alternate both; }
.intro .tijera__pieza--2 { animation: corta-2 .215s ease-in-out .15s 6 alternate both; }
.intro .intro__corte { animation: corte-crece 1.3s cubic-bezier(.45, .05, .3, 1) .15s both, se-apaga .35s ease 1.5s forwards; }
/* Cada pieza lleva UNA sola animación (las dos fases van dentro, con los mismos tiempos de antes): con dos
   animaciones sobre la misma propiedad el navegador no puede pasarlas a la tarjeta gráfica y, en un móvil
   medio, daban tirones mientras la web terminaba de cargar (medido el 12/10) */
.intro .intro__hoja--arriba { animation: hoja-arriba 1.6s linear 1.45s both; }
.intro .intro__hoja--abajo { animation: hoja-abajo 1.6s linear 1.45s both; }
.intro .intro__marca { animation: marca-sale-y-va 1.3s linear 1.5s both; }
.intro .intro__fondo { animation: se-apaga .55s ease 2.35s forwards; }
.intro .intro__saltar { animation: se-apaga .3s ease 2.2s forwards; }
@keyframes tijera-cruza { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(calc(var(--ancho) + var(--t)), 0, 0); opacity: 0; } }
@keyframes tijera-ladea { from { transform: rotateX(16deg) rotateY(-16deg); } to { transform: rotateX(8deg) rotateY(-5deg); } }
@keyframes corta-1 { from { transform: rotate(-11deg); } to { transform: rotate(-1deg); } }
@keyframes corta-2 { from { transform: rotate(11deg); } to { transform: rotate(1deg); } }
@keyframes corte-crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes se-apaga { to { opacity: 0; } }
/* Hojas: se abren (0,65 s, --suave), esperan 0,1 s y salen volando (0,85 s, --vaiven) */
@keyframes hoja-arriba {
  0% { transform: translate3d(0, 0, 0) rotateX(0deg); opacity: 1; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  40.625% { transform: translate3d(0, -13vh, 0) rotateX(7deg); opacity: 1; animation-timing-function: linear; }
  46.875% { transform: translate3d(0, -13vh, 0) rotateX(7deg); opacity: 1; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100% { transform: translate3d(0, -72vh, 0) rotateX(40deg); opacity: 0; }
}
@keyframes hoja-abajo {
  0% { transform: translate3d(0, 0, 0) rotateX(0deg); opacity: 1; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  40.625% { transform: translate3d(0, 13vh, 0) rotateX(-7deg); opacity: 1; animation-timing-function: linear; }
  46.875% { transform: translate3d(0, 13vh, 0) rotateX(-7deg); opacity: 1; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100% { transform: translate3d(0, 72vh, 0) rotateX(-40deg); opacity: 0; }
}
/* Logo: aparece (0,8 s, --suave) y se va (0,5 s, ease). Sin desenfoque: un filtro animado no lo puede mover la tarjeta gráfica */
@keyframes marca-sale-y-va {
  0% { opacity: 0; transform: rotate(6deg) scale(0.88); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  61.538% { opacity: 1; transform: rotate(6deg) scale(1); animation-timing-function: ease; }
  100% { opacity: 0; transform: rotate(6deg) scale(1.04); }
}
/* Con "reducir movimiento": fundido de entrada (0,5 s), quieto 0,6 s y fundido de salida (0,4 s) */
@keyframes marca-suave-y-va {
  0% { opacity: 0; transform: rotate(6deg) scale(1); animation-timing-function: ease; }
  33.333% { opacity: 1; transform: rotate(6deg) scale(1); animation-timing-function: linear; }
  73.333% { opacity: 1; transform: rotate(6deg) scale(1); animation-timing-function: ease; }
  100% { opacity: 0; transform: rotate(6deg) scale(1.04); }
}
@keyframes intro-seguridad { to { opacity: 0; visibility: hidden; } }
/* Telón al tocar el logo de la cabecera (main.js, initMarca): tapa la página con el negro de la intro
   y la web se recarga detrás; la página nueva abre con la intro, del mismo negro, y no se ve el salto */
.telon { position: fixed; inset: 0; z-index: 900; background: var(--rotulo); animation: telon-cae .2s ease-out both; }
.telon.se-va { animation: se-apaga .3s ease forwards; }
@keyframes telon-cae { from { opacity: 0; } }

/* ===================================================================
   CABECERA
   =================================================================== */
.cabecera {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.cabecera.solida { background: rgba(21, 20, 19, 0.92); border-bottom-color: var(--linea); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cabecera.solida { background: rgba(21, 20, 19, 0.97); } }
.cabecera__barra {
  height: var(--cab); max-width: 1280px; margin: 0 auto; padding-inline: var(--margen);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.marca { justify-self: start; min-height: 44px; display: grid; align-content: center; grid-template-columns: auto auto; column-gap: 4px; align-items: center; color: var(--tiza); text-decoration: none; }
.marca__nombre { grid-column: 1; grid-row: 1; font-family: var(--f-marca); font-size: 2rem; line-height: 0.9; padding-inline: 2px; }
.marca__tijeras { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; transform: rotate(-90deg); color: var(--marmol); }
.marca__sub { grid-column: 1; grid-row: 2; justify-self: center; margin-top: 3px; margin-right: -0.46em; font-size: 0.5rem; letter-spacing: 0.46em; line-height: 1; text-transform: lowercase; color: var(--niebla); }
.cabecera__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.cabecera__nav a {
  position: relative; padding: 12px 0; min-height: 44px; box-sizing: border-box;   /* 44 px de alto para el dedo (tableta tumbada) */
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--esmerilado); text-decoration: none; transition: color .2s ease;
}
.cabecera__nav a::after {
  content: ""; position: absolute; left: 0; right: 0.2em; bottom: 6px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--suave);
}
.cabecera__nav a.activa { color: var(--tiza); }
.cabecera__nav a.activa::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .cabecera__nav a:hover { color: var(--tiza); }
  .cabecera__nav a:hover::after { transform: scaleX(1); }
}
.cabecera__acciones { justify-self: end; display: flex; align-items: center; gap: 4px; }
.cabecera__acciones .boton { margin-left: 8px; }
.cabecera__menu { display: none; width: 44px; height: 44px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--linea-2); background: transparent; cursor: pointer; place-items: center; }
.cabecera__menu-rayas, .cabecera__menu-rayas::before, .cabecera__menu-rayas::after {
  display: block; position: relative; width: 16px; height: 1.5px; background: var(--tiza);
  transition: transform .3s var(--suave), background-color .2s ease;
}
.cabecera__menu-rayas::before, .cabecera__menu-rayas::after { content: ""; position: absolute; left: 0; }
.cabecera__menu-rayas::before { top: -5px; }
.cabecera__menu-rayas::after { top: 5px; }
.cabecera__menu[aria-expanded="true"] .cabecera__menu-rayas { background: transparent; }
.cabecera__menu[aria-expanded="true"] .cabecera__menu-rayas::before { transform: translateY(5px) rotate(45deg); }
.cabecera__menu[aria-expanded="true"] .cabecera__menu-rayas::after { transform: translateY(-5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto;
  padding: calc(var(--cab) + 32px) var(--margen) 36px; background: var(--rotulo);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; text-align: center;
}
.menu[hidden] { display: none; }
.menu.abierto { animation: funde .3s var(--suave); }
.menu__nav { display: flex; flex-direction: column; gap: 2px; }
.menu__nav a { font-family: var(--f-titulo); font-weight: 300; font-size: 1.75rem; line-height: 1.3; padding: 6px 12px; color: var(--tiza); text-decoration: none; }
.menu.abierto .menu__nav a { animation: sube .5s var(--suave) backwards; }
.menu.abierto .menu__nav a:nth-child(2) { animation-delay: .04s; }
.menu.abierto .menu__nav a:nth-child(3) { animation-delay: .08s; }
.menu.abierto .menu__nav a:nth-child(4) { animation-delay: .12s; }
.menu.abierto .menu__nav a:nth-child(5) { animation-delay: .16s; }
.menu.abierto .menu__nav a:nth-child(6) { animation-delay: .2s; }
.menu.abierto .menu__nav a:nth-child(7) { animation-delay: .24s; }
.menu__pie { display: grid; justify-items: center; gap: 4px; }
.menu__tel { padding: 8px 0; font-size: 1.125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--tiza); text-decoration: none; }
.menu__pie p { margin: 0 0 14px; font-size: 0.875rem; }

/* ===================================================================
   PORTADA
   =================================================================== */
.portada {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--cab) + clamp(16px, 4vh, 48px)) var(--margen) clamp(48px, 8vh, 88px);
}
/* Su escaparate redondo: el salón a través del cristal, el disco esmerilado y la silueta en negro */
.ventana { position: relative; width: clamp(200px, min(36vh, 64vw), 340px); aspect-ratio: 1; margin-bottom: clamp(26px, 4.5vh, 44px); perspective: 1100px; }
/* Es un diorama: cada capa a su profundidad; al inclinarse (ratón o scroll) se separan */
.ventana__3d, .ventana__giro { position: absolute; inset: 0; transform-style: preserve-3d; }
.ventana__giro { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--suave); }
/* Sombra en el suelo: el escaparate flota como un objeto */
.ventana::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -9%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); filter: blur(5px); pointer-events: none; }
.ventana__canto { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--linea-2); background: radial-gradient(circle, transparent 62%, rgba(0, 0, 0, 0.45) 100%); transform: translateZ(-16px); }
.ventana__brillo { position: absolute; inset: 3.5%; border-radius: 50%; pointer-events: none; transform: translateZ(60px); background: radial-gradient(circle at var(--bx, 30%) var(--by, 25%), rgba(255, 255, 255, 0.14), transparent 46%); }
.ventana__vidrio { position: absolute; inset: 3.5%; overflow: hidden; border-radius: 50%; background: var(--rotulo-3); transform: translateZ(0); }
.ventana__foto { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: brightness(0.56) saturate(0.7); }
.ventana__disco {
  position: absolute; inset: 22%; border-radius: 50%;
  background: rgba(222, 220, 214, 0.93);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 12px 40px rgba(0, 0, 0, 0.35);
  transform: translateZ(32px);
}
.ventana__silueta { position: absolute; left: 50%; top: 50%; width: 58%; height: auto; transform: translate(-50%, -51%) translateZ(48px); fill: var(--rotulo); }
.ventana__texto {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  font-family: var(--f-texto); font-size: 13.5px; font-weight: 600; letter-spacing: 0.3em; fill: var(--tiza);
  transform: translateZ(18px);
}

.portada__texto { max-width: 640px; }
/* El titular de Google: la letra de los títulos en pequeño, en mármol y entre dos filetes finos,
   como el rótulo de una placa. Un tercio del lema de debajo, para que mande el lema a la vista */
.portada__seo {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 16px;
  font-family: var(--f-titulo); font-weight: 300; font-style: italic;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem); line-height: 1.3; letter-spacing: 0.02em;
  color: var(--marmol); text-wrap: balance;
}
.portada__seo::before, .portada__seo::after { content: ""; flex: 0 0 clamp(18px, 4vw, 36px); height: 1px; background: var(--linea-2); }
/* En el móvil más estrecho los filetes partirían el titular en dos: fuera, y cabe en una línea */
@media (max-width: 380px) { .portada__seo::before, .portada__seo::after { display: none; } }
/* Es un <p> desde el 19/10 (el h1 es el de encima): el blanco de los títulos va aquí, no lo da el h1 */
.portada__titulo {
  margin: 0 0 18px; color: var(--tiza);
  font-family: var(--f-titulo); font-weight: 300;
  font-size: clamp(2.25rem, 1.55rem + 2.6vw, 3.5rem); line-height: 1.1; letter-spacing: -0.01em;
}
/* Cada línea es una máscara: el texto sube desde dentro (con hueco para la "g" y la cursiva) */
.linea { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.02em 0.1em 0.16em; margin: 0 -0.06em -0.16em; }
.linea__dentro { display: inline-block; }
.portada__intro { max-width: 42ch; margin: 0 auto 30px; }
.portada__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Entrada de la portada: espera a que se suba la persiana (html.listo) */
html.mueve:not(.listo) .ventana { opacity: 0; transform: scale(0.97); }
html.mueve:not(.listo) .portada__seo,
html.mueve:not(.listo) .portada__intro,
html.mueve:not(.listo) .portada__acciones { opacity: 0; transform: translate3d(0, 12px, 0); }
html.mueve:not(.listo) .linea__dentro { transform: translate3d(0, 108%, 0); }
html.mueve.listo .ventana { transition: opacity .9s var(--suave), transform 1.2s var(--suave); }
html.mueve.listo .portada__seo,
html.mueve.listo .portada__intro,
html.mueve.listo .portada__acciones { transition: opacity .8s var(--suave), transform .9s var(--suave); }
html.mueve.listo .linea__dentro { transition: transform 1s var(--suave); }
html.mueve.listo .portada__seo { transition-delay: .1s; }
html.mueve.listo .linea:nth-child(1) .linea__dentro { transition-delay: .16s; }
html.mueve.listo .linea:nth-child(2) .linea__dentro { transition-delay: .24s; }
html.mueve.listo .portada__intro { transition-delay: .34s; }
html.mueve.listo .portada__acciones { transition-delay: .42s; }

/* Al bajar, el salón se desliza tras el cristal y el letrero gira un poco
   (solo navegadores que lo hacen fuera del hilo principal; en el resto, quieto) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ventana__foto { animation: deriva linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .ventana__texto { animation: gira linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .ventana__3d { animation: diorama linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .portada__texto { animation: portada-sale linear both; animation-timeline: scroll(root); animation-range: 15vh 85vh; }
  }
}
@keyframes deriva { from { transform: scale(1.12) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(0, 7%, 0); } }
@keyframes gira { from { transform: translateZ(18px) rotate(0deg); } to { transform: translateZ(18px) rotate(-18deg); } }
@keyframes diorama { from { transform: none; } to { transform: rotateX(34deg) rotateZ(-6deg) translateZ(-40px); } }
@keyframes portada-sale { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -40px; } }

/* ===================================================================
   APARICIONES (solo con html.mueve; sin JS todo está visible).
   Se reactivan cada vez que vuelves: al bajar entran desde abajo y al
   subir, desde arriba (el JS pone data-lado). Son transiciones, no
   animaciones: si das marcha atrás a mitad, se deshacen suaves. Salen
   rápido y entran despacio. Van con `translate`, no con `transform`,
   para no pisar lo que se mueve ligado al scroll.
   =================================================================== */
@keyframes sube { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes funde { from { opacity: 0; } to { opacity: 1; } }
html.mueve .rv { opacity: 0; translate: 0 26px; transition: opacity .4s ease, translate .45s var(--suave); }
html.mueve .rv[data-lado="arriba"] { translate: 0 -26px; }
html.mueve .rv.visto {
  opacity: 1; translate: none;
  transition: opacity .9s var(--suave), translate 1.1s var(--suave); transition-delay: calc(var(--i, 0) * 70ms);
}
/* Los titulares se destapan como una línea que se descubre: desde abajo al bajar, desde arriba al subir */
html.mueve .titulo.rv { clip-path: inset(0 0 100% 0); translate: 0 .35em; transition: opacity .4s ease, translate .45s var(--suave), clip-path .45s var(--suave); }
html.mueve .titulo.rv[data-lado="arriba"] { clip-path: inset(100% 0 0 0); translate: 0 -.35em; }
html.mueve .titulo.rv.visto {
  clip-path: inset(-20% -6% -30% -6%); translate: none;
  transition: opacity .95s var(--suave), translate .95s var(--suave), clip-path 1.05s var(--suave); transition-delay: calc(var(--i, 0) * 70ms);
}
/* La foto de la fachada se asienta al entrar (con `scale`, que no pisa el acercamiento ligado al scroll) */
html.mueve .visita__foto.rv img { scale: 1.06; transition: scale .45s ease; }
html.mueve .visita__foto.rv.visto img { scale: 1; transition: scale 1.4s var(--suave); }
/* Detalles que se dibujan cada vez que aparecen: los iconos de servicios, las estrellas y la línea de eventos */
html.mueve .tarjeta.rv .tarjeta__icono svg { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset .3s ease; }
html.mueve .tarjeta.rv.visto .tarjeta__icono svg { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--suave) calc(var(--i, 0) * 70ms + .2s); }
html.mueve .opiniones__nota.rv .opiniones__relleno { clip-path: inset(0 100% 0 0); transition: clip-path .3s ease; }
html.mueve .opiniones__nota.rv.visto .opiniones__relleno { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--suave) .35s; }
html.mueve .eventos__tarjeta.rv .eventos__adorno { scale: 0 1; transition: scale .3s ease; }
html.mueve .eventos__tarjeta.rv.visto .eventos__adorno { scale: 1; transition: scale 1.1s var(--suave) .3s; }

/* Ligados al scroll (solo navegadores que lo hacen fuera del hilo principal; en el resto, quietos) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* El álbum ondula: columnas pares e impares a distinto ritmo */
    @media (min-width: 1024px) {
      .foto:nth-child(even) .foto__boton { animation: flota linear both; animation-timeline: view(); animation-range: cover; }
      .foto:nth-child(odd) .foto__boton { animation: flota-suave linear both; animation-timeline: view(); animation-range: cover; }
    }
    /* La fachada se acerca al llegar y se aleja un poco al irse por arriba */
    .visita__marco img { animation: acerca linear both; animation-timeline: view(); animation-range: cover; }
    /* Su rótulo se asienta en su sitio al llegar al pie */
    .rotulo3d__caja { animation: rotulo-llega linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    /* La silueta del probador gira un poco con el scroll (el ratón la sigue inclinando por encima) */
    .probador__giro { animation: probador-gira linear both; animation-timeline: view(); animation-range: cover; }
    /* La tarjeta de eventos se endereza al llegar, como una invitación que se levanta de la mesa */
    .eventos__tarjeta { animation: invitacion linear both; animation-timeline: view(); animation-range: cover; }
    /* La carta de servicios se levanta en perspectiva al llegar */
    .servicios__rejilla { animation: tablero linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes flota { from { transform: translate3d(0, 28px, 0); } to { transform: translate3d(0, -28px, 0); } }
@keyframes flota-suave { from { transform: translate3d(0, 8px, 0); } to { transform: translate3d(0, -8px, 0); } }
@keyframes acerca { 0% { transform: scale(1.14); } 55% { transform: none; } 100% { transform: scale(1.06); } }
@keyframes recorte-corta { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rotulo-llega { from { transform: rotateX(-30deg) rotateY(-10deg) translate3d(0, 26px, -30px); } to { transform: rotateX(8deg) rotateY(0deg) translate3d(0, 0, 0); } }
@keyframes tablero {
  0% { transform: perspective(1400px) translate3d(0, 48px, 0) rotateX(22deg); }
  30%, 80% { transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0deg); }
  100% { transform: perspective(1400px) translate3d(0, -28px, 0) rotateX(-12deg); }
}
@keyframes probador-gira { from { rotate: y -14deg; } to { rotate: y 14deg; } }
@keyframes invitacion { 0% { transform: perspective(1200px) rotateX(16deg) translate3d(0, 24px, 0); } 34%, 72% { transform: none; } 100% { transform: perspective(1200px) rotateX(-9deg) translate3d(0, -14px, 0); } }
@keyframes recorte-avanza { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 88% { opacity: 1; } 100% { transform: translate3d(100%, 0, 0); opacity: 0; } }

/* ===================================================================
   LA CASA
   =================================================================== */
/* Comparte el negro de la portada: sin tanto aire arriba, para que no quede una franja vacía al empezar a bajar */
.manifiesto { padding-top: clamp(48px, 6vw, 80px); }
.cifras {
  position: relative; max-width: 760px; margin: 0 auto; padding-top: clamp(32px, 4vw, 44px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: center;
}
.cifras::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea-2); transition: transform 1.4s var(--suave); }
@supports selector(:has(*)) { html.mueve .cifras.cuenta:not(:has(.gira))::before { transform: scaleX(0); } }
.cifra { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.cifra dd { margin: 0; font-family: var(--f-titulo); font-weight: 300; font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); line-height: 1; color: var(--tiza); font-variant-numeric: lining-nums tabular-nums; }
.cifra dt { max-width: 20ch; font-size: 0.8125rem; line-height: 1.5; color: var(--niebla); }
.cifras__fecha { margin: 20px 0 0; text-align: center; font-size: 0.75rem; color: var(--niebla); }
/* Las cifras se levantan como una placa y cuentan cada vez que vuelven a la vista (lo enciende el JS con .cuenta) */
html.mueve .cifras.cuenta .cifra:not(.gira) > * { opacity: 0; }
.cifra dd { transform-origin: 50% 100%; }
.cifra.gira dd { animation: voltea 1s var(--suave) backwards; animation-delay: calc(var(--k, 0) * 120ms); }
.cifra.gira dt { animation: sube .8s var(--suave) backwards; animation-delay: calc(var(--k, 0) * 120ms + 240ms); }
@keyframes voltea { from { opacity: 0; transform: perspective(600px) rotateX(-80deg); } to { opacity: 1; transform: perspective(600px) rotateX(0deg); } }
/* La tijera de acero de su logo, en 3D de verdad (three.js). El <canvas> lo pone el JS solo si el
   aparato puede, y es más grande que la caja para que las piezas sueltas no se corten; no recoge el
   ratón (lo recoge la caja). Mientras tanto, o si no puede, se ve su foto: el mismo render, ya montada */
.tijera-acero {
  position: relative; width: clamp(290px, 36vw, 500px); aspect-ratio: 5 / 3; margin: clamp(8px, 1.5vw, 20px) auto clamp(36px, 4.5vw, 60px);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
/* La foto no se puede arrastrar ni tocar: si no, el navegador arrastra la imagen y corta el giro a medias */
.tijera-acero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; transition: opacity .6s ease; }
.tijera-acero canvas { position: absolute; left: -14%; top: -24%; width: 128%; height: 148%; display: block; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.tijera-acero.en-3d { cursor: grab; }
.tijera-acero.en-3d canvas { opacity: 1; }
.tijera-acero.en-3d .tijera-acero__foto { opacity: 0; }
.tijera-acero.arrastrando { cursor: grabbing; }
.tijera-acero__sombra { position: absolute; left: 18%; right: 18%; bottom: 4%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), transparent); filter: blur(10px); pointer-events: none; will-change: transform, opacity; }   /* la mueve el 3D en cada fotograma: en su propia capa no obliga a repintar la página */

/* ===================================================================
   SERVICIOS: una carta de servicios, con líneas finas y sin cajas
   =================================================================== */
.servicios { background: var(--rotulo-2); }
.servicios__rejilla {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea);
}
.tarjeta {
  padding: clamp(28px, 3vw, 40px) clamp(18px, 2vw, 28px); text-align: center;
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  transition: background-color .3s ease;
}
@media (hover: hover) and (pointer: fine) { .tarjeta:hover { background: rgba(237, 234, 229, 0.025); } }
.tarjeta__icono { display: inline-grid; place-items: center; margin-bottom: 18px; }
.tarjeta__icono svg { width: 26px; height: 26px; fill: none; stroke: var(--marmol); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta__tipo { margin: 0 0 8px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--niebla); }
.tarjeta h3 { margin: 0 0 10px; font-family: var(--f-texto); font-size: 1.0625rem; font-weight: 500; line-height: 1.35; letter-spacing: 0.005em; }
.tarjeta p:last-child { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

.tarjeta__enlace { display: inline-block; margin-top: 0; padding: 10px 0; color: var(--tiza); text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 4px; transition: text-decoration-color .25s ease; }
@media (hover: hover) and (pointer: fine) { .tarjeta__enlace:hover { text-decoration-color: var(--marmol); } }

/* La estrella del 4,6 (bajo la tijera): entra girando cuando la cifra acaba de contar y suelta un brillo */
.cifra dd { display: inline-flex; align-items: flex-start; }
.cifra__estrella { width: 0.4em; height: 0.4em; margin: 0.06em 0 0 0.14em; flex: none; fill: var(--marmol); overflow: visible; }
.cifra.gira .cifra__estrella { animation: estrella-entra 1s var(--suave) 1s backwards, estrella-brilla 1.2s ease 1.8s; }
@keyframes estrella-entra { from { opacity: 0; transform: scale(0.2) rotate(-110deg); } 60% { opacity: 1; transform: scale(1.18) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes estrella-brilla { 0%, 100% { filter: none; } 35% { filter: drop-shadow(0 0 6px rgba(237, 234, 229, 0.55)); fill: var(--tiza); } }

/* ===================================================================
   TRATAMIENTOS: cuatro fichas en rejilla de dos, cada una con el dibujo
   de su efecto. Composición distinta a la carta de servicios: superficies
   con número grande, no líneas finas.
   =================================================================== */
.tratamientos { background: var(--rotulo); }
.trat-guia { display: grid; justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.trat-guia__rotulo { margin: 0; margin-right: -0.3em; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--marmol); }
.trat-guia .fichas { justify-content: center; }
.trat-guia__nota { margin: 0; font-size: 0.8125rem; color: var(--niebla); }
.trat-rejilla { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.trat {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; scroll-margin-top: calc(var(--cab) + 16px);
  padding: clamp(26px, 3vw, 40px); border: 1px solid var(--linea); border-radius: var(--radio);
  background: linear-gradient(160deg, rgba(237, 234, 229, 0.04), rgba(237, 234, 229, 0) 55%), var(--rotulo-2);
  transition: border-color .35s ease, box-shadow .35s ease;
}
/* Un filo de luz por arriba, como el canto pulido del escaparate; se enciende en la ficha elegida */
.trat::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(237, 234, 229, 0.6), transparent); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.trat.elegido { border-color: rgba(201, 193, 179, 0.55); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.8); }
.trat.elegido::before { opacity: 1; }
.trat__cuerpo { width: 100%; transition: opacity .35s ease; }
.trat__pide { margin-top: auto; transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .35s ease, transform .16s var(--suave); }
/* Las no elegidas se apagan en el dibujo y el número; el texto se queda legible (contraste ≥ 4,5:1) */
.trat__num, .trat__figura { transition: opacity .35s ease; }
.trat-rejilla.con-eleccion .trat:not(.elegido) .trat__num, .trat-rejilla.con-eleccion .trat:not(.elegido) .trat__figura { opacity: 0.3; }
.trat-rejilla.con-eleccion .trat:not(.elegido) .trat__cuerpo { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .trat:hover { border-color: var(--linea-2); }
  .trat.elegido:hover { border-color: rgba(201, 193, 179, 0.55); }
  .trat__pide:hover { background: var(--tiza); color: var(--rotulo); border-color: var(--tiza); }
}
.trat__pide.puesto { background: var(--tiza); border-color: var(--tiza); color: var(--rotulo); }
.trat__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.trat__num { font-family: var(--f-titulo); font-weight: 300; font-size: clamp(2.5rem, 2.1rem + 1.4vw, 3.25rem); line-height: 1; color: var(--marmol); font-variant-numeric: lining-nums; }
.trat__tipo { margin: 0 0 8px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--niebla); }
.trat h3 { margin: 0 0 8px; font-family: var(--f-titulo); font-weight: 300; font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); line-height: 1.15; }
.trat__lema { margin: 0 0 14px; font-family: var(--f-titulo); font-style: italic; font-weight: 300; font-size: 1.0625rem; line-height: 1.45; color: var(--marmol); }
.trat__texto { margin: 0; font-size: 0.9375rem; line-height: 1.65; }
.trat__aparte { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--niebla); }

/* "Su fórmula": se despliega animando el alto (filas de 0 a 1); sin JS se ve abierto */
.trat__mas { margin-top: 18px; border-top: 1px solid var(--linea); }
.trat__abre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tiza);
  transition: color .25s ease;
}
.trat__signo { position: relative; width: 14px; height: 14px; flex: none; }
.trat__signo::before, .trat__signo::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; background: currentColor; transition: transform .45s var(--suave); }
.trat__signo::after { transform: rotate(90deg); }
.trat__abre[aria-expanded="true"] .trat__signo::after { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) { .trat__abre:hover { color: var(--marmol); } }
.trat__detalle { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--suave), visibility 0s; }
.trat__detalle-dentro { min-height: 0; overflow: hidden; }
.trat__detalle-dentro > :last-child { margin-bottom: 8px; }
.trat__detalle.plegado { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--suave), visibility 0s .45s; }
.trat__lista { margin: 4px 0 0; display: grid; gap: 12px; }
.trat__lista dt { font-size: 0.875rem; font-weight: 600; color: var(--tiza); }
.trat__lista dd { margin: 2px 0 0; font-size: 0.875rem; line-height: 1.6; }
.trat__notaras { margin: 4px 0 16px; display: grid; gap: 6px; }
.trat__notaras li { position: relative; padding-left: 20px; font-size: 0.875rem; line-height: 1.55; }
.trat__notaras li::before { content: ""; position: absolute; left: 2px; top: 0.78em; width: 8px; height: 1px; background: var(--marmol); }

/* Los dibujos de cada efecto, en trazo fino del color del mármol. Sin JS o con
   "reducir movimiento" se ven terminados; con movimiento se hacen al entrar la
   ficha y se rehacen cada vez que vuelve (como los iconos de servicios) */
.trat__figura { width: clamp(104px, 10vw, 132px); height: auto; flex: none; overflow: visible; fill: none; stroke: var(--marmol); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.trat__figura * { transform-box: fill-box; }
.f-encrespado { opacity: 0; }
.f-liso path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.f-escamas path { transform-origin: 0% 100%; }
.f-escamas--abajo path { transform-origin: 0% 0%; }
.f-brillo { stroke: var(--tiza); stroke-width: 1.6; opacity: 0; }
.f-onda { stroke-width: 1; transform-origin: 50% 50%; }
.f-onda--2 { opacity: 0.6; }
.f-onda--3 { opacity: 0.3; }
.f-gota path:first-child { fill: rgba(201, 193, 179, 0.12); }
.f-gota__luz { stroke: var(--tiza); }
.f-relleno { fill: rgba(201, 193, 179, 0.16); stroke: none; transform-origin: 50% 50%; }
.f-anillo { stroke-dasharray: 8.333 0; }
.f-punto { fill: var(--marmol); stroke: none; opacity: 0; }
.f-liso path:nth-child(2), .f-escamas path:nth-child(2) { --n: 1; }
.f-liso path:nth-child(3), .f-escamas path:nth-child(3) { --n: 2; }
.f-liso path:nth-child(4), .f-escamas path:nth-child(4) { --n: 3; }
.f-liso path:nth-child(5), .f-escamas path:nth-child(5) { --n: 4; }
.f-escamas path:nth-child(6) { --n: 5; }
.f-escamas path:nth-child(7) { --n: 6; }
.f-escamas path:nth-child(8) { --n: 7; }

/* 01 · el pelo encrespado se alinea */
html.mueve .trat.rv .f-encrespado { opacity: 1; transition: opacity .3s ease; }
html.mueve .trat.rv .f-liso path { stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease; }
html.mueve .trat.rv.visto .f-encrespado { opacity: 0; transition: opacity 1s ease .55s; }
html.mueve .trat.rv.visto .f-liso path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--suave) calc(.6s + var(--n, 0) * 90ms); }
/* 02 · las escamas de la cutícula se cierran y un brillo recorre la fibra */
html.mueve .trat.rv .f-escamas--arriba path { rotate: -32deg; transition: rotate .3s ease; }
html.mueve .trat.rv .f-escamas--abajo path { rotate: 32deg; transition: rotate .3s ease; }
html.mueve .trat.rv.visto .f-escamas path { rotate: 0deg; transition: rotate 1s var(--suave) calc(.5s + var(--n, 0) * 70ms); }
html.mueve .trat.rv.visto .f-brillo { animation: brillo-recorre 1.3s ease 1.4s; }
@keyframes brillo-recorre { 0% { opacity: 0; translate: 0 0; } 20%, 80% { opacity: 0.9; } 100% { opacity: 0; translate: 82px 0; } }
/* 03 · la gota cae y abre las ondas */
html.mueve .trat.rv .f-gota { opacity: 0; translate: 0 -18px; transition: opacity .3s ease, translate .3s ease; }
html.mueve .trat.rv.visto .f-gota { opacity: 1; translate: 0 0; transition: opacity .5s ease .5s, translate .9s cubic-bezier(0.55, 0, 0.9, 0.45) .5s; }
html.mueve .trat.rv .f-onda { scale: 0.25; opacity: 0; transition: scale .3s ease, opacity .3s ease; }
html.mueve .trat.rv.visto .f-onda { scale: 1; transition: scale 1.4s var(--suave) calc(1.3s + var(--n, 0) * 140ms), opacity .8s ease calc(1.3s + var(--n, 0) * 140ms); }
html.mueve .trat.rv.visto .f-onda--1 { opacity: 1; }
html.mueve .trat.rv.visto .f-onda--2 { --n: 1; opacity: 0.6; }
html.mueve .trat.rv.visto .f-onda--3 { --n: 2; opacity: 0.3; }
/* 04 · el corte de la fibra se rellena: los huecos del anillo se cierran */
html.mueve .trat.rv .f-relleno { scale: 0; transition: scale .3s ease; }
html.mueve .trat.rv .f-anillo { stroke-dasharray: 2.5 5.833; transition: stroke-dasharray .3s ease; }
html.mueve .trat.rv .f-punto { opacity: 1; translate: 0 0; transition: opacity .3s ease, translate .3s ease; }
html.mueve .trat.rv.visto .f-punto { opacity: 0; transition: translate 1.1s var(--suave) .5s, opacity .4s ease 1.2s; }
html.mueve .trat.rv.visto .f-punto--1 { translate: 34px 18px; }
html.mueve .trat.rv.visto .f-punto--2 { translate: -34px 20px; }
html.mueve .trat.rv.visto .f-punto--3 { translate: 38px -18px; }
html.mueve .trat.rv.visto .f-punto--4 { translate: -38px -20px; }
html.mueve .trat.rv.visto .f-relleno { scale: 1; transition: scale 1.2s var(--suave) 1.1s; }
html.mueve .trat.rv.visto .f-anillo { stroke-dasharray: 8.333 0; transition: stroke-dasharray 1.2s var(--suave) 1.2s; }

/* ===================================================================
   TU TONO: la silueta de su escaparate y un espacio para contar el
   color que le gustaría (07/10: sin carta, lo pidió el salón)
   =================================================================== */
.tono { background: var(--rotulo-2); }
.probador { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.probador__figura { position: relative; width: min(100%, 400px); aspect-ratio: 1; justify-self: center; perspective: 900px; }
.probador__figura::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -8%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); filter: blur(6px); pointer-events: none; }
.probador__giro { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--suave); }
.probador__disco { position: absolute; inset: 0; border-radius: 50%; background: var(--disco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.probador__respaldo { position: absolute; left: -2%; top: -1.5%; width: 104%; height: auto; transform: translateZ(36px); }
.probador__panel { display: grid; gap: 26px; min-width: 0; }
.probador__rotulo { display: block; margin: 0 0 10px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--niebla); }
/* 16 px de letra en la caja: con menos, el iPhone hace zoom al tocarla */
.tono__descripcion textarea {
  display: block; width: 100%; min-height: 148px; resize: vertical; padding: 16px 18px;
  border: 1px solid var(--linea-2); border-radius: var(--radio); background: rgba(0, 0, 0, 0.22); color: var(--tiza);
  font: inherit; font-size: 1rem; line-height: 1.6; transition: border-color .2s ease;
}
.tono__descripcion textarea::placeholder { color: var(--niebla); opacity: 1; }
.tono__descripcion textarea:focus-visible { outline: none; border-color: var(--tiza); }
.tono__boton { justify-self: start; }

/* ===================================================================
   EL ÁLBUM
   =================================================================== */
.album { background: var(--rotulo-2); }
.album__rejilla { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.foto__boton { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; text-align: center; }
.foto__marco { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radio); background: var(--rotulo-3); }
.foto__marco img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--suave); }
.foto__pie { display: block; margin-top: 12px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--niebla); transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .foto__boton:hover img { transform: scale(1.035); }
  .foto__boton:hover .foto__pie { color: var(--tiza); }
}
.album__pie { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: clamp(36px, 4vw, 52px); }
.album__contador { margin: 0; min-width: 5.5em; text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; color: var(--niebla); font-variant-numeric: tabular-nums; }
.album__actual { color: var(--tiza); }
.album__mandos { display: none; align-items: center; gap: 14px; }
.album__flecha {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-2);
  background: transparent; color: var(--tiza); font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--suave);
}
.album__flecha:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .album__flecha:hover { background: var(--tiza); color: var(--rotulo); } }
/* El aro 3D (lo enciende el JS con .album--aro): ocho fotos en círculo que se giran */
.album--aro .album__mandos { display: flex; }
.album--aro .album__ventana { margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
.album--aro .album__escena {
  --w: 232px; --r: calc(var(--w) * 1.207 + 34px);
  position: relative; height: calc(var(--w) * 1.25 + 74px); perspective: 1500px; perspective-origin: 50% 35%;
  touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
}
.album--aro .album__escena.arrastrando { cursor: grabbing; }
.album--aro .album__vaiven { position: absolute; inset: 0; transform-style: preserve-3d; }
.album--aro .album__rejilla {
  position: absolute; left: 50%; top: 12px; display: block; width: var(--w); height: calc(var(--w) * 1.25 + 44px); max-width: none;
  margin: 0 0 0 calc(var(--w) / -2); transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateY(var(--giro, 0deg)); transition: transform .9s var(--suave);
}
.album--aro .album__escena.arrastrando .album__rejilla { transition: none; }
.album--aro .foto {
  position: absolute; inset: 0; width: auto; transform: rotateY(calc(var(--n, 0) * 45deg)) translateZ(var(--r));
  -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity .6s ease;
}
.album--aro .foto:not(.delante) { opacity: 0.5; }
.album--aro .foto:not(.delante) .foto__pie { opacity: 0; }
.album--aro .foto__marco { box-shadow: 0 30px 50px -28px rgba(0, 0, 0, 0.9); }
.album--aro .foto:nth-child(n) .foto__boton { animation: none; }
/* Al bajar, el aro se balancea un poco (solo si el navegador lo hace fuera del hilo principal) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .album--aro .album__vaiven { animation: vaiven linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@media (min-width: 1200px) { .album--aro .album__escena { --w: 268px; } }
@media (min-width: 1440px) { .album--aro .album__escena { --w: 296px; } }
@media (max-width: 380px) { .album--aro .album__escena { --w: 204px; } }
@keyframes vaiven { from { transform: rotateY(18deg) rotateX(4deg); } to { transform: rotateY(-18deg) rotateX(-2deg); } }

/* ===================================================================
   PEDIR CITA
   =================================================================== */
.cita__tarjeta {
  max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(237, 234, 229, 0.02);
}
.paso { padding-bottom: 26px; }
.paso + .paso { padding-top: 26px; border-top: 1px solid var(--linea); }
.paso fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.paso__titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 0; font-size: 1rem; font-weight: 500; color: var(--tiza); }
.paso__num { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--linea-2); font-size: 0.75rem; font-weight: 600; color: var(--marmol); }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.fichas + .fichas { margin-top: 10px; }
.ficha {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea-2); background: transparent; color: var(--esmerilado);
  font-size: 0.875rem; font-weight: 500;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--suave);
}
.ficha:active { transform: scale(0.97); }
.ficha[aria-pressed="true"] { background: var(--tiza); border-color: var(--tiza); color: var(--rotulo); }
.ficha:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .ficha:not([aria-pressed="true"]):not(:disabled):hover { border-color: var(--esmerilado); color: var(--tiza); } }
.cita__mensaje { padding-top: 26px; border-top: 1px solid var(--linea); }
.cita__etiqueta { display: block; margin-bottom: 12px; font-size: 1rem; font-weight: 500; color: var(--tiza); }
.cita__mensaje textarea {
  width: 100%; min-height: 112px; resize: vertical; padding: 16px 18px;
  border: 1px solid var(--linea-2); border-radius: var(--radio); background: rgba(0, 0, 0, 0.22); color: var(--tiza);
  font: inherit; font-size: 0.9375rem; line-height: 1.6; transition: border-color .2s ease;
}
.cita__mensaje textarea:focus-visible { outline: none; border-color: var(--tiza); }
.cita__mensaje textarea.cambiado { animation: repinta .35s ease-out; }
@keyframes repinta { from { opacity: 0.55; } to { opacity: 1; } }
.cita__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 18px; }
.cita__letra { margin: 0; max-width: 40ch; font-size: 0.8125rem; color: var(--niebla); }
.cita__letra a { display: inline-block; padding: 12px 0; color: var(--esmerilado); text-underline-offset: 3px; }
.cita__telefono { margin: 26px 0 0; text-align: center; }
.cita__telefono a { display: inline-block; padding: 12px 0; color: var(--tiza); font-weight: 600; text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 6px; }

/* La línea de "recorta aquí" de la cita: la tijera la corta al bajar */
.recorte { position: relative; max-width: 760px; height: 28px; margin: 0 auto 22px; }
.recorte__guia { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--linea-2); }
.recorte__corte { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; background: var(--esmerilado); transform: scaleX(0); transform-origin: 0 50%; }
.recorte__carril { position: absolute; inset: 0; }
.recorte__tijera { --t: 78px; position: absolute; left: 0; top: 50%; width: var(--t); aspect-ratio: 260 / 120; margin: calc(var(--t) * -0.2308) 0 0 calc(var(--t) * -0.577); perspective: 420px; }
.recorte__tijera .tijera { transform: rotateX(14deg) rotateY(-12deg); filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.55)); }
/* Cada vez que la línea aparece (al bajar y al subir), la tijera la recorre cortando a su propio ritmo:
   1,8 s y ocho golpes de tijera, igual de suave con rueda, dedo o panel táctil */
.recorte.visto .recorte__carril { animation: recorte-avanza 1.8s cubic-bezier(.5, 0, .3, 1) .3s both; }
.recorte.visto .recorte__corte { animation: recorte-corta 1.8s cubic-bezier(.5, 0, .3, 1) .3s both; }
.recorte.visto .recorte__pieza--1 { animation: corta-1 .225s ease-in-out .3s 8 alternate both; }
.recorte.visto .recorte__pieza--2 { animation: corta-2 .225s ease-in-out .3s 8 alternate both; }

/* ===================================================================
   OPINIONES: la nota a un lado, lo que más repiten al otro
   =================================================================== */
.opiniones { background: var(--rotulo-2); }
.opiniones__cuerpo { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.opiniones__nota { display: grid; justify-items: start; gap: 12px; }
.opiniones__cifra { margin: 0; font-family: var(--f-titulo); font-weight: 300; font-size: clamp(3.25rem, 2.6rem + 2vw, 4.25rem); line-height: 0.95; color: var(--tiza); font-variant-numeric: lining-nums; }
.opiniones__estrellas { position: relative; display: inline-block; font-size: 1rem; letter-spacing: 0.2em; line-height: 1; }
.opiniones__fondo { color: rgba(237, 234, 229, 0.16); }
.opiniones__relleno { position: absolute; left: 0; top: 0; width: 92%; overflow: hidden; white-space: nowrap; color: var(--tiza); }
.opiniones__fuente { max-width: 30ch; margin: 0 0 10px; font-size: 0.875rem; }
.opiniones__lista li { padding: 18px 0; border-top: 1px solid var(--linea); font-family: var(--f-titulo); font-style: italic; font-weight: 300; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem); line-height: 1.4; color: var(--tiza); }
.opiniones__lista li:first-child { padding-top: 0; border-top: 0; }
.opiniones__aviso { max-width: 56ch; margin: 22px 0 0; font-size: 0.8125rem; color: var(--niebla); text-wrap: pretty; }

/* ===================================================================
   BODAS Y EVENTOS: una tarjeta, como una invitación
   =================================================================== */
.eventos__tarjeta {
  position: relative; max-width: 720px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); text-align: center;
  border: 1px solid var(--linea-2); border-radius: var(--radio);
  background: radial-gradient(120% 90% at 50% 0%, rgba(237, 234, 229, 0.04), transparent 60%);
}
.eventos__tarjeta::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--linea); border-radius: 3px; pointer-events: none; }
.eventos__adorno { position: relative; display: block; width: 56px; height: 1px; margin: 0 auto 26px; background: var(--marmol); opacity: 0.7; }
.eventos__adorno::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--marmol); transform: rotate(45deg); }
.eventos__tarjeta .boton { margin-top: 28px; }

/* ===================================================================
   VISÍTANOS
   =================================================================== */
.visita { background: var(--rotulo-2); }
.visita__direccion { margin: 18px 0 8px; color: var(--tiza); }
.visita__metro { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9375rem; }
.visita__metro-signo { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--linea-2); font-size: 0.6875rem; font-weight: 700; color: var(--tiza); }
.visita__rejilla { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.visita__marco { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radio); background: var(--rotulo-3); }
.visita__marco img { width: 100%; height: 100%; object-fit: cover; }
.visita__foto figcaption { margin-top: 12px; text-align: center; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--niebla); }
.horario { padding: 22px 24px; border: 1px solid var(--linea); border-radius: var(--radio); }
.horario__ahora { display: flex; align-items: center; gap: 10px; min-height: 1.6em; margin: 0 0 12px; font-size: 0.9375rem; font-weight: 500; color: var(--tiza); }
.horario__ahora::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--niebla); }
.horario__ahora.abierto::before { background: var(--abierto); }
.horario__ahora:empty::before { display: none; }
.horario__tabla { margin: 0; }
.horario__tabla div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 0.9375rem; }
.horario__tabla dd { margin: 0; font-variant-numeric: tabular-nums; }
.horario__tabla .hoy dt, .horario__tabla .hoy dd { color: var(--tiza); font-weight: 600; }
.visita__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }

/* ===================================================================
   PIE
   =================================================================== */
.pie { padding: clamp(64px, 8vw, 104px) var(--margen) 24px; border-top: 1px solid var(--linea); text-align: center; }
.pie__marca { margin-bottom: 56px; }
/* Su rótulo de la fachada como un objeto: la caja negra con su canto, vista un poco desde abajo */
.rotulo3d { position: relative; width: min(100%, 620px); margin: 0 auto; container-type: inline-size; perspective: 1200px; }
.rotulo3d__giro { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--suave); }
.rotulo3d__caja { --w: 100cqw; --h: clamp(84px, 17cqw, 112px); --d: 22px; position: relative; height: var(--h); transform-style: preserve-3d; transform: rotateX(8deg); }
.rotulo3d__cara { position: absolute; left: 50%; top: 50%; }
.rotulo3d__cara--frente {
  width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); transform: translateZ(calc(var(--d) / 2));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: hidden;
  background: linear-gradient(180deg, #1D1B19 0%, #0E0D0C 55%, #090808 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.7);
}
/* El brillo del cristal se desliza cuando el ratón lo inclina */
.rotulo3d__cara--frente::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.07) 50%, transparent 62%) var(--bx, 30%) 0 / 260% 100% no-repeat;
  transition: background-position .8s var(--suave);
}
.rotulo3d__cara--arriba, .rotulo3d__cara--abajo { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.rotulo3d__cara--arriba { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: #2B2825; }
.rotulo3d__cara--abajo { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #050505; }
.rotulo3d__cara--izq, .rotulo3d__cara--der { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); background: #141210; }
.rotulo3d__cara--izq { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.rotulo3d__cara--der { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.rotulo3d__linea { display: flex; align-items: center; gap: 8px; color: var(--tiza); }
.rotulo3d__nombre { padding: 0 0.06em; font-family: var(--f-marca); font-size: clamp(2rem, 8.2cqw, 3.1rem); line-height: 0.95; }
.rotulo3d__tijeras { width: clamp(20px, 4.4cqw, 30px); height: auto; transform: rotate(-90deg); }
.rotulo3d__lema { margin-right: -0.4em; font-size: clamp(0.5rem, 1.55cqw, 0.6875rem); font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(237, 234, 229, 0.82); }
.rotulo3d__sombra { position: absolute; left: 10%; right: 10%; bottom: -28px; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); filter: blur(8px); pointer-events: none; }
.pie__rejilla { max-width: 880px; margin: 0 auto; padding: 32px 0; border-block: 1px solid var(--linea); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pie__titulo { margin: 0 0 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--marmol); }
.pie__rejilla p { margin: 0; font-size: 0.9375rem; }
.pie__rejilla p a { display: inline-block; padding: 11px 0; color: var(--tiza); text-decoration: none; }
.pie .redes { justify-content: center; }
.pie__legal { max-width: 880px; margin: 0 auto; padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; font-size: 0.8125rem; color: var(--niebla); }
.pie__legal p { margin: 0; }
.pie__legal a { display: inline-block; padding: 11px 0; margin-left: 20px; color: var(--niebla); text-decoration: none; }
.pie__legal a:first-child { margin-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .pie__rejilla p a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .pie__legal a:hover { color: var(--tiza); }
}

/* ===================================================================
   BOTÓN DE WHATSAPP: verde, en el lateral y a la vista desde el principio
   =================================================================== */
.flotante {
  position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 80;
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  transition: opacity .35s var(--suave), transform .35s var(--suave);
}
.flotante__icono {
  display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 50%;
  background: #25D366; color: #FFFFFF;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform .16s var(--suave), background-color .2s ease;
}
.flotante__icono svg { width: 30px; height: 30px; }
.flotante:active .flotante__icono { transform: scale(0.95); }
.flotante__texto {
  padding: 10px 16px; border-radius: 999px; background: var(--tiza); color: var(--rotulo);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.75);
  opacity: 0; transform: translate3d(8px, 0, 0); pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--suave);
}
/* Al aparecer, el letrero se presenta unos segundos y se recoge */
.flotante.presenta .flotante__texto { animation: presenta 5.5s var(--suave) .5s both; }
@keyframes presenta { 0% { opacity: 0; transform: translate3d(8px, 0, 0); } 8%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(8px, 0, 0); } }
@media (hover: hover) and (pointer: fine) {
  .flotante:hover .flotante__texto { opacity: 1; transform: none; }
  .flotante:hover .flotante__icono { background: #1EBE5A; }
}
html.mueve .flotante:not(.visible), .flotante.al-pie { opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none; }

/* ===================================================================
   VISOR DEL ÁLBUM
   =================================================================== */
.visor { width: min(92vw, 620px); max-height: 94svh; padding: 12px 12px 8px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--rotulo-2); color: var(--tiza); }
.visor[open] { animation: abre .22s var(--suave); }
@keyframes abre { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
.visor::backdrop { background: rgba(10, 9, 8, 0.86); }
.visor__img { width: 100%; max-height: calc(94svh - 128px); object-fit: contain; border-radius: 4px; transition: opacity .18s ease; }
.visor__img.cambia { opacity: 0; }
.visor__pie { margin: 12px 0 0; text-align: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--esmerilado); }
.visor__controles { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.visor__boton {
  min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea-2); background: transparent; color: var(--tiza); cursor: pointer;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.visor__boton[data-accion="anterior"], .visor__boton[data-accion="siguiente"] { font-size: 1.4rem; letter-spacing: 0; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .visor__boton:hover { background: var(--tiza); color: var(--rotulo); } }

/* ===================================================================
   MODO REVISIÓN (?revision): datos sin confirmar en ámbar
   =================================================================== */
.revision [data-ambar] { outline: 1.5px dashed var(--ambar); outline-offset: 6px; }
.panel-ambar { position: fixed; left: 16px; bottom: 16px; z-index: 460; max-width: min(420px, calc(100vw - 32px)); font-size: 0.9375rem; color: #231A07; }
.panel-ambar__boton { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ambar); font-weight: 700; cursor: pointer; }
.panel-ambar__caja { margin-bottom: 10px; padding: 18px; max-height: 60svh; overflow-y: auto; border-radius: var(--radio); background: #FFF4D6; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8); }
.panel-ambar__caja[hidden] { display: none; }
.panel-ambar__caja h2 { margin-bottom: 6px; font-size: 1rem; font-weight: 700; color: #231A07; }
.panel-ambar__caja ol { list-style: decimal; padding-left: 20px; }
.panel-ambar__caja li { margin-bottom: 8px; line-height: 1.45; }
.panel-ambar__caja li a { margin-left: 6px; font-size: 0.8125rem; font-weight: 700; }

/* ===================================================================
   PÁGINAS LEGALES Y 404
   =================================================================== */
.cabecera--simple { background: rgba(21, 20, 19, 0.94); border-bottom-color: var(--linea); }
.cabecera--simple .cabecera__barra { grid-template-columns: 1fr auto; }
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--cab) + clamp(48px, 7vw, 96px)) var(--margen) var(--seccion); }
.legal .titulo { margin-bottom: 12px; }
.legal__fecha { margin-bottom: 40px; font-size: 0.875rem; color: var(--niebla); }
.legal h2 { margin: 40px 0 10px; font-family: var(--f-texto); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.legal h3 { margin: 24px 0 8px; font-family: var(--f-texto); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.legal p, .legal li { max-width: 68ch; }
.legal a { color: var(--tiza); }
.legal__datos li { padding: 8px 0; border-top: 1px solid var(--linea); }
.legal__datos a { display: inline-block; padding: 13px 0; margin: -13px 0; }   /* el dedo tiene 44 px sin mover la línea */
.legal__datos strong { color: var(--tiza); font-weight: 500; }
.legal__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.dato-pendiente { padding: 1px 6px; border-radius: 4px; background: rgba(240, 180, 41, 0.14); color: var(--tiza); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1099px) {
  .cabecera__barra { grid-template-columns: 1fr auto; }
  .cabecera__nav { display: none; }
  .cabecera__menu { display: inline-grid; }
}
@media (max-width: 1023px) {
  .album__ventana {
    margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
    overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .album__ventana::-webkit-scrollbar { display: none; }
  .album__rejilla { display: flex; width: max-content; max-width: none; gap: 14px; }
  .foto { flex: none; width: min(64vw, 300px); scroll-snap-align: start; }
  .album__mandos { display: flex; }
}
@media (max-width: 899px) {
  .servicios__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visita__rejilla { grid-template-columns: minmax(0, 1fr); }
  .visita__datos { width: min(100%, 460px); justify-self: center; }
  .probador { grid-template-columns: minmax(0, 1fr); }
  .probador__figura { width: min(320px, 76vw); }
  .opiniones__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .opiniones__nota { justify-items: center; text-align: center; }
}
@media (max-width: 759px) {
  .trat-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  :root { --cab: 64px; }
  .trat { padding: 24px 20px; gap: 20px; }
  .trat__figura { width: 96px; }
  .trat__pide { align-self: stretch; }
  .cabecera__acciones .redes__boton--mini { display: none; }
  .cabecera__acciones .boton { margin-left: 0; }
  .marca__nombre { font-size: 1.8rem; }
  /* Servicios: una lista limpia, icono a la izquierda */
  .servicios__rejilla { grid-template-columns: minmax(0, 1fr); border-left: 0; }
  .tarjeta { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; text-align: left; border-right: 0; }
  .tarjeta__icono { grid-row: 1 / span 3; margin: 2px 0 0; }
  .tarjeta__icono svg { width: 24px; height: 24px; }
  .cifras { gap: 12px; }
  .cifra dt { font-size: 0.75rem; }
  .portada__acciones { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-inline: auto; }
  .visita__acciones { flex-direction: column; align-items: stretch; }
  .visita__datos .redes { justify-content: center; }
  .cita__acciones { flex-direction: column; align-items: stretch; text-align: center; }
  .cita__letra { max-width: none; }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
  .pie__legal { justify-content: center; text-align: center; }
  .tono__boton { justify-self: stretch; }
}
@media (min-width: 720px) { .boton { white-space: nowrap; } }
@media (max-width: 380px) {
  .cabecera__acciones .boton { padding: 0 14px; }
  .marca__nombre { font-size: 1.65rem; }
}

/* En el móvil, lo que más le cuesta al aparato al bajar (medido con la CPU 4 veces más lenta): el desenfoque
   de la cabecera y tres efectos de scroll con capas grandes. Se quitan aquí; lo demás sigue igual */
@media (max-width: 899px), (hover: none) {
  .cabecera.solida { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(21, 20, 19, 0.97); }
}
@media (max-width: 899px) {
  /* (la carta de servicios, al inclinarse, se salía 14 px por los lados en el móvil) */
  .ventana__3d, .ventana__texto, .album--aro .album__vaiven, .probador__giro, .servicios__rejilla { animation: none !important; }
}

/* Con "reducir movimiento": nada se desplaza; solo fundidos cortos */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu.abierto .menu__nav a { animation: funde .4s ease backwards; }
  .intro__tijera, .intro__corte, .intro__hoja { display: none; }
  .intro { animation: intro-seguridad .3s 1.6s forwards; }
  .intro .intro__marca { animation: marca-suave-y-va 1.5s linear .1s both; }
  .intro .intro__fondo { animation: se-apaga .45s ease 1.3s forwards; }
  .intro .intro__saltar { animation: se-apaga .3s ease 1.2s forwards; }
  .foto__marco img, .boton, .ficha { transition-property: background-color, color, border-color, box-shadow, opacity; }
  .ventana__giro, .probador__giro, .rotulo3d__giro { transition: none; }
  .flotante.presenta .flotante__texto { animation: none; }
  .trat__detalle, .trat__detalle.plegado, .trat__signo::before, .trat__signo::after { transition: none; }
}

@media print {
  .cabecera, .intro, .flotante, .panel-ambar, .menu, .visor { display: none !important; }
  .rv, .foto, .ventana, .linea__dentro, .portada *, .foto__boton, .cifra > *, .portada__texto { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; clip-path: none !important; animation: none !important; }
  .tijera-acero canvas { display: none !important; }
  .tijera-acero__foto { opacity: 1 !important; }
}