/* ==========================================================================
   Clínica Dental Rodríguez Barba. Estilos.
   Los valores salen de tokens.css. Aquí no hay colores ni fuentes sueltos.

   Sistema de alineación: rejilla de 12 columnas con dos ejes que se repiten
   en toda la página. Los titulares cuelgan de la columna 1; el texto
   corrido arranca en la columna 5. Debajo de 900px: un solo eje.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

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

html {
  scrollbar-color: var(--c-borde) var(--c-tiza);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--c-tiza);
  color: var(--c-tinta);
  font-family: var(--f-carta);
  font-size: var(--t-texto);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }

h1, h2, h3, h4, p, dl, dd, ol, ul, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button { font: inherit; color: inherit; }

a { color: inherit; }

input, select, textarea { caret-color: var(--c-texto-campo); }

::selection { background: var(--c-acento); color: var(--c-sobre-acento); }

:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 3px;
}

.sin-corte { white-space: nowrap; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -100px;
  z-index: 40;
  padding: var(--e-3) var(--e-4);
  background: var(--c-tinta);
  color: var(--c-tiza);
  font-family: var(--f-placa);
  text-decoration: none;
}
.saltar:focus { top: var(--e-3); }

/* --- Rejilla -------------------------------------------------------------- */

.marco {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
}

@media (max-width: 899px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .rejilla > * { grid-column: 1 / -1 !important; }
}

/* --- Tipografía ----------------------------------------------------------- */

.titulo-seccion {
  font-family: var(--f-placa);
  font-size: var(--t-h2);
  font-weight: 380;
  font-stretch: calc(var(--anchura-titulo) * 1%);
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.titulo-bloque {
  font-family: var(--f-placa);
  font-size: var(--t-h3);
  font-weight: 450;
  font-stretch: 104%;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.entradilla {
  font-size: var(--t-lead);
  line-height: 1.42;
  max-width: 34ch;
  text-wrap: pretty;
}

.texto p + p { margin-top: 0.85em; }
.texto { max-width: 62ch; text-wrap: pretty; }

.enlace {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--c-acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 160ms var(--curva-salida);
}
@media (hover: hover) {
  .enlace:hover { text-decoration-thickness: 2px; }
}

.icono-pin { width: 1.15em; height: 1.15em; }

/* --- Botones -------------------------------------------------------------- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0 var(--e-5);
  border: var(--linea) solid transparent;
  border-radius: var(--radio);
  font-family: var(--f-placa);
  font-size: 1rem;
  font-weight: 560;
  font-stretch: 104%;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms var(--curva-salida),
    border-color 200ms var(--curva-salida),
    color 200ms var(--curva-salida),
    transform 140ms var(--curva-salida),
    translate 500ms var(--curva-salida);
}
.boton:active { transform: scale(0.97); }
.boton svg { width: 1.25em; height: 1.25em; }

/* El texto rueda: al pasar el ratón sube y entra una copia desde abajo. */
.boton__texto {
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25;
}
.boton__texto > span {
  display: block;
  text-shadow: 0 1.5em currentColor;
  transition: translate 520ms var(--curva-salida);
}
@media (hover: hover) {
  .boton:hover .boton__texto > span { translate: 0 -1.5em; }
}

.boton--cita {
  background: var(--c-acento);
  color: var(--c-sobre-acento);
}
@media (hover: hover) {
  .boton--cita:hover { background: var(--c-acento-hover); }
}

.boton--grande {
  min-height: 60px;
  padding-inline: var(--e-6);
  font-size: 1.0625rem;
}

.boton--linea,
.boton--llegar,
.boton--ruta {
  background: transparent;
  color: var(--c-tinta);
  border-color: var(--c-tinta);
}
@media (hover: hover) {
  .boton--linea:hover,
  .boton--llegar:hover,
  .boton--ruta:hover { background: var(--c-tinta); color: var(--c-tiza); }
}

.boton--whatsapp {
  background: var(--c-whatsapp);
  color: var(--c-blanco);
  font-weight: 600;
}
@media (hover: hover) {
  .boton--whatsapp:hover { background: var(--c-whatsapp-hover); }
}

/* La chincheta salta de vez en cuando, y al pasar el ratón. */
.boton--llegar .icono-pin,
.boton--ruta .icono-pin,
.barra-movil__accion--llegar .icono-pin {
  transform-origin: 50% 100%;
}

/* --- Cabecera ------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--c-tiza);
  border-bottom: var(--linea) solid var(--c-filete);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  height: var(--alto-cabecera);
}

/* Progreso de lectura: un filete de acento que crece bajo la cabecera. */
.cabecera__progreso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-acento);
  transform: scaleX(0);
  transform-origin: left center;
}

.marca {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  font-family: var(--f-placa);
  line-height: 1;
  margin-right: auto;
}
.marca__nombre {
  font-size: 1.125rem;
  font-weight: 480;
  font-stretch: calc(var(--anchura-nombre) * 1%);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marca__tipo {
  font-size: 0.75rem;
  font-weight: 450;
  color: var(--c-grafito);
  letter-spacing: 0.01em;
}

.nav { position: relative; display: flex; gap: var(--e-5); }
.nav a {
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 450;
  text-decoration: none;
  padding-block: var(--e-2);
  color: var(--c-grafito);
  transition: color 200ms var(--curva-salida);
}
.nav a[aria-current="true"] { color: var(--c-tinta); }
@media (hover: hover) {
  .nav a:hover { color: var(--c-tinta); }
}
/* La marca de sección: se desliza al enlace de la sección en la que estás. */
.nav__marca {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--ancho-marca, 0);
  height: 2px;
  background: var(--c-acento);
  transform: translateX(var(--x-marca, 0));
  opacity: var(--opacidad-marca, 0);
  transition:
    transform 520ms var(--curva-cajon),
    width 520ms var(--curva-cajon),
    opacity 200ms var(--curva-salida);
}

.contacto-rapido {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  font-family: var(--f-placa);
}
.contacto-rapido__tel {
  font-size: 1rem;
  font-weight: 560;
  font-feature-settings: "tnum" 1;
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--e-2);
}
.cabecera .boton { min-height: 40px; padding-inline: var(--e-4); font-size: 0.9375rem; }

.menu-boton {
  display: none;
  align-items: center;
  gap: var(--e-3);
  min-height: 44px;
  padding: 0 0 0 var(--e-3);
  border: 0;
  background: none;
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 560;
  cursor: pointer;
}
.menu-boton__lineas {
  width: 22px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transition: height 200ms var(--curva-salida);
}
@media (hover: hover) {
  .menu-boton:hover .menu-boton__lineas { height: 5px; }
}

@media (max-width: 1179px) {
  .nav { display: none; }
  .menu-boton { display: inline-flex; }
}
@media (max-width: 899px) {
  :root { --alto-cabecera: 60px; }
  .contacto-rapido__tel,
  .boton--llegar { display: none; }
  html { scroll-padding-top: calc(var(--alto-cabecera) + var(--e-3)); }
}
@media (max-width: 519px) {
  .contacto-rapido { display: none; }
}

/* --- Menú (móvil y tablet) ------------------------------------------------ */

.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  background: var(--c-noche);
  color: var(--c-sobre-noche);
  --c-acento: var(--c-sobre-noche);
  overscroll-behavior: contain;
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: transparent; }

.menu__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--alto-cabecera);
  flex-shrink: 0;
  border-bottom: var(--linea) solid var(--c-filete-noche);
}
.marca--noche .marca__tipo { color: var(--c-sobre-noche-suave); }
.menu__cerrar {
  min-height: 44px;
  padding: 0 0 0 var(--e-4);
  border: 0;
  background: none;
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 560;
  cursor: pointer;
}

