/* ═══════════════════════════════════════════════════════════════════
   SESIÓN DE CLARIDAD (claridad.html) · B4, 2026-10-04
   «Una conversación antes de la conversación»: cada pregunta es una línea
   editorial y su espacio para responder; al enviar, el formulario se pliega y
   aparece Calendly. Mismo mundo que la oferta: se carga DESPUÉS de
   style-respirando-landing.css (tokens, .ed, .cta, .close-foot) y todo va
   bajo body.rl--claridad.
   Un solo momento de movimiento: el paso de «Cuéntame» a «Elige tu momento».
   ═══════════════════════════════════════════════════════════════════ */
/* overflow-x: clip: el anillo que respira alrededor del botón (.cta::before, escala 1.1) no debe crear scroll horizontal en el teléfono. */
.rl--claridad .cl { overflow-x: clip; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(40px, 7vh, 72px); padding: clamp(28px, 6vh, 64px) var(--pad) calc(48px + env(safe-area-inset-bottom)); }

/* Cabecera (misma que la oferta). */
.rl--claridad .cl-head { display: grid; justify-items: center; gap: 18px; text-align: center; }
.rl--claridad .of-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 450; text-decoration: none; color: var(--quiet); }
.rl--claridad .of-back:hover { color: var(--cream); }
.rl--claridad .cl-lede { max-width: 38ch; margin: 0; color: var(--muted); text-align: center; text-wrap: pretty; }

/* Cada paso: una columna de lectura. */
.rl--claridad .cl-paso { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: min(100%, 38rem); }
.rl--claridad .cl-paso__t { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 2.2vw + 1.1rem, 2.6rem); line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; }
.rl--claridad .cl-paso__t:focus { outline: none; }
.rl--claridad .cl-paso__nota { margin: 0; color: var(--muted); }

/* Debajo del título: cuánto toma y que no hay respuestas correctas. */
.rl--claridad .cl-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font-size: 0.9375rem; color: var(--quiet); }
.rl--claridad .cl-meta__sep { display: none; }
.rl--claridad .cl-meta__nota { font-family: var(--display); font-style: italic; font-size: 1.0625rem; color: var(--muted); }

/* ── v2: una pregunta por pantalla ─────────────────────────────────────── */
.rl--claridad .cl-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.rl--claridad .cl-preguntas { display: grid; gap: 26px; }

/* Progreso: «01 / 05» y una línea dorada que avanza. */
.rl--claridad .cl-progreso { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px 16px; }
.rl--claridad .cl-progreso__l { font-size: var(--fs-caps); font-weight: 500; color: var(--gold-hi); }
.rl--claridad .cl-progreso__n { font-size: var(--fs-caps); font-weight: 600; letter-spacing: 0.12em; color: var(--quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl--claridad .cl-progreso__n span { color: var(--gold-hi); }
.rl--claridad .cl-progreso__barra { grid-column: 1 / -1; position: relative; height: 1px; background: var(--gold-line); overflow: hidden; }
.rl--claridad .cl-progreso__barra span { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0.2); transition: transform 600ms var(--ease); }

/* La pregunta: Bodoni itálica; las opciones, elecciones (no botones). */
.rl--claridad .cl-escena { min-height: 30rem; }
.rl--claridad .cl-pregunta { display: grid; gap: 22px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rl--claridad .cl-pregunta[hidden] { display: none; }
.rl--claridad .cl-pregunta__t { margin: 0 0 22px; padding: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.25rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--cream); text-wrap: balance; }
.rl--claridad .cl-pregunta__t:focus { outline: none; }
.rl--claridad .cl-opciones { display: grid; gap: 10px; }
.rl--claridad .cl-op { position: relative; display: grid; grid-template-columns: 1.1em minmax(0, 1fr) 22px; align-items: center; gap: 16px; min-height: 60px; padding: 14px 18px 14px 20px; border-radius: 14px; border: 1px solid var(--gold-line); background: rgba(242, 237, 228, 0.02); color: var(--muted); font-size: 1.125rem; line-height: 1.4; cursor: pointer; transition: border-color 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease); -webkit-tap-highlight-color: transparent; }
.rl--claridad .cl-op input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* El anillo que se llena. */
.rl--claridad .cl-op__ring { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold-dim); transition: border-color 300ms var(--ease); }
.rl--claridad .cl-op__ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform 360ms var(--ease); }
.rl--claridad .cl-op__l { font-size: 0.8125rem; font-weight: 600; color: rgba(201, 168, 76, 0.72); font-variant-numeric: tabular-nums; transition: color 300ms var(--ease); }
.rl--claridad .cl-op:has(input:checked) .cl-op__l { color: var(--gold-hi); }
/* Solo con puntero real: en el teléfono el :hover se queda pegado en la siguiente pregunta. */
@media (hover: hover) {
  .rl--claridad .cl-op:hover .cl-op__l { color: var(--gold-hi); }
  .rl--claridad .cl-op:hover { border-color: var(--gold-dim); background: rgba(201, 168, 76, 0.05); color: var(--cream); }
}
.rl--claridad .cl-op:active { transform: scale(0.99); }
.rl--claridad .cl-op:has(input:checked) { border-color: var(--gold); background: rgba(201, 168, 76, 0.09); color: var(--cream); }
.rl--claridad .cl-op:has(input:checked) .cl-op__ring { border-color: var(--gold); }
.rl--claridad .cl-op:has(input:checked) .cl-op__ring::after { transform: scale(1); }
.rl--claridad .cl-op:has(input:focus-visible) { outline: 1.5px solid var(--gold); outline-offset: 4px; }

