/* ==========================================================================
   Manos Vivas — Componentes
   ========================================================================== */

/* ---------- Textura de grano (fondo global, sutil) ---------- */
.textura-grano {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografía utilitaria ---------- */
.nota-tecnica {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--frase);
}

.titulo-seccion {
  font-size: var(--fs-h2);
  font-weight: 600;
}

.texto-lead {
  font-size: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem);
  color: var(--text-muted);
  max-width: var(--medida);
  margin-top: 0.9rem;
}

.precio {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.precio--grande {
  font-size: var(--fs-precio);
  color: var(--precio);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  min-height: 2.75rem;
  justify-content: center;
}

.boton:active {
  transform: scale(0.97);
}

.boton--primario {
  background: var(--boton-bg);
  color: var(--boton-texto);
  box-shadow: 0 10px 24px -10px var(--sombra-acento);
  min-height: 3rem;
}

.boton--primario:hover {
  background: var(--boton-hover);
  box-shadow: 0 14px 30px -10px var(--sombra-acento);
}

.boton--secundario {
  border: 1px solid var(--border-strong);
  color: var(--text);
}

.boton--secundario:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.boton--fantasma {
  padding-inline: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  font-weight: 400;
}

.boton--fantasma:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.boton--pequeno {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
}

.boton--bloque {
  width: 100%;
  justify-content: center;
}

.boton[disabled] {
  transform: none;
}

/* ---------- Nav ---------- */
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--logo-color);
}

.nav__links a {
  position: relative;
  /* Texto pleno: el menú es de vidrio y lo que pasa debajo cambia. */
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--accent-strong);
  transition: right var(--dur-med) var(--ease-soft);
}

.nav__links a:hover {
  color: var(--text);
}

.nav__links a:hover::after {
  right: 0;
}

.util-btn {
  display: grid;
  place-items: center;
  /* 2.5rem = 40px: objetivo táctil razonable sin engordar la barra. */
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

/* La etiqueta solo se ve en el menú de pantallas chicas: en la barra de
   escritorio el ícono y el aria-label bastan. */
.util-btn__etiqueta {
  display: none;
}

.util-btn:hover {
  color: var(--accent-strong);
  border-color: var(--border);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.util-btn[aria-pressed='true'] {
  color: var(--accent-strong);
  border-color: var(--accent);
}

.util-btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* El botón del menú va en azulito con texto tinta en ambos modos. */
.nav__menu-movil {
  border-radius: 999px;
  background: var(--menu-btn-bg);
  color: var(--menu-btn-texto);
}

.nav__menu-movil span,
.nav__menu-movil span::before,
.nav__menu-movil span::after {
  content: '';
  display: block;
  width: 1.15rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav__menu-movil span::before {
  position: absolute;
  top: -6px;
}

.nav__menu-movil span::after {
  position: absolute;
  top: 6px;
}

.nav--menu-abierto .nav__menu-movil span {
  background: transparent;
}

.nav--menu-abierto .nav__menu-movil span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav--menu-abierto .nav__menu-movil span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---------- Hero ----------
   El degradado cálido vive detrás del video: si todavía no hay archivo de
   video o falla la carga, el hero se sigue viendo intencional. */
.hero__fondo {
  background:
    radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--laguna) 45%, transparent), transparent 60%),
    radial-gradient(100% 80% at 85% 90%, color-mix(in srgb, var(--verde-bosque) 60%, transparent), transparent 65%),
    linear-gradient(170deg, var(--banda-noche), var(--azul-noche));
  transition: background var(--dur-med) var(--ease);
}

[data-tema='dia'] .hero__fondo {
  background:
    radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--azulito) 30%, transparent), transparent 60%),
    radial-gradient(100% 80% at 85% 90%, color-mix(in srgb, var(--madera) 55%, transparent), transparent 65%),
    linear-gradient(170deg, var(--piel), var(--banda-madera));
}

.hero__marca {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
  color: var(--logo-color);
  margin-bottom: 1.4rem;
  font-weight: 600;
}

/* Cada letra es un span que arma el JS para la entrada. En reposo se ven
   como texto corrido: el efecto no deja rastro en el resultado final. */
.hero__marca .letra {
  display: inline-block;
  white-space: pre;
}

.hero__titulo {
  font-size: var(--fs-h1);
  color: var(--titulo);
}

.hero__subtitulo {
  margin-top: 1.1rem;
  font-size: 1.375rem;
  color: var(--frase);
  max-width: 32rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
}

.hero__badge-precio {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--hero-texto);
}

.hero__badge-precio strong {
  color: var(--precio);
  font-size: var(--fs-precio);
  font-weight: 600;
}

/* ---------- Liquid glass ----------
   Solo encima de imágenes, video o zonas con color: el menú al hacer
   scroll, las tarjetas sobre el hero o sobre fotos y los botones
   flotantes. Nunca en texto largo, formularios, el modal ni el pago. */
.vidrio {
  background: var(--vidrio-bg);
  border: 1px solid var(--vidrio-borde);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
}