.menu__nav { flex: 1; overflow-y: auto; padding-block: var(--e-5); }
.menu__lista a {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding-block: 0.32em;
  border-bottom: var(--linea) solid var(--c-filete-noche);
  font-family: var(--f-placa);
  font-size: clamp(1.85rem, 1.2rem + 3.6vw, 3.25rem);
  font-weight: 360;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
  overflow: hidden;
}
.menu__num {
  width: 2.2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  color: var(--c-sobre-noche-suave);
  letter-spacing: 0;
}
.menu__texto { display: block; transition: translate 400ms var(--curva-salida); }
.menu__lista a[aria-current="true"] .menu__num { color: var(--c-sobre-noche); }
.menu__lista a[aria-current="true"] .menu__texto { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
@media (hover: hover) {
  .menu__lista a:hover .menu__texto { translate: 0.3em 0; }
}

.menu__pie {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--e-2) var(--e-5);
  padding-block: var(--e-5) var(--e-6);
  border-top: var(--linea) solid var(--c-filete-noche);
  font-family: var(--f-placa);
}
.menu__tel {
  font-size: 1.5rem;
  font-weight: 400;
  font-stretch: 112%;
  font-feature-settings: "tnum" 1;
  text-decoration: none;
}
.menu__direccion { grid-row: 2; font-size: var(--t-pie); color: var(--c-sobre-noche-suave); }
.menu__wa {
  grid-row: 1 / 3;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0 var(--e-4);
  border-radius: var(--radio-flotante);
  background: var(--c-whatsapp);
  color: var(--c-blanco);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.menu__wa svg { width: 22px; height: 22px; }
@media (max-width: 419px) {
  .menu__pie { grid-template-columns: 1fr; }
  .menu__wa { grid-row: auto; grid-column: auto; justify-self: start; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-top: clamp(var(--e-6), 4vw, var(--e-8));
  padding-bottom: var(--e-seccion);
}

.hero__texto {
  grid-column: 1 / 8;
  display: flex;
  flex-direction: column;
  align-self: end;
  padding-bottom: var(--e-2);
}

.hero__profesion {
  display: block;
  margin-top: var(--e-5);
  font-family: var(--f-placa);
  font-size: var(--t-h3);
  font-weight: 400;
  font-stretch: calc(var(--anchura-nombre) * 1%);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--c-grafito);
}

.hero__nombre {
  display: block;
  font-family: var(--f-placa);
  font-size: var(--t-nombre);
  font-weight: var(--peso-nombre);
  font-stretch: calc(var(--anchura-nombre) * 1%);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin-left: -0.05em; /* compensa el lado de la R para alinear óptico */
}
/* Cada línea del nombre es una máscara: deja sitio para la tilde y la g. */
.hero__linea {
  display: block;
  overflow: hidden;
  padding: 0.1em 0 0.16em;
  margin: -0.1em 0 -0.16em;
}
.hero__linea > span { display: block; }

.hero__filete {
  width: 56px;
  height: 2px;
  margin: var(--e-6) 0 var(--e-5);
  background: var(--c-acento);
  border: 0;
}

.hero__frase {
  font-size: var(--t-lead);
  line-height: 1.4;
  max-width: 33ch;
  text-wrap: pretty;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-5);
  margin-top: var(--e-6);
  font-family: var(--f-placa);
}
.hero__llamar {
  font-size: 1rem;
  color: var(--c-grafito);
}
.hero__llamar a {
  color: var(--c-tinta);
  font-weight: 560;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.hero__foto {
  grid-column: 8 / 13;
  margin: 0;
  height: min(calc(100dvh - var(--alto-cabecera) - var(--e-8)), 50rem);
  min-height: 30rem;
  overflow: hidden;
  background: var(--c-yeso);
}
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

@media (max-width: 899px) {
  .hero { padding-top: var(--e-6); }
  .hero__nombre { font-size: clamp(3.1rem, 16.2vw, 6rem); }
  .hero__filete { margin: var(--e-5) 0 var(--e-4); }
  .hero__foto {
    order: 2;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    margin-top: var(--e-7);
  }
}

/* --- Secciones ------------------------------------------------------------ */

.seccion { padding-bottom: var(--e-seccion); }

/* Cada sección arranca con un filete de tinta a todo el ancho de la rejilla:
   la línea de corte de un plano. Al llegar a ella, se dibuja. */
.seccion__corte {
  grid-column: 1 / -1;
  height: 0;
  border: 0;
  border-top: var(--linea) solid var(--c-tinta);
  margin: 0 0 var(--e-5);
}

.foto-pie,
.visita__foto figcaption {
  margin-top: var(--e-3);
  font-family: var(--f-placa);
  font-size: var(--t-pie);
  line-height: 1.45;
  color: var(--c-grafito);
  max-width: 48ch;
}

/* --- Ficha (término y dato) ---------------------------------------------- */

.ficha {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  column-gap: 0;
  font-family: var(--f-placa);
  font-size: var(--t-dato);
  line-height: 1.4;
}
.ficha dt,
.ficha dd {
  padding-block: var(--e-3);
  border-top: var(--linea) solid var(--c-filete);
}
.ficha dt { color: var(--c-grafito); font-weight: 450; padding-right: var(--hueco); }
.ficha dd { font-weight: 450; }

.ficha--apilada { grid-template-columns: 1fr; }
.ficha--apilada dt { padding-bottom: 0; }
.ficha--apilada dd { border-top: 0; padding-top: var(--e-1); }

@media (max-width: 899px) {
  .ficha:not(.horario) { grid-template-columns: 1fr; }
  .ficha:not(.horario) dd { border-top: 0; padding-top: 0; }
}

/* --- 2. Equipo ------------------------------------------------------------ */

.equipo__titulo { grid-column: 1 / 9; }
.equipo__intro { grid-column: 5 / 11; margin-top: var(--e-5); }

/* Tres retratos en escalera: cada uno a una altura, como en una pared. */
.equipo__lista {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  margin-top: var(--e-8);
}
.persona { grid-column: span 4; }
.persona:nth-child(2) { margin-top: var(--e-9); }
.persona:nth-child(3) { margin-top: var(--e-7); }

.persona__foto {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-yeso);
}
.persona__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 900ms var(--curva-salida);
}
@media (hover: hover) {
  .persona:hover .persona__foto img { scale: 1.035; }
}

.persona__datos {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: var(--linea) solid var(--c-filete);
  font-family: var(--f-placa);
}
.persona__nombre {
  font-size: 1.25rem;
  font-weight: 480;
  font-stretch: 104%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.persona__area { margin-top: var(--e-1); font-size: 1rem; font-weight: 450; color: var(--c-acento); }
.persona__formacion { margin-top: var(--e-2); font-size: var(--t-pie); line-height: 1.45; color: var(--c-grafito); max-width: 34ch; }

.equipo__pasos { display: none; }

/* Móvil: carrusel con el siguiente retrato asomando. */
@media (max-width: 899px) {
  .equipo__lista {
    display: flex;
    gap: var(--hueco);
    margin-top: var(--e-7);
    margin-inline: calc(-1 * var(--margen));
    padding-inline: var(--margen);
    scroll-padding-inline: var(--margen);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .equipo__lista::-webkit-scrollbar { display: none; }
  .persona { flex: 0 0 78%; scroll-snap-align: start; margin-top: 0 !important; }
  .equipo__pasos {
    display: flex;
    gap: 6px;
    margin-top: var(--e-5);
  }
  .equipo__pasos span {
    width: 24px;
    height: 2px;
    background: var(--c-filete);
    transition: background-color 300ms var(--curva-salida), width 300ms var(--curva-salida);
  }
  .equipo__pasos span.activo { background: var(--c-tinta); width: 40px; }
}

/* --- 3. Tratamientos ------------------------------------------------------ */

.servicios__titulo { grid-column: 1 / 9; }
.servicios__intro { grid-column: 5 / 11; margin-top: var(--e-5); }

/* Lo que dice el paciente al llamar, como atajo a cada tratamiento. */
.necesidades {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-block: var(--e-8) var(--e-6);
  font-family: var(--f-placa);
}
.necesidades__titulo {
  margin-right: var(--e-3);
  font-size: 0.9375rem;
  font-weight: 560;
}
.necesidad {
  min-height: 44px;
  padding: 0 var(--e-4);
  border: var(--linea) solid var(--c-filete);
  border-radius: var(--radio);
  background: transparent;
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 450;
  cursor: pointer;
  transition:
    border-color 180ms var(--curva-salida),
    background-color 180ms var(--curva-salida),
    color 180ms var(--curva-salida),
    transform 140ms var(--curva-salida);
}
.necesidad:active { transform: scale(0.97); }
@media (hover: hover) {
  .necesidad:hover { border-color: var(--c-tinta); }
}
.necesidad[aria-pressed="true"] {
  background: var(--c-tinta);
  border-color: var(--c-tinta);
  color: var(--c-tiza);
}

/* El explorador: la lista de tratamientos a la izquierda, la foto del
   tratamiento abierto a la derecha. */
.explorador {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}
.explorador__lista { grid-column: 1 / 7; border-top: var(--linea) solid var(--c-tinta); }

.servicio { border-bottom: var(--linea) solid var(--c-filete); }
.servicio__cabeza { font: inherit; }
.servicio__boton {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  width: 100%;
  padding: var(--e-5) 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--f-placa);
  font-size: clamp(1.4rem, 1rem + 1.3vw, 2.2rem);
  font-weight: 380;
  font-stretch: 108%;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--c-grafito);
  cursor: pointer;
  transition: color 300ms var(--curva-salida);
}
.servicio__num {
  font-size: 0.875rem;
  font-weight: 560;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
  color: var(--c-acento);
}
.servicio__nombre { transition: translate 450ms var(--curva-salida); }
@media (hover: hover) {
  .servicio__boton:hover { color: var(--c-tinta); }
  .servicio__boton:hover .servicio__nombre { translate: 0.35rem 0; }
}
.servicio--activo .servicio__boton { color: var(--c-tinta); }