/* Anterior / Continuar */
.rl--claridad .cl-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; }
.rl--claridad .cl-nav__b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid var(--gold-line); border-radius: 999px; background: none; cursor: pointer; font: 500 0.9375rem/1 var(--sans); color: var(--muted); transition: border-color 300ms var(--ease), color 300ms var(--ease), background-color 300ms var(--ease), transform 300ms var(--ease); }
.rl--claridad .cl-nav__b:hover { color: var(--cream); border-color: var(--gold-dim); }
.rl--claridad .cl-nav__b:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; }
.rl--claridad .cl-nav__b--seguir { margin-left: auto; min-height: 48px; padding: 0 26px; border-color: var(--gold); background: var(--gold); color: var(--night); font-weight: 600; }
.rl--claridad .cl-nav__b--seguir:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--night); }
.rl--claridad .cl-nav__b--seguir:active { transform: scale(0.98); }
.rl--claridad .cl-priv.cl-priv--q { justify-self: center; max-width: none; text-align: center; font-size: 0.875rem; }

/* Respiro tras la pregunta 3: una línea y aire. */
.rl--claridad .cl-respiro { display: grid; align-content: center; gap: 14px; min-height: 30rem; cursor: pointer; }
.rl--claridad .cl-respiro[hidden] { display: none; }
.rl--claridad .cl-respiro__t { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 2vw + 1.3rem, 2.9rem); line-height: 1.12; letter-spacing: -0.012em; color: var(--cream); text-wrap: balance; }
.rl--claridad .cl-respiro__t:focus { outline: none; }
.rl--claridad .cl-respiro__n { margin: 0; font-size: 0.9375rem; color: var(--quiet); }
.rl--claridad .cl-nav__b[hidden] { display: none; }

/* Datos de contacto (después de la 5) */
.rl--claridad .cl-contacto { display: grid; gap: 14px; }
.rl--claridad .cl-contacto[hidden] { display: none; }

/* Campos de texto (contacto): sin caja, una regla dorada que se enciende con el foco. */
.rl--claridad input:not([type="radio"]) { width: 100%; min-width: 0; box-sizing: border-box; min-height: 48px; margin: 0; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--gold-line); border-radius: 0; background: transparent; color: var(--cream); font: 450 1.125rem/1.55 var(--sans); caret-color: var(--gold); transition: border-color 400ms var(--ease), background-color 400ms var(--ease); }
.rl--claridad input:not([type="radio"]):hover { border-bottom-color: var(--gold-dim); }
.rl--claridad input:not([type="radio"]):focus { outline: none; border-bottom-color: var(--gold); background: rgba(201, 168, 76, 0.04); }
.rl--claridad input:not([type="radio"]):focus-visible { box-shadow: 0 1px 0 0 var(--gold); }
.rl--claridad [aria-invalid="true"] { border-bottom-color: var(--gold-hi); border-bottom-width: 2px; }
.rl--claridad .cl-err { margin: 0; font-size: 0.9375rem; color: var(--gold-hi); }
.rl--claridad .cl-contacto .cl-paso__nota { text-wrap: pretty; }