/* Sin backdrop-filter el vidrio sería un velo débil: pasa a sólido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio {
    background: var(--vidrio-solido);
  }
}

/* En móvil el vidrio es más liviano: solo el menú y los flotantes. */
@media (max-width: 900px) {
  .vidrio--escritorio {
    background: var(--vidrio-solido);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .vidrio {
    background: var(--vidrio-solido);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.hero__badge-precio.vidrio {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
}

.ventaja__marca {
  color: var(--accent);
  opacity: 0.75;
  margin-bottom: 1.25rem;
  width: 2.4rem;
  height: 2.4rem;
}

.ventaja__numero {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-faint);
}

.ventaja__titulo {
  margin-top: 0.35rem;
  font-size: clamp(1.2rem, 0.9vw + 0.85rem, 1.5rem);
}

.ventaja__texto {
  margin-top: 0.6rem;
  color: var(--text-muted);
  font-size: var(--fs-texto);
  max-width: 30rem;
}

/* ---------- Acordeón (compartido: catálogo + FAQ) ---------- */
.fila-acordeon {
  border-bottom: 1px solid var(--border);
}

.fila-acordeon__cabecera {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  text-align: left;
}

.fila-acordeon__chevron {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--accent-strong);
  transition: transform var(--dur-med) var(--ease-soft);
}

.fila-acordeon__cabecera[aria-expanded='true'] .fila-acordeon__chevron {
  transform: rotate(45deg);
}

.fila-acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-soft);
}

.fila-acordeon__panel.esta-abierto {
  grid-template-rows: 1fr;
}

.fila-acordeon__cuerpo {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.fila-acordeon__panel.esta-abierto .fila-acordeon__cuerpo {
  opacity: 1;
  transition-delay: 0.14s;
}

/* ---- Catálogo: contenido de cada fila ---- */
/* El h3 lleva solo el título genérico (SEO). Subtítulo y descripción van
   debajo, fuera del botón, pero el ::after del botón cubre toda la
   cabecera: se abre la fila tocando cualquier parte. */
.catalogo__cabecera-fila {
  position: relative;
  padding-bottom: 1.5rem;
}

.catalogo__cabecera-fila .fila-acordeon__cabecera {
  padding-block: 1.5rem 0.35rem;
}

.catalogo__cabecera-fila .fila-acordeon__cabecera::after {
  content: '';
  position: absolute;
  inset: 0;
}

.catalogo__titulo-fila {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-precio); /* 22px */
  line-height: 1.25;
}

.catalogo__titulo-texto {
  transition: color var(--dur-fast) var(--ease);
}

/* Subtítulo creativo de cada producto: no se traduce. */
.subtitulo-creativo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  line-height: 1.3;
  color: var(--frase);
}

.catalogo__resumen {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--fs-texto);
  max-width: 34rem;
}

.catalogo__precios-mini {
  flex: none;
  display: flex;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--text-faint);
}

/* Desktop: precios en una columna fija junto al ícono + */
@media (min-width: 901px) {
  .catalogo__precios-mini {
    margin-left: auto;
  }
}

/* Celular: el nombre en su propia línea y debajo los precios de 60 y 90
   min. El + tiene su columna fija, así ningún nombre largo (en ningún
   idioma) lo corta ni empuja los precios fuera de la pantalla. */
@media (max-width: 900px) {
  .catalogo__cabecera-fila .fila-acordeon__cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    row-gap: 0.3rem;
    align-items: center;
  }

  .catalogo__titulo-texto {
    grid-column: 1;
    grid-row: 1;
    overflow-wrap: break-word;
  }

  .catalogo__precios-mini {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    font-size: var(--fs-chico);
  }

  .catalogo__precios-mini > span {
    white-space: nowrap;
  }

  .catalogo__cabecera-fila .fila-acordeon__chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.catalogo__cuerpo-interior {
  padding-bottom: 2rem;
  display: grid;
  gap: 1.5rem;
}

.catalogo__descripcion {
  color: var(--text-muted);
  max-width: 42rem;
}

.catalogo__duraciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.opcion-duracion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.opcion-duracion__tiempo {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
}

.opcion-duracion__precio {
  font-family: var(--font-body);
  font-size: var(--fs-precio);
  color: var(--precio);
  font-weight: 600;
}

.catalogo__etiqueta-complementos {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-faint);
}

.chip-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.chip {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.catalogo__nota {
  font-size: var(--fs-chico);
  color: var(--text-faint);
  margin-top: 0.6rem;
}

/* ---- Adicionales ---- */
.adicional {
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.adicional__titulo {
  font-size: 1.25rem;
}

.adicional__texto {
  margin-top: 0.5rem;
  font-size: var(--fs-texto);
  color: var(--text-muted);
}

.adicional__precios {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--precio);
  font-weight: 600;
}

/* ---------- Lanzamiento ---------- */
/* Oferta especial, no un pack más: borde y halo ámbar para que se lea
   distinta de la grilla de precios. Todo vive en un solo contenedor; los
   min-width: 0 evitan que un texto sin cortes (el botón es nowrap) empuje
   la card fuera de la pantalla en móvil. */
.lanzamiento__panel {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  background: var(--panel-lanzamiento);
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -24px var(--sombra);
  padding: clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
}

.lanzamiento__columna,
.lanzamiento__compra {
  min-width: 0;
}

.lanzamiento__insignia {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--boton-texto);
  background: var(--boton-bg);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  overflow-wrap: anywhere;
}

.lanzamiento__titulo {
  margin-top: 1.25rem;
  font-size: var(--fs-h2);
}

.lanzamiento__columna .subtitulo-creativo {
  margin-top: 0.5rem;
}

.lanzamiento__columna .texto-lead {
  margin-top: 0.85rem;
}

.lanzamiento__lista {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.65rem;
  color: var(--text-muted);
  font-size: var(--fs-texto);
}

.lanzamiento__lista li {
  padding-left: 1.2rem;
  position: relative;
}

