/* ═══════════════════════════════════════════════════════════════════
   RITUAL — REGISTRO V2 y páginas hermanas — 2026-09-16
   Motion System V1 (material-fuente/specs-docx/DEMIN_CONSCIENTE_MOTION_
   SYSTEM_V1_MASTER_BRIEF.docx), sección 9: "Transformar formulario en
   ritual de entrada. Ya crucé el portal. Ahora estoy dentro."

   Capa ADITIVA sobre css/style-registro.css. Solo actúa bajo body.ritual,
   así que una página la adopta agregando la clase y el <link> — nada más.
   Adoptada por: registro.html, tipo-respirador.html, encuesta.html,
   miespacio.html, aviso-privacidad.html y registro-admin.html
   (esta última con .ritual--quiet: herramienta de trabajo, sin
   escalonados que estorben).

   IDEA (tomada de respirando-con-ciencia.html, con la paleta DEMIN):
   la página es oscura, continuación directa del velo del portal; la
   tarjeta del flujo es papel crema que EMERGE desde dentro (MORPH con
   clip-path) — el mismo gesto oscuro → claro con que Respirando pasa a
   la decisión. Así cada formulario conserva el contraste para el que
   ya está diseñado y no hay que reescribir un solo componente.

   MOVIMIENTO — solo transform / opacity / filter:blur / clip-path
   · Entrada ....... REVEAL escalonado del hero (eyebrow → título → líneas)
   · Orbe .......... BREATH .96 → 1 (token del brief para Registro)
   · Tarjeta ....... MORPH: se abre desde el centro
   · Cambio de paso  REVEAL con blur, hijos escalonados
   · Elección ...... PULSE 1 → 1.025 → 1 al marcar una opción
   · CTA pendiente . PULSE con anillo (antes box-shadow animado)
   · Pasos ......... TU PRESENCIA · TU PRÓXIMA EXPERIENCIA · TU EXPERIENCIA
                     · TU MOMENTO; el paso actual respira
   Sin streaks, niveles ni gamificación.
   ═══════════════════════════════════════════════════════════════════ */

.ritual {
  --r-dark: #1C1A18;
  --r-gold: #C9A84C;
  --r-cream: #F2EDE4;
  --r-paper: #F7F3EC;
  --r-warm-gray: #6B6259;
  --r-ink-muted: rgba(242, 237, 228, 0.62);
  --r-rule: rgba(201, 168, 76, 0.22);

  --breath-dur: 6s;
  --pulse-scale: 1.025;
  --reveal-dur: 850ms;
  --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-morph: cubic-bezier(0.65, 0, 0.35, 1);

  background-color: var(--r-dark);
  color: var(--r-cream);
}
.ritual ::selection { background: rgba(201, 168, 76, 0.35); }

/* Llegada desde el portal: el velo del hub es oscuro; la página
   "amanece" desde ese mismo oscuro en vez de aparecer de golpe. */
.ritual > :not(.skip-link) { animation: ritualArrive 700ms var(--ease-reveal) backwards; }
@keyframes ritualArrive { from { opacity: 0; } to { opacity: 1; } }