/* Datos de contacto: cortos y juntos. */
.rl--claridad .cl-datos { display: grid; gap: 18px; margin: 10px 0 0; padding: 0; border: 0; min-width: 0; }
.rl--claridad .cl-datos__t { float: left; width: 100%; margin: 0 0 6px; padding: 0; font-family: var(--display); font-size: clamp(1.35rem, 1vw + 1.1rem, 1.7rem); line-height: 1.15; }
.rl--claridad .cl-campo { display: grid; gap: 4px; }
.rl--claridad .cl-campo label { font-size: 0.9375rem; color: var(--muted); }
.rl--claridad .cl-campo__hint { margin-left: 0.4em; font-size: 0.8125rem; color: var(--quiet); }

/* Enviar */
.rl--claridad .cl-enviar { margin-top: 18px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.rl--claridad .cl-enviar .cta { width: min(100%, 22rem); margin-top: 6px; padding: 14px 24px; border: 0; cursor: pointer; font-family: var(--sans); white-space: normal; text-align: center; line-height: 1.3; }
.rl--claridad .cl-enviar .cta[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.rl--claridad .cl-priv { margin: 0; max-width: 34ch; font-size: 0.9375rem; color: var(--quiet); }
.rl--claridad .cl-priv a,
.rl--claridad .cl-fallback a,
.rl--claridad .cl-lede a { color: var(--gold-hi); text-underline-offset: 0.25em; }
.rl--claridad .cl-estado { min-height: 1.4em; margin: 0; font-size: 0.9375rem; color: var(--gold-hi); }
.rl--claridad .cl-estado:empty { display: none; }

/* 2 · Elige tu momento */
.rl--claridad .cl-momento { width: min(100%, 52rem); justify-items: center; text-align: center; }
.rl--claridad .cl-momento__lede { margin: 0; max-width: 46ch; color: var(--muted); text-wrap: pretty; }
.rl--claridad .cl-resumen { margin: 0; max-width: 46ch; color: var(--muted); text-wrap: pretty; }
.rl--claridad .cl-eco { font-family: var(--display); font-style: italic; color: var(--cream); }
.rl--claridad .cl-eco:empty { display: none; }
.rl--claridad .cl-link { min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--gold-hi); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--gold-line); }
.rl--claridad .cl-link:hover { text-decoration-color: var(--gold); }
/* El calendario: papel crema que emerge (el mismo gesto que la tarjeta de registro). */
.rl--claridad .cl-cal { position: relative; width: 100%; height: 1040px; margin-top: 10px; border-radius: 18px; overflow: hidden; background: #F7F3EC; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.rl--claridad .cl-cal iframe { display: block; width: 100%; height: 100%; border: 0; }
.rl--claridad .cl-cal .calendly-inline-widget { width: 100%; height: 100%; }
.rl--claridad .cl-cal__cargando { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: rgba(28, 26, 24, 0.68); font-size: 0.9375rem; }
.rl--claridad .cl-fallback { margin: 0; color: var(--muted); }
@media (min-width: 700px) { .rl--claridad .cl-cal { height: 760px; } }

/* 3 · Listo */
.rl--claridad .cl-listo { justify-items: center; gap: 22px; text-align: center; }
.rl--claridad .cl-listo .ed { width: auto; }
.rl--claridad .cl-listo .ed:focus { outline: none; }
.rl--claridad .cl-listo .ed__l--xl { max-width: 12ch; }
/* La cita: día y hora en la zona de quien agendó. */
.rl--claridad .cl-cita { display: grid; gap: 4px; justify-items: center; padding: 14px 22px; border: 1px solid var(--gold-line); border-radius: 14px; }
.rl--claridad .cl-cita[hidden] { display: none; }
.rl--claridad .cl-cita__cuando { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 1vw + 1rem, 1.45rem); line-height: 1.3; color: var(--cream); text-wrap: balance; }
.rl--claridad .cl-cita__lugar { margin: 0; font-size: 0.9375rem; color: var(--muted); }
/* «Unirme a la llamada»: misma forma que el principal, en contorno. */
.rl--claridad .cl-unirse { width: min(100%, 22rem); margin-top: 0; padding: 14px 24px; white-space: normal; text-align: center; line-height: 1.3; background: transparent; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold); }
.rl--claridad .cl-unirse:hover { background: rgba(201, 168, 76, 0.1); }
.rl--claridad .cl-unirse::before { display: none; }
.rl--claridad .cl-unirse[hidden] { display: none; }
.rl--claridad .cl-confirmar { width: min(100%, 22rem); margin-top: 6px; padding: 14px 24px; white-space: normal; text-align: center; line-height: 1.3; }
.rl--claridad .cl-listo .link-next { white-space: normal; text-align: center; line-height: 1.4; }
.rl--claridad .cl-listo__ojo { width: 112px; height: auto; }