.lanzamiento__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 7px;
  height: 1px;
  background: var(--accent);
}

.lanzamiento__precios {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
}

.lanzamiento__precio-antes {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--text-faint);
  text-decoration-thickness: 1px;
}

.lanzamiento__ahorro {
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--accent-strong);
  font-weight: 600;
}

.lanzamiento__vigencia {
  margin-top: 0.85rem;
  font-size: var(--fs-chico);
  color: var(--text-muted);
}

.lanzamiento__compra .boton {
  margin-top: 1.4rem;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.lanzamiento__condiciones {
  margin-top: 1.25rem;
}

.lanzamiento__condiciones summary {
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-muted);
}

.lanzamiento__condiciones ul {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-chico);
  color: var(--text-faint);
  padding-left: 1.1rem;
}

.lanzamiento__condiciones li {
  list-style: disc;
}

/* ---------- Rituales (packs) ---------- */
.ritual-tarjeta {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color var(--dur-med) var(--ease);
}

/* Opción recomendada: etiqueta, borde y botón terracota. Las demás
   tarjetas quedan neutras. */
.ritual-tarjeta.ritual-tarjeta--destacado,
.plan-tarjeta.plan-tarjeta--destacada {
  border-color: var(--terracota-borde);
  border-top-color: var(--terracota-linea);
  box-shadow: 0 22px 44px -30px var(--terracota-sombra);
}

.etiqueta-elegido {
  align-self: flex-start;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--terracota-texto);
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.boton--terracota {
  background: var(--terracota);
  color: var(--terracota-texto);
  box-shadow: 0 10px 24px -10px var(--terracota-sombra);
  min-height: 3rem;
}

.boton--terracota:hover,
.boton--terracota:active {
  background: var(--terracota-hover);
}

.boton--terracota:active {
  transform: scale(0.97);
}

.ritual-tarjeta__nombre {
  font-size: var(--fs-precio); /* 22px, Atkinson 600 como todo h3 */
}

.ritual-tarjeta__nombre + .subtitulo-creativo {
  margin-top: -0.5rem;
}

.ritual-tarjeta__detalle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-faint);
}

.ritual-tarjeta__ahorro {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--frase);
}

.ritual-tarjeta__texto {
  color: var(--text-muted);
  font-size: var(--fs-texto);
}

/* El botón queda al pie aunque una tarjeta tenga una línea más. */
.ritual-tarjeta .boton {
  margin-top: auto;
}

.nota-legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-chico);
  color: var(--text-faint);
  max-width: 48rem;
}

/* ---------- Suscripciones ---------- */
.suscripciones__comunas {
  margin-top: 1.5rem;
  font-size: var(--fs-chico);
  color: var(--text-faint);
  max-width: 48rem;
}

/* Dos notas seguidas (cuenta Mercado Pago y comunas) sin doble aire. */
.suscripciones__comunas + .suscripciones__comunas {
  margin-top: 0.5rem;
}

.suscripciones__comunas a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.suscripciones__condicion {
  margin-top: 0.85rem;
  font-size: var(--fs-texto);
  color: var(--text-muted);
}

/* Mismo lenguaje que las tarjetas de rituales: nombre, precio grande y
   luego el detalle, siempre apilados (también en móvil). */
.plan-tarjeta {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.plan-tarjeta__nombre {
  font-size: var(--fs-precio);
}

/* Nombre del plan arriba y las sesiones debajo, más chicas. El h3 sigue
   diciendo el nombre completo (el " · " va oculto para lectores). */
.plan-tarjeta__plan,
.plan-tarjeta__sesiones {
  display: block;
}

.plan-tarjeta__sesiones {
  margin-top: 0.2rem;
  font-weight: 400;
  font-size: var(--fs-texto);
  color: var(--text-muted);
}

.plan-tarjeta__texto {
  color: var(--text-muted);
  font-size: var(--fs-texto);
}

.plan-tarjeta__mes {
  font-size: var(--fs-chico);
  color: var(--text-faint);
  margin-left: 0.15rem;
}

.plan-tarjeta__detalle {
  color: var(--text-muted);
  font-size: var(--fs-texto);
}

.plan-tarjeta__por-sesion {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--frase);
}

/* Condiciones de packs y planes: texto chico y discreto bajo el precio. */
.tarjeta-condiciones {
  font-size: var(--fs-chico);
  line-height: 1.5;
  color: var(--text-faint);
}

/* El botón queda siempre al pie, aunque una tarjeta tenga una línea más. */
.plan-tarjeta .boton {
  margin-top: auto;
}

/* "Reservar masaje" al cierre de suscripciones y de testimonios. */
.cta-seccion {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}

/* ---------- Beneficios (banda en #ventajas) ---------- */
.beneficio {
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.beneficio__numero {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--accent-strong);
}

.beneficio__titulo {
  margin-top: 0.35rem;
  font-size: 1.125rem;
}

.beneficio__texto {
  margin-top: 0.4rem;
  font-size: var(--fs-texto);
  color: var(--text-muted);
}

.no-negociable__numero {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-faint);
}

.no-negociable__titulo {
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

.no-negociable__texto {
  margin-top: 0.55rem;
  color: var(--text-muted);
  font-size: var(--fs-texto);
}

/* ---------- Historia ---------- */
.historia__retrato {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.historia__retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La foto llena el marco 4:5 completo: fuera de la grilla, para que no
   quede espacio vacío arriba ni abajo, y anclada arriba para no cortar
   la cabeza. */
.historia__retrato .historia__foto {
  position: absolute;
  inset: 0;
  display: block;
  object-position: center top;
}

.historia__retrato-marca {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-faint);
  text-align: center;
  padding: 1.5rem;
  font-weight: 500;
}

.historia__texto p {
  color: var(--text-muted);
  max-width: var(--medida);
}

.historia__firma-nombre {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 1.8vw + 1.1rem, 2.2rem);
  color: var(--frase);
  line-height: 1.1;
}