/* ─── Barra superior (tipo-respirador, encuesta, aviso) ─── */
.ritual .navbar {
  background-color: rgba(28, 26, 24, 0.82);
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
.ritual .navbar__marca { color: var(--r-ink-muted); letter-spacing: 0.22em; }

/* ─── Textura: más sutil sobre el oscuro de toda la página ─── */
.ritual #hero { background-color: transparent; }
.ritual .section:not(.section--dark) { background-color: transparent; }

/* ═══ HERO — REVEAL escalonado al llegar ══════════════════════════════ */
.ritual .hero-v2__copy > *,
.ritual .hero-v2__points li,
.ritual .hero-registro > .container > * {
  /* backwards, no both: un fill hacia adelante fijaría transform:none y
     anularía los :hover/:active de los botones para siempre. */
  animation: ritualReveal var(--reveal-dur) var(--ease-reveal) backwards;
}
.ritual .hero-v2__copy > :nth-child(1),
.ritual .hero-registro > .container > :nth-child(1) { animation-delay: 150ms; }
.ritual .hero-v2__copy > :nth-child(2),
.ritual .hero-registro > .container > :nth-child(2) { animation-delay: 350ms; }
.ritual .hero-v2__copy > :nth-child(3),
.ritual .hero-registro > .container > :nth-child(3) { animation-delay: 600ms; }
.ritual .hero-v2__copy > :nth-child(4),
.ritual .hero-registro > .container > :nth-child(4) { animation-delay: 850ms; }
.ritual .hero-v2__copy > :nth-child(5),
.ritual .hero-registro > .container > :nth-child(5) { animation-delay: 1100ms; }
.ritual .hero-v2__copy > :nth-child(n+6),
.ritual .hero-registro > .container > :nth-child(n+6) { animation-delay: 1300ms; }
/* Las líneas del hero entran una por una dentro de su lista */
.ritual .hero-v2__points { animation: none; }
.ritual .hero-v2__points li:nth-child(1) { animation-delay: 750ms; }
.ritual .hero-v2__points li:nth-child(2) { animation-delay: 950ms; }
.ritual .hero-v2__points li:nth-child(3) { animation-delay: 1150ms; }
.ritual .hero-v2__points li:nth-child(n+4) { animation-delay: 1350ms; }

@keyframes ritualReveal {
  from { opacity: 0; transform: translate3d(0, 20px, 0); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* El panel lateral (Time Check / datos) aparece después, como respuesta. */
.ritual .hero-v2__panel {
  background-color: rgba(242, 237, 228, 0.03);
  border-color: var(--r-rule);
  animation: ritualReveal 1000ms var(--ease-reveal) 1100ms backwards;
}

/* ─── Orbe: BREATH .96 → 1 → .96, token del brief para Registro ─── */
.ritual .breath-orb { animation: ritualOrb var(--breath-dur) var(--ease-breath) infinite; }
.ritual .breath-orb-wrap::before { animation: ritualOrbRing var(--breath-dur) var(--ease-breath) infinite; }
@keyframes ritualOrb {
  0%, 100% { transform: scale(0.96); opacity: 0.7; }
  50%      { transform: scale(1);    opacity: 1; }
}
@keyframes ritualOrbRing {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

.ritual .hero-v2__home { color: var(--r-ink-muted); }

/* ═══ TARJETA — papel que emerge (MORPH) ══════════════════════════════ */
.ritual .registro-flow-card {
  background-color: var(--r-paper);
  color: var(--r-dark);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.ritual .registro-flow-card.reveal {
  clip-path: inset(10% 12% 10% 12% round 48px);
  transform: translateY(28px) scale(0.985);
  transition:
    clip-path 1100ms var(--ease-morph),
    opacity 800ms var(--ease-reveal),
    transform 1100ms var(--ease-reveal);
}
.ritual .registro-flow-card.reveal.reveal--visible {
  clip-path: inset(0 0 0 0 round 18px);
  transform: none;
}
/* Una vez abierta, sin recorte: menús nativos, focos y popovers no se
   pueden quedar cortados por el clip-path. */
.ritual .registro-flow-card.reveal--visible { animation: ritualUnclip 0s linear 1200ms forwards; }
@keyframes ritualUnclip { to { clip-path: none; } }

/* Línea dorada fina en el borde superior del papel: el "horizonte". */
.ritual .registro-flow-card { position: relative; }
.ritual .registro-flow-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 36%;
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--r-gold), transparent);
  opacity: 0.8;
  pointer-events: none;
}

/* ═══ CAMBIO DE PASO — REVEAL con blur, hijos escalonados ══════════════ */
.ritual .registro-state.is-active { animation: ritualStateIn 700ms var(--ease-reveal) backwards; }
.ritual .registro-state.is-active > * { animation: ritualReveal 700ms var(--ease-reveal) backwards; }
.ritual .registro-state.is-active > :nth-child(2) { animation-delay: 90ms; }
.ritual .registro-state.is-active > :nth-child(3) { animation-delay: 180ms; }
.ritual .registro-state.is-active > :nth-child(4) { animation-delay: 270ms; }
.ritual .registro-state.is-active > :nth-child(5) { animation-delay: 360ms; }
.ritual .registro-state.is-active > :nth-child(n+6) { animation-delay: 450ms; }
@keyframes ritualStateIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ritual .registro-heading { font-weight: 400; letter-spacing: -0.01em; }

/* ═══ PASOS — el recorrido como ritual ═══════════════════════════════ */
.ritual .wizard-steps {
  position: relative;
  gap: 0.25rem;
  margin-bottom: var(--space-4);
}
.ritual .wizard-steps__step {
  position: relative;
  padding: 1.25rem 0.125rem 0;
  border-bottom: none;
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  line-height: 1.35;
  color: rgba(28, 26, 24, 0.42);
}
/* Nodo + hilo que une los pasos */
.ritual .wizard-steps__step::before {
  content: '';
  position: absolute;
  top: 0.375rem;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  border: 1px solid rgba(28, 26, 24, 0.28);
  background: var(--r-paper);
  z-index: 1;
  transition: background-color 500ms var(--ease-reveal), border-color 500ms var(--ease-reveal), transform 500ms var(--ease-reveal);
}
.ritual .wizard-steps__step::after {
  content: '';
  position: absolute;
  top: calc(0.375rem + 3px);
  left: 50%;
  width: calc(100% + 0.25rem);
  height: 1px;
  background: rgba(28, 26, 24, 0.14);
}
.ritual .wizard-steps__step:last-child::after { display: none; }
.ritual .wizard-steps__step.is-done { color: rgba(28, 26, 24, 0.62); }
.ritual .wizard-steps__step.is-done::before { background: var(--r-gold); border-color: var(--r-gold); }
.ritual .wizard-steps__step.is-done::after { background: rgba(201, 168, 76, 0.55); }
.ritual .wizard-steps__step.is-current { color: var(--r-dark); font-weight: 500; }
.ritual .wizard-steps__step.is-current::before {
  border-color: var(--r-gold);
  background: var(--r-paper);
  animation: stepBreath var(--breath-dur) var(--ease-breath) infinite;
}
@keyframes stepBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.5); }
}
@media (min-width: 480px) {
  .ritual .wizard-steps__step { font-size: 0.625rem; }
}