/* + que se convierte en − */
.servicio__signo {
  position: relative;
  width: 14px;
  height: 14px;
  align-self: center;
}
.servicio__signo::before,
.servicio__signo::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 400ms var(--curva-cajon);
}
.servicio__signo::after { transform: rotate(90deg); }
.servicio--activo .servicio__signo::after { transform: rotate(0deg); }

/* Barra de avance del pase automático. */
.servicio__barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-acento);
  transform: scaleX(0);
  transform-origin: left center;
}
@keyframes avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.explorador--auto .servicio--activo .servicio__barra { animation: avance var(--pase, 6500ms) linear forwards; }
.explorador--pausa .servicio__barra { animation-play-state: paused !important; }

/* El panel se abre con grid-template-rows (0fr -> 1fr): altura real, sin JS. */
.servicio__panel {
  display: grid;
  grid-template-rows: 1fr;
}
.servicio__interior { overflow: hidden; min-height: 0; }
.servicio__interior > * { max-width: 46ch; }
.servicio__texto { padding-left: 3rem; font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.servicio__datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
  max-width: none !important;
  margin: var(--e-5) 0 0 3rem;
  padding-top: var(--e-3);
  border-top: var(--linea) solid var(--c-filete);
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.servicio__datos dt { font-size: var(--t-pie); color: var(--c-grafito); margin-bottom: 2px; }
.servicio__datos dd { font-weight: 450; }
.servicio__cita {
  display: inline-block;
  margin: var(--e-5) 0 var(--e-6) 3rem;
  padding-block: var(--e-1);
  font-family: var(--f-placa);
  font-size: 1rem;
  font-weight: 560;
}

.js .servicio__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 650ms var(--curva-cajon);
}
.js .servicio--activo .servicio__panel { grid-template-rows: 1fr; }
.js .servicio:not(.servicio--activo) .servicio__interior {
  visibility: hidden;
  transition: visibility 0s 650ms;
}

.explorador__escena {
  grid-column: 8 / 13;
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--e-5));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-yeso);
  cursor: pointer;
  touch-action: pan-y;
}
.escena__foto {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 100%);
}
.escena__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
}
/* Entra la nueva barriendo de derecha a izquierda; la anterior se queda
   debajo y se desplaza un poco, como una página que pasa. */
.escena__foto--activa {
  z-index: 2;
  clip-path: inset(0);
  transition: clip-path 950ms var(--curva-telon);
}
.escena__foto--activa img { scale: 1; transition: scale 1600ms var(--curva-salida); }
.escena__foto--saliente { z-index: 1; clip-path: inset(0); }
.escena__foto--saliente img { scale: 1; translate: -10% 0; transition: translate 950ms var(--curva-telon); }
.js:not(.mov) .escena__foto { transition: none; }

.escena__rotulo {
  position: absolute;
  left: var(--e-4);
  bottom: var(--e-4);
  z-index: 3;
  padding: var(--e-1) var(--e-3);
  background: var(--c-tiza);
  font-family: var(--f-placa);
  font-size: var(--t-pie);
  font-weight: 560;
  font-feature-settings: "tnum" 1;
}

.servicios__nota {
  grid-column: 1 / 7;
  margin-top: var(--e-6);
  font-family: var(--f-placa);
  font-size: var(--t-pie);
  color: var(--c-grafito);
  max-width: 60ch;
}

@media (max-width: 1099px) and (min-width: 900px) {
  .servicio__datos { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  /* en móvil, una fila que se desliza en lugar de cinco renglones */
  .necesidades {
    flex-wrap: nowrap;
    margin-block: var(--e-7) var(--e-5);
    margin-inline: calc(-1 * var(--margen));
    padding-inline: var(--margen);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .necesidades::-webkit-scrollbar { display: none; }
  .necesidad { flex-shrink: 0; }
  .necesidades__titulo { flex-shrink: 0; white-space: nowrap; }
  .explorador { display: flex; flex-direction: column; align-items: stretch; }
  .explorador__escena {
    order: -1;
    width: 100%;
    position: relative;
    top: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--e-5);
  }
  .explorador__lista { width: 100%; }
  .servicio__boton { grid-template-columns: 2.4rem 1fr auto; padding-block: var(--e-4); }
  .servicio__texto,
  .servicio__cita { margin-left: 0; padding-left: 2.4rem; }
  .servicio__datos { grid-template-columns: 1fr; gap: var(--e-3); margin-left: 2.4rem; }
}

/* --- 4. Primera visita ---------------------------------------------------- */

.visita__titulo { grid-column: 1 / 10; }
.visita__intro {
  grid-column: 5 / 11;
  margin-top: var(--e-5);
  margin-bottom: var(--e-8);
}

/* La cota: línea de acotar con marcas en cada tramo. */
.cota {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--hueco);
  position: relative;
  padding-top: var(--e-6);
}
.cota::before {                 /* la línea */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--e-6);
  height: 1px;
  background: var(--c-acento);
  transform-origin: left center;
}
.cota__tramo {
  position: relative;
  padding-top: var(--e-5);
  padding-right: var(--e-3);
}
.cota__tramo::before {          /* la marca de cada minuto */
  content: "";
  position: absolute;
  left: 0;
  top: -6px;
  width: 1px;
  height: 13px;
  background: var(--c-acento);
}
/* el tramo señalado: la línea engorda entre su marca y la siguiente */
.cota__tramo::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: calc(100% + var(--hueco));
  height: 3px;
  background: var(--c-acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 550ms var(--curva-cajon);
}
.cota__tramo:nth-child(5)::after { width: 100%; }
.cota__min {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--e-6));
  font-family: var(--f-placa);
  font-size: var(--t-pie);
  font-weight: 560;
  font-feature-settings: "tnum" 1;
  color: var(--c-acento);
}
.cota__min::after { content: " min"; font-weight: 450; }
.cota__titulo {
  font-family: var(--f-placa);
  font-size: 1.1875rem;
  font-weight: 500;
  font-stretch: 104%;
  line-height: 1.2;
  margin-bottom: var(--e-3);
  text-wrap: balance;
}
.cota__tramo p {
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.cota__titulo,
.cota__tramo p { transition: color 300ms var(--curva-salida); }

@media (hover: hover) {
  .cota__tramo:hover::after { transform: scaleX(1); }
  .cota:has(.cota__tramo:hover) .cota__tramo:not(:hover) :is(.cota__titulo, p) { color: var(--c-grafito); }
}
.cota__tramo--activo::after { transform: scaleX(1); }
.cota--recorrido .cota__tramo:not(.cota__tramo--activo) :is(.cota__titulo, p) { color: var(--c-grafito); }

/* marca final: "45 min" con su marca debajo; el número cuenta mientras se dibuja */
.cota__total {
  position: absolute;
  right: 0;
  top: 0;
  height: calc(var(--e-6) + 7px);
  background: linear-gradient(var(--c-acento), var(--c-acento)) right bottom / 1px 13px no-repeat;
  font-family: var(--f-placa);
  font-size: var(--t-pie);
  font-weight: 560;
  line-height: 1.45;
  font-feature-settings: "tnum" 1;
  color: var(--c-acento);
}
/* el cabezal: el punto que va dibujando la línea */
.cota__cabeza {
  position: absolute;
  left: 100%;
  top: calc(var(--e-6) - 4px);
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--c-acento);
  opacity: 0;
}

.criterios {
  grid-column: 1 / 7;
  grid-row: 5;
  margin-top: var(--e-9);
}
.criterios__intro { margin-top: var(--e-4); max-width: 46ch; }

.compromisos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5) var(--hueco);
  margin-top: var(--e-6);
}
.compromisos li {
  position: relative;
  padding-top: var(--e-3);
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.compromisos li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--c-filete);
  transform-origin: left center;
}
.compromisos__num {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--f-placa);
  font-size: var(--t-pie);
  font-weight: 560;
  font-feature-settings: "tnum" 1;
  color: var(--c-acento);
}
.compromisos strong {
  display: block;
  margin-bottom: var(--e-1);
  font-family: var(--f-placa);
  font-weight: 560;
  font-size: 1rem;
}

.presupuesto {
  grid-column: 1 / 7;
  grid-row: 6;
  margin-top: var(--e-9);
}
.presupuesto .texto { margin-top: var(--e-4); max-width: 46ch; }
.presupuesto__ficha { margin-top: var(--e-6); }