.historia__firma-trazo {
  width: 10rem;
  height: auto;
  color: var(--accent);
  margin-top: 0.35rem;
  opacity: 0.9;
}

.historia__firma-cargo {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-faint);
}

/* ---------- Testimonios ---------- */
.testimonio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
  pointer-events: none;
}

.testimonio.esta-activo {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.testimonio__cita {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.7rem);
  font-style: italic;
  line-height: 1.4;
  max-width: 40rem;
  font-weight: 500;
  color: var(--cita-testimonios);
}

.testimonio__autor {
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-faint);
}

.testimonios__flecha {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.testimonios__flecha:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.testimonios__flecha svg {
  width: 1rem;
  height: 1rem;
}

.testimonios__punto {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.testimonios__punto[aria-current='true'] {
  background: var(--accent-strong);
  transform: scale(1.4);
}

.testimonios__vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: 0.6rem;
  color: var(--text-muted);
}

/* ---------- FAQ ---------- */
.faq__pregunta {
  font-size: 1.125rem;
  padding-right: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.faq__respuesta {
  padding-bottom: 1.5rem;
  color: var(--text-muted);
  max-width: var(--medida);
}

/* Título pequeño de cada categoría. Su borde inferior hace de borde
   superior de la primera pregunta del grupo. */
.faq__grupo-titulo {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-faint);
}

/* ---------- Idiomas ---------- */
/* Notas que solo tienen sentido para quien no lee en español (moneda,
   formulario de Mercado Pago). */
html:not([data-idioma='en']):not([data-idioma='pt']) [data-solo-traducido] {
  display: none;
}

.nota-moneda {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-faint);
}

.util-idiomas .util-btn {
  font-family: var(--font-body);
}

/* ---------- Newsletter ---------- */
.newsletter__titulo {
  font-size: var(--fs-h2);
}

.formulario-newsletter {
  display: flex;
  gap: 0.75rem 1rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.formulario-newsletter .campo {
  flex: 1 1 14rem;
}

/* En móvil, correo y botón uno debajo del otro, a lo ancho. */
@media (max-width: 600px) {
  .formulario-newsletter {
    flex-direction: column;
    align-items: stretch;
  }
  .formulario-newsletter .campo {
    flex: none;
  }
  .formulario-newsletter .boton {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Campos ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.campo__etiqueta {
  font-size: var(--fs-chico);
  color: var(--text-muted);
}

.campo__control {
  padding: 0.8rem 0.1rem;
  border-bottom: 1px solid var(--borde-campo);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease);
  border-radius: 0;
}

.campo__control:focus-visible {
  outline: none;
  border-color: var(--accent-strong);
}

.campo__control::placeholder {
  color: var(--text-faint);
}

/* Selector con la misma línea inferior que los inputs y su propia flecha. */
.campo__control--select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 1.75rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.85rem) 55%, calc(100% - 0.5rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.campo__control--select option,
.campo__control--select optgroup {
  background: var(--surface);
  color: var(--text);
}

.reserva__aviso-comuna {
  margin-top: 1rem;
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--text-muted);
}

.reserva__aviso-direccion {
  margin-top: 0.75rem;
}

textarea.campo__control {
  resize: vertical;
  min-height: 4.5rem;
}

.campo__error {
  font-size: var(--fs-chico);
  color: var(--accent-strong);
  min-height: 1.1em;
}

.campo__ayuda {
  font-size: var(--fs-chico);
  color: var(--text-muted);
}

/* ---------- Sugerencias de dirección (Google Maps) ---------- */
.campo__con-sugerencias {
  position: relative;
  display: flex;
  flex-direction: column;
}

.sugerencias-direccion {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  box-shadow: 0 18px 40px -18px var(--sombra);
  overflow: hidden;
}

.sugerencias-direccion[hidden] {
  display: none;
}

.sugerencias-direccion__lista {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}

.sugerencias-direccion__item {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
}

.sugerencias-direccion__item:hover,
.sugerencias-direccion__item[aria-selected='true'] {
  background: var(--surface);
}

.sugerencias-direccion__principal {
  font-size: 1rem;
  color: var(--text);
}

.sugerencias-direccion__secundario {
  font-size: var(--fs-chico);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.sugerencias-direccion__atribucion {
  padding: 0.35rem 0.9rem 0.5rem;
  font-size: var(--fs-chico);
  color: var(--text-faint);
  text-align: right;
}

/* ---------- Footer ---------- */
.footer__lema {
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-faint);
  margin-top: 0.2rem;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.footer__links a {
  font-size: 1rem;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.footer__links a:hover {
  color: var(--accent-strong);
}

.footer__legales a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}

.footer__legales a:hover {
  color: var(--accent-strong);
}

/* Mismo borde y fondo que el botón de WhatsApp, en círculo. */
.footer__instagram {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--titulo);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.footer__instagram:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.footer__instagram svg {
  width: 1.2rem;
  height: 1.2rem;
  /* reset.css rellena los SVG con currentColor: acá va solo el trazo. */
  fill: none;
}

.footer__instagram svg .footer__instagram-punto {
  fill: currentColor;
}

.boton-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  min-height: 2.75rem;
}

.boton-whatsapp:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.reserva__estado .boton-whatsapp {
  margin-top: 1rem;
}

.boton-whatsapp svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--titulo);
}

