/* ============================================================
   PROPUESTA A — Spa Capilar
   La portada aprobada (foto + texto literal) como escena 0 del
   recorrido sensorial original de la Home.

   Esta capa SOLO añade:
   1. Las variables del sistema Home acotadas a .mr-spa-odyssey,
      para que el recorrido renderice con sus valores de producción
      sin alterar el sistema interior (base.css).
   2. El velo de lectura de la portada, activo solo en la escena 0.
   3. Los ajustes de la escena 0 (valores tomados de portada.css,
      la portada aprobada por Salva).
   4. El vídeo del ritual como escena protagonista (vertical real,
      sin deformar).
   ============================================================ */

/* --- 0. Ajuste de entorno del sistema interior ---
   base.css fija body { overflow-x: hidden }, lo que desactiva
   position: sticky en toda la página (la Home no carga base.css,
   por eso el recorrido original sí fija allí). `clip` recorta igual
   el desbordamiento horizontal sin crear contenedor de scroll:
   el sticky vuelve a funcionar con idéntico anti-overflow. */
body {
  overflow-x: clip;
}

/* --- 0b. Ancla de «Descubrir la experiencia» (#ritual) ---
   Sin scroll-margin, en móvil el título de la sección quedaba ~24 px
   bajo la cabecera sticky (63 px ya contraída) al saltar el ancla.
   Solo móvil: el aterrizaje de escritorio no cambia. */
@media (max-width: 760px) {
  #ritual {
    scroll-margin-top: 64px;
  }
}

/* --- 1. Variables de producción del sistema Home, acotadas --- */
.mr-spa-odyssey {
  --cobre-light: #d48b64;
  --porcelana: #fdfbfd;
  --penumbra: #1b0f16;
  --rosa-velo: #faf4f7;
  --max-w: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --font-serif: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Instrument Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial-italic: "Newsreader", "Spectral", Georgia, serif;

  /* Cuatro escenas: 190vh reparte ~47,5vh por escena, sin tramos muertos
     ni pausas vacías (la Home usa 180vh para sus cinco capítulos). */
  height: 190vh;
}

/* --- 1b. La liberación final, modulada para entregar a la noche ---
   En la Home el recorrido termina liberando a una sección CLARA
   (opacidad = progreso² × 0,85). Aquí el recorrido continúa hacia
   la noche del contenido (spa-night), así que la liberación se
   queda en un respiro suave (× 0,25) en lugar de un destello blanco;
   el pase noche → luz lo hace, como en producción, spa-ambient-return. */
.mr-spa-release {
  opacity: calc(var(--spa-progress, 0) * var(--spa-progress, 0) * 0.25);
}

/* --- 2. Velo de la portada (solo escena 0; lo activa recorrido.js) --- */
.mr-spa-cover-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  background: linear-gradient(
    92deg,
    rgba(42, 20, 28, 0.88) 0%,
    rgba(42, 20, 28, 0.74) 24%,
    rgba(42, 20, 28, 0.38) 46%,
    rgba(42, 20, 28, 0.08) 66%,
    rgba(42, 20, 28, 0) 80%
  );
}
.mr-spa-odyssey[data-spa-chapter="0"] .mr-spa-cover-veil { opacity: 1; }

/* Encuadre de la fotografía aprobada (valores de portada.css) */
.mr-spa-media[data-spa-image="portada-aprobada"] img,
.mr-spa-media[data-spa-image="portada-aprobada-regreso"] img {
  object-position: 50% 45%;
}