.visita__foto {
  grid-column: 8 / 13;
  grid-row: 5 / span 2;
  margin-top: var(--e-9);
  align-self: start;
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--e-6));
}
.visita__marco { overflow: hidden; aspect-ratio: 586 / 785; background: var(--c-yeso); }
.visita__marco img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 899px) {
  .visita__intro { margin-bottom: var(--e-7); }
  .cota, .criterios, .presupuesto, .visita__foto { grid-row: auto; }
  .cota {
    grid-template-columns: 1fr;
    row-gap: var(--e-6);
    padding-top: 0;
    padding-left: 5.5rem;
  }
  .cota__total { display: none; }
  .cota::before {
    top: 6px; bottom: 6px;
    left: calc(5.5rem - var(--e-5));
    right: auto;
    width: 1px; height: auto;
    transform-origin: center top;
  }
  .cota__tramo { padding-top: 0; padding-right: 0; }
  .cota__tramo::before {
    left: calc(-1 * var(--e-5) - 6px);
    top: 0.62em;
    width: 13px; height: 1px;
  }
  .cota__tramo::after {
    left: calc(-1 * var(--e-5) - 1px);
    top: 0.62em;
    width: 3px;
    height: calc(100% + var(--e-6));
    transform: scaleY(0);
    transform-origin: center top;
  }
  .cota__tramo:nth-child(5)::after { width: 3px; height: calc(100% - 0.62em); }
  .cota__tramo--activo::after { transform: scaleY(1); }
  .cota__min {
    left: -5.5rem;
    top: 0.2em;
    width: calc(5.5rem - var(--e-5) - var(--e-3));
  }
  .cota__cabeza {
    left: calc(5.5rem - var(--e-5) + 0.5px);
    top: calc(100% - 10px);
  }
  .visita__foto { position: static; margin-top: var(--e-8); }
  .criterios { margin-top: var(--e-8); }
  .compromisos { grid-template-columns: 1fr; }
  .presupuesto { margin-top: var(--e-8); }
}

/* --- 5. La clínica -------------------------------------------------------- */

.clinica__titulo { grid-column: 1 / 9; }
.clinica__intro {
  grid-column: 5 / 11;
  margin-top: var(--e-5);
  margin-bottom: var(--e-8);
}

.clinica__col { display: flex; flex-direction: column; gap: var(--e-8); }
.clinica__col--izq { grid-column: 1 / 7; }
.clinica__col--der { grid-column: 8 / 13; padding-top: var(--e-10); }

.clinica__marco { overflow: hidden; background: var(--c-yeso); }
.clinica__marco img { width: 100%; height: auto; }
.clinica__foto--microscopio {
  width: calc((100% - 2 * var(--hueco)) * 4 / 6 + var(--hueco) * 1.5);
  align-self: flex-end;
}

@media (max-width: 899px) {
  .clinica__intro { margin-bottom: var(--e-7); }
  .clinica__col { gap: var(--e-7); }
  .clinica__col--der { padding-top: var(--e-7); }
  .clinica__foto--microscopio { width: 78%; }
}

/* --- 6. Opiniones --------------------------------------------------------- */
/* Columna izquierda: la media, como un dato de la ficha, y cómo se verifican.
   Derecha: las opiniones en dos columnas, separadas por filetes, sin tarjetas. */

.opiniones__titulo { grid-column: 1 / 9; margin-bottom: var(--e-7); }
.opiniones__lado {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--e-6));
  padding-right: var(--e-5);
}
.opiniones--vacia .opiniones__lado { grid-column: 1 / 7; position: static; }

.opiniones__media { margin-bottom: var(--e-6); }
.opiniones__nota {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-family: var(--f-placa);
  font-size: clamp(3.4rem, 2.6rem + 2.4vw, 5rem);
  font-weight: 380;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.opiniones__de { font-size: 1.0625rem; letter-spacing: 0; font-stretch: 100%; color: var(--c-grafito); }
.opiniones__media .estrellas { margin-top: var(--e-3); }
.opiniones__recuento { margin-top: var(--e-2); font-family: var(--f-placa); font-size: 0.9375rem; color: var(--c-grafito); }

.opiniones__verificacion { max-width: 34ch; text-wrap: pretty; }
.opiniones__google {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: var(--linea) solid var(--c-filete);
  max-width: 34ch;
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-grafito);
}
.opiniones__google .enlace { color: var(--c-tinta); }

.opiniones__lista {
  grid-column: 5 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-7) var(--hueco);
  align-items: start;
}
.opiniones__lista[hidden] { display: none; }
.opinion { position: relative; padding-top: var(--e-4); }
.opinion::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  border-top: var(--linea) solid var(--c-filete);
  transform-origin: left center;
}
.opinion:focus { outline: none; }
.opinion__texto { margin: var(--e-3) 0 0; }
.opinion__texto p {
  font-size: var(--t-texto);
  line-height: 1.55;
  white-space: pre-line;
  text-wrap: pretty;
}
.opinion__texto p:focus { outline: none; }
.opinion__seguir {
  margin-top: var(--e-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  cursor: pointer;
}
.opinion__seguir:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.opinion__firma {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--e-4);
  font-family: var(--f-placa);
}
.opinion__nombre { font-size: 0.9375rem; font-weight: 560; }
.opinion__meta { font-size: var(--t-pie); color: var(--c-grafito); }

.opiniones__mas { grid-column: 5 / 13; justify-self: start; margin-top: var(--e-7); }
.opiniones__mas[hidden] { display: none; }

/* Estrellas: las puestas, rellenas del acento; las que faltan, solo el
   contorno (3:1 sobre tiza, se distinguen sin depender del color). */
.estrellas { display: flex; gap: 3px; color: var(--c-acento); }
.estrellas svg { width: 16px; height: 16px; overflow: visible; }
.estrellas .estrella--vacia { color: transparent; stroke: var(--c-borde); stroke-width: 16px; }

@media (max-width: 899px) {
  .opiniones__lado { position: static; padding-right: 0; margin-bottom: var(--e-7); }
  .opiniones__media { margin-bottom: var(--e-5); }
  .opiniones__lista { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-6); }
  .opiniones__mas { margin-top: var(--e-6); }
}

/* --- 7. Cómo llegar ------------------------------------------------------- */

.llegar__titulo { grid-column: 1 / 9; margin-bottom: var(--e-7); }

.llegar__donde { grid-column: 1 / 5; grid-row: 3; padding-right: var(--e-5); }
.llegar__direccion {
  font-family: var(--f-placa);
  font-size: var(--t-h3);
  font-weight: 450;
  font-stretch: 104%;
  line-height: 1.3;
}
.boton--ruta { margin-block: var(--e-5) var(--e-6); }

.llegar__mapa { grid-column: 5 / 13; grid-row: 3; background: var(--c-yeso); }
.llegar__mapa iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
}

.llegar__horario { grid-column: 1 / 5; grid-row: 4; margin-top: var(--e-9); padding-right: var(--e-5); }
.llegar__horario .titulo-bloque { margin-bottom: var(--e-4); }
.horario { grid-template-columns: minmax(7.5rem, 1fr) auto; }
.horario dd { text-align: right; font-feature-settings: "tnum" 1; }

.llegar__ahora {
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: var(--e-4);
}

.llegar__fachada { grid-column: 5 / 9; grid-row: 4; margin-top: var(--e-9); }
.llegar__fachada img { width: 100%; }

.llegar__llamar {
  grid-column: 9 / 13;
  grid-row: 4;
  margin-top: var(--e-9);
  padding-left: var(--hueco);
  border-left: var(--linea) solid var(--c-filete);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--f-placa);
}
.llegar__llamar-pre { font-size: 1rem; color: var(--c-grafito); }
.llegar__tel {
  margin-block: var(--e-3) var(--e-5);
  font-size: clamp(2rem, 1.2rem + 1.9vw, 2.75rem);
  font-weight: 400;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
@media (hover: hover) {
  .llegar__tel:hover { color: var(--c-acento); }
}
.llegar__nota {
  margin-top: var(--e-5);
  font-family: var(--f-carta);
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 34ch;
}

@media (max-width: 1099px) and (min-width: 900px) {
  .llegar__fachada { grid-column: 5 / 13; }
  .llegar__llamar { grid-column: 5 / 13; grid-row: 5; margin-top: var(--e-7); padding-left: 0; border-left: 0; }
}

@media (max-width: 899px) {
  .llegar__titulo { margin-bottom: var(--e-6); }
  .llegar__donde, .llegar__mapa, .llegar__horario, .llegar__fachada, .llegar__llamar { grid-row: auto; padding-right: 0; }
  .llegar__mapa { margin-top: var(--e-6); }
  .llegar__mapa iframe { aspect-ratio: 4 / 3.4; }
  .llegar__horario { margin-top: var(--e-8); }
  .llegar__fachada { margin-top: var(--e-8); }
  .llegar__llamar { margin-top: var(--e-8); padding: var(--e-5) 0 0; border-left: 0; border-top: var(--linea) solid var(--c-tinta); }
}

/* --- 8. Cita: fondo noche -------------------------------------------------
   La sección redefine los colores para sus descendientes: el texto pasa a
   tiza y el acento a blanco tiza, así que el formulario se re-tematiza sin
   duplicar reglas. */

.cita {
  position: relative;
  isolation: isolate;
  padding-top: var(--e-seccion);
  color: var(--c-sobre-noche);
  --c-tinta: var(--c-sobre-noche);
  --c-grafito: var(--c-sobre-noche-suave);
  --c-filete: var(--c-filete-noche);
  --c-borde: var(--c-sobre-noche-suave);
  --c-error: var(--c-error-noche);
  --c-yeso: color-mix(in srgb, var(--c-sobre-noche) 9%, transparent);
  --c-acento: var(--c-sobre-noche);
  --c-acento-hover: var(--c-blanco);
  --c-sobre-acento: var(--c-noche);
}
.cita ::selection { background: var(--c-sobre-noche); color: var(--c-noche); }

/* El panel noche se abre a todo el ancho al entrar (movimiento.js pone --p). */
.cita__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-noche);
  --q: calc(1 - var(--p, 1));
  /* nunca se recorta más que el margen: el texto siempre queda dentro */
  --lado: calc(var(--q) * var(--margen) * 0.75);
  --curva: calc(var(--q) * 2.5rem);
  clip-path: inset(calc(var(--q) * 7rem) var(--lado) 0 round var(--curva) var(--curva) 0 0);
}