/* ---------- CTA flotante ---------- */
.cta-flotante {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: var(--boton-bg);
  color: var(--boton-texto);
  font-weight: 600;
  /* Relleno sólido (es el 10% de la paleta) con el borde y el brillo del
     vidrio, para que se despegue de lo que tenga debajo. */
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), 0 14px 30px -12px var(--sombra);
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease-spring);
  min-height: 3rem;
}

.cta-flotante.esta-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 4vw, 2rem);
  z-index: 120;
  transform: translate(-50%, 12px);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 40px -16px var(--sombra);
  font-size: 1rem;
  max-width: min(90vw, 26rem);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}

.toast.esta-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast__punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-strong);
}

/* ---------- Overlay de reserva ---------- */
.reserva {
  background: color-mix(in srgb, var(--azul-noche) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
}

.reserva.esta-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Modal sólido, sin vidrio. Por dentro las superficies toman el fondo de
   la página para que contrasten con el panel. */
.reserva__panel {
  position: relative;
  --surface: var(--bg);
  --surface-raised: var(--bg);
  --fondo-campo: var(--vidrio-solido);
  background: var(--vidrio-solido);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: 0 40px 80px -30px var(--sombra);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-med) var(--ease);
}

.reserva.esta-visible .reserva__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.reserva__cerrar {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--text-muted);
  z-index: 2;
}

.reserva__cerrar:hover {
  color: var(--accent-strong);
  background: var(--surface);
}

.reserva__cerrar svg {
  width: 1rem;
  height: 1rem;
}

.reserva__titulo {
  font-size: 1.75rem;
  padding: 1.5rem clamp(1.5rem, 4vw, 2.5rem) 0;
  padding-right: 3.5rem;
}

.reserva__paso-indicador {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.reserva__paso-indicador span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width var(--dur-med) var(--ease-soft);
}

.reserva__paso-indicador.esta-activo span,
.reserva__paso-indicador.esta-completo span {
  width: 100%;
}

.paso-reserva {
  display: none;
}

.paso-reserva.esta-activo {
  display: block;
}

.paso-reserva__titulo {
  font-size: 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.paso-reserva__ayuda {
  margin-top: 0.4rem;
  font-size: 1rem;
  color: var(--text-muted);
}

.resumen-reserva {
  margin-top: 1.5rem;
  padding: 1.1rem;
  border-radius: var(--radius-m);
  background: var(--surface);
  display: grid;
  gap: 0.5rem;
  font-size: 1rem;
}

.resumen-reserva__fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-muted);
}

/* Los montos no se parten nunca. En las filas de texto (dirección, masaje
   de la primera sesión) la etiqueta queda fija y el valor puede ocupar dos
   líneas, alineado a la derecha. */
.resumen-reserva__fila > span:last-child {
  flex: none;
  white-space: nowrap;
  text-align: right;
}

.resumen-reserva__fila--texto > span:first-child {
  flex: none;
}

.resumen-reserva__fila--texto > span:last-child {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Packs: "Primera sesión · Masaje Relajante · mar 29 sep, 17:30" en una
   sola fila de texto corrido. Puede ocupar dos líneas, pero la fecha no se
   parte. */
.resumen-reserva__fila--primera > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: left;
}

.resumen-reserva__fecha {
  white-space: nowrap;
}

.resumen-reserva__total {
  display: flex;
  justify-content: space-between;
  padding-top: 0.6rem;
  margin-top: 0.3rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  color: var(--text);
  font-size: var(--fs-precio);
  font-weight: 600;
}

.opcion-servicio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.opcion-servicio + .opcion-servicio {
  margin-top: 0.6rem;
}

.opcion-servicio:hover {
  border-color: var(--accent);
}

.opcion-servicio[aria-pressed='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.opcion-complemento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.opcion-complemento:hover {
  border-color: var(--accent);
}

.opcion-complemento input {
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
}

.opcion-complemento.esta-marcado {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.opcion-complemento__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1rem;
}

.opcion-complemento__precio {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--precio);
  font-weight: 600;
}

.horario-slot {
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
  min-height: 2.75rem;
}

.horario-slot:hover {
  border-color: var(--accent);
}

.horario-slot[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.reserva__estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding-block: 2rem;
  color: var(--text-muted);
}

/* La hora que se está pagando, en grande: nadie debería pagar sin verla. */
.pago-cuando {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-m);
  background: var(--surface);
  border-left: 3px solid var(--accent-relleno);
  font-size: 1rem;
}

.pago-cuando strong {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-precio);
  color: var(--text);
  font-weight: 600;
}

/* Políticas principales justo antes de pagar. */
.pago-politicas {
  margin-top: 1rem;
  display: grid;
  gap: 0.35rem;
  padding-left: 1.1rem;
  font-size: var(--fs-chico);
  line-height: 1.5;
  color: var(--text-muted);
}

.pago-politicas li {
  list-style: disc;
}

.pago-politicas a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pago-politica {
  margin-top: 1rem;
  font-size: var(--fs-chico);
  line-height: 1.5;
  color: var(--text-faint);
}

.brick-pago {
  margin-top: 1.25rem;
  min-height: 3rem;
}