/* --- 3. Escena 0: el texto aprobado, sin cambios --- */
.mr-spa-chapter--cover {
  width: min(46rem, calc(100vw - var(--container-pad) * 2));
}
.mr-spa-chapter--cover .spa-cover-breadcrumb {
  margin-bottom: 1.15rem;
  color: rgba(249, 231, 240, 0.6);
}
.mr-spa-chapter--cover .spa-cover-breadcrumb a {
  color: rgba(249, 231, 240, 0.78);
}
.mr-spa-chapter--cover .spa-cover-breadcrumb a:hover {
  color: var(--rosa-brillo, #e2589b);
}
.mr-spa-chapter--cover .spa-cover-breadcrumb .sep {
  color: rgba(249, 231, 240, 0.42);
}
.mr-spa-chapter--cover .spa-hero-title {
  margin-top: 1.15rem;
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 1.03;
}
.mr-spa-chapter--cover .spa-hero-lead {
  margin-inline: 0;
  max-width: 31rem;
}
.mr-spa-chapter--cover .spa-hero-actions {
  justify-content: flex-start;
  margin-top: 2.2rem;
}

/* --- Móvil: la portada aprobada se apoya en su zona oscura inferior --- */
@media (max-width: 760px) {
  .mr-spa-odyssey {
    height: 190vh;
    min-height: 1560px;
  }
  .mr-spa-cover-veil {
    background:
      linear-gradient(
        180deg,
        rgba(42, 20, 28, 0.46) 0%,
        rgba(42, 20, 28, 0.16) 32%,
        rgba(42, 20, 28, 0.6) 60%,
        rgba(42, 20, 28, 0.92) 100%
      ),
      linear-gradient(
        92deg,
        rgba(42, 20, 28, 0.42) 0%,
        rgba(42, 20, 28, 0.1) 55%,
        rgba(42, 20, 28, 0) 75%
      );
  }
  .mr-spa-media[data-spa-image="portada-aprobada"] img,
  .mr-spa-media[data-spa-image="portada-aprobada-regreso"] img {
    object-position: 55% 42%;
  }
  .mr-spa-chapter--cover .spa-hero-title {
    margin-top: 0.9rem;
    font-size: clamp(2.7rem, 12.5vw, 3.4rem);
  }
  .mr-spa-chapter--cover .spa-hero-lead {
    max-width: 100%;
  }
  .mr-spa-chapter--cover .spa-hero-actions {
    margin-top: 1.6rem;
  }
}

/* --- 4. El ritual, en movimiento: vídeo protagonista (vertical real) --- */
.spa-motion-frame--protagonista {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.spa-motion-frame--protagonista .spa-motion-video {
  width: auto;
  height: min(78svh, 820px);
  max-width: 100%;
  aspect-ratio: 480 / 854; /* formato vertical original: ni recorte ni deformación */
  object-fit: cover;
  border: 1px solid rgba(184, 115, 79, 0.35);
}
.spa-motion-frame--protagonista .spa-motion-caption {
  text-align: center;
}

@media (max-width: 760px) {
  .spa-motion-frame--protagonista .spa-motion-video {
    height: min(72svh, 640px);
  }
}

/* ============================================================
   IDENTIDAD TIPOGRÁFICA DE LA HOME (2026-11-04)
   La Home usa: titulares = var(--font-serif) 300 con tracking
   negativo fino; acento itálico del recorrido = var(--font-editorial-italic)
   (Spectral); textos = var(--font-sans) 400 a 1.2rem/1.65;
   microetiquetas = sans 600 ~0.76rem con tracking 0.14em.
   Newsreader e Instrument Sans no están autoalojadas: el render
   cae a Cormorant Garamond / Geist / Spectral (ya en assets/fonts).
   Mapeo rol a rol con los valores literales de home.css:
   - .mr-spa-title / capítulos  → título de la escena 0
   - .mr-section-title          → .spa-section-title
   - .mr-closing-title          → .cta-band-title
   - .mr-maria-pillar-title     → .spa-chapter-title / .spa-include-item
   - capítulo p / cuerpo        → entradilla, textos, cierre
   - .mr-opinion-anchor-quote   → .spa-review-quote
   - .mr-footer-brand/-heading  → .foot-mark / .micro del pie
   ============================================================ */

/* --- Escena 0: tipografía de capítulo del recorrido (como la Home) --- */
.mr-spa-chapter--cover .spa-hero-title {
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3.5rem, 7.4vw, 7.4rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: #fff;
}
.mr-spa-chapter--cover .spa-hero-title em {
  font-family: "Newsreader", "Spectral", Georgia, serif;
  font-weight: 300;
  color: var(--cobre-light);
}
.mr-spa-chapter--cover .spa-hero-lead {
  font-family: "Instrument Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
  color: rgba(253, 251, 253, 0.86);
  text-shadow: 0 1px 22px rgba(7, 3, 5, 0.55);
}

/* --- Titulares de sección (noche) como los grandes titulares
       editoriales de las secciones de la Home
       (.mr-peluqueria-heading .mr-section-title) --- */
main .spa-section-title {
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3.15rem, 6.2vw, 5.9rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
}
@media (max-width: 760px) {
  main .spa-section-title {
    font-size: clamp(2.9rem, 14vw, 4.4rem);
  }
}
main .spa-section-title em {
  font-family: inherit;
  font-style: italic;
}

/* --- Título del cierre como .mr-closing-title --- */
.cta-band .cta-band-title {
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.cta-band .cta-band-title em {
  font-family: inherit;
  font-style: italic;
}

/* --- Subtítulos h3 como .mr-maria-pillar-title (serif 400) --- */
main .spa-chapter-title {
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.65;
}

/* --- Cuerpo de texto a la escala de la Home (sans 400 · 1.2rem/1.65) --- */
main .spa-section-intro,
main .spa-chapter-text,
.cta-band .cta-band-lead,
main .spa-reviews-grid .spa-review-author {
  font-family: "Instrument Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.65;
}

/* --- Reseñas como .mr-opinion-anchor-quote (serif itálica 300) --- */
main .spa-review-quote {
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.48;
  letter-spacing: -0.015em;
}

/* --- Lista de cuidados con la escala serif de los pilares --- */
main .spa-include-item {
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* --- Microetiqueta (kicker) como .mr-footer-heading de la Home --- */
main .spa-kicker {
  font-family: "Instrument Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Pie: marca serif 1.4rem, microetiquetas y textos sans de la Home --- */
.site-footer {
  font-family: "Instrument Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.site-footer .foot-mark {
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.4rem;
}
.site-footer .micro {
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer .foot-phone-num {
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
}

/* --- Interlineado del botón de cabecera: la Home hereda 1.65
       (body de home.css); aquí el body es el de base.css (1.6) --- */
.mr-header .mr-btn {
  line-height: 1.65;
}

/* ============================================================
   CONJUNTO COMPLETO (2026-11-04) — portada aprobada, ritual
   editorial y fondos alternados: noche → luz → rosa → cierre.
   ============================================================ */

/* --- Ritual editorial: vídeo protagonista + relato al lado --- */
.ritual-editorial {
  display: grid;
  grid-template-columns: minmax(0, min(46%, 560px)) minmax(0, 1fr);
  gap: clamp(2.25rem, 4.5vw, 5rem);
  align-items: center;
  margin-top: clamp(2rem, 3.5vw, 3.25rem);
}
.spa-motion-frame--protagonista {
  margin: 0;
}
.spa-motion-frame--protagonista .ritual-video-lead {
  margin: 0 0 1.4rem 0;
  max-width: 36ch;
  color: rgba(253, 251, 253, 0.82);
  font-family: "Instrument Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  text-align: center;
}
.spa-motion-frame--protagonista .ritual-video-lead em {
  font-family: "Newsreader", "Spectral", Georgia, serif;
  color: var(--cobre-light);
}
.spa-motion-frame--protagonista .spa-motion-video {
  width: auto;
  height: min(72svh, 780px);
  max-width: 100%;
  aspect-ratio: 480 / 854;
  object-fit: cover;
  border: 1px solid rgba(184, 115, 79, 0.35);
}
.spa-motion-frame--protagonista .spa-motion-caption {
  text-align: center;
  margin-top: 1.1rem;
}
.ritual-capitulos .spa-chapter {
  padding-block: 1.7rem;
  border-top: 1px solid rgba(253, 251, 253, 0.14);
}
.ritual-capitulos .spa-chapter:first-child {
  padding-top: 0.2rem;
  border-top: 0;
}
.ritual-capitulos .spa-chapter:last-child {
  padding-bottom: 0;
}
@media (max-width: 960px) {
  .ritual-editorial {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }
  .spa-motion-frame--protagonista .spa-motion-video {
    height: min(64svh, 600px);
  }
  .ritual-capitulos .spa-chapter {
    padding-block: 1.45rem;
  }
  .ritual-capitulos .spa-chapter:first-child {
    padding-top: 1.45rem;
    border-top: 1px solid rgba(253, 251, 253, 0.14);
  }
}

/* --- Zona LUZ: cuidados y María sobre porcelana --- */
.spa-luz {
  background: #fbf7f9;
  color: #1b1015;
}
.spa-luz .spa-section-title {
  color: #1b1015;
}
.spa-luz .spa-section-title em {
  color: #c94983;
}
.spa-luz .spa-section-intro,
.spa-luz .spa-maria-copy p {
  color: #57464e;
}
.spa-luz .spa-kicker {
  color: #8c2a5b;
}
.spa-luz .spa-include-item {
  color: #2a141c;
  border-top-color: rgba(140, 42, 91, 0.16);
}
.spa-luz .universe-frame-spa {
  border-color: rgba(140, 42, 91, 0.22);
}

/* --- Zona ROSA: reseñas sobre el velo rosado (patrón opiniones Home) --- */
.spa-rosa {
  background: linear-gradient(180deg, #fbf7f9 0%, rgba(243, 227, 237, 0.55) 46%, var(--porcelana, #fbf7f9) 100%);
  border-top: 1px solid rgba(140, 42, 91, 0.08);
  color: #1b1015;
}
.spa-rosa .spa-section-title {
  color: #1b1015;
}
.spa-rosa .spa-section-title em {
  color: #c94983;
}
.spa-rosa .spa-review-stars {
  color: #c94983;
}
.spa-rosa .spa-review-quote {
  color: #2a141c;
}
.spa-rosa .spa-review-author strong {
  color: #1b1015;
}
.spa-rosa .spa-review-author span {
  color: #8c2a5b;
}

/* --- Ajustes de composición (revisión visual 2026-11-04) --- */
/* El titular de portada a la escala de los títulos de sección:
   «de sentirte mejor» queda en una sola línea junto a «Estás a un paso». */
.mr-spa-chapter--cover .spa-hero-title {
  font-size: clamp(3.15rem, 6.2vw, 5.9rem);
  line-height: 0.96;
}
@media (max-width: 760px) {
  .mr-spa-chapter--cover .spa-hero-title {
    font-size: clamp(2.9rem, 12vw, 4.2rem);
  }
}

/* Capítulos del ritual como filas editoriales (título | texto), alineadas */
.ritual-capitulos { text-align: left; }
.ritual-capitulos .spa-chapter {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: baseline;
}
.ritual-capitulos .spa-chapter-title {
  margin: 0;
}
@media (max-width: 760px) {
  .ritual-capitulos .spa-chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }
}

/* ============================================================
   BOTONES DE RESERVA — estados con cambio claramente perceptible
   (el hover porcelana→blanco era invisible; el hover ahora rellena
   con el rosa de marca y cambia el texto, con contraste AA verificado)
   ============================================================ */

/* Portada «Reservar con María»: claro → rosa acción con texto claro */
.spa-hero-actions .btn-light:hover,
.spa-hero-actions .btn-light:focus-visible {
  background-color: #ab3e6f;
  color: #fbf7f9;
}
.spa-hero-actions .btn-light:active {
  background-color: #8c2a5b;
  color: #fbf7f9;
}
.spa-hero-actions .btn-light:focus-visible {
  outline: 2px solid var(--cobre-light, #d48b64);
  outline-offset: 3px;
}

/* Cierre «Escribir por WhatsApp»: rosa acción → rosa profundo */
.cta-band .btn-primary:hover,
.cta-band .btn-primary:focus-visible {
  background-color: #8c2a5b;
  color: #fbf7f9;
}
.cta-band .btn-primary:active {
  background-color: #6f1f48;
  color: #fbf7f9;
}

/* Cierre «Llamar»: delineado → relleno rosa profundo con texto claro */
.cta-band .btn-secondary:hover,
.cta-band .btn-secondary:focus-visible {
  background-color: #8c2a5b;
  color: #fbf7f9;
  border-color: #8c2a5b;
}
.cta-band .btn-secondary:active {
  background-color: #6f1f48;
  color: #fbf7f9;
  border-color: #6f1f48;
}
.cta-band .btn-primary:focus-visible,
.cta-band .btn-secondary:focus-visible {
  outline: 2px solid #8c2a5b;
  outline-offset: 3px;
}

/* Transición suave y elegante en todas las propiedades que cambian */
.spa-hero-actions .btn-light,
.cta-band .btn-primary,
.cta-band .btn-secondary {
  transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}