:root {
  --primario: #0B0B0C;
  --acento: #C9A36A;
  --sobre-primario: #FFFFFF;
  --sobre-acento: #000000;
}
/* Fuentes: Archivo se usa ancho y pesado para el lenguaje de rótulo. */
@font-face {
  font-family: Archivo;
  src: url("fuentes/archivo-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* Base oscura, controles del navegador y foco visible. */
:root {
  color-scheme: dark;
  --fondo: #0b0b0c;
  --hueso: #ede6da;
  --laton: #c9a36a;
  --rojo: #9e2b25;
  --muted: #aaa49c;
  --linea: rgb(237 230 218 / 16%);
  font-family: Archivo, Arial, sans-serif;
  font-size: 16px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  scrollbar-color: var(--laton) var(--fondo);
  accent-color: var(--laton);
  background: var(--fondo);
  color: var(--hueso);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--fondo);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--fondo);
  color: var(--hueso);
  font-weight: 450;
  line-height: 1.55;
}

::selection { color: var(--fondo); background: var(--laton); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 5px;
}

button { font: inherit; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }

.saltar {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  transform: translateY(-160%);
  background: var(--hueso);
  color: var(--fondo);
}
.saltar:focus { transform: translateY(0); }

/* Isla flotante de navegación. */
.barra {
  position: absolute;
  z-index: 10;
  top: 1.35rem;
  left: 50%;
  display: flex;
  width: min(100% - 2.5rem, 76rem);
  min-height: 3.75rem;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .55rem .45rem 1rem;
  transform: translateX(-50%);
  border: 1px solid rgb(237 230 218 / 14%);
  border-radius: 999px;
  background: rgb(17 17 17 / 88%);
}
.marca { display: inline-flex; align-items: center; gap: .65rem; font-size: .86rem; font-weight: 750; }
.marca-simbolo {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--laton);
  border-radius: 50%;
  color: var(--laton);
  font-size: .8rem;
  font-weight: 800;
}
.nav-escritorio { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); color: #d5cec3; font-size: .78rem; }
.nav-escritorio a, .pie a { transition: color .25s cubic-bezier(.32, .72, 0, 1); }
.nav-escritorio a:hover, .pie a:hover { color: var(--laton); }
.barra-accion, .menu-cita {
  display: inline-flex;
  min-height: 2.7rem;
  align-items: center;
  gap: 1.2rem;
  padding: .55rem 1.05rem;
  border-radius: 99px;
  background: var(--laton);
  color: var(--fondo);
  font-size: .78rem;
  font-weight: 750;
}
.barra-accion span::before, .menu-panel a span::before, .boton-flecha::before, .pie > a span::before {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
}
.barra-accion span { display: inline-flex; align-items: center; padding-right: .2rem; }
.menu-panel a span { display: inline-flex; align-items: center; padding-right: .25rem; }
.boton-flecha { display: inline-flex; align-items: center; }
.pie > a span { display: inline-flex; align-items: center; padding: 0 .2rem; }
.menu-boton, .menu-panel { display: none; }

