.citas-acceso { display:inline-block; margin:16px 0 0 20px; color:var(--crema); font:12px Arial,sans-serif; letter-spacing:.1em; text-decoration:none; border-bottom:1px solid var(--rojo); padding-bottom:5px; }
.citas-obra { width:min(940px,84vw); margin:130px auto 30px; padding:44px 0 35px; border-top:1px solid rgba(238,232,223,.18); scroll-margin-top:80px; }
.citas-cabecera { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.citas-kicker { color:var(--rojo); font:10px Arial,sans-serif; letter-spacing:.22em; text-transform:uppercase; margin:0 0 14px; }
.citas-obra h2 { margin:0; font-family:var(--font-display); font-size:clamp(30px,4vw,44px); font-weight:400; color:var(--crema); }
.citas-total { color:var(--tenue); font:11px Arial,sans-serif; letter-spacing:.08em; }
.citas-escena { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:330px; padding:46px 30px 30px; text-align:center; touch-action:pan-y; }
.citas-comilla { color:var(--rojo); font:64px/ .6 var(--font-display); opacity:.7; margin:0 0 15px; }
.citas-texto { margin:0; max-width:800px; color:var(--crema); font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.2vw,39px); line-height:1.27; white-space:pre-line; }
.citas-texto.citas-entrada { animation:citas-aparecer .25s ease-out; }
.citas-leer { margin-top:26px; padding:8px 0; background:none; border:0; border-bottom:1px solid rgba(201,83,94,.5); color:var(--texto); cursor:pointer; font:11px Arial,sans-serif; letter-spacing:.08em; }
.citas-pie { border-top:1px solid rgba(238,232,223,.08); padding-top:22px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.citas-fuente { color:var(--tenue); font:italic 15px Georgia,serif; margin:0; }
.citas-controles { display:flex; align-items:center; gap:18px; }
.citas-flecha { background:none; color:var(--crema); border:1px solid rgba(238,232,223,.19); border-radius:50%; width:42px; height:42px; cursor:pointer; font:20px Georgia,serif; transition:border-color .2s,background .2s; }
.citas-flecha:hover { border-color:var(--rojo); background:rgba(201,83,94,.08); }
.citas-cuenta { min-width:46px; color:var(--texto); font:11px Arial,sans-serif; text-align:center; letter-spacing:.1em; }
.citas-obra button:focus-visible,.citas-dialogo button:focus-visible,.citas-dialogo a:focus-visible,.citas-acceso:focus-visible { outline:2px solid var(--rojo); outline-offset:5px; }
.citas-dialogo { color:var(--crema); background:#0c0a0a; border:1px solid rgba(238,232,223,.18); padding:0; width:min(880px,92vw); max-height:88svh; border-radius:2px; }
.citas-dialogo::backdrop { background:rgba(0,0,0,.85); backdrop-filter:blur(8px); }
.citas-dialogo-interior { padding:clamp(24px,5vw,56px); }
.citas-dialogo-top { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-bottom:28px; }
.citas-cerrar { border:0; background:none; color:var(--texto); font:12px Arial,sans-serif; padding:8px; cursor:pointer; }
.citas-completa { font:400 clamp(23px,3vw,34px)/1.45 var(--font-display); margin:0 0 38px; white-space:pre-line; }
.citas-original { color:var(--rojo); font:11px Arial,sans-serif; text-decoration:none; padding:10px 0; }
.citas-dialogo .citas-pie { flex-wrap:wrap; }
@keyframes citas-aparecer { from { opacity:.25; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) { .citas-obra { width:88vw; margin-top:80px; padding-top:30px; } .citas-escena { padding:40px 0 28px; min-height:320px; } .citas-cabecera { align-items:flex-end; } .citas-total { max-width:65px; text-align:right; line-height:1.6; } .citas-pie { flex-direction:column; align-items:center; gap:20px; } .citas-acceso { margin-left:14px; } .citas-dialogo .citas-pie { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { .citas-texto.citas-entrada { animation:none; } }

/* Umbral visual: la lectura termina y comienza una sección para explorar. */
.citas-obra {
  position:relative;
  isolation:isolate;
  width:100%;
  margin:150px 0 0;
  padding:62px max(6vw, calc((100% - 1040px) / 2)) 40px;
  border-top:1px solid rgba(201,83,94,.45);
  border-bottom:1px solid rgba(201,83,94,.2);
  background:
    radial-gradient(ellipse at 20% 5%, rgba(143,32,49,.20), transparent 65%),
    linear-gradient(125deg, #1b1013, #0c090b 75%);
  scroll-margin-top:25px;
}
.citas-obra::before {
  content:"";
  position:absolute;
  top:-1px;
  left:6vw;
  width:72px;
  height:3px;
  background:var(--rojo);
}
.citas-cabecera { align-items:center; }
.citas-kicker { color:#dc8790; letter-spacing:.2em; }
.citas-indicador { display:inline-block; width:6px; height:6px; border:1px solid #dc8790; transform:rotate(45deg); margin-right:8px; vertical-align:1px; }
.citas-obra h2 { font-size:clamp(37px,5vw,57px); }
.citas-invitacion { margin:12px 0 0; color:rgba(238,232,223,.48); font:italic 16px/1.5 Georgia,serif; }
.citas-total { display:flex; align-items:center; gap:15px; color:rgba(238,232,223,.52); text-align:left; line-height:1.6; }
.citas-total strong { color:rgba(201,83,94,.72); font:400 clamp(56px,8vw,88px)/1 var(--font-display); letter-spacing:-.06em; }
.citas-total span { font:10px/1.8 Arial,sans-serif; letter-spacing:.08em; }
.citas-escena { min-height:350px; margin:30px 0 24px; padding:44px 24px 28px; }
.citas-comilla { font-size:80px; color:#ce6874; }
.citas-texto { font-size:clamp(27px,3.4vw,42px); }
.citas-leer { margin-top:28px; padding:11px 17px; border:1px solid rgba(201,83,94,.35); border-radius:2px; background:rgba(201,83,94,.06); color:rgba(238,232,223,.82); }
.citas-leer:hover { background:rgba(201,83,94,.15); border-color:var(--rojo); }
.citas-recorrido { display:flex; align-items:center; gap:24px; }
.citas-ayuda { color:rgba(238,232,223,.42); font:10px Arial,sans-serif; letter-spacing:.06em; }
.citas-obra .citas-flecha { width:48px; height:48px; background:rgba(201,83,94,.10); border-color:rgba(201,83,94,.45); }
.citas-obra .citas-cuenta { color:var(--crema); }
.citas-obra .citas-fuente { color:rgba(238,232,223,.46); }
@media(max-width:700px) {
  .citas-obra { padding:40px 6vw 30px; margin-top:95px; }
  .citas-cabecera { gap:15px; }
  .citas-total { display:block; min-width:65px; max-width:none; text-align:center; }
  .citas-total strong,.citas-total span { display:block; }
  .citas-invitacion { max-width:210px; font-size:14px; }
  .citas-escena { margin:20px 0; padding:30px 0 20px; }
  .citas-recorrido { flex-direction:column; gap:12px; }
}

.citas-acceso[hidden], [data-frases-obra][hidden] { display:none; }
[data-frases-obra] { scroll-margin-top:25px; }
html.citas-abiertas { overflow:hidden; }
.citas-flecha:disabled { opacity:.25; cursor:default; }