/* ═══ ELECCIONES — PULSE al marcar ════════════════════════════════════ */
.ritual .choice-option:has(input:checked) { animation: choicePulse 520ms var(--ease-breath); }
@keyframes choicePulse {
  0%, 100% { scale: 1; }
  45%      { scale: var(--pulse-scale); }
}
.ritual .form-input { transition: border-color 300ms var(--ease-reveal), background-color 300ms var(--ease-reveal); }
.ritual .form-input:focus { background-color: #fff; }

/* ═══ CTA pendiente — PULSE con anillo (solo transform/opacity) ════════ */
.ritual .btn--pulse { animation: none; position: relative; isolation: isolate; }
.ritual .btn--pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--r-gold);
  animation: ctaRing 2.6s var(--ease-reveal) 1.2s infinite;
  pointer-events: none;
}
@keyframes ctaRing {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.08, 1.35); opacity: 0; }
  100% { transform: scale(1.08, 1.35); opacity: 0; }
}

/* Botones sobre el oscuro (fuera de la tarjeta) */
.ritual .hero-v2 .btn--ghost,
.ritual .footer .btn--ghost { border-color: var(--r-rule); color: var(--r-cream); }

/* ═══ FOOTER — cierre con eco del umbral ══════════════════════════════ */
.ritual .footer {
  background-color: transparent;
  border-top: 1px solid rgba(107, 98, 89, 0.35);
  padding-block: var(--space-6) var(--space-4);
}
.ritual .footer__tagline { font-style: italic; font-weight: 400; font-size: 1.375rem; }
.ritual .footer__links a { color: var(--r-ink-muted); text-decoration-color: var(--r-rule); }

/* ═══ AVISO DE PRIVACIDAD — el texto vive en papel ════════════════════ */
.ritual #contenido > .container {
  background-color: var(--r-paper);
  color: var(--r-dark);
  border-radius: 18px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  padding: var(--space-4) var(--space-3);
  animation: ritualReveal 1000ms var(--ease-reveal) 150ms backwards;
}
@media (min-width: 640px) {
  .ritual #contenido > .container { padding: var(--space-5) var(--space-4); }
}
.ritual #contenido h1 { font-weight: 400; letter-spacing: -0.01em; }