/* ==========================================================================
   ESTADOS DE BOTONES
   Regla: ningún control queda sin decir qué pasó. Cada uno tiene reposo,
   hover, presionado (:active) y, si guarda una elección, estado marcado.
   ========================================================================== */

/* ---- Foco visible: mismo lenguaje en todo el sitio ---- */
.boton:focus-visible,
.util-btn:focus-visible,
.opcion-servicio:focus-visible,
.opcion-complemento:focus-visible,
.horario-slot:focus-visible,
.testimonios__flecha:focus-visible,
.cta-flotante:focus-visible,
.boton-whatsapp:focus-visible,
.footer__instagram:focus-visible,
.fila-acordeon__cabecera:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

/* ---- Botones principales ---- */
.boton--primario:active {
  background: var(--boton-hover);
  box-shadow: 0 2px 6px -4px var(--sombra-acento) inset;
  transform: scale(0.97);
}

.boton--secundario:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.boton--secundario:active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent-strong);
  transform: scale(0.97);
}

.boton--fantasma:active {
  color: var(--accent);
  transform: none;
  opacity: 0.8;
}

/* Botón que ya hizo su trabajo (elegido / en curso) */
.boton[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.boton[disabled] {
  opacity: 0.5;
  box-shadow: none;
}

/* ---- Controles de la barra superior ---- */
.util-btn:active {
  transform: scale(0.9);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
}

.util-btn[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Destello corto cuando el control aplica un cambio: confirma el click
   incluso cuando el efecto en pantalla es sutil. */
.util-btn.acaba-de-cambiar {
  animation: destello-control 0.5s var(--ease-soft);
}

/* ---- Enlaces de navegación ---- */
.nav__links a:active {
  color: var(--accent);
}

.nav__links a[aria-current='true'] {
  color: var(--text);
}

.nav__links a[aria-current='true']::after {
  right: 0;
  background: var(--accent);
}

/* ---- Acordeón: la fila abierta se nota ---- */
.fila-acordeon__cabecera:hover .catalogo__titulo-texto,
.fila-acordeon__cabecera:hover .faq__pregunta {
  color: var(--accent-strong);
}

.fila-acordeon__cabecera:active {
  opacity: 0.8;
}

.fila-acordeon__cabecera[aria-expanded='true'] .catalogo__titulo-texto,
.fila-acordeon__cabecera[aria-expanded='true'] .faq__pregunta {
  color: var(--accent-strong);
}

.fila-acordeon:has(.fila-acordeon__cabecera[aria-expanded='true']) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%);
}

/* ---- Elegir masaje / duración / horario ---- */
.opcion-servicio:active,
.horario-slot:active,
.opcion-complemento:active {
  transform: scale(0.985);
}

.opcion-servicio[aria-pressed='true'] {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.opcion-servicio[aria-pressed='true']::after,
.horario-slot[aria-pressed='true']::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-punto);
  flex: none;
}

.horario-slot[aria-pressed='true'] {
  font-weight: 600;
}

.horario-slot:disabled {
  opacity: 0.4;
  text-decoration: line-through;
}

.opcion-duracion:has(.boton[aria-pressed='true']) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---- Complementos: marcar y desmarcar libremente ---- */
.opcion-complemento.esta-marcado .opcion-complemento__precio {
  color: var(--accent-punto);
  font-weight: 600;
}