.cita__lado { grid-column: 1 / 5; padding-right: var(--e-5); }
.cita__intro { margin-top: var(--e-5); }
.cita__urgente { margin-top: var(--e-5); }
.cita__urgente strong { font-family: var(--f-placa); font-weight: 560; }

.cita__cuerpo { grid-column: 5 / 13; }

.reserva__bloque + .reserva__bloque { margin-top: var(--e-7); }

/* Agenda no disponible: el formulario se oculta y quedan llamar y WhatsApp. */
.reserva--sin-agenda > :not([data-sin-agenda]) { display: none; }
.reserva__sin-agenda[hidden] { display: none; }
.reserva__sin-agenda { padding-top: var(--e-5); border-top: var(--linea) solid var(--c-tinta); }
.reserva__sin-agenda-texto { max-width: 40ch; }
.reserva__sin-agenda-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-6);
}
@media (max-width: 519px) {
  .reserva__sin-agenda-acciones .boton { width: 100%; justify-content: center; }
}

.reserva__etiqueta {
  font-family: var(--f-placa);
  font-size: 1rem;
  font-weight: 560;
  margin-bottom: var(--e-4);
  padding: 0;
}
.reserva__etiqueta-dia { font-weight: 450; color: var(--c-grafito); }
.reserva__etiqueta-dia:not(:empty)::before { content: "para el "; }

/* Paso de página de los días (el plazo es un mes; se ven seis a la vez).
   Va en la línea de "Día", a la derecha, como el pie de una agenda. */
.reserva__bloque--dias { position: relative; }
/* con float, la leyenda deja de dibujarse sobre el borde del fieldset y
   empieza donde empieza el bloque: el paso se alinea con su línea */
.reserva__bloque--dias > .reserva__etiqueta { float: left; }
.reserva__bloque--dias > .dias { clear: both; }
.dias__paso {
  position: absolute;
  top: calc(0.78rem - 22px);
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.dias__paso[hidden] { display: none; }
.dias__rango {
  margin-right: var(--e-2);
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  color: var(--c-grafito);
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.dias__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--c-tinta);
  background: transparent;
  border: var(--linea) solid color-mix(in srgb, var(--c-sobre-noche) 48%, transparent);
  border-radius: var(--radio);
  cursor: pointer;
  transition:
    border-color 160ms var(--curva-salida),
    background-color 160ms var(--curva-salida),
    transform 120ms var(--curva-salida);
}
.dias__boton svg { width: 18px; height: 18px; }
.dias__boton:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
@media (hover: hover) {
  .dias__boton:not(:disabled):hover { border-color: var(--c-tinta); background: var(--c-yeso); }
}
.dias__boton:not(:disabled):active { transform: scale(0.95); }
.dias__boton:disabled { opacity: 0.35; cursor: not-allowed; }

/* Días: la cabecera de una agenda de papel. */
.dias {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: var(--linea) solid var(--c-tinta);
  border-bottom: var(--linea) solid var(--c-filete);
}
.dia {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "semana semana" "num mes" "libres libres";
  align-items: baseline;
  column-gap: var(--e-2);
  padding: var(--e-4);
  font-family: var(--f-placa);
  cursor: pointer;
  border-left: var(--linea) solid var(--c-filete);
  transition: background-color 200ms var(--curva-salida);
}
.dia:first-child { border-left: 0; }
.dia__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dia__semana { grid-area: semana; font-size: 0.9375rem; color: var(--c-grafito); text-transform: lowercase; }
.dia__num {
  grid-area: num;
  font-size: 2.25rem;
  font-weight: 380;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
  transition: translate 400ms var(--curva-salida);
}
.dia__mes { grid-area: mes; font-size: 0.9375rem; color: var(--c-grafito); }
.dia__libres { grid-area: libres; margin-top: var(--e-1); font-size: 0.8125rem; color: var(--c-grafito); }

/* el día elegido: filete de acento bajo la columna */
.dia::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--c-acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--curva-cajon);
}
.dia:has(:checked) { background: var(--c-yeso); }
.dia:has(:checked)::after { transform: scaleX(1); }
.dia:has(:checked) .dia__semana { color: var(--c-tinta); font-weight: 560; }
.dia:has(:focus-visible) { outline: 2px solid var(--c-acento); outline-offset: -2px; }
@media (hover: hover) {
  .dia:not(:has(:disabled)):hover { background: var(--c-yeso); }
  .dia:not(:has(:disabled)):hover .dia__num { translate: 0 -2px; }
}
.dia:has(:disabled) { cursor: not-allowed; }
.dia:has(:disabled) .dia__num { color: var(--c-grafito); text-decoration: line-through; text-decoration-thickness: 1px; }

.dia--cargando { min-height: 7.25rem; cursor: default; }
.dia--cargando::before {
  content: "";
  grid-column: 1 / -1;
  height: 3.6rem;
  width: 60%;
  background: var(--c-yeso);
}

/* Horas: lista de una agenda; las ocupadas, tachadas. */
.horas { display: grid; gap: var(--e-4); }
.franja {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: start;
  gap: var(--e-4);
}
.franja__nombre {
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  color: var(--c-grafito);
  padding-top: 0.8rem;
}
/* rejilla de columnas iguales: mañana y tarde quedan alineadas en vertical */
.franja__horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: 8px;
}
.hora {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--e-3);
  border: var(--linea) solid var(--c-filete);
  border-radius: var(--radio);
  font-family: var(--f-placa);
  font-size: 1rem;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  cursor: pointer;
  transition:
    border-color 160ms var(--curva-salida),
    background-color 160ms var(--curva-salida),
    color 160ms var(--curva-salida),
    translate 220ms var(--curva-salida),
    transform 120ms var(--curva-salida);
}
.hora__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* sobre noche, el borde de las horas libres se refuerza (3:1) */
.cita .hora:not(.hora--ocupada):not(:has(:checked)) { border-color: color-mix(in srgb, var(--c-sobre-noche) 48%, transparent); }
@media (hover: hover) {
  .hora:not(.hora--ocupada):hover { border-color: var(--c-tinta); translate: 0 -2px; }
}
.hora:not(.hora--ocupada):active { transform: scale(0.95); }
.hora:has(:checked) {
  background: var(--c-acento);
  border-color: var(--c-acento);
  color: var(--c-sobre-acento);
  font-weight: 600;
}
.hora:has(:focus-visible) { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.hora--ocupada {
  border-color: transparent;
  color: var(--c-grafito);
  font-weight: 400;
  cursor: default;
}
.hora--ocupada .hora__texto { text-decoration: line-through; text-decoration-thickness: 1px; }

.reserva__leyenda {
  margin-top: var(--e-4);
  font-family: var(--f-placa);
  font-size: var(--t-pie);
  color: var(--c-grafito);
}

/* Datos */
.reserva__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5) var(--hueco);
  margin-top: var(--e-7);
  padding-top: var(--e-6);
  border-top: var(--linea) solid var(--c-tinta);
}
.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo--ancho { grid-column: 1 / -1; }
.campo__etiqueta { font-family: var(--f-placa); font-size: 0.9375rem; font-weight: 560; }
.campo__opcional { font-weight: 400; color: var(--c-grafito); }
.campo__control {
  width: 100%;
  min-height: 52px;
  padding: var(--e-3) var(--e-4);
  border: var(--linea) solid var(--c-borde);
  border-radius: var(--radio);
  background: var(--c-campo);
  color: var(--c-texto-campo);
  font-family: var(--f-placa);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color 160ms var(--curva-salida), box-shadow 160ms var(--curva-salida);
}
textarea.campo__control { resize: vertical; min-height: 6rem; }
select.campo__control {
  appearance: none;
  padding-right: var(--e-7);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-texto-campo) 50%),
    linear-gradient(135deg, var(--c-texto-campo) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.campo__control:hover { border-color: var(--c-tinta); }
.campo__control:focus {
  outline: none;
  border-color: var(--c-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-acento) 45%, transparent);
}
.campo__ayuda { font-family: var(--f-placa); font-size: var(--t-pie); color: var(--c-grafito); }
.campo__error {
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-error);
}
.tiene-error .campo__control { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.tiene-error .campo__control:focus { box-shadow: 0 0 0 3px var(--c-error); }

.campo--casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--e-3);
  align-items: start;
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.campo--casilla .campo__error { grid-column: 2; }
.casilla {
  appearance: none;
  width: 24px; height: 24px;
  margin: 0;
  border: var(--linea) solid var(--c-borde);
  border-radius: var(--radio);
  background: var(--c-campo);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 160ms var(--curva-salida), border-color 160ms var(--curva-salida);
}
.casilla::before {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid var(--c-sobre-acento);
  border-bottom: 2px solid var(--c-sobre-acento);
  transform: translateY(-2px) rotate(-45deg) scale(0);
  transition: transform 160ms var(--curva-salida);
}
.casilla:checked { background: var(--c-acento); border-color: var(--c-acento); }
.casilla:checked::before { transform: translateY(-2px) rotate(-45deg) scale(1); }
.casilla:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.tiene-error .casilla { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }

.reserva__cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4) var(--e-6);
  flex-wrap: wrap;
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: var(--linea) solid var(--c-filete);
}
.reserva__resumen {
  font-family: var(--f-placa);
  font-size: 1.125rem;
  font-weight: 450;
  color: var(--c-grafito);
}
.reserva__resumen.es-completo { color: var(--c-tinta); }
.reserva__boton { min-width: 14rem; }
.reserva__error-general {
  margin-top: var(--e-4);
  font-family: var(--f-placa);
  font-weight: 500;
  color: var(--c-error);
}

/* Éxito */
.exito { padding-top: var(--e-2); }
.exito__titulo:focus { outline: none; }
.exito__texto { margin-top: var(--e-5); font-size: var(--t-lead); line-height: 1.45; max-width: 36ch; }
.exito__texto strong { font-weight: 600; }
.exito__ficha { margin-top: var(--e-6); max-width: 40rem; }
.exito__cambio { margin-top: var(--e-6); }
.exito__otra { margin-top: var(--e-6); }

@media (max-width: 899px) {
  .cita__lado { padding-right: 0; margin-bottom: var(--e-7); }
  .dias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dia:nth-child(4) { border-left: 0; }
  .dia:nth-child(-n+3) { border-bottom: var(--linea) solid var(--c-filete); }
  .dia { padding: var(--e-3); }
  .dia__num { font-size: 1.875rem; }
  .franja { grid-template-columns: 1fr; gap: var(--e-2); }
  .franja__nombre { padding-top: 0; }
  .franja__horas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reserva__datos { grid-template-columns: 1fr; }
  .reserva__cierre { flex-direction: column; align-items: stretch; }
  .reserva__boton { width: 100%; }
}

/* --- Pie ------------------------------------------------------------------ */

.pie {
  padding-block: var(--e-8) var(--e-9);
  font-family: var(--f-placa);
  font-size: var(--t-pie);
  line-height: 1.55;
}
.pie__marca { grid-column: 1 / 5; display: flex; flex-direction: column; }
.pie__marca span:first-child {
  font-size: 1.5rem;
  font-weight: 420;
  font-stretch: calc(var(--anchura-nombre) * 1%);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.pie__tipo { color: var(--c-grafito); }
.pie__contacto { grid-column: 5 / 9; display: grid; grid-template-columns: 1fr 1fr; gap: var(--hueco); }
.pie__legal { grid-column: 9 / 13; color: var(--c-grafito); }
.pie__legal p + p { margin-top: var(--e-2); }
.pie__enlaces { display: flex; gap: var(--e-5); margin-top: var(--e-3); color: var(--c-tinta); }
.pie__enlaces a { display: inline-block; padding-block: var(--e-1); }

@media (max-width: 899px) {
  .pie { padding-bottom: calc(var(--e-8) + 84px + env(safe-area-inset-bottom)); }
  .pie__marca, .pie__contacto { margin-bottom: var(--e-6); }
}

/* --- Página de opinión (opinar.html) -------------------------------------- */
/* La misma agenda de papel que la cita: cabecera mínima con el nombre, el
   formulario a la izquierda y, a la derecha, qué se publica y qué no. */

.opinar-cabecera { border-bottom: var(--linea) solid var(--c-filete); }
.opinar-cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--alto-cabecera);
  font-family: var(--f-placa);
}
.opinar-cabecera__marca { display: flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 1.15; }
.opinar-cabecera__marca span:first-child {
  font-size: 1.25rem;
  font-weight: 420;
  font-stretch: calc(var(--anchura-nombre) * 1%);
  letter-spacing: -0.015em;
}
.opinar-cabecera__marca .pie__tipo { font-size: var(--t-pie); }
.opinar-cabecera__marca:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 4px; }
.opinar-cabecera__tel { font-size: 1rem; font-feature-settings: "tnum" 1; }

.opinar { padding-block: var(--e-9) var(--e-seccion); }
.opinar__cuerpo { grid-column: 1 / 8; }
.opinar__lado { grid-column: 9 / 13; align-self: start; padding-top: var(--e-3); }
.opinar__lado-titulo { font-family: var(--f-placa); font-size: 1rem; font-weight: 560; margin-bottom: var(--e-3); }
.opinar__estado[hidden] { display: none; }
.opinar__estado h1:focus { outline: none; }
.opinar__intro { margin-top: var(--e-5); }
.opinar__cargando { font-family: var(--f-placa); color: var(--c-grafito); }
.opinar__volver { margin-top: var(--e-6); font-family: var(--f-placa); }

.opinar__form .valoracion { margin-top: var(--e-7); }
.opinar__campo { margin-top: var(--e-6); }
.opinar__campo + .campo--casilla { margin-top: var(--e-4); }
.opinar__bajo-texto { display: flex; justify-content: space-between; gap: var(--e-4); }
.opinar__contador { flex-shrink: 0; font-feature-settings: "tnum" 1; }
.opinar__como { grid-column: 2; margin-top: var(--e-1); }
.opinar__cierre { margin-top: var(--e-7); }
.opinar__form .reserva__error-general { margin-top: var(--e-4); }

.opinar__google {
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: var(--linea) solid var(--c-tinta);
}
.opinar__google .texto { margin-top: var(--e-3); }
.opinar__boton-google { margin-top: var(--e-5); }
.opinar__copiado { margin-top: var(--e-3); min-height: 1.4em; }
.opinar__copia { margin-top: var(--e-2); }
.opinar__copia[hidden] { display: none; }

/* Elegir de una a cinco estrellas: grandes, a mano del dedo. */
.valoracion { border: 0; margin: 0; padding: 0; min-width: 0; }
.valoracion legend { padding: 0; margin-bottom: var(--e-3); }
.valoracion__estrellas { display: flex; gap: var(--e-1); margin-left: -6px; }
.valoracion__estrella {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radio);
  cursor: pointer;
  color: transparent;
  stroke: var(--c-borde);
  stroke-width: 10px;
  transition: color 160ms var(--curva-salida), stroke 160ms var(--curva-salida), transform 120ms var(--curva-salida);
  -webkit-tap-highlight-color: transparent;
}
.valoracion__estrella input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.valoracion__estrella svg { width: 38px; height: 38px; overflow: visible; }
.valoracion__estrella.encendida { color: var(--c-acento); stroke: var(--c-acento); }
.valoracion__estrella:active { transform: scale(0.9); }
.valoracion__estrella:has(:focus-visible) { outline: 2px solid var(--c-acento); outline-offset: -2px; }
.valoracion.tiene-error .valoracion__estrella:not(.encendida) { stroke: var(--c-error); }
.valoracion__palabra {
  min-height: 1.5em;
  margin-top: var(--e-1);
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 560;
}

@media (max-width: 899px) {
  .opinar { padding-top: var(--e-7); }
  .opinar__lado { margin-top: var(--e-8); padding-top: var(--e-5); border-top: var(--linea) solid var(--c-tinta); }
  .opinar__bajo-texto { flex-direction: column; gap: var(--e-1); }
}