/* ═══ PANEL DE FACILITADOR — ritual quieto ════════════════════════════
   Herramienta de trabajo: se queda la paleta, la tarjeta y el orbe, pero
   sin escalonados en cada cambio de pestaña ni recorte de entrada. */
.ritual--quiet .registro-state.is-active > * { animation: none; }
.ritual--quiet .registro-state.is-active { animation-duration: 300ms; }
.ritual--quiet .registro-flow-card.reveal { clip-path: none; transform: none; }
.ritual--quiet .registro-flow-card.reveal--visible { animation: none; }

/* ═══ REDUCED MOTION ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ritual *, .ritual *::before, .ritual *::after, .ritual > * {
    animation: none !important;
  }
  .ritual .registro-flow-card.reveal { clip-path: none; transform: none; }
}


/* ═══ TU ESPACIO V3 — sin listados, sin pestañas (2026-09-16) ══════════
   Pedido de Diego: "el panel de registro aún puede evolucionar, no quiero
   que tenga listados". Auditoría impeccable: pestañas + filas + pills =
   dashboard genérico. Composición nueva, todo sobre el mismo papel:
     · la próxima experiencia es UN momento protagonista (no una fila)
     · las fechas siguientes son una frase
     · el recorrido es una línea que respira: un punto por experiencia
     · "tú" son cuatro facetas en frase, no valores sueltos
   ═══════════════════════════════════════════════════════════════════ */

.espacio-title { font-size: clamp(1.75rem, 5vw, 2.25rem); margin-bottom: var(--space-3); }
.espacio-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

/* ─── El momento: tu próxima experiencia ─── */
.moment {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--r-dark);
  color: var(--r-cream);
  border-radius: 16px;
  padding: var(--space-4) var(--space-3) var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) { .moment { padding: var(--space-4); } }
.moment__halo {
  position: absolute;
  z-index: -1;
  right: -90px;
  top: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.3);
  box-shadow: inset 0 0 0 46px rgba(201, 168, 76, 0.045), inset 0 0 0 92px rgba(201, 168, 76, 0.03);
}
.moment__rel { font-size: 0.875rem; color: var(--r-gold); margin-bottom: 0.25rem; }
.moment__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.moment__day {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.moment__hour { font-size: 1.125rem; color: var(--r-ink-muted); }
.moment__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 0.875rem 0 0.25rem;
  color: var(--r-cream);
}
.moment--empty .moment__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-top: 0; }
.moment__code { font-size: 0.875rem; color: var(--r-ink-muted); }
.moment__code strong {
  display: inline-block;
  margin-left: 0.375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--r-cream);
  border-bottom: 1px solid rgba(201, 168, 76, 0.55);
}
.moment__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: var(--space-3); }
.moment .session-cta,
.moment .link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.moment .session-cta { background: var(--r-gold); color: var(--r-dark); border: none; }
.moment .link-chip { background: transparent; color: var(--r-cream); border: 1px solid rgba(242, 237, 228, 0.28); }
@media (hover: hover) and (pointer: fine) {
  .moment .session-cta:hover { box-shadow: none; filter: brightness(1.06); }
  .moment .link-chip:hover { background: rgba(242, 237, 228, 0.06); border-color: rgba(201, 168, 76, 0.55); }
}
.session-cta__icon { display: inline-flex; width: 1.125rem; height: 1.125rem; }
.session-cta__icon svg { width: 100%; height: 100%; }
.moment__pending,
.moment__later { font-size: 0.875rem; line-height: 1.5; color: var(--r-ink-muted); margin-top: 0.875rem; max-width: 52ch; }

@media (prefers-reduced-motion: no-preference) {
  .moment__halo { animation: ritualOrb var(--breath-dur) var(--ease-breath) infinite; }
}