.rl--claridad .cl-foot { margin: 0; }

/* ── El momento: «Cuéntame» se pliega y el calendario emerge ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .rl--claridad .cl-pregunta.is-entrando,
  .rl--claridad .cl-contacto.is-entrando { animation: cl-q-entra 420ms var(--ease) both; }
  .rl--claridad .cl-respiro.is-entrando .cl-respiro__t { animation: cl-llegar 1100ms var(--ease) both; }
  .rl--claridad .cl-respiro.is-entrando .cl-respiro__n { animation: cl-llegar 900ms var(--ease) 500ms both; }
  .rl--claridad .cl-pregunta.is-entrando-atras { animation: cl-q-entra-atras 420ms var(--ease) both; }
  .rl--claridad .cl-paso.is-saliendo { animation: cl-plegar 620ms var(--ease) forwards; }
  .rl--claridad .cl-momento.is-entrando .cl-paso__t,
  .rl--claridad .cl-momento.is-entrando .cl-resumen { animation: cl-llegar 900ms var(--ease) both; }
  .rl--claridad .cl-momento.is-entrando .cl-resumen { animation-delay: 120ms; }
  .rl--claridad .cl-momento.is-entrando .cl-cal { animation: cl-emerger 1100ms var(--ease) 220ms both; }
  /* El logo original (ojo con llave) llega primero; luego el texto. */
  .rl--claridad .cl-listo.is-entrando .cl-listo__ojo { animation: cl-llegar 1100ms var(--ease) both; }
  .rl--claridad .cl-listo.is-entrando > :not(.cl-listo__ojo) { animation: cl-llegar 900ms var(--ease) both; animation-delay: 450ms; }
}
@keyframes cl-q-entra { from { opacity: 0; transform: translateX(14px); } }
@keyframes cl-q-entra-atras { from { opacity: 0; transform: translateX(-14px); } }
@keyframes cl-plegar { to { opacity: 0; transform: translateY(-18px); filter: blur(6px); clip-path: inset(0 0 100% 0); } }
@keyframes cl-llegar { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }
@keyframes cl-emerger { from { clip-path: inset(0 50% 100% 50% round 18px); opacity: 0.4; } to { clip-path: inset(0 0 0 0 round 18px); opacity: 1; } }

/* ═══ Variante A de Stitch (2026-10-04, elegida por Diego) ═══════════════
   Teléfono: la cabecera se reduce a una línea («← Respirando Con-ciencia ·
   03 / 05») y el título solo acompaña la primera pregunta; un hilo dorado
   vertical acompaña la pregunta y «Continuar» queda al alcance del pulgar.
   Desktop (≥1000 px): editorial asimétrico, título y progreso en la columna
   izquierda, pregunta y opciones a la derecha. Solo mientras se responde:
   el calendario y «Listo» vuelven a una columna centrada. */
