:root {
  --primario: #0E0F11;
  --acento: #FF5A1F;
  --sobre-primario: #FFFFFF;
  --sobre-acento: #000000;
}
/* Tipografía local y superficies del taller. */
@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;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fuentes/jetbrains-mono-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --grafito: #0e0f11;
  --grafito-claro: #17191c;
  --titanio: #c9cdd2;
  --humo: #858a91;
  --naranja: #ff5a1f;
  --linea: rgb(201 205 210 / 17%);
  --mono: "JetBrains Mono", Consolas, monospace;
  font-family: Archivo, Arial, sans-serif;
  font-stretch: 100%;
  color: var(--titanio);
  background: var(--grafito);
  accent-color: var(--naranja);
  scrollbar-color: #53565b var(--grafito);
  scroll-behavior: smooth;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: clip; }
body { margin: 0; min-width: 320px; overflow-x: clip; }
::selection { color: var(--grafito); background: var(--naranja); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--naranja); outline-offset: 5px; }
button { color: inherit; font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { text-wrap: balance; }
.saltar { position: fixed; z-index: 20; top: .5rem; left: .5rem; padding: .8rem 1rem; color: var(--grafito); background: var(--naranja); transform: translateY(-160%); }
.saltar:focus { transform: translateY(0); }

/* Isla de navegación. */
.barra { position: absolute; z-index: 10; top: 1.3rem; left: 50%; display: flex; align-items: center; justify-content: space-between; width: min(1280px, calc(100% - 4rem)); min-height: 3.6rem; padding: .55rem .65rem .55rem 1.2rem; border: 1px solid rgb(255 255 255 / 11%); border-radius: 4rem; background: rgb(14 15 17 / 83%); transform: translateX(-50%); }
.marca { display: inline-flex; align-items: center; gap: .65rem; font-size: .86rem; font-weight: 750; }
.marca-simbolo { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--grafito); background: var(--naranja); font-family: var(--mono); font-size: .9rem; font-weight: 700; }
.marca-simbolo span { margin-left: -.18rem; color: white; }
.nav-escritorio { display: flex; gap: 2rem; color: #c4c6ca; font-size: .82rem; }
.nav-escritorio a, .pie a { transition: color .25s cubic-bezier(.32,.72,0,1); }
.nav-escritorio a:hover, .pie a:hover { color: var(--naranja); }
.barra-accion { display: flex; align-items: center; gap: 1rem; padding: .76rem 1.2rem; border-radius: 3rem; color: #151515; background: var(--titanio); font-size: .78rem; font-weight: 750; transition: transform .25s cubic-bezier(.32,.72,0,1), background .25s cubic-bezier(.32,.72,0,1); }
.barra-accion:hover { background: white; transform: scale(.98); }
.menu-boton, .menu-panel { display: none; }

/* Portada y tacómetro de aluminio. */
.hero { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; min-height: 100dvh; max-width: 1600px; margin-inline: auto; padding: 8rem clamp(2rem, 8vw, 8rem) 6rem; overflow: hidden; }
.hero::before { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 70% 46%, #24272b 0, #151719 32%, var(--grafito) 68%); content: ""; }
.hero-texto { position: relative; z-index: 1; padding-top: 1rem; }
.hero h1 { margin-bottom: 1.5rem; color: #f0f1f2; font-size: clamp(3.5rem, 8vw, 6rem); font-stretch: 62%; font-weight: 850; letter-spacing: -.025em; line-height: .82; }
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--naranja); }
.hero-frase { max-width: 28rem; margin-bottom: .8rem; font-size: clamp(1.15rem, 1.6vw, 1.55rem); font-weight: 600; }
.hero-descripcion { max-width: 29rem; margin-bottom: 2rem; color: #a5a9ae; font-size: .96rem; line-height: 1.65; }
.hero-acciones { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem; min-height: 3.4rem; padding: .8rem 1.35rem; border-radius: 3rem; color: #151515; background: var(--naranja); font-size: .84rem; font-weight: 750; transition: transform .25s cubic-bezier(.32,.72,0,1), background .25s cubic-bezier(.32,.72,0,1); }
.boton:hover { background: #ff7849; transform: scale(.98); }
.boton-flecha { font-family: var(--mono); }
.hero-secundario { display: flex; align-items: center; gap: .7rem; color: #d7d9dc; font-size: .84rem; }
.hero-secundario span { color: var(--naranja); font-family: var(--mono); }
.hero-arte { position: relative; display: grid; min-width: 0; place-items: center; }
.tacometro { position: relative; width: min(54vw, 690px); aspect-ratio: 1.16; }
.tacometro-halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgb(255 90 31 / 9%), transparent 68%); filter: blur(16px); }
.dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 30px 28px rgb(0 0 0 / 42%)); }
.dial-sombra { fill: #08090a; stroke: #3d4146; stroke-width: 14; }
.dial-cuerpo { fill: url(#dial-metal); fill: #22262a; stroke: #a4a8ac; stroke-width: 2; }
.dial-bisel { fill: #141619; stroke: #535960; stroke-width: 2; }
.arco-base, .arco-rojo { fill: none; stroke-linecap: round; stroke-width: 8; }
.arco-base { stroke: #8b9095; }
.arco-rojo { stroke: var(--naranja); stroke-dasharray: 95 680; }
.marcas { fill: none; stroke: #d0d2d4; stroke-linecap: round; }
.marcas-menores { stroke-width: 2.5; opacity: .78; }
.marcas-mayores { stroke-width: 4; }
.cifras { fill: #d5d7d9; font: 700 22px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.unidad { fill: #8e9499; font: 600 14px var(--mono); text-anchor: middle; letter-spacing: 1px; }
.aguja { fill: var(--naranja); transform-box: view-box; transform-origin: 360px 383px; animation: aguja-carga 1.5s cubic-bezier(.16,1,.3,1) both; }
.eje { fill: #1a1d20; stroke: #a7aaae; stroke-width: 3; }
.eje-centro { fill: var(--naranja); }
.marca-torque { fill: #bec2c5; font: 800 17px Archivo, sans-serif; letter-spacing: 3px; text-anchor: middle; }
.dial-reflejo { position: absolute; inset: 7% 9% 20%; border-radius: 50%; background: linear-gradient(132deg, rgb(255 255 255 / 14%), transparent 28% 71%, rgb(255 255 255 / 4%)); clip-path: ellipse(47% 46% at 50% 48%); pointer-events: none; }
.engranaje { position: absolute; z-index: -1; top: 20%; right: 0; width: 88%; fill: #33373b; opacity: .48; animation: engranaje-gira 45s cubic-bezier(.32,.72,0,1) infinite; }
.hero-lectura { position: absolute; right: 1%; bottom: 12%; display: grid; gap: .12rem; padding: .9rem 1.1rem; border: 1px solid #585d63; border-radius: .55rem; background: #111315; font-family: var(--mono); }
.hero-lectura span, .hero-lectura small { color: #858a90; font-size: .57rem; letter-spacing: .05em; }
.hero-lectura strong { color: var(--naranja); font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-bajar { display: flex; width: fit-content; gap: 1rem; margin-top: 2rem; color: #8f9499; font: 500 .72rem var(--mono); letter-spacing: .02em; }
.hero-bajar span + span { color: var(--naranja); }
@keyframes aguja-carga { from { transform: rotate(0); } to { transform: rotate(17.14deg); } }
@keyframes engranaje-gira { to { transform: rotate(360deg); } }

/* Escena de scroll con dial y lecturas sincronizadas. */
.escena { position: relative; height: 270vh; background: #08090a; }
.escena-fija { position: sticky; top: 0; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; width: 100%; height: 100svh; min-height: 36rem; max-height: 60rem; padding: 4rem clamp(2rem, 9vw, 9rem); overflow: hidden; }
.escena-fija::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 66% 50%, #25292d, #111315 51%, #08090a 77%); content: ""; }
.escena-titulo, .escena-instrumento, .escena-frases, .escena-progreso { position: relative; }
.escena-titulo h2 { max-width: 30rem; color: #f0f1f2; font-size: clamp(3rem, 6vw, 5.5rem); font-stretch: 65%; font-weight: 800; letter-spacing: -.02em; line-height: .91; }
.escena-instrumento { grid-column: 2; grid-row: 1; display: grid; place-items: center; }
.escena-instrumento .tacometro { width: min(48vw, 600px); }
.escena-instrumento .aguja { animation: none; transform: rotate(0); }
.escena-lectura { position: absolute; right: 3%; bottom: 12%; padding: .5rem .8rem; border: 1px solid #555b60; color: var(--naranja); background: #111315; font: 500 clamp(1rem, 2.2vw, 1.8rem) var(--mono); font-variant-numeric: tabular-nums; }
.escena-lectura small { color: #858a90; font-size: .48em; }
.escena-frases { position: absolute; z-index: 2; bottom: 13%; left: clamp(2rem, 9vw, 9rem); display: flex; flex-direction: column; gap: .4rem; }
.escena-frases p { width: max-content; margin: 0; color: var(--titanio); font-size: clamp(1.3rem, 2.3vw, 2.2rem); font-weight: 650; }
.escena-progreso { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #35383b; }
.escena-progreso span { display: block; width: 100%; height: 100%; background: var(--naranja); transform: scaleX(.05); transform-origin: left; }
@supports (animation-timeline: view()) {
  .escena-frases { display: block; bottom: 15%; }
  .escena-frases p { position: absolute; bottom: 0; opacity: 0; }
  .frase-uno { opacity: 1; }
  .escena-instrumento .aguja { animation: aguja-scroll 1 both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .escena-lectura { animation: lectura-scroll 1 both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .escena-progreso span { animation: progreso-scroll 1 both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .frase-uno { animation: frase-uno 1 both; animation-timeline: view(); animation-range: entry 0% entry 36%; }
  .frase-dos { animation: frase-dos 1 both; animation-timeline: view(); animation-range: entry 32% entry 68%; }
  .frase-tres { animation: frase-tres 1 both; animation-timeline: view(); animation-range: entry 64% exit 100%; }
  @keyframes aguja-scroll { from { transform: rotate(0); } to { transform: rotate(240deg); } }
  @keyframes lectura-scroll { from { opacity: .25; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes progreso-scroll { to { transform: scaleX(1); } }
  @keyframes frase-uno { 0%, 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }
  @keyframes frase-dos { 0% { opacity: 0; transform: translateY(14px); } 15%, 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-14px); } }
  @keyframes frase-tres { 0% { opacity: 0; transform: translateY(14px); } 15%, 100% { opacity: 1; transform: translateY(0); } }
}

/* Cinta de especificaciones en movimiento. */
.ticker { max-width: 100%; overflow: hidden; border-block: 1px solid var(--linea); background: #131517; }
.ticker-pista { display: flex; align-items: center; width: max-content; min-height: 4rem; }
.ticker-pista span { padding-inline: 1.5rem; color: #b8bdc2; font: 500 .68rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.ticker-pista i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--naranja); }

/* Servicios como ficha técnica. */
.seccion { padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 8vw, 8rem); }
.tratamientos { color: var(--grafito); background: #c9cdd2; }
.encabezado-seccion { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 2rem; max-width: 1260px; margin: 0 auto 4rem; }
.encabezado-seccion h2 { max-width: 52rem; margin: 0; font-size: clamp(3rem, 6.7vw, 5.8rem); font-stretch: 62%; font-weight: 850; letter-spacing: -.025em; line-height: .9; }
.encabezado-seccion > p { max-width: 27rem; margin: 0 0 .2rem; color: #494e53; font-size: 1rem; line-height: 1.6; }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1260px; margin: auto; border-top: 1px solid #8d9296; border-left: 1px solid #8d9296; }
.tratamiento { position: relative; display: flex; min-height: 24rem; flex-direction: column; justify-content: space-between; padding: 1.6rem 1.8rem 1.8rem; border-right: 1px solid #8d9296; border-bottom: 1px solid #8d9296; overflow: hidden; transition: background .3s cubic-bezier(.32,.72,0,1); }
.tratamiento:hover { background: #d9dcdf; }
.tratamiento-arte { display: flex; align-items: center; justify-content: space-between; }
.icono-tratamiento { width: 3.2rem; height: 3.2rem; color: #4e5459; stroke-width: 1.25; }
.perla { display: none; }
.tratamiento-cuerpo .precio { margin-bottom: .85rem; color: #666d73; font: 500 .77rem var(--mono); font-variant-numeric: tabular-nums; }
.tratamiento-cuerpo h3 { max-width: 21rem; margin-bottom: .6rem; font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-stretch: 68%; font-weight: 800; letter-spacing: -.015em; line-height: .98; }
.tratamiento-cuerpo > p:not(.precio) { max-width: 25rem; min-height: 2.8rem; margin-bottom: 1.35rem; color: #555b60; font-size: .89rem; line-height: 1.5; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .8rem; color: inherit; font-size: .77rem; font-weight: 750; }
.enlace-flecha span { color: var(--naranja); font-family: var(--mono); transition: transform .25s cubic-bezier(.32,.72,0,1); }
.enlace-flecha:hover span { transform: translate(3px, -3px); }
.tratamiento--destacado { background: #d6d9dc; }

/* Proceso aprobado paso a paso. */
.pasos-seccion { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 9vw, 9rem); padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 8vw, 8rem); background: var(--grafito); }
.pasos-intro { max-width: 36rem; }
.pasos-intro h2 { margin-bottom: 1.3rem; color: #f0f1f2; font-size: clamp(3rem, 6vw, 5.2rem); font-stretch: 63%; font-weight: 850; letter-spacing: -.02em; line-height: .9; }
.pasos-intro p { max-width: 25rem; color: #9a9fa5; font-size: 1rem; line-height: 1.6; }
.pasos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 0; padding: 0; list-style: none; }
.paso { display: grid; grid-template-columns: 1.1rem 1fr; gap: 1rem; min-height: 10rem; padding: 1.4rem 0; border-top: 1px solid var(--linea); }
.paso-punto { width: .52rem; height: .52rem; margin-top: .55rem; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 15px rgb(255 90 31 / 40%); }
.paso h3 { margin-bottom: .55rem; color: #e8eaec; font-size: 1.22rem; font-weight: 700; }
.paso p { margin: 0; color: #92979d; font-size: .86rem; line-height: 1.55; }

/* Equipo ficticio y nombres claros. */
.equipo { color: var(--grafito); background: #e8e9e9; }
.equipo .encabezado-seccion { margin-bottom: 3rem; }
.equipo .encabezado-seccion > p { color: #555a5f; }
.equipo-lista { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1260px; margin-inline: auto; border-top: 1px solid #a8abae; }
.persona { padding: 1.6rem 1.4rem 1.4rem 0; border-bottom: 1px solid #a8abae; }
.monograma { display: grid; width: 3.2rem; height: 3.2rem; margin-bottom: 2.4rem; place-items: center; border-radius: 50%; color: var(--naranja); background: var(--grafito); font: 500 .85rem var(--mono); }
.persona h3 { margin-bottom: .5rem; font-size: 1.22rem; font-weight: 750; }
.persona p { margin: 0; color: #5d6267; font-size: .88rem; }

/* Preguntas en acordeón nativo. */
.faq { color: var(--grafito); background: #c9cdd2; }
.faq .encabezado-seccion { display: block; max-width: 1260px; margin-bottom: 3.5rem; }
.preguntas-lista { max-width: 950px; margin-left: auto; border-top: 1px solid #92979c; }
.pregunta { border-bottom: 1px solid #92979c; }
.pregunta summary { position: relative; padding: 1.35rem 3rem 1.35rem 0; cursor: pointer; font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 700; list-style: none; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { position: absolute; top: 1.25rem; right: .4rem; color: #e84b15; content: "+"; font: 400 1.5rem var(--mono); }
.pregunta[open] summary::after { content: "−"; }
.respuesta { max-width: 48rem; padding: 0 2rem 1.4rem 0; color: #4d5358; font-size: .92rem; line-height: 1.65; }
.respuesta p { margin: 0; }

/* Ubicación y jornada técnica. */
.visita { display: grid; grid-template-columns: 1.05fr .95fr; gap: 5rem; color: #e2e4e6; background: #17191c; }
.visita-lugar h2 { max-width: 39rem; margin-bottom: 1.3rem; font-size: clamp(3rem, 6vw, 5.4rem); font-stretch: 63%; font-weight: 850; letter-spacing: -.02em; line-height: .9; }
.visita-lugar > p { max-width: 32rem; color: #a1a5aa; font-size: 1rem; line-height: 1.6; }
.visita-lugar .enlace-flecha { margin-top: 1rem; color: #f1f2f3; }
.visita-horario h3 { margin-bottom: 1rem; color: #858a90; font: 500 .7rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.visita-horario dl { margin: 0; border-top: 1px solid var(--linea); }
.visita-horario dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .83rem 0; border-bottom: 1px solid var(--linea); font-size: .86rem; }
.visita-horario dt { color: #aeb2b6; }
.visita-horario dd { margin: 0; color: #e5e7e9; font: 500 .76rem var(--mono); font-variant-numeric: tabular-nums; }

/* Última llamada a la acción. */
.cierre { display: flex; min-height: 30rem; flex-direction: column; align-items: center; justify-content: center; padding: 6rem 1.5rem; color: #111315; background: var(--naranja); text-align: center; }
.cierre h2 { margin-bottom: 2rem; font-size: clamp(3.2rem, 8vw, 6rem); font-stretch: 62%; font-weight: 850; letter-spacing: -.025em; line-height: .86; }
.boton--claro { color: #f4f5f5; background: #151719; }
.boton--claro:hover { background: #303337; }

/* Pie y acceso persistente a WhatsApp. */
.pie { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 7rem; padding: 1.5rem clamp(1.5rem, 8vw, 8rem); background: #090a0b; }
.pie p, .pie > a:last-child { margin: 0; color: #80858a; font-size: .73rem; }
.pie > a:last-child span { color: var(--naranja); }
.whatsapp-flotante { position: fixed; z-index: 9; right: 1.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: .55rem; padding: .75rem 1rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 3rem; color: white; background: #17191c; box-shadow: 0 8px 28px rgb(0 0 0 / 28%); font-size: .75rem; font-weight: 650; transition: transform .25s cubic-bezier(.32,.72,0,1), border-color .25s cubic-bezier(.32,.72,0,1); }
.whatsapp-flotante:hover { border-color: var(--naranja); transform: scale(.98); }
.whatsapp-flotante svg { width: 1.2rem; height: 1.2rem; color: var(--naranja); }

/* Diseño compacto. */
@media (max-width: 850px) {
  .barra { width: calc(100% - 2rem); }
  .nav-escritorio { gap: 1rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 9rem 2rem 5rem; }
  .hero-texto { max-width: 40rem; }
  .hero-arte { min-height: 25rem; }
  .tacometro { width: min(86vw, 600px); }
  .encabezado-seccion { grid-template-columns: 1fr; align-items: start; }
  .encabezado-seccion > p { max-width: 38rem; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos-seccion { grid-template-columns: 1fr; }
  .visita { gap: 3.5rem; }
}
@media (max-width: 600px) {
  .barra { top: .75rem; width: calc(100% - 1.2rem); padding-left: .75rem; }
  .marca { gap: .45rem; font-size: .75rem; }
  .marca-simbolo { width: 1.8rem; height: 1.8rem; }
  .nav-escritorio, .barra-accion { display: none; }
  .menu-boton { display: block; padding: .7rem .9rem; border: 0; border-radius: 3rem; color: var(--grafito); background: var(--titanio); font-size: .75rem; font-weight: 750; }
  .menu-boton span { padding-left: .5rem; color: #f04e18; }
  .menu-panel { position: fixed; inset: 0 0 0 auto; width: min(90vw, 25rem); height: 100dvh; max-height: none; margin: 0; padding: 1.4rem; border: 0; color: var(--titanio); background: #121416; }
  .menu-panel:popover-open { display: flex; flex-direction: column; gap: 0; }
  .menu-panel::backdrop { background: rgb(0 0 0 / 65%); }
  .menu-panel-cabeza { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2rem; color: #888d92; font: 500 .72rem var(--mono); }
  .menu-cerrar { width: 2.4rem; height: 2.4rem; border: 1px solid var(--linea); border-radius: 50%; background: transparent; font-size: 1.3rem; }
  .menu-panel > a { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem .2rem; border-bottom: 1px solid var(--linea); font-size: 1.3rem; font-weight: 650; }
  .menu-panel > a span { color: var(--naranja); font-family: var(--mono); }
  .menu-panel > .menu-cita { margin-top: auto; padding: 1rem 1.1rem; border: 0; border-radius: 3rem; color: #111315; background: var(--naranja); font-size: .95rem; }
  .hero { min-height: 100svh; padding: 8.2rem 1.25rem 4rem; }
  .hero h1 { font-size: clamp(3.3rem, 15vw, 5rem); }
  .hero-frase { max-width: 22rem; font-size: 1.18rem; }
  .hero-descripcion { max-width: 23rem; font-size: .87rem; }
  .hero-arte { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; margin: -1rem -1rem 0; }
  .tacometro { width: 100%; }
  .hero-lectura { position: relative; right: auto; bottom: auto; grid-row: 2; justify-self: center; margin-top: -.5rem; padding: .55rem .7rem; }
  .hero-lectura strong { font-size: 1.15rem; }
  .hero-bajar { margin-top: 1.5rem; font-size: .68rem; }
  .escena { height: 240vh; }
  .escena-fija { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100svh; padding: 6rem 1.25rem 4rem; }
  .escena-titulo h2 { max-width: 20rem; margin-bottom: 0; font-size: 3.3rem; }
  .escena-instrumento { grid-column: 1; grid-row: 2; align-self: center; margin: -1rem -1rem 2rem; }
  .escena-instrumento .tacometro { width: 100%; }
  .escena-lectura { right: 0; bottom: 10%; font-size: 1.05rem; }
  .escena-frases { bottom: 8%; left: 1.25rem; }
  .escena-frases p { font-size: 1.25rem; }
  .ticker-pista { min-height: 3.4rem; }
  .ticker-pista span { padding-inline: 1rem; font-size: .58rem; }
  .seccion { padding: 5.5rem 1.25rem; }
  .encabezado-seccion { gap: 1.3rem; margin-bottom: 2.5rem; }
  .encabezado-seccion h2 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
  .encabezado-seccion > p { font-size: .9rem; }
  .bento { grid-template-columns: 1fr; }
  .tratamiento { min-height: 20rem; padding: 1.25rem; }
  .tratamiento-cuerpo h3 { font-size: 2rem; }
  .pasos-seccion { gap: 1.5rem; padding: 5.5rem 1.25rem; }
  .pasos-intro h2 { font-size: 3.4rem; }
  .pasos-lista { grid-template-columns: 1fr; }
  .paso { min-height: 0; padding: 1.15rem 0 1.4rem; }
  .equipo-lista { grid-template-columns: 1fr; }
  .persona { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; align-items: center; padding: 1rem 0; }
  .monograma { grid-row: span 2; margin: 0; }
  .persona h3, .persona p { margin: 0; }
  .persona h3 { font-size: 1.05rem; }
  .persona p { font-size: .8rem; }
  .faq .encabezado-seccion { margin-bottom: 2rem; }
  .pregunta summary { padding-block: 1.15rem; font-size: 1.08rem; }
  .pregunta summary::after { top: 1.05rem; }
  .respuesta { font-size: .85rem; }
  .visita { grid-template-columns: 1fr; gap: 3rem; }
  .visita-lugar h2 { font-size: 3.4rem; }
  .visita-horario dl > div { font-size: .8rem; }
  .visita-horario dd { font-size: .67rem; }
  .cierre { min-height: 24rem; }
  .cierre h2 { font-size: clamp(3.2rem, 14vw, 4.8rem); }
  .pie { align-items: flex-start; flex-direction: column; gap: .9rem; padding: 1.5rem 1.25rem 6rem; }
  .whatsapp-flotante { right: .9rem; bottom: .9rem; }
}

/* Movimiento reducido deja visible toda la experiencia. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .escena-frases p { opacity: 1; }
  .escena-frases { bottom: 5%; }
  .escena-frases p { position: static; margin-top: .5rem; }
  .escena-progreso span { transform: scaleX(1); }
  .escena-instrumento .aguja { transform: rotate(240deg); }
}

/* Correcciones del informe de pruebas (2026-10-08). */
/* La escena entera marca el ritmo, y las frases quedan en lista: se encienden por turno,
   nunca se montan una sobre otra ni se quedan invisibles. */
@supports (animation-timeline: view()) {
  .escena { view-timeline-name: --escena; }
  .escena-instrumento .aguja, .escena-lectura, .escena-progreso span { animation-timeline: --escena; animation-range: contain 0% contain 100%; }
  .escena-frases { display: flex; }
  .escena-frases p { position: static; opacity: .32; }
  .frase-uno { animation: frase-luz both; animation-timeline: --escena; animation-range: contain 0% contain 40%; }
  .frase-dos { animation: frase-luz both; animation-timeline: --escena; animation-range: contain 30% contain 70%; }
  .frase-tres { animation: frase-final both; animation-timeline: --escena; animation-range: contain 60% contain 100%; }
  @keyframes frase-luz { 0% { opacity: .32; transform: translateX(-8px); } 35%, 70% { opacity: 1; transform: none; } 100% { opacity: .32; transform: none; } }
  @keyframes frase-final { 0% { opacity: .32; transform: translateX(-8px); } 40%, 100% { opacity: 1; transform: none; } }
}
/* Contraste: precios, textos y símbolos legibles. */
main .tratamiento-cuerpo .precio { color: #3f4549; }
main .tratamiento-cuerpo > p:not(.precio) { color: #3b4044; }
main .pregunta summary::after { color: #a3330c; }
/* El botón flotante de WhatsApp no tapa el pie. */
footer.pie { padding-bottom: 6.5rem; }

/* Segundo informe de pruebas (2026-10-08). */
/* Cada frase se queda encendida al llegar: al terminar la escena se leen las tres. */
@supports (animation-timeline: view()) {
  @keyframes frase-luz { 0% { opacity: .32; transform: translateX(-8px); } 35%, 100% { opacity: 1; transform: none; } }
}
/* Símbolos legibles: la barra del logotipo sobre el naranja, y flechas y «+» sobre fondos claros (mínimo 4,5:1). */
.marca-simbolo span { color: #3d1404; }
main .tratamientos .enlace-flecha span, .menu-boton span { color: #8f2a08; }
/* En escritorio el enlace del pie nunca comparte columna con el botón flotante. */
@media (min-width: 601px) { footer.pie { padding-right: max(clamp(1.5rem, 8vw, 8rem), 11rem); } }

/* 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; }
}