/* ─── Antes de tu sesión: cuatro gestos, no un acordeón en fila ─── */
.espacio-antes { margin-bottom: var(--space-4); }
.ritual .antes-sesion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.625rem;
}
.ritual .antes-sesion__item {
  background: #fff;
  border: 1px solid rgba(28, 26, 24, 0.1);
  border-radius: 12px;
  padding: 0;
}
.ritual .antes-sesion__item summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 2.25rem 0.875rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  min-height: 44px;
}
.antes-sesion__icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px 999px 4px 4px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  color: #94700F;
}
.antes-sesion__icon svg { width: 1.125rem; height: 1.125rem; }
.ritual .antes-sesion__item p { padding: 0 0.875rem 0.875rem 3.5rem; font-size: 0.875rem; line-height: 1.55; color: rgba(28, 26, 24, 0.72); }

/* ─── Tu recorrido: una línea que respira ─── */
.recorrido { margin-bottom: var(--space-4); }
.recorrido__since { font-size: 0.875rem; color: rgba(28, 26, 24, 0.62); margin-bottom: 0.875rem; }
.recorrido__line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.375rem;
  padding: 0.5rem 0;
}
.recorrido__line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(0.5rem + 11px);
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.6), rgba(201, 168, 76, 0.15));
}
.recorrido__dot {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--r-paper);
  border: 1px solid #94700F;
  cursor: pointer;
  padding: 0;
}
.recorrido__dot::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #94700F;
}
.recorrido__dot.is-shared { cursor: default; }
.recorrido__dot.is-shared::after { background: var(--r-gold); }
button.recorrido__dot:focus-visible { outline: 2px solid #94700F; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  button.recorrido__dot:hover { transform: scale(1.12); }
}
.recorrido__dot { transition: transform 300ms var(--ease-reveal); }
.recorrido__note { font-size: 0.875rem; color: rgba(28, 26, 24, 0.72); margin-top: 0.75rem; }
.recorrido__share {
  font: inherit;
  font-weight: 500;
  color: #94700F;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5rem 0.125rem;
  cursor: pointer;
}

/* ─── Tú: cuatro facetas ─── */
.espacio-facets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: rgba(28, 26, 24, 0.1);
  border: 1px solid rgba(28, 26, 24, 0.1);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.espacio-facet { background: var(--r-paper); padding: 1rem 1.125rem 1.125rem; min-width: 0; }
.espacio-facet__name { font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; color: rgba(28, 26, 24, 0.62); margin-bottom: 0.375rem; }
.espacio-facet__value { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; }
.espacio-facet__hint { font-size: 0.8125rem; line-height: 1.5; color: rgba(28, 26, 24, 0.66); margin-top: 0.25rem; overflow-wrap: anywhere; }
.espacio-facet__edit {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94700F;
  text-underline-offset: 3px;
}

.espacio-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.espacio-actions .btn { flex: 1 1 auto; }