.rl--claridad .cl-head { width: min(100%, 38rem); grid-template-columns: 1fr auto; align-items: center; justify-items: start; gap: 10px 16px; text-align: left; }
.rl--claridad .cl-head > .of-back { grid-column: 1; }
.rl--claridad .cl-head > .cl-progreso { grid-column: 2; }
.rl--claridad .cl-head > :not(.of-back):not(.cl-progreso) { grid-column: 1 / -1; }
.rl--claridad .cl-title { width: auto; margin: 8px 0 0; text-align: left; }
.rl--claridad .cl-title .ed__l--xl { max-width: none; font-style: normal; font-size: clamp(2.3rem, 1.6vw + 1.8rem, 3.3rem); line-height: 1.04; color: var(--cream); }
/* En Claridad el botón habla en frase, como «Continuar». */
.rl--claridad .cta { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.rl--claridad .cl-head .cl-lede { text-align: left; font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 0.4vw + 1rem, 1.3rem); }
.rl--claridad .cl-meta { display: block; text-align: left; }
.rl--claridad .cl-meta__nota { font-family: inherit; font-style: normal; font-size: inherit; color: inherit; margin-left: 0.3em; }
.rl--claridad .cl-progreso__l,
.rl--claridad .cl-progreso__barra { display: none; }