/* --- Flotantes: Cómo llegar y WhatsApp ------------------------------------ */

.flotantes {
  position: fixed;
  right: clamp(16px, 2.2vw, 32px);
  bottom: clamp(16px, 2.2vw, 32px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e-3);
  pointer-events: none;
}
.flotantes > * { pointer-events: auto; }

.flotante-llegar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  height: 48px;
  padding: 0 var(--e-5) 0 var(--e-3);
  border-radius: var(--radio-flotante);
  background: var(--c-tinta);
  color: var(--c-tiza);
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--c-tinta) 70%, transparent);
  transition:
    opacity 300ms var(--curva-salida),
    translate 500ms var(--curva-salida),
    background-color 200ms var(--curva-salida),
    transform 140ms var(--curva-salida);
}
.flotante-llegar:active { transform: scale(0.96); }
@media (hover: hover) {
  .flotante-llegar:hover { background: var(--c-acento); }
}
.flotante-llegar__pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}
.flotante-llegar__pin svg { width: 20px; height: 20px; transform-origin: 50% 100%; }
/* la sombra del suelo, que se encoge cuando la chincheta salta */
.flotante-llegar__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 10px;
  height: 3px;
  margin-left: -5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

.flotante-wa {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--c-whatsapp);
  color: var(--c-blanco);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c-whatsapp) 80%, var(--c-tinta));
  transition:
    background-color 200ms var(--curva-salida),
    transform 140ms var(--curva-salida),
    translate 500ms var(--curva-salida);
}
.flotante-wa:active { transform: scale(0.94); }
@media (hover: hover) {
  .flotante-wa:hover { background: var(--c-whatsapp-hover); }
}
.flotante-wa__icono { width: 32px; height: 32px; }
/* ondas: el círculo "respira" hacia fuera */
.flotante-wa__onda,
.flotante-wa__onda::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-whatsapp);
  opacity: 0;
  pointer-events: none;
}
.flotante-wa__onda::after { content: ""; inset: -2px; }

.flotante-wa__texto {
  position: absolute;
  right: calc(100% + var(--e-3));
  top: 50%;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--radio-flotante);
  background: var(--c-tinta);
  color: var(--c-tiza);
  font-family: var(--f-placa);
  font-size: 0.9375rem;
  font-weight: 560;
  white-space: nowrap;
  opacity: 0;
  translate: 8px -50%;
  transition: opacity 220ms var(--curva-salida), translate 320ms var(--curva-salida);
  pointer-events: none;
}
.flotante-wa:hover .flotante-wa__texto,
.flotante-wa:focus-visible .flotante-wa__texto,
.flotante-wa--saluda .flotante-wa__texto { opacity: 1; translate: 0 -50%; }

/* Con JS, aparecen al dejar atrás el hero (en móvil, siempre). */
.js .flotantes > * { opacity: 0; translate: 0 18px; pointer-events: none; }
.js .flotantes--visible > * { opacity: 1; translate: 0 0; pointer-events: auto; }
.js .flotantes--visible .flotante-wa { transition-delay: 80ms; }
.js .flotantes--en-llegar .flotante-llegar { opacity: 0; translate: 0 18px; pointer-events: none; }
.flotantes--en-cita .flotante-llegar { background: var(--c-tiza); color: var(--c-tinta); }
@media (hover: hover) {
  .flotantes--en-cita .flotante-llegar:hover { background: var(--c-blanco); }
}
.flotante-wa { transition-property: background-color, transform, translate, opacity; transition-duration: 200ms, 140ms, 500ms, 300ms; }

/* --- Barra de contacto en móvil ------------------------------------------- */

.barra-movil { display: none; }

@media (max-width: 899px) {
  .barra-movil {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 24;
    display: grid;
    grid-template-columns: 1fr 1fr 92px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-tiza);
    border-top: var(--linea) solid var(--c-tinta);
  }
  .barra-movil::after { content: ""; }   /* hueco del círculo de WhatsApp */
  .barra-movil__accion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-3);
    min-height: 64px;
    font-family: var(--f-placa);
    font-size: 1rem;
    font-weight: 560;
    text-decoration: none;
    line-height: 1.15;
    transition: background-color 160ms var(--curva-salida);
  }
  .barra-movil__accion > span { display: flex; flex-direction: column; }
  .barra-movil__accion svg { width: 22px; height: 22px; }
  .barra-movil__accion + .barra-movil__accion { border-left: var(--linea) solid var(--c-filete); }
  .barra-movil__accion:active { background: var(--c-yeso); }
  .barra-movil__dato { font-size: 0.75rem; font-weight: 400; color: var(--c-grafito); font-feature-settings: "tnum" 1; }

  .flotantes { right: 15px; bottom: calc(env(safe-area-inset-bottom) + 18px); }
  .flotante-llegar { display: none; }
  .flotante-wa { width: 62px; height: 62px; }
  .flotante-wa__texto { display: none; }
  .js .flotantes > * { opacity: 1; translate: 0 0; pointer-events: auto; }
}
@media (max-width: 379px) {
  .barra-movil { grid-template-columns: 1fr 1fr 84px; }
  .barra-movil__accion { gap: var(--e-2); font-size: 0.9375rem; }
  .barra-movil__accion svg { width: 18px; height: 18px; }
}

/* --- Cursor (solo ratón) ---------------------------------------------------
   Un punto que va exacto con el ratón y un anillo que lo sigue con inercia.
   Sobre enlaces y botones el anillo se abre; sobre la foto de tratamientos
   se llena y dice qué hace el clic. */

.cursor-propio,
.cursor-propio a,
.cursor-propio button,
.cursor-propio label,
.cursor-propio [data-escena] { cursor: none; }
.cursor-propio input,
.cursor-propio textarea,
.cursor-propio select { cursor: auto; }
.cursor-propio .casilla { cursor: none; }

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  --c-cursor: var(--c-tinta);
  --c-cursor-acento: var(--c-acento);
}
.cursor--noche { --c-cursor: var(--c-sobre-noche); --c-cursor-acento: var(--c-sobre-noche); }

.cursor__punto,
.cursor__anillo {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
}
.cursor__punto {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--c-cursor-acento);
  transition: opacity 200ms var(--curva-salida), background-color 200ms var(--curva-salida);
}
.cursor__anillo {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid color-mix(in srgb, var(--c-cursor) 50%, transparent);
  transition:
    width 380ms var(--curva-salida),
    height 380ms var(--curva-salida),
    margin 380ms var(--curva-salida),
    background-color 260ms var(--curva-salida),
    border-color 260ms var(--curva-salida),
    opacity 200ms var(--curva-salida),
    scale 160ms var(--curva-salida);
}
.cursor__texto {
  font-family: var(--f-placa);
  font-size: 0.8125rem;
  font-weight: 560;
  color: var(--c-tiza);
  white-space: nowrap;
  opacity: 0;
  scale: 0.8;
  transition: opacity 200ms var(--curva-salida), scale 300ms var(--curva-salida);
}

.cursor--enlace .cursor__anillo {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: var(--c-cursor-acento);
  background: color-mix(in srgb, var(--c-cursor-acento) 10%, transparent);
}
.cursor--enlace .cursor__punto { opacity: 0; }

.cursor--texto .cursor__anillo {
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-color: transparent;
  background: var(--c-tinta);
}
.cursor--texto .cursor__texto { opacity: 1; scale: 1; }
.cursor--texto .cursor__punto { opacity: 0; }

.cursor--pulsado .cursor__anillo { scale: 0.82; }
.cursor--oculto .cursor__anillo,
.cursor--oculto .cursor__punto { opacity: 0; }

/* ==========================================================================
   MOVIMIENTO
   - Cada sección entra con su filete dibujándose, el titular subiendo
     palabra a palabra desde una máscara y las fotos abriéndose como un telón.
   - La cota de la primera visita se dibuja de 0 a 45 minutos.
   - El fondo noche de la cita se abre a todo el ancho.
   Los estados iniciales solo existen con la clase .mov (JS y sin
   "reducir movimiento"). Sin ella, todo se ve en su sitio.
   ========================================================================== */

.mov [data-revelar="suave"] {
  opacity: 0;
  transition: opacity 1000ms var(--curva-salida) var(--retraso, 150ms);
}
.mov [data-revelar="suave"].visible { opacity: 1; }

.mov [data-revelar="linea"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1300ms var(--curva-telon) var(--retraso, 0ms);
}
.mov [data-revelar="linea"].visible { transform: none; }