/* El registro-flow-card de "Tu espacio" respira más ancho en desktop */
@media (min-width: 900px) {
  .page-registro .registro-flow-card:has(#state-dashboard.is-active) { max-width: 720px; }
}

/* ─── Auditoría impeccable (2026-09-16): legibilidad ─────────────────
   · pasos del wizard: 10px → 12px (piso de 11px para texto funcional)
   · encabezados de varias líneas (preguntas del quiz): interlineado 1.3
   · microlínea de confianza del hero: 11px con tracking 0.08em → 12px 0.04em
   · los eyebrows sobre los títulos se quitaron del HTML (patrón de hero
     genérico; el título carga su propio peso) */
.ritual .wizard-steps__step { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: none; line-height: 1.35; }
.ritual .registro-heading { line-height: 1.3; }
.ritual .hero-v2__assurance { font-size: 0.75rem; letter-spacing: 0.04em; }
.ritual h2.admin-subheading { font-size: 1.125rem; }
.ritual .hero-v2__stat dt { font-size: 0.75rem; letter-spacing: 0.08em; }
.espacio-facets { background: var(--r-paper); gap: 0; }
.espacio-facet { box-shadow: 0 0 0 0.5px rgba(28, 26, 24, 0.1); }
/* El contenedor narrow (560px) también limita: se abre junto con la tarjeta. */
@media (min-width: 900px) {
  .page-registro #registro-flow .container--narrow:has(#state-dashboard.is-active) { max-width: 800px; }
}
.ritual .antes-sesion__item summary { justify-content: flex-start; text-align: left; }
.ritual .antes-sesion__item summary::after { margin-left: auto; }
/* Cuatro gestos y cuatro facetas: 2×2 exacto (auto-fit dejaba 3 + 1 con hueco). */
.ritual .antes-sesion, .espacio-facets { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .ritual .antes-sesion, .espacio-facets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ═══ HERO DE REGISTRO — umbral (2026-09-16) ══════════════════════════
   Diego: "lo único que faltaría para que sea coherente con hub y
   respirando es el home de registro". El hero-v2 (dos columnas, lista con
   rayas, caja lateral, etiqueta mono en mayúsculas) era el último rastro
   de landing SaaS. Ahora es un umbral:
     · halo de anillos que respira (mismo SVG que el hub, token .96 → 1)
     · título editorial centrado, frases que llegan una a una (respirando)
     · CTA en pill con anillo que respira, microlínea en frase
     · Time Check integrado debajo, sin caja (mismo tratamiento que el hub)
   Corto a propósito (Decimoctava ronda): el CTA cabe en el primer
   pantallazo; no es 100vh como el hub. */

.ritual .rhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.25rem clamp(3.5rem, 8vw, 5rem);
}
/* #hero lleva la textura de puntos de style-registro.css (selector con id);
   el umbral no la usa, igual que el hub. */
.ritual #hero.rhero { background-image: none; }
@media (min-width: 768px) {
  .ritual .rhero { padding: 6.5rem 2.5rem 5rem; min-height: min(100svh, 940px); justify-content: center; }
  .ritual .rhero--sibling { min-height: min(86svh, 800px); }
}

.rhero__home {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--r-ink-muted);
  text-decoration: none;
  transition: color 300ms var(--ease-reveal);
}
@media (min-width: 768px) {
  .rhero__home { position: absolute; top: 1.5rem; left: 2.5rem; }
}
@media (hover: hover) and (pointer: fine) {
  .rhero__home:hover { color: var(--r-gold); }
}
.rhero__home:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 4px; }

.rhero__halo {
  position: absolute;
  z-index: -1;
  top: 44%;
  left: 50%;
  width: min(640px, 130vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.rhero__halo svg { width: 100%; height: 100%; overflow: visible; }
.rhero__halo circle { stroke: var(--r-gold); stroke-width: 0.35; vector-effect: non-scaling-stroke; }
.rhero__halo circle:nth-child(1) { opacity: 0.18; }
.rhero__halo circle:nth-child(2) { opacity: 0.12; }
.rhero__halo circle:nth-child(3) { opacity: 0.08; }
.rhero__halo::before {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
}

.rhero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(3.5rem, 12vw, 4.5rem);
}
@media (min-width: 768px) { .rhero__inner { margin-top: 0; } }

.rhero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 12ch;
  color: var(--r-cream);
}
.rhero__phrase {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 3.6vw, 1.625rem);
  line-height: 1.35;
  color: var(--r-cream);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 30ch;
}
.rhero__phrase--quiet {
  font-size: clamp(1.0625rem, 2.8vw, 1.25rem);
  color: var(--r-ink-muted);
  margin-top: 0.5rem;
}

.rhero__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 220px;
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding: 0.875rem 2rem;
  border-radius: 999px;
  background: var(--r-gold);
  color: var(--r-dark);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform 300ms var(--ease-reveal), filter 300ms var(--ease-reveal);
}
.rhero__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--r-gold);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .rhero__cta:hover { transform: scale(1.02); filter: brightness(1.05); }
}
.rhero__cta:active { transform: scale(0.98); transition-duration: 100ms; }
.rhero__cta:focus-visible { outline: 2px solid var(--r-cream); outline-offset: 4px; }

.rhero__assurance { margin-top: 1rem; font-size: 0.875rem; color: var(--r-ink-muted); }