/* Portada cinematográfica y poste de barbería como objeto central. */
.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .95fr);
  align-items: center;
  gap: 2rem;
  overflow: hidden;
  padding: 8.4rem max(6vw, calc((100vw - 82rem) / 2)) 7.5rem;
  background: radial-gradient(ellipse at 74% 45%, #27231d 0, #151412 27%, var(--fondo) 62%);
}
.hero::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--fondo) 0%, transparent 58%), linear-gradient(0deg, var(--fondo), transparent 18%);
  content: "";
  pointer-events: none;
}
.hero-texto { position: relative; z-index: 2; max-width: 42rem; }
.hero h1 {
  margin: 0 0 1.5rem -.055em;
  font-size: clamp(3.9rem, 8.7vw, 6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .84;
  font-stretch: 125%;
  animation: entrada-filo .95s cubic-bezier(.16, 1, .3, 1) both;
}
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--laton); }
.hero-frase { max-width: 27rem; margin: 0 0 .55rem; color: var(--hueso); font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.hero-descripcion { max-width: 30rem; margin-bottom: 1.8rem; color: #b7b0a6; font-size: .92rem; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.45rem; }
.boton {
  display: inline-flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  padding: .8rem 1.4rem;
  border-radius: 99px;
  background: var(--laton);
  color: #171411;
  font-size: .87rem;
  font-weight: 750;
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.boton:hover { transform: scale(.98); background: #d9b981; }
.boton-flecha { display: inline-block; transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.boton:hover .boton-flecha { transform: translate(2px, -2px); }
.enlace-texto { color: var(--hueso); font-size: .84rem; }
.enlace-texto span { display: inline-flex; width: .7rem; height: .8rem; margin-left: .55rem; align-items: center; color: var(--laton); transition: transform .25s cubic-bezier(.32, .72, 0, 1); }
.enlace-texto span::before, .hero-bajar span:last-child::before { width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: rotate(45deg) translate(-2px, -2px); }
.enlace-texto:hover span { display: inline-block; transform: translateY(3px); }
.hero-arte { position: relative; z-index: 1; display: grid; min-height: 34rem; place-items: center; }
.hero-arte::before {
  position: absolute;
  width: min(70vw, 37rem);
  aspect-ratio: 1;
  border: 1px solid rgb(201 163 106 / 13%);
  border-radius: 50%;
  box-shadow: 0 0 100px rgb(201 163 106 / 8%), inset 0 0 75px rgb(201 163 106 / 5%);
  content: "";
}
.hero-objeto { position: relative; width: min(32vw, 20rem); height: min(72vh, 38rem); min-height: 25rem; filter: drop-shadow(40px 38px 35px rgb(0 0 0 / 70%)); }
.poste-cuerpo {
  position: absolute;
  inset: 3.6rem 0;
  overflow: hidden;
  border: 3px solid #655133;
  border-radius: 999px;
  background: #161718;
  box-shadow: inset 10px 0 16px rgb(255 255 255 / 13%), inset -14px 0 21px #050505, 0 0 30px rgb(0 0 0 / 65%);
}
.poste-franjas {
  position: absolute;
  inset: -25% -55%;
  background: repeating-linear-gradient(135deg, var(--hueso) 0 2.2rem, #e7e0d3 2.2rem 3.1rem, var(--rojo) 3.1rem 5.4rem, #78201d 5.4rem 6.3rem);
  animation: giro-franjas 18s linear infinite;
}
.poste-cuerpo::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 71%), transparent 18%, rgb(255 255 255 / 36%) 48%, rgb(255 255 255 / 4%) 53%, rgb(0 0 0 / 76%) 100%);
  content: "";
}
.poste-reflejo { position: absolute; z-index: 1; top: 0; bottom: 0; left: 47%; width: 9%; background: rgb(255 255 255 / 22%); filter: blur(8px); }
.poste-tapa {
  position: absolute;
  z-index: 2;
  left: -7%;
  width: 114%;
  height: 4.4rem;
  border: 3px solid #947546;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1d49c, #8f6b36 30%, #e0bd7e 52%, #594426 76%, #bd9656);
  box-shadow: inset 0 4px 7px rgb(255 255 255 / 55%), 0 7px 14px rgb(0 0 0 / 70%);
}
.poste-tapa--arriba { top: 1.4rem; }
.poste-tapa--abajo { bottom: 1.4rem; }
.poste-base { position: absolute; right: 12%; bottom: 0; left: 12%; height: 2.4rem; border-radius: 0 0 45% 45%; background: linear-gradient(90deg, #41331f, #d0ad70 30%, #614c2d 65%, #191817); }
.poste-brillo { position: absolute; inset: 2rem -1.3rem; border-radius: 99px; box-shadow: 0 0 28px rgb(201 163 106 / 16%); }
.poste-sombra { position: absolute; right: -18%; bottom: -1.7rem; left: -18%; height: 2rem; border-radius: 50%; background: #000; filter: blur(16px); }
.hero-coordenada { position: absolute; z-index: 2; right: 5.7%; top: 49%; display: grid; gap: .35rem; color: #a49b8d; font-size: .61rem; letter-spacing: .12em; writing-mode: vertical-rl; }
.hero-bajar { position: absolute; z-index: 2; bottom: 2rem; left: max(6vw, calc((100vw - 82rem) / 2)); display: flex; align-items: center; gap: 1.3rem; color: #aca69c; font-size: .7rem; }
.hero-bajar span:last-child { display: inline-flex; width: .8rem; height: .8rem; align-items: center; color: var(--laton); }

/* Escena de scroll: el poste gira y la navaja se abre con el avance. */
.escena { position: relative; height: 250vh; background: #141311; }
.escena-fija {
  position: sticky;
  top: 0;
  display: grid;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background: radial-gradient(ellipse at center, #272119, #141311 50%, #0b0b0c 82%);
}
.escena-luz { position: absolute; z-index: -1; width: 46rem; max-width: 90vw; aspect-ratio: 1; border: 1px solid rgb(201 163 106 / 10%); border-radius: 50%; box-shadow: 0 0 90px rgb(201 163 106 / 6%); }
.escena-poste { position: absolute; left: 19%; width: clamp(7rem, 17vw, 14rem); height: 65vh; min-height: 24rem; transform: rotate(9deg) scale(1.08); }
.escena-poste .poste-cuerpo { inset: 2.6rem 0; }
.escena-poste .poste-tapa { height: 3.2rem; }
.escena-poste .poste-tapa--arriba { top: .8rem; }
.escena-poste .poste-tapa--abajo { bottom: .8rem; }
.escena-navaja { position: absolute; z-index: 2; top: 31%; left: 31%; width: min(51vw, 39rem); overflow: visible; color: var(--hueso); filter: drop-shadow(0 16px 12px rgb(0 0 0 / 62%)); transform: rotate(5deg) translate(10%, -2%); transform-origin: 18% 78%; }
.escena-navaja path:first-child { fill: #aaa89f; stroke: #e8e0d3; stroke-width: 2; }
.escena-navaja path:nth-child(2) { fill: #746044; stroke: #cfb47d; stroke-width: 2; }
.escena-navaja path:nth-child(3) { stroke: #cfb47d; stroke-width: 5; }
.escena-navaja circle { fill: var(--laton); stroke: #f0d59f; stroke-width: 3; }
.escena-frases { position: absolute; z-index: 3; top: 50%; right: 13%; width: min(40rem, 66vw); transform: translateY(-50%); }
.frase-corte { position: absolute; inset: 0; margin: 0; color: var(--hueso); font-size: clamp(3.3rem, 7vw, 5.8rem); font-weight: 800; letter-spacing: -.035em; line-height: .9; text-transform: uppercase; opacity: 0; transform: translateX(2rem); }
.frase-corte:last-child { opacity: 1; transform: none; }
.escena-pie { position: absolute; right: 4vw; bottom: 2rem; color: #8d8578; font-size: .62rem; letter-spacing: .13em; }

/* Banda itinerante generada con el nombre de cada servicio. */
.ticker { max-width: 100%; overflow: hidden; border-block: 1px solid var(--linea); background: #11100f; }
.ticker-pista { display: flex; width: max-content; align-items: center; gap: 1.5rem; padding: 1.05rem 0; animation: ticker-paseo 42s cubic-bezier(.32, .72, 0, 1) infinite; }
.ticker-pista span { color: #c9c0b4; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.ticker-pista i { width: .35rem; aspect-ratio: 1; border: 1px solid var(--laton); border-radius: 50%; }

/* Servicios como fichas técnicas, con superficies alternadas. */
.seccion { padding: clamp(6rem, 11vw, 10rem) max(6vw, calc((100vw - 82rem) / 2)); }
.tratamientos { background: var(--hueso); color: #181614; }
.encabezado-seccion { max-width: 48rem; margin: 0 auto 3.6rem; text-align: center; }
.encabezado-seccion h2, .pasos-intro h2, .visita-lugar h2, .cierre h2 { margin-bottom: 1rem; font-size: clamp(2.6rem, 5.2vw, 4.6rem); font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.encabezado-seccion p { max-width: 31rem; margin: 0 auto; color: #746d63; }
.tratamientos .encabezado-seccion h2 { max-width: 12ch; margin-inline: auto; }
.bento { display: grid; max-width: 82rem; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #c9c1b5; border-left: 1px solid #c9c1b5; }
.tratamiento { position: relative; display: flex; min-height: 25rem; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid #c9c1b5; border-bottom: 1px solid #c9c1b5; background: #f3eee5; transition: transform .35s cubic-bezier(.32, .72, 0, 1); }
.tratamiento:hover { z-index: 1; transform: translateY(-4px); background: #fffaf1; }
.tratamiento--destacado { background: #e4d8c3; }
.tratamiento-arte { display: flex; align-items: flex-start; justify-content: space-between; color: #947442; }
.icono-tratamiento { width: 4rem; height: 4rem; stroke-width: 1.35; }
.perla { width: .5rem; aspect-ratio: 1; margin-top: .4rem; border-radius: 50%; background: var(--laton); }
.tratamiento-cuerpo .precio { margin-bottom: .6rem; color: #8b6b38; font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tratamiento-cuerpo h3 { margin: 0 0 .45rem; font-size: clamp(1.18rem, 1.8vw, 1.55rem); font-weight: 750; letter-spacing: -.025em; }
.tratamiento-cuerpo > p:not(.precio) { max-width: 27rem; margin-bottom: 1.3rem; color: #6f685e; font-size: .86rem; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .7rem; color: #644a22; font-size: .79rem; font-weight: 750; }
.enlace-flecha span { display: inline-block; transition: transform .25s cubic-bezier(.32, .72, 0, 1); }
.enlace-flecha:hover span { transform: translate(3px, -3px); }

/* Reserva en cuatro movimientos breves. */
.pasos-seccion { display: grid; grid-template-columns: minmax(15rem, .9fr) minmax(0, 1.1fr); gap: 8vw; align-items: start; padding: clamp(6rem, 11vw, 10rem) max(6vw, calc((100vw - 82rem) / 2)); background: #151412; }
.pasos-intro { position: sticky; top: 7rem; max-width: 34rem; }
.pasos-intro h2 { color: var(--hueso); }
.pasos-intro p { max-width: 24rem; color: #aaa49c; }
.pasos-lista { margin: 0; padding: 0; list-style: none; }
.paso { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.25rem; padding: 1.7rem 0; border-top: 1px solid var(--linea); }
.paso-punto { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid rgb(201 163 106 / 55%); border-radius: 50%; color: var(--laton); }
.paso-punto::before { width: .35rem; height: .35rem; border-radius: 50%; background: var(--laton); content: ""; }
.paso h3 { margin-bottom: .4rem; color: var(--hueso); font-size: 1.15rem; font-weight: 700; }
.paso p { max-width: 34rem; margin: 0; color: #a7a097; font-size: .85rem; }

/* El equipo se presenta como una línea editorial, no como tarjetas repetidas. */
.equipo { background: #d7c5a7; color: #211d17; }
.equipo .encabezado-seccion p { color: #675a47; }
.equipo-lista { display: grid; max-width: 76rem; margin: auto; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(33 29 23 / 23%); }
.persona { padding: 2rem clamp(1rem, 2.7vw, 2.5rem) .4rem 0; }
.monograma { display: grid; width: 3.6rem; aspect-ratio: 1; margin-bottom: 2.1rem; place-items: center; border: 1px solid #8c7046; border-radius: 50%; color: #70552d; font-size: .82rem; font-weight: 750; }
.persona h3 { max-width: 17ch; margin: 0 0 .4rem; font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 750; letter-spacing: -.025em; }
.persona p { color: #675a47; font-size: .82rem; }

/* Preguntas con disclosures nativos y una visita de ritmo pausado. */
.faq { display: grid; grid-template-columns: minmax(13rem, .8fr) minmax(0, 1.2fr); gap: 8vw; background: #101010; }
.faq .encabezado-seccion { margin: 0; text-align: left; }
.faq .encabezado-seccion h2 { max-width: 9ch; color: var(--hueso); }
.preguntas-lista { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary { position: relative; padding: 1.35rem 2.5rem 1.35rem 0; color: var(--hueso); cursor: pointer; font-size: 1.02rem; font-weight: 650; list-style: none; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { position: absolute; top: 1.25rem; right: .25rem; color: var(--laton); content: "+"; font-size: 1.3rem; }
.pregunta[open] summary::after { content: "−"; }
.respuesta { max-width: 42rem; padding: 0 2rem 1.2rem 0; color: #a9a39a; font-size: .88rem; }
.respuesta p { margin: 0; }
.visita { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: center; background: #272219; }
.visita-lugar h2 { max-width: 10ch; color: var(--hueso); }
.visita-lugar > p { max-width: 32rem; margin-bottom: 1.5rem; color: #bbb2a3; }
.visita-lugar .enlace-flecha { color: var(--laton); }
.visita-horario { padding: 1.5rem 0 0; border-top: 1px solid rgb(237 230 218 / 24%); }
.visita-horario h3 { margin-bottom: 1.2rem; color: var(--laton); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.visita-horario dl { margin: 0; }
.visita-horario dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgb(237 230 218 / 12%); color: #d1c8ba; font-size: .82rem; }
.visita-horario dd { margin: 0; color: var(--hueso); font-variant-numeric: tabular-nums; }

/* Cierre, pie y acceso persistente a WhatsApp. */
.cierre { display: grid; min-height: 32rem; justify-items: center; align-content: center; padding: 6rem 1.5rem; background: var(--laton); color: #16130e; text-align: center; }
.cierre h2 { max-width: 11ch; font-size: clamp(3rem, 6vw, 5.2rem); }
.boton--claro { background: var(--fondo); color: var(--hueso); }
.boton--claro:hover { background: #25211a; }
.pie { display: flex; min-height: 7rem; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem max(6vw, calc((100vw - 82rem) / 2)); background: #090909; color: #9c968d; font-size: .75rem; }
.pie p { margin: 0; }
.pie .marca { color: var(--hueso); }
.whatsapp-flotante { position: fixed; z-index: 8; right: 1.4rem; bottom: 1.3rem; display: flex; min-height: 3rem; align-items: center; gap: .6rem; padding: .6rem 1rem; border: 1px solid rgb(237 230 218 / 18%); border-radius: 99px; background: #171614; box-shadow: 0 8px 28px rgb(0 0 0 / 40%); color: var(--hueso); font-size: .76rem; }
.whatsapp-flotante svg { width: 1.15rem; height: 1.15rem; color: var(--laton); }

/* Movimiento: firmas lentas y revelado progresivo al hacer scroll. */
@keyframes entrada-filo { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes giro-franjas { to { background-position: 0 27rem; } }
@keyframes ticker-paseo { to { transform: translateX(-50%); } }
@keyframes poste-escena { to { transform: rotate(9deg) scale(1.08); } }
@keyframes navaja-escena { to { transform: rotate(5deg) translate(10%, -2%); } }
@keyframes frase-uno { 0%, 28% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateX(-1rem); } }
@keyframes frase-dos { 0%, 30% { opacity: 0; transform: translateX(1rem); } 38%, 63% { opacity: 1; transform: none; } 73%, 100% { opacity: 0; transform: translateX(-1rem); } }
@keyframes frase-tres { 0%, 65% { opacity: 0; transform: translateX(1rem); } 75%, 100% { opacity: 1; transform: none; } }

/* Ajustes de proporción, lectura y composición del arte. */
.hero-objeto { width: clamp(8.5rem, 12vw, 11rem); height: min(72vh, 36rem); min-height: 28rem; }
.poste-cuerpo { inset: 3.15rem 0; }
.poste-tapa { left: 4%; width: 92%; height: 2.7rem; }
.poste-tapa--arriba { top: 1.55rem; }
.poste-tapa--abajo { bottom: 1.55rem; }
.poste-base { right: 8%; left: 8%; height: 1.8rem; }
.poste-franjas { background: repeating-linear-gradient(135deg, #ede6da 0 1.8rem, #e7e0d3 1.8rem 2.35rem, #9e2b25 2.35rem 4.15rem, #78201d 4.15rem 4.7rem); }
@keyframes giro-franjas { to { background-position: 0 6.65rem; } }

.escena-navaja { left: 24%; width: min(38vw, 31rem); }
.escena-frases { right: 7%; width: min(34rem, 32vw); }
.escena-pie { right: auto; left: max(6vw, calc((100vw - 82rem) / 2)); max-width: 45vw; }

.icono-tratamiento { width: 4.5rem; height: 4.5rem; stroke-width: 1.6; }
.tratamiento-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .7rem; align-items: baseline; }
.tratamiento-cuerpo .precio { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.tratamiento-cuerpo h3 { grid-column: 1; grid-row: 1; align-self: baseline; }
.tratamiento-cuerpo > p:not(.precio), .tratamiento-cuerpo .enlace-flecha { grid-column: 1 / -1; }
.tratamiento--destacado { grid-column: span 2; }
/* Con seis servicios y uno doble queda una tarjeta huérfana: la última cierra la fila completa. */
.bento--6:has(.tratamiento--destacado) .tratamiento:last-child { grid-column: 1 / -1; }
@supports (animation-timeline: view()) {
  .escena-poste { animation: poste-escena 1s cubic-bezier(.16, 1, .3, 1) both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
  .escena-navaja { animation: navaja-escena 1s cubic-bezier(.16, 1, .3, 1) both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
  .frase-corte:first-child { animation: frase-uno 1s both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
  .frase-corte:nth-child(2) { animation: frase-dos 1s both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
  .frase-corte:nth-child(3) { animation: frase-tres 1s both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
}

/* Ajustes para pantallas medianas y teléfonos. */
@media (max-width: 760px) {
  .barra { top: .8rem; width: calc(100% - 1.4rem); }
  .nav-escritorio, .barra-accion { display: none; }
  .menu-boton { display: inline-flex; min-height: 2.55rem; align-items: center; gap: .8rem; padding: .4rem .9rem; border: 1px solid var(--linea); border-radius: 99px; background: transparent; color: var(--hueso); font-size: .76rem; }
  .menu-boton span { position: relative; display: inline-block; width: .8rem; height: .8rem; color: var(--laton); }
  .menu-boton span::before, .menu-boton span::after, .menu-cerrar::before, .menu-cerrar::after { position: absolute; top: 50%; left: 50%; width: .7rem; height: 1px; background: currentColor; content: ""; transform: translate(-50%, -50%); }
  .menu-boton span::after { transform: translate(-50%, -50%) rotate(90deg); }
  .menu-panel { position: fixed; inset: 0 0 0 auto; width: min(25rem, 100%); max-height: none; padding: 1.4rem; border: 0; background: #11100f; color: var(--hueso); }
  .menu-panel:popover-open { display: flex; flex-direction: column; }
  .menu-panel-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; color: var(--laton); font-size: .8rem; }
  .menu-cerrar { position: relative; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--hueso); font-size: 1.6rem; }
  .menu-cerrar::before { transform: translate(-50%, -50%) rotate(45deg); }
  .menu-cerrar::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .menu-panel > a:not(.menu-cita) { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--linea); font-size: 1.4rem; }
  .menu-cita { justify-content: center; margin-top: 2rem; }
  .hero { min-height: 0; grid-template-columns: 1fr; gap: 0; padding: 9rem 1.5rem 5rem; }
  .hero-texto { align-self: start; }
  .hero h1 { font-size: clamp(3.4rem, 15vw, 5rem); }
  .hero-arte { position: relative; right: auto; bottom: auto; width: 100%; min-height: 23rem; margin-top: 1.25rem; opacity: 1; }
  .hero-arte::before { width: min(22rem, 82vw); }
  .hero-objeto { width: 7rem; height: 21rem; min-height: 0; }
  .poste-cuerpo { inset: 2.5rem 0; }
  .poste-tapa { height: 2.2rem; }
  .poste-tapa--arriba { top: 1.2rem; }
  .poste-tapa--abajo { bottom: 1.2rem; }
  .hero-coordenada { display: none; }
  .hero-bajar { bottom: 1.5rem; left: 1.5rem; }
  .escena { height: 220vh; }
  .escena-fija { min-height: 32rem; }
  .escena-poste { left: 7%; width: 7rem; height: 48vh; min-height: 19rem; }
  .escena-poste .poste-tapa { height: 2.6rem; }
  .escena-navaja { top: 34%; left: 8%; width: 42vw; }
  .escena-frases { right: 5%; width: 39vw; }
  .frase-corte { font-size: clamp(2.8rem, 11vw, 4rem); }
  .escena-pie { right: auto; left: 1.2rem; bottom: 1rem; max-width: 43vw; font-size: .52rem; }
  .seccion, .pasos-seccion { padding: 6rem 1.35rem; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tratamiento { min-height: 22rem; padding: 1.25rem; }
  .tratamiento-cuerpo .precio { font-size: 1.8rem; }
  .pasos-seccion, .faq, .visita { grid-template-columns: 1fr; gap: 2.5rem; }
  .pasos-intro { position: static; }
  .equipo-lista { grid-template-columns: 1fr; }
  .persona { display: grid; grid-template-columns: 3.6rem 1fr; column-gap: 1rem; align-items: center; padding: 1.3rem 0; border-bottom: 1px solid rgb(33 29 23 / 18%); }
  .monograma { grid-row: span 2; margin: 0; }
  .persona h3 { align-self: end; }
  .persona p { align-self: start; margin: 0; }
  .pie { flex-wrap: wrap; padding: 1.5rem; }
  .pie p { order: 3; width: 100%; }
  .whatsapp-flotante { right: .8rem; bottom: .8rem; }
}

@media (max-width: 420px) {
  .hero { min-height: 0; padding-inline: 1.15rem; }
  .hero-arte { right: auto; bottom: auto; width: 100%; }
  .hero-acciones { gap: 1rem; }
  .boton { gap: .7rem; padding-inline: 1rem; font-size: .78rem; }
  .bento { grid-template-columns: 1fr; }
  .tratamiento--destacado { grid-column: auto; }
  .tratamiento { min-height: 18rem; }
  .tratamiento-cuerpo { grid-template-columns: minmax(0, 1fr) auto; column-gap: .45rem; }
  .tratamiento-cuerpo .precio { font-size: 1.35rem; }
  .tratamiento-cuerpo h3 { font-size: 1.05rem; }
  .escena-navaja { left: 4%; width: 43vw; }
  .escena-frases { right: 4%; width: 41vw; }
  .frase-corte { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

/* Accesibilidad: movimiento reducido conserva cada elemento visible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .poste-franjas, .ticker-pista { animation: none; }
  .escena-poste, .escena-navaja { transform: none; }
  .frase-corte { display: none; opacity: 1; transform: none; }
  .frase-corte:last-child { display: block; }
}

/* Correcciones del informe de pruebas (2026-10-08). */
/* La escena entera marca el ritmo: antes cada pieza medía su propia posición y las frases se apagaban solas. */
@supports (animation-timeline: view()) {
  .escena { view-timeline-name: --escena; }
  .escena-poste, .escena-navaja,
  .frase-corte:first-child, .frase-corte:nth-child(2), .frase-corte:nth-child(3) { animation-timeline: --escena; animation-range: contain 0% contain 100%; }
}
/* Contraste mínimo 4,5:1 sobre el crema. */
main .encabezado-seccion p, main .seccion.equipo .encabezado-seccion p { color: #4f483e; }
main .tratamiento-cuerpo > p:not(.precio) { color: #554d42; }
main .persona p { color: #4f4433; }
main .persona .monograma { color: #5b431f; }
/* El botón flotante de WhatsApp no tapa el pie. */
footer.pie { padding-bottom: 6.5rem; }

/* Movimiento reducido de verdad: una animación ligada al scroll ignora la duración,
   así que se apaga por completo, igual que las transiciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}