/* ============================================================
   lib/reflexion-guiada.css — Corazón y Mente
   Estilos compartidos por los 3 recursos de reflexión guiada.
   Reutiliza exactamente la misma paleta, tipografía y lenguaje
   visual ya usado en el resto del sitio (violentometro.html,
   otra-mirada.html, lector-pdf.html): --accent #d6324a, --ink
   #26303a, Fraunces + Inter. No se inventa una identidad nueva.
   ============================================================ */
:root {
  --accent:#d6324a; --ink:#26303a; --ink-soft:#4a5560; --ink-mute:#5c6670;
  --line:#e7e2d8; --bg:#faf7f0; --green:#bfe3c9; --glass:#f4efe4;
  --display:'Fraunces',serif;
}
* { box-sizing:border-box; }
body.rg-body { margin:0; font-family:'Inter',sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; }
.rg-nav { position:sticky; top:0; background:rgba(250,247,240,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); z-index:50; }
.rg-nav-inner { max-width:640px; margin:0 auto; padding:.8rem 1.2rem; display:flex; justify-content:space-between; align-items:center; }
.rg-nav-brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink); font-weight:700; }
.rg-wrap-exterior { max-width:640px; margin:0 auto; padding:1.6rem 1.2rem 4rem; }

.rg-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.rg-etapas { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.8rem; }
.rg-etapa-item { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.rg-etapa-item .rg-bola { width:12px; height:12px; border-radius:50%; background:var(--line); border:2px solid var(--line); z-index:1; transition:background .3s, border-color .3s; }
.rg-etapa-item.completa .rg-bola { background:var(--accent); border-color:var(--accent); }
.rg-etapa-item.actual .rg-bola { background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px rgba(214,50,74,.16); }
.rg-etapa-item .rg-linea { position:absolute; top:5px; left:50%; width:100%; height:2px; background:var(--line); z-index:0; }
.rg-etapa-item:last-child .rg-linea { display:none; }
.rg-etapa-item.completa .rg-linea { background:var(--accent); }
.rg-etapa-item .rg-nombre { font-size:.66rem; color:var(--ink-mute); margin-top:.45rem; text-align:center; font-weight:600; }
.rg-etapa-item.actual .rg-nombre { color:var(--accent); font-weight:700; }

.rg-pantalla { animation:rg-aparecer .35s ease; min-height:50vh; display:flex; flex-direction:column; }
@keyframes rg-aparecer { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce) { .rg-pantalla { animation:none; } * { transition-duration:.01ms !important; animation-duration:.01ms !important; } }

.rg-intro { text-align:center; align-items:center; justify-content:center; padding:2rem 0; }
.rg-icono { font-size:2.6rem; margin-bottom:1.2rem; }
.rg-texto-grande { font-family:var(--display); font-size:1.35rem; line-height:1.55; max-width:480px; margin:0 auto 1.8rem; }
.rg-texto-grande strong { color:var(--accent); }
.rg-texto-grande p { margin:0 0 .9rem; }

.rg-pregunta { font-family:var(--display); font-size:1.25rem; font-weight:600; line-height:1.4; margin:0 0 .5rem; display:block; }
.rg-ayuda { color:var(--ink-soft); font-size:.92rem; margin:0 0 1rem; }
.rg-campo { margin-bottom:1.4rem; }
.rg-textarea, .rg-input { width:100%; padding:.9rem 1.1rem; border:1.5px solid var(--line); border-radius:14px; font:inherit; font-size:1.02rem; background:#fff; color:var(--ink); }
.rg-textarea { min-height:110px; resize:vertical; }
.rg-textarea:focus-visible, .rg-input:focus-visible { outline:2px solid var(--accent); border-color:var(--accent); }
.rg-campo-cond { animation:rg-aparecer .3s ease; }

.rg-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }
.rg-chip { border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:.7rem 1.2rem; font:inherit; font-size:.95rem; cursor:pointer; color:var(--ink-soft); min-height:46px; transition:background .2s, color .2s, border-color .2s; }
.rg-chip.sel { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.rg-chip:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }

.rg-btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--accent); color:#fff; border:none; border-radius:999px; padding:.85rem 1.7rem; font:inherit; font-weight:700; font-size:1rem; cursor:pointer; text-decoration:none; min-height:48px; }
.rg-btn:hover, .rg-btn:focus-visible { background:#b8253c; }
.rg-btn:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.rg-btn-grande { padding:1rem 2.2rem; font-size:1.05rem; }
.rg-btn-sec { background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.rg-btn-sec:hover, .rg-btn-sec:focus-visible { background:var(--glass); }
.rg-btn-link { background:none; color:var(--ink-mute); text-decoration:underline; padding:.5rem; min-height:auto; font-weight:600; font-size:.88rem; }
.rg-btn-link:hover, .rg-btn-link:focus-visible { background:none; color:var(--accent); }

.rg-nav { display:flex; justify-content:space-between; gap:.8rem; margin-top:1.6rem; }
div.rg-nav { position:static; background:none; backdrop-filter:none; border:none; box-shadow:none; }

.rg-espejo { background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.4rem; margin:1rem 0; display:flex; flex-direction:column; gap:.5rem; max-height:60vh; overflow-y:auto; }
.rg-burbuja-preg { align-self:flex-start; background:var(--glass); color:var(--ink-soft); border-radius:14px 14px 14px 4px; padding:.6rem .9rem; font-size:.85rem; max-width:85%; }
.rg-burbuja-resp { align-self:flex-end; background:var(--accent); color:#fff; border-radius:14px 14px 4px 14px; padding:.7rem 1rem; font-size:.95rem; max-width:85%; margin-bottom:.5rem; }
.rg-texto-cierre-espejo { text-align:center; font-style:italic; color:var(--ink-soft); margin-top:1rem; }

.rg-cierre { text-align:center; align-items:center; padding:2rem 0; }
.rg-cierre-ctas { display:flex; flex-direction:column; gap:.8rem; align-items:center; margin-top:1.2rem; width:100%; max-width:360px; margin-left:auto; margin-right:auto; }
.rg-cierre-ctas .rg-btn { width:100%; }
.rg-aviso-profesional { font-size:.8rem; color:var(--ink-mute); margin-top:1.6rem; max-width:420px; line-height:1.5; }

footer.rg-pie { text-align:center; padding:2rem 1rem 1rem; color:var(--ink-mute); font-size:.82rem; }

@media (max-width:600px) {
  .rg-texto-grande { font-size:1.18rem; }
  .rg-pregunta { font-size:1.1rem; }
  .rg-icono { font-size:2.2rem; }
}