/* Time Check: dato real, sin caja */
.rhero__next {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  width: min(100%, 36rem);
  border-top: 1px solid var(--r-rule);
}
.page-registro .rhero__next .time-check { margin-top: 0; min-height: 0; color: var(--r-ink-muted); }
.page-registro .rhero__next .time-check:empty { display: none; }
/* Sin display:none mientras está vacío: el JS llena el widget después de
   cargar Supabase, y un display:none reiniciaba la animación de entrada
   desde ese momento (medido: aparecía ~3 s tarde). Solo se oculta la línea. */
.rhero__next:has(.time-check:empty) { border-top-color: transparent; }
.page-registro .rhero__next .time-check__label-row { display: none; }
.page-registro .rhero__next .time-check__question {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--r-gold);
  margin-bottom: 0.5rem;
}
.page-registro .rhero__next .time-check__session {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--r-cream);
  opacity: 1;
  margin-bottom: 0.75rem;
}
.page-registro .rhero__next .pill { font-size: 0.75rem; letter-spacing: 0.04em; border-color: var(--r-rule); background: transparent; }
.page-registro .rhero__next .time-check__cta { color: var(--r-ink-muted); padding-block: 0.75rem; margin-top: 0.25rem; }
@media (hover: hover) and (pointer: fine) {
  .page-registro .rhero__next .time-check__cta:hover { color: var(--r-gold); opacity: 1; }
}

/* ─── Movimiento: PAUSE → frases una a una → BREATH ─── */
@media (prefers-reduced-motion: no-preference) {
  .rhero__home,
  .rhero__title,
  .rhero__phrase,
  .rhero__cta,
  .rhero__assurance,
  .rhero__next {
    animation: ritualReveal 900ms var(--ease-reveal) backwards;
  }
  .rhero__home { animation-delay: 100ms; }
  .rhero__title { animation-delay: 250ms; }
  .rhero__phrase { animation-delay: 1000ms; }
  .rhero__phrase--quiet { animation-delay: 1600ms; }
  .rhero__cta { animation-delay: 2200ms; }
  .rhero__assurance { animation-delay: 2450ms; }
  .rhero__next { animation-delay: 2700ms; }

  .rhero__halo { animation: rheroHaloIn 2.4s var(--ease-reveal) 0.2s backwards; }
  .rhero__halo svg { transform-origin: 50% 50%; animation: rheroBreath var(--breath-dur) var(--ease-breath) 2.6s infinite both; }
  @keyframes rheroHaloIn { from { opacity: 0; } }
  @keyframes rheroBreath {
    0%, 100% { transform: scale(0.96); opacity: 0.8; }
    50%      { transform: scale(1); opacity: 1; }
  }
  /* El CTA respira con el mismo ciclo, después de aparecer */
  .rhero__cta::after { animation: rheroCtaRing var(--breath-dur) var(--ease-breath) 3.2s infinite; }
  @keyframes rheroCtaRing {
    0%   { transform: scale(1); opacity: 0; }
    30%  { opacity: 0.7; }
    60%  { transform: scale(1.12, 1.4); opacity: 0; }
    100% { transform: scale(1.12, 1.4); opacity: 0; }
  }
}


/* ─── Páginas hermanas (tipo-respirador, encuesta, miespacio) ───
   Mismo umbral que registro. En tipo-respirador los datos del check-in
   ocupan el lugar del Time Check: tres cifras en línea, sin caja. */
.rhero__facts {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 3.5rem);
  text-align: center;
}
.rhero__facts dt { font-size: 0.8125rem; color: var(--r-ink-muted); margin-bottom: 0.25rem; }
.rhero__facts dd { font-family: var(--font-display); font-size: clamp(1.375rem, 4vw, 1.75rem); color: var(--r-cream); }
.rhero__facts.rhero__next { padding-top: clamp(1.5rem, 4vw, 2rem); }
.rhero--sibling .rhero__title { max-width: 16ch; font-size: clamp(2.25rem, 7.5vw, 4.25rem); }

/* Panel de facilitador: umbral corto (herramienta de trabajo) — el panel
   debe asomar en el primer pantallazo en desktop. */
@media (min-width: 768px) {
  .ritual .rhero--tool { min-height: auto; padding-block: 5.5rem 4rem; }
}