.mov [data-revelar="telon"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1300ms var(--curva-telon) var(--retraso, 0ms);
}
.mov [data-revelar="telon"].visible { clip-path: inset(0 0 0 0); }
.mov [data-revelar="telon"] img {
  scale: calc(var(--escala, 1) + 0.2);
  transition: scale 1900ms var(--curva-salida) var(--retraso, 0ms);
}
.mov [data-revelar="telon"].visible img { scale: var(--escala, 1); }
.mov img[data-paralaje] { --escala: 1.12; }
.mov .persona:hover [data-revelar="telon"].visible img { scale: 1.035; transition-duration: 900ms; transition-delay: 0ms; }

/* Titulares: cada palabra sube desde su propia máscara. */
.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.palabra > span {
  display: inline-block;
  translate: 0 110%;
  transition: translate 1000ms var(--curva-salida) calc(var(--retraso, 0ms) + var(--i, 0) * 55ms);
}
.visible .palabra > span { translate: 0 0; }

/* El nombre del hero: cada línea sube desde su máscara. */
.mov .hero__linea > span {
  translate: 0 108%;
  transition: translate 1250ms var(--curva-salida) 200ms;
}
.mov .hero__linea:nth-child(2) > span { transition-delay: 320ms; }
.mov .hero__nombre.visible .hero__linea > span { translate: 0 0; }

/* Listas: el filete de cada elemento se dibuja y el texto aparece. */
.mov [data-revelar="lista"] > li {
  opacity: 0;
  transition: opacity 800ms var(--curva-salida) calc(250ms + var(--i, 0) * 90ms);
}
.mov [data-revelar="lista"] > li::before {
  transform: scaleX(0);
  transition: transform 1000ms var(--curva-telon) calc(var(--i, 0) * 90ms);
}
.mov [data-revelar="lista"].visible > li { opacity: 1; }
.mov [data-revelar="lista"].visible > li::before { transform: none; }

/* Explorador de tratamientos: la escena entra con telón la primera vez. */
.mov [data-servicios] .explorador__escena { clip-path: inset(0 0 100% 0); transition: clip-path 1300ms var(--curva-telon); }
.mov [data-servicios].visible .explorador__escena { clip-path: inset(0); }
.mov [data-servicios] .servicio { opacity: 0; transition: opacity 800ms var(--curva-salida); }
.mov [data-servicios].visible .servicio { opacity: 1; }
.mov [data-servicios].visible .servicio:nth-child(2) { transition-delay: 80ms; }
.mov [data-servicios].visible .servicio:nth-child(3) { transition-delay: 160ms; }
.mov [data-servicios].visible .servicio:nth-child(4) { transition-delay: 240ms; }
.mov [data-servicios].visible .servicio:nth-child(5) { transition-delay: 320ms; }

/* --- La cota ------------------------------------------------------------- */

.cota { --duracion-cota: 1500ms; --curva-cota: cubic-bezier(0.45, 0.05, 0.2, 1); }

/* Las transiciones solo existen mientras se anima: así el estado inicial
   se aplica sin transición y no hay un "repliegue" al cargar. */
.cota--animando::before {
  transition: transform var(--duracion-cota) var(--curva-cota);
}
.cota--animando .cota__tramo::before,
.cota--animando .cota__min,
.cota--animando .cota__total {
  transition: opacity 200ms ease-out var(--retraso, 0ms);
}
.cota--animando .cota__total { --retraso: calc(var(--duracion-cota) - 120ms); }
.cota--animando .cota__titulo,
.cota--animando .cota__tramo p {
  transition:
    opacity 380ms var(--curva-salida) calc(var(--retraso, 0ms) + 60ms),
    transform 380ms var(--curva-salida) calc(var(--retraso, 0ms) + 60ms);
}
.cota--animando .cota__tramo p { transition-delay: calc(var(--retraso, 0ms) + 120ms); }
.cota--animando .cota__cabeza {
  transition:
    left var(--duracion-cota) var(--curva-cota),
    top var(--duracion-cota) var(--curva-cota),
    opacity 500ms ease-out var(--duracion-cota);
}

.cota--espera::before { transform: scaleX(0); }
.cota--espera .cota__tramo::before,
.cota--espera .cota__min { opacity: 0; }
.cota--espera .cota__titulo,
.cota--espera .cota__tramo p { opacity: 0; transform: translateY(6px); }
.cota--espera .cota__cabeza { left: 0; opacity: 1; }

@media (max-width: 899px) {
  .cota--espera::before { transform: scaleY(0); }
  .cota--espera .cota__titulo,
  .cota--espera .cota__tramo p { transform: translateX(-6px); }
  .cota--espera .cota__cabeza { left: calc(5.5rem - var(--e-5) + 0.5px); top: 2px; }
}

/* --- Botones con vida ---------------------------------------------------- */

@keyframes salto-pin {
  0%, 82%, 100% { transform: translateY(0) scale(1, 1); }
  86% { transform: translateY(-5px) scale(0.96, 1.04); }
  90% { transform: translateY(0) scale(1.06, 0.94); }
  93% { transform: translateY(-2px) scale(1, 1); }
}
@keyframes sombra-pin {
  0%, 82%, 100% { transform: scaleX(1); opacity: 0.35; }
  86% { transform: scaleX(0.55); opacity: 0.15; }
  90% { transform: scaleX(1.15); opacity: 0.4; }
}
@keyframes onda {
  0% { scale: 1; opacity: 0.55; }
  45%, 100% { scale: 1.7; opacity: 0; }
}
@keyframes saludo {
  0%, 78%, 100% { rotate: 0deg; }
  81% { rotate: -14deg; }
  84% { rotate: 11deg; }
  87% { rotate: -7deg; }
  90% { rotate: 3deg; }
}
@keyframes aro {
  from { opacity: 0.85; scale: 1 1; }
  to { opacity: 0; scale: 1.08 1.45; }
}
@keyframes elegida {
  0% { scale: 0.92; }
  60% { scale: 1.04; }
  100% { scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .flotante-llegar__pin svg { animation: salto-pin 4.8s var(--curva-salida) infinite 1.5s; }
  .flotante-llegar__pin::after { animation: sombra-pin 4.8s var(--curva-salida) infinite 1.5s; }
  .barra-movil__accion--llegar .icono-pin { animation: salto-pin 4.8s var(--curva-salida) infinite 2.5s; }
  .boton--llegar:hover .icono-pin,
  .boton--ruta:hover .icono-pin { animation: salto-pin 1.1s var(--curva-salida) infinite -0.85s; }

  .flotante-wa__onda { animation: onda 3.2s var(--curva-salida) infinite; }
  .flotante-wa__onda::after { animation: onda 3.2s var(--curva-salida) infinite 0.5s; }
  .flotante-wa__icono { animation: saludo 6.5s var(--curva-salida) infinite 2s; }
  .flotante-wa:hover .flotante-wa__onda,
  .flotante-wa:hover .flotante-wa__onda::after { animation-duration: 1.6s; }

  /* el formulario completo invita a enviar: dos aros salen del botón */
  .reserva--lista .reserva__boton::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--c-acento);
    pointer-events: none;
    animation: aro 1.5s var(--curva-salida) 2;
  }
  .hora:has(:checked) { animation: elegida 360ms var(--curva-salida); }
}

/* Cambios de estado del formulario: opacidad, sin desplazamiento. */
.exito { transition: opacity 260ms var(--curva-salida); }
@starting-style {
  .exito { opacity: 0; }
}

/* Menú: se abre como una persiana desde arriba; los enlaces suben uno a uno. */
@keyframes persiana-abre { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes persiana-cierra { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes sube { from { translate: 0 105%; } to { translate: 0 0; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: persiana-abre 620ms var(--curva-cajon); }
  .menu.menu--cierra { animation: persiana-cierra 420ms var(--curva-telon) forwards; }
  .menu[open] .menu__lista li > a > span { animation: sube 800ms var(--curva-salida) both; animation-delay: calc(180ms + var(--i) * 50ms); }
  .menu[open] .menu__pie,
  .menu[open] .menu__cabeza > * { animation: aparece 600ms var(--curva-salida) 420ms both; }
}

/* Barra móvil y flotantes: se apartan mientras se escribe en un campo (el
   teclado los subiría justo encima del campo). */
@media (max-width: 899px) {
  .barra-movil { transition: transform 240ms var(--curva-salida); }
  body:has(.campo__control:focus) .barra-movil { transform: translateY(100%); }
  body:has(.campo__control:focus) .flotantes { translate: 0 140px; }
  .flotantes { transition: translate 240ms var(--curva-salida); }
}

@media (prefers-reduced-motion: reduce) {
  .dia::after,
  .barra-movil,
  .boton,
  .boton__texto > span,
  .nav__marca,
  .servicio__panel,
  .escena__foto,
  .escena__foto img,
  .cota__tramo::after { transition: none !important; }
  .boton:active,
  .hora:active,
  .necesidad:active { transform: none; }
  .boton:hover .boton__texto > span { translate: none; }
}