.opcion-complemento:active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---- Carrusel ---- */
.testimonios__flecha:active {
  transform: scale(0.9);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.testimonios__punto:hover {
  background: var(--accent);
  transform: scale(1.3);
}

/* ---- CTA flotante ---- */
.cta-flotante:hover {
  background: var(--boton-hover);
  transform: translateY(-2px) scale(1.02);
}

.cta-flotante.esta-visible:active {
  transform: translateY(0) scale(0.96);
}

/* ---- WhatsApp ---- */
.boton-whatsapp:active {
  transform: translateY(0) scale(0.98);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

/* ---- Formularios ---- */
.campo__control:hover {
  border-color: var(--accent-strong);
}

.campo__control:focus {
  outline: none;
  border-color: var(--accent-strong);
  box-shadow: 0 1px 0 var(--accent-strong);
}

.campo__control[aria-invalid='true'] {
  border-color: var(--accent-strong);
}

/* ==========================================================================
   LOGO — identidad repetida en todo el sitio
   ========================================================================== */

.logo-marca {
  display: block;
  width: auto;
}

/* El mismo archivo sirve en ambos modos: se muestra el que corresponde. */
[data-tema='noche'] .logo--claro,
[data-tema='dia'] .logo--oscuro {
  display: block;
}

[data-tema='noche'] .logo--oscuro,
[data-tema='dia'] .logo--claro {
  display: none;
}

/* ---- Nav ---- */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity var(--dur-fast) var(--ease);
}

.nav__logo:hover {
  opacity: 0.75;
}

.nav__logo:active {
  opacity: 0.55;
}

.nav__logo-marca {
  width: 2.2rem;
  height: 2.2rem;
}

.nav__logo-marca .logo-trazo {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.6;
  stroke-linecap: round;
}

.nav__logo-marca .logo-punto {
  fill: var(--accent-punto);
}

.nav__logo-texto {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

@media (max-width: 500px) {
  .nav__logo-texto {
    display: none;
  }
}

/* ---- Logo del hero: el que abre la experiencia ---- */
.hero__logo {
  width: clamp(5rem, 8vw + 2rem, 8.5rem);
  height: auto;
  margin-bottom: 1.5rem;
  overflow: visible;
}

@media (max-width: 900px) {
  .hero__logo {
    width: clamp(4.25rem, 19vw, 5.5rem);
    margin-bottom: 1rem;
  }
  .hero__marca {
    margin-bottom: 0.9rem;
  }
}

.hero__logo .logo-trazo {
  fill: none;
  stroke: var(--logo-color);
  stroke-width: 4.6;
  stroke-linecap: round;
}

.hero__logo .logo-punto {
  fill: var(--accent-punto);
}

/* ---- Marca de agua: el logo como textura de sección ---- */
.marca-agua {
  position: absolute;
  pointer-events: none;
  opacity: 0.045;
  width: clamp(14rem, 30vw, 26rem);
  height: auto;
  z-index: 0;
}

.marca-agua--derecha {
  top: 8%;
  right: -6%;
  transform: rotate(8deg);
}

.marca-agua--izquierda {
  bottom: 6%;
  left: -7%;
  transform: rotate(-10deg);
}

.marca-agua .logo-trazo {
  fill: none;
  stroke: var(--text);
  stroke-width: 4.6;
  stroke-linecap: round;
}

.marca-agua .logo-punto {
  fill: var(--accent);
}

/* El contenido siempre por encima de la marca de agua */
.catalogo .contenedor,
.bienestar .contenedor,
.historia .contenedor,
.newsletter .contenedor {
  position: relative;
  z-index: 1;
}

/* ---- Separador de secciones con el logo ---- */
.separador-logo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-block: clamp(2rem, 5vw, 3.5rem);
}

.separador-logo::before,
.separador-logo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.separador-logo img {
  width: 1.8rem;
  height: 1.8rem;
  opacity: 0.55;
}

/* ---- Lockup del footer ---- */
.footer__lockup {
  width: clamp(9rem, 14vw, 12rem);
  height: auto;
}

/* ---- Insignia del fundador (negativo con fondo propio) ----
   Selector con dos clases a propósito: `.historia__retrato img` estira
   cualquier imagen al 100% y taparía la foto con la insignia. */
.historia__retrato .historia__insignia {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0.55rem;
  border-radius: 999px;
}

/* De día el vidrio al 62% deja pasar el follaje oscuro de la foto y el
   logo verde pierde contraste: la tarjeta piel va casi opaca. */
[data-tema='dia'] .historia__retrato .historia__insignia {
  background: rgb(251 244 236 / 0.92);
}

.historia__retrato .historia__insignia img {
  width: 100%;
  height: 100%;
}

.historia__retrato {
  position: relative;
}

/* ---- Logo en el flujo de reserva ---- */
.reserva__titulo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.reserva__titulo img {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
}

.separador-logo--lockup img {
  width: clamp(8rem, 12vw + 2rem, 12rem);
  height: auto;
  opacity: 1;
}

.testimonios__punto:active {
  background: var(--accent-strong);
  transform: scale(0.9);
}

/* ---------- Experiencia (video vertical) ---------- */
.experiencia__video {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--border);
  /* Portada de respaldo: se ve si el video no carga o entre vueltas. */
  background: var(--bg-deep) url('../assets/images/camilla-jardin-mar.jpg') center / cover no-repeat;
  box-shadow: 0 30px 60px -30px var(--sombra);
}

.experiencia__video video {
  display: block;
  width: 100%;
  /* El archivo es vertical: se reserva su proporción para que no salte
     el layout mientras carga la metadata. */
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--bg-deep);
}

.experiencia__texto .boton {
  margin-top: 1.75rem;
}

/* Título de la banda de beneficios: más chico que un título de sección,
   porque es un subtema dentro de #ventajas, no una sección propia. */
.ventajas__beneficios-titulo {
  font-size: clamp(1.3rem, 1vw + 0.9rem, 1.7rem);
  color: var(--text-muted);
  font-weight: 600;
}

/* ---------- FAQ: listas de detalle ----------
   El detalle técnico vive solo acá, así que necesita jerarquía propia. */
.faq__respuesta > * + * {
  margin-top: 1rem;
}

/* Respuestas largas partidas en dos párrafos. */
.faq__respuesta + .faq__respuesta {
  margin-top: 0.75rem;
}

.faq__lista-detalle dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  margin-top: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.faq__lista-detalle dd {
  margin-top: 0.3rem;
  margin-left: 0;
  font-size: var(--fs-texto);
}

.faq__precio {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--precio);
}

/* ---------- Remate del catálogo ---------- */
.remate__titulo {
  font-size: var(--fs-h2);
  font-weight: 600;
}

.remate__intro {
  margin-top: 0.6rem;
  max-width: 40rem;
  color: var(--text-muted);
  font-size: var(--fs-texto);
}

.remate__item {
  padding: 1.4rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface);
  transition: border-color var(--dur-med) var(--ease);
}

.remate__item:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.remate__icono {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--accent);
  opacity: 0.9;
}

.remate__nombre {
  margin-top: 1rem;
  font-size: 1.125rem;
  font-family: var(--font-body);
  font-weight: 600;
}

.remate__texto {
  margin-top: 0.4rem;
  font-size: 1rem;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---------- Testimonios: video y estrellas ---------- */
.testimonios__video {
  width: 100%;
  max-width: 20rem;
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-deep) url('../assets/images/cliente-perro-jardin.jpg') center / cover no-repeat;
  box-shadow: 0 30px 60px -30px var(--sombra);
}

.testimonios__video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--bg-deep);
}