/* Fuera de las preguntas, la cabecera es solo contexto. */
.rl--claridad .cl:has(#cl-preguntas[hidden]) .cl-progreso,
.rl--claridad .cl:has(#cuentame[hidden]) .cl-head > :is(.cl-lede, .cl-meta) { display: none; }
.rl--claridad .cl:has(#cuentame[hidden]) .cl-head { justify-items: center; text-align: center; }
.rl--claridad .cl:has(#cuentame[hidden]) .cl-head > .of-back { grid-column: 1 / -1; }
.rl--claridad .cl:has(#cuentame[hidden]) .cl-title { justify-items: center; text-align: center; }

/* Hilo dorado: avanza con la pregunta. */
.rl--claridad .cl-preguntas { position: relative; padding-left: 20px; }
.rl--claridad .cl-preguntas::before,
.rl--claridad .cl-preguntas::after { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--gold-line); }
.rl--claridad .cl-preguntas::after { background: var(--gold); transform-origin: top; transform: scaleY(0.2); transition: transform 600ms var(--ease); }
.rl--claridad .cl-preguntas:has(#cl-q2:not([hidden]))::after { transform: scaleY(0.4); }
.rl--claridad .cl-preguntas:has(#cl-q3:not([hidden]))::after { transform: scaleY(0.6); }
.rl--claridad .cl-preguntas:has(#cl-respiro:not([hidden]))::after { transform: scaleY(0.7); }
.rl--claridad .cl-preguntas:has(#cl-q4:not([hidden]))::after { transform: scaleY(0.8); }
.rl--claridad .cl-preguntas:has(#cl-q5:not([hidden]))::after { transform: scaleY(1); }

@media (max-width: 999px) {
  .rl--claridad .cl { gap: clamp(24px, 4vh, 40px); padding-top: clamp(12px, 3vh, 28px); }
  /* Después de la 1, solo la línea de arriba: lo demás es la pregunta. En el
     paso de datos (preguntas ocultas) la cabecera completa sí se ve. */
  .rl--claridad .cl:has(#cl-preguntas:not([hidden])):has(#cl-q1[hidden]):has(#cuentame:not([hidden])) .cl-head > :is(.cl-title, .cl-lede, .cl-meta) { display: none; }
  .rl--claridad .cl-preguntas { display: flex; flex-direction: column; gap: 22px; min-height: calc(100svh - 120px); }
  .rl--claridad .cl-escena { min-height: 0; }
  .rl--claridad .cl-respiro { min-height: 22rem; }
  .rl--claridad .cl-nav { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); margin-top: auto; padding-top: 12px; }
  .rl--claridad .cl-nav__b--atras { padding: 0 6px; border-color: transparent; }
}

@media (min-width: 1000px) {
  .rl--claridad .cl:has(#cuentame:not([hidden])) { grid-template-columns: minmax(0, 19rem) minmax(0, 40rem); justify-content: center; align-items: start; column-gap: clamp(56px, 7vw, 120px); padding-top: clamp(56px, 12vh, 128px); }
  .rl--claridad .cl:has(#cuentame:not([hidden])) .cl-foot { grid-column: 1 / -1; }
  .rl--claridad .cl:has(#cuentame:not([hidden])) .cl-head { position: sticky; top: clamp(56px, 12vh, 128px); width: 100%; grid-template-columns: 1fr; gap: 14px; }
  .rl--claridad .cl:has(#cuentame:not([hidden])) .cl-head > * { grid-column: 1; }
  .rl--claridad .cl-head > .cl-progreso { order: 9; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gold-line); width: 100%; }
  .rl--claridad .cl-progreso__l,
  .rl--claridad .cl-progreso__barra { display: block; }
  .rl--claridad .cl-title .ed__l--xl { max-width: 9ch; }
  .rl--claridad .cl:has(#cuentame:not([hidden])) .cl-paso { width: 100%; }
  .rl--claridad .cl-escena,
  .rl--claridad .cl-respiro { min-height: 26rem; }
  .rl--claridad .cl-preguntas { padding-left: 0; }
  .rl--claridad .cl-preguntas::before,
  .rl--claridad .cl-preguntas::after { display: none; }
  .rl--claridad .cl-priv.cl-priv--q { justify-self: start; text-align: left; }
}

/* ═══ v3.1 (2026-10-04, Diego: «se sigue viendo muy genérico») ═══════════
   Menos formulario, más conversación editorial:
   · las opciones dejan de ser cajas: son líneas de texto en Bodoni separadas
     por reglas finas, con la letra en itálica dorada; la elegida enciende una
     raya dorada a la izquierda;
   · el número de la pregunta es grande, en Bodoni itálica, dentro del halo
     de anillos que respira (el gesto del umbral);
   · en el respiro el halo se abre y la pregunta se va (antes la frase caía
     debajo de una escena vacía de 26rem). */
.rl--claridad .cl-preguntas:has(#cl-respiro:not([hidden])) .cl-escena { display: none; }

/* Pregunta */
.rl--claridad .cl-pregunta__t { font-size: clamp(1.75rem, 2vw + 1.2rem, 2.85rem); line-height: 1.1; margin-bottom: 18px; }

/* Opciones como líneas */
.rl--claridad .cl-opciones { gap: 0; border-bottom: 1px solid var(--gold-line); }
.rl--claridad .cl-op { grid-template-columns: 1.6em minmax(0, 1fr) 20px; gap: 14px; min-height: 64px; padding: 16px 6px 16px 14px; border: 0; border-top: 1px solid var(--gold-line); border-radius: 0; background: transparent; font-family: var(--display); font-size: clamp(1.15rem, 0.4vw + 1.05rem, 1.35rem); line-height: 1.3; color: var(--muted); overflow: hidden; }
.rl--claridad .cl-op::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform 420ms var(--ease); }
.rl--claridad .cl-op__l { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.15em; color: rgba(201, 168, 76, 0.72); }
.rl--claridad .cl-op__t { transition: transform 420ms var(--ease); }
.rl--claridad .cl-op__ring { width: 18px; height: 18px; }
.rl--claridad .cl-op:active { transform: none; }
.rl--claridad .cl-op:has(input:checked) { background: linear-gradient(90deg, rgba(201, 168, 76, 0.1), rgba(201, 168, 76, 0) 70%); border-color: var(--gold-line); color: var(--cream); }
.rl--claridad .cl-op:has(input:checked)::before { transform: scaleY(1); }
.rl--claridad .cl-op:has(input:checked) .cl-op__t { transform: translateX(4px); }
.rl--claridad .cl-op:has(input:focus-visible) { outline-offset: -2px; }
@media (hover: hover) {
  .rl--claridad .cl-op:hover { background: linear-gradient(90deg, rgba(201, 168, 76, 0.06), rgba(201, 168, 76, 0) 70%); border-color: var(--gold-line); color: var(--cream); }
  .rl--claridad .cl-op:hover .cl-op__t { transform: translateX(4px); }
}

/* Número grande dentro del halo */
.rl--claridad .cl-head { position: relative; }
.rl--claridad .cl-halo { position: absolute; z-index: -1; top: -90px; right: -110px; width: 240px; aspect-ratio: 1; pointer-events: none; opacity: 0.7; transition: opacity 900ms var(--ease); }
.rl--claridad .cl-halo svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; transition: transform 1400ms var(--ease); }
.rl--claridad .cl-halo circle { stroke: var(--gold); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.rl--claridad .cl-halo circle:nth-child(1) { opacity: 0.22; }
.rl--claridad .cl-halo circle:nth-child(2) { opacity: 0.15; }
.rl--claridad .cl-halo circle:nth-child(3) { opacity: 0.1; }
.rl--claridad .cl-halo::before { content: ''; position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle, rgba(201, 168, 76, 0.1) 0%, transparent 70%); }
.rl--claridad .cl:has(#cuentame[hidden]) .cl-halo { display: none; }
.rl--claridad .cl:has(#cl-respiro:not([hidden])) .cl-halo { opacity: 1; }
.rl--claridad .cl:has(#cl-respiro:not([hidden])) .cl-halo svg { transform: scale(1.12); }
.rl--claridad .cl-progreso__n { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--quiet); }
.rl--claridad .cl-progreso__n span { color: var(--gold-hi); font-size: 1.6em; }

@media (min-width: 1000px) {
  .rl--claridad .cl-halo { top: auto; bottom: -78px; left: -84px; right: auto; width: 250px; }
  /* La conversación al centro de la pantalla, no pegada arriba. */
  .rl--claridad .cl:has(#cuentame:not([hidden])) { min-height: 100svh; align-content: center; }
  .rl--claridad .cl-head > .cl-progreso { align-items: end; margin-top: 30px; padding-top: 0; border-top: 0; }
  .rl--claridad .cl-progreso__l { display: none; }
  .rl--claridad .cl-progreso__n { font-size: 1.6rem; }
  .rl--claridad .cl-progreso__n span { font-size: 3.4em; line-height: 0.9; }
  .rl--claridad .cl-progreso__barra { margin-top: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.has-motion .rl--claridad .cl-halo svg { animation: cl-halo 6s var(--breathe) 1.2s infinite both; }
  html.has-motion .rl--claridad .cl:has(#cl-respiro:not([hidden])) .cl-halo svg { animation-duration: 8s; }
}
@keyframes cl-halo { 0%, 100% { scale: 0.95; } 50% { scale: 1.03; } }

/* ═══ v3.2 · Movimiento (2026-10-04, Diego: «puede que le falten animaciones»)
   Sin tocar los tiempos del recorrido (el avance sigue a 420 ms): las
   animaciones ocurren mientras la persona ya puede leer y elegir.
   · la pregunta llega palabra por palabra (blur 4 px → 0);
   · las opciones suben en cascada, 55 ms entre una y otra;
   · al elegir, un pulso sale del anillo;
   · el número cambia subiendo, como una página que se pasa;
   · el respiro llega lento, palabra por palabra.
   Todo con fill «backwards» (con «both» el último fotograma fijaría el
   transform y anularía :hover). Con reduced motion no hay nada. */
.rl--claridad .cl-w { display: inline-block; }
.rl--claridad .cl-op__ring { overflow: visible; }
.rl--claridad .cl-op__ring::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none; }
.rl--claridad #cl-num { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .rl--claridad .cl-pregunta.is-entrando,
  .rl--claridad .cl-pregunta.is-entrando-atras { animation: none; }
  .rl--claridad .cl-pregunta.is-entrando .cl-w { animation: cl-palabra 720ms var(--ease) calc(var(--i) * 45ms) backwards; }
  .rl--claridad .cl-pregunta.is-entrando-atras .cl-w { animation: cl-palabra 520ms var(--ease) calc(var(--i) * 25ms) backwards; }
  .rl--claridad .cl-pregunta.is-entrando .cl-op { animation: cl-op-entra 620ms var(--ease) calc(160ms + var(--i) * 55ms) backwards; }
  .rl--claridad .cl-pregunta.is-entrando-atras .cl-op { animation: cl-op-entra 420ms var(--ease) calc(var(--i) * 30ms) backwards; }
  .rl--claridad .cl-op:has(input:checked) .cl-op__ring::before { animation: cl-pulso 760ms var(--ease) 1; }
  .rl--claridad #cl-num.is-cambio { animation: cl-num 640ms var(--ease) backwards; }
  .rl--claridad .cl-respiro.is-entrando .cl-respiro__t { animation: none; }
  .rl--claridad .cl-respiro.is-entrando .cl-w { animation: cl-palabra 1100ms var(--ease) calc(200ms + var(--i) * 140ms) backwards; }
  .rl--claridad .cl-respiro.is-entrando .cl-respiro__n { animation-delay: 1300ms; }
  .rl--claridad .cl-contacto.is-entrando .cl-campo,
  .rl--claridad .cl-contacto.is-entrando .cl-enviar { animation: cl-op-entra 620ms var(--ease) backwards; }
  .rl--claridad .cl-contacto.is-entrando .cl-campo:nth-child(2) { animation-delay: 140ms; }
  .rl--claridad .cl-contacto.is-entrando .cl-campo:nth-child(3) { animation-delay: 200ms; }
  .rl--claridad .cl-contacto.is-entrando .cl-campo:nth-child(4) { animation-delay: 260ms; }
  .rl--claridad .cl-contacto.is-entrando .cl-enviar { animation-delay: 340ms; }
}
@keyframes cl-palabra { from { opacity: 0; transform: translateY(0.35em); filter: blur(4px); } }
@keyframes cl-op-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes cl-pulso { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes cl-num { from { opacity: 0; transform: translateY(45%); filter: blur(4px); } }

/* Reduced motion: el hilo, la barra, las opciones y el halo cambian de estado sin transición. */
@media (prefers-reduced-motion: reduce) {
  .rl--claridad .cl-progreso__barra span,
  .rl--claridad .cl-op__ring::after,
  .rl--claridad .cl-preguntas::after,
  .rl--claridad .cl-op::before,
  .rl--claridad .cl-op__t,
  .rl--claridad .cl-halo svg { transition: none; }
}

/* ── v3 · Reservar primero (Diego, 2026-10-04) ────────────────────────────
   Las preguntas se ofrecen en «Listo», después de agendar, como opcionales:
   una invitación tranquila bajo la cita, separada por una regla dorada. */
.rl--claridad .cl-invita { display: grid; justify-items: center; gap: 10px; width: min(100%, 26rem); margin-top: 10px; padding-top: 26px; border-top: 1px solid var(--gold-line); }
.rl--claridad .cl-invita[hidden],
.rl--claridad .cl-invita__ok[hidden] { display: none; }
.rl--claridad .cl-invita__t { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 1vw + 1rem, 1.45rem); line-height: 1.3; color: var(--cream); text-wrap: balance; }
.rl--claridad .cl-invita__n { margin: 0; max-width: 34ch; font-size: 0.9375rem; color: var(--muted); text-wrap: pretty; }
.rl--claridad .cl-invita__b { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 6px; padding: 0 26px; border: 1px solid var(--gold); border-radius: 999px; background: none; cursor: pointer; font: 500 1rem/1 var(--sans); color: var(--gold-hi); transition: background-color 300ms var(--ease), transform 300ms var(--ease); }
.rl--claridad .cl-invita__b:hover { background: rgba(201, 168, 76, 0.1); }
.rl--claridad .cl-invita__b:active { transform: scale(0.98); }
.rl--claridad .cl-invita__b:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; }
.rl--claridad .cl-invita__ok { width: min(100%, 26rem); margin: 10px 0 0; padding-top: 22px; border-top: 1px solid var(--gold-line); font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem); line-height: 1.4; color: var(--cream); text-wrap: pretty; }
.rl--claridad .cl-salir { justify-self: center; font-size: 0.875rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .rl--claridad .cl-invita__b { transition: none; }
}

/* Hilo de pasos (2026-10-29, css/hilo.css): mismo ancho que el paso. */
.rl--claridad .cl-hilo { width: min(100%, 38rem); }
.rl--claridad .cl-hilo:empty { display: none; }