video[poster] {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* En móvil los dos videos verticales se muestran en 4:5: ocupan menos alto
   de pantalla y se recortan por arriba y por abajo, sin bandas. */
@media (max-width: 900px) {
  .experiencia__video video,
  .testimonios__video video {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

.testimonio__estrellas {
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: var(--cita-testimonios);
  margin-bottom: 1rem;
}

/* Las estrellas que faltan se atenúan en vez de desaparecer: así se ve
   que la nota es sobre 5 y no queda ambiguo. */
.testimonio__estrella-vacia {
  color: var(--border-strong);
}

.testimonios__fuente {
  margin-top: 2.5rem;
  text-align: center;
  font-size: var(--fs-chico);
  color: var(--text-faint);
}

.nota-legal a {
  color: var(--accent-strong);
  border-bottom: 1px solid currentColor;
}

.nota-legal a:hover {
  color: var(--accent);
}

/* ---------- Barra de controles: vidrio ---------- */
.nav__utilidades {
  background: var(--vidrio-bg);
  border: 1px solid var(--vidrio-borde);
  box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra);
}

.nav__utilidades .util-par {
  border-color: var(--vidrio-borde);
}

@media (max-width: 900px) {
  body > .nav__utilidades {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  /* Compacta: unos 40px por botón; en pantallas angostas o con A+ se
     ajusta al ancho para que la barra nunca se salga. */
  body > .nav__utilidades .util-btn {
    width: min(2.65rem, 10.5vw);
    height: min(2.65rem, 10.5vw);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body > .nav__utilidades {
    background: var(--vidrio-solido);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav__utilidades {
    background: var(--vidrio-solido);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   FLUJO DE RESERVA · controles del modal
   ========================================================================== */

/* Más aire entre el subtítulo de cada paso y el primer campo */
.paso-reserva__titulo + .paso-reserva__ayuda {
  margin-bottom: 1.5rem;
}

/* La X se ve igual en todos los pasos: el foco inicial va al panel, que
   no necesita anillo porque no es un control. */
.reserva__panel:focus {
  outline: none;
}

.reserva__cerrar {
  border: 1px solid var(--border);
  background: var(--bg);
}

.reserva__bloque {
  margin-top: 1.5rem;
}

.reserva__bloque .catalogo__etiqueta-complementos {
  margin-bottom: 0.6rem;
}

/* ---- Paso 1: masaje elegido en una línea ---- */
.servicio-elegido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 600;
}

.servicio-elegido__cambiar {
  color: var(--accent-strong);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 2.75rem;
}

.servicio-elegido__cambiar:hover {
  color: var(--accent);
}

.reserva__desde {
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-chico);
  color: var(--text-muted);
}

.reserva__desde strong {
  color: var(--precio);
  font-weight: 600;
}

/* ---- Paso 1: duración lado a lado ---- */
.reserva__duraciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.reserva__duraciones .horario-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* ---- Paso 1: complementos por tipo ---- */
.reserva__complementos {
  margin-top: 0;
  gap: 0;
}

.grupo-complemento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--border);
}

.grupo-complemento:last-child {
  border-bottom: 1px solid var(--border);
}

.grupo-complemento__nombre {
  font-size: 1rem;
}

.grupo-complemento__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip-complemento {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
  min-height: 2.75rem;
}

.chip-complemento:hover {
  border-color: var(--accent);
}

.chip-complemento:active {
  transform: scale(0.97);
}

.chip-complemento[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-relleno);
  color: var(--on-accent);
}

.chip-complemento:focus-visible,
.dia-tira:focus-visible,
.toggle-sino button:focus-visible,
.servicio-elegido__cambiar:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* ---- Paso 2: estacionamiento sí / no ---- */
.toggle-sino {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 12rem);
  padding: 0.25rem;
  border: 1px solid var(--borde-campo);
  border-radius: 999px;
}

.toggle-sino button {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 1rem;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  min-height: 2.75rem;
}

.toggle-sino button[aria-checked='true'] {
  background: var(--accent-relleno);
  color: var(--on-accent);
  font-weight: 600;
}

/* ---- Paso 3: tira de días ---- */
.tira-dias {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.4rem;
  margin-inline: -0.25rem;
  padding-inline: 0.25rem;
  scrollbar-width: thin;
}

.dia-tira {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-width: 3.4rem;
  padding: 0.55rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  scroll-snap-align: start;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  min-height: 3rem;
}

.dia-tira:hover:not(:disabled) {
  border-color: var(--accent);
}

/* Día con la agenda completa: se ve, pero no se puede elegir. */
.dia-tira:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dia-tira__semana {
  font-size: var(--fs-chico);
  color: var(--text-muted);
}

.dia-tira__numero {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
}

.dia-tira[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-relleno);
  color: var(--on-accent);
}

.dia-tira[aria-pressed='true'] .dia-tira__semana {
  color: var(--on-accent);
}

.reserva__franja {
  margin-top: 1.25rem;
}

/* ---- Paso 4: autocompletar del navegador con los colores de la marca ---- */
.campo__control:-webkit-autofill,
.campo__control:-webkit-autofill:hover,
.campo__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--fondo-campo, var(--bg)) inset;
  box-shadow: 0 0 0 1000px var(--fondo-campo, var(--bg)) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}

.servicio-elegido > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 500px) {
  .servicio-elegido {
    font-size: 1rem;
  }
  /* En pantallas chicas el nombre va arriba y los chips debajo, igual en
     todos los tipos aunque alguno tenga una sola opción. */
  .grupo-complemento {
    flex-direction: column;
    align-items: flex-start;
  }
}