/* =========================================================================
   LECTOR INMERSIVO (Ronda 69, 4/10/2026) — ver eq-lector.js
   Sólo pantalla: el PDF sigue saliendo del pergamino de siempre (todo esto lleva .no-print).
   Paleta de Equinox 13: azul noche #020611 y dorados #D4AF37 / #FDE08B (colores pasados a esta paleta
   conservando la luminosidad). La tarjeta imita el pergamino del reporte (crema con adornos ocre), como el PDF.
   ========================================================================= */
html.eq-lector-abierto, html.eq-lector-abierto body { overflow: hidden !important; }

/* ---------- Botón de entrada (arriba de cada reporte) ---------- */
.eq-lector-cta { margin: 0 auto 26px; max-width: 760px; position: relative; z-index: 2; }
.eq-lector-cta button {
    width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer;
    padding: 16px 22px; border-radius: 14px; border: 1px solid rgba(252, 242, 212, 0.55);
    background: radial-gradient(120% 140% at 0% 0%, #1f3a7a 0%, #0e1b3a 55%, #091125 100%);
    color: #fffaeb; box-shadow: 0 10px 30px rgba(14, 27, 58, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.eq-lector-cta button::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(253, 246, 225, 0.22) 45%, transparent 60%);
    transform: translateX(-100%); animation: eqlcBrillo 4.5s ease-in-out infinite;
}
.eq-lector-cta button:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(14, 27, 58, 0.5); }
.eqlc-glifo { font-size: 1.9rem; color: #FFFFFF; text-shadow: 0 0 14px rgba(253, 246, 225, 0.8); animation: eqlcLatido 3s ease-in-out infinite; }
.eqlc-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.eqlc-txt strong { font-family: 'Cinzel', serif; letter-spacing: 2px; font-size: 1.02rem; text-transform: uppercase; }
.eqlc-txt small { font-family: 'EB Garamond', serif; font-size: 1rem; color: #ffeeb9; }
.eqlc-flecha { font-size: 2rem; color: #FFFFFF; transition: transform .25s ease; }
.eq-lector-cta button:hover .eqlc-flecha { transform: translateX(5px); }
@keyframes eqlcBrillo { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes eqlcLatido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@media print { .eq-lector-cta, .eq-lector { display: none !important; } }

/* ---------- El lector ---------- */
.eq-lector {
    position: fixed; inset: 0; z-index: 2147483000; color: #233d79;
    background: radial-gradient(ellipse at 50% 30%, #162b5d 0%, #0a152d 45%, #091125 100%);
    animation: eqlAbre .55s ease both; font-family: 'EB Garamond', Georgia, serif;
}
.eq-lector.cerrando { animation: eqlCierra .4s ease both; }
@keyframes eqlAbre { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes eqlCierra { to { opacity: 0; transform: scale(0.98); } }
.eql-cielo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.eql-rueda { position: absolute; left: 50%; top: 50%; width: min(140vh, 140vw); height: min(140vh, 140vw); transform: translate(-50%, -50%); opacity: 0.13; pointer-events: none; }
.eql-rueda svg { width: 100%; height: 100%; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); fill: none; stroke: #fcf2d4; stroke-width: .35; }
.eql-rueda text { fill: #FFFFFF; stroke: none; font-size: 7px; text-anchor: middle; dominant-baseline: middle; }

/* Barra superior */
.eql-barra {
    position: absolute; top: 0; left: 0; right: 0; height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 22px;
    background: linear-gradient(180deg, rgba(9, 17, 37, 0.85), rgba(9, 17, 37, 0)); color: #fff8e1; z-index: 5;
}
.eql-marca { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 4px; font-size: 1.05rem; color: #fff; }
.eql-e { display: inline-block; transform: scaleX(-1); }
.eql-cap-tit { flex: 1; font-family: 'Cinzel', serif; letter-spacing: 2px; font-size: .78rem; text-transform: uppercase; color: #fce59f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.eql-cuenta { font-family: 'Cinzel', serif; font-size: .8rem; color: #FFFFFF; letter-spacing: 1px; }
.eql-cerrar { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1rem; transition: background .2s; }
.eql-cerrar:hover { background: rgba(253, 246, 225, 0.2); }
.eql-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.07); }
.eql-progreso > div { height: 100%; width: 0; background: linear-gradient(90deg, #fcf2d4, #FFFFFF); box-shadow: 0 0 10px #FFFFFF; transition: width .8s cubic-bezier(.2, .7, .2, 1); }

/* Mapa de constelación (capítulos) */
.eql-mapa { position: absolute; left: 0; top: 70px; bottom: 20px; width: 250px; overflow-y: auto; overflow-x: hidden; z-index: 4; padding: 10px 0 30px 14px; scrollbar-width: none; }
.eql-mapa::-webkit-scrollbar { display: none; }
.eql-mapa-svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.eql-mapa-svg line { stroke: rgba(252, 229, 159, 0.18); stroke-width: 1; stroke-dasharray: 2 4; }
.eql-mapa-svg line.on { stroke: rgba(253, 246, 225, 0.75); stroke-dasharray: none; filter: drop-shadow(0 0 3px #FFFFFF); }
.eql-mapa ol { list-style: none; margin: 0; padding: 0; position: relative; }
.eql-mapa li { margin: 0 0 10px 0; }
.eql-mapa li:nth-child(odd) { padding-left: 16px; }
.eql-punto { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; color: #e4c465; padding: 2px 6px 2px 0; text-align: left; max-width: 220px; }
.eql-punto-glifo { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; border: 1px solid rgba(252, 229, 159, 0.3); background: rgba(9, 17, 37, 0.7); transition: all .35s ease; }
.eql-punto-tit { font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .55; transition: opacity .3s; }
.eql-punto:hover .eql-punto-tit, .eql-punto.actual .eql-punto-tit { opacity: 1; }
.eql-punto.visto { color: #fff2ca; }
.eql-punto.visto .eql-punto-glifo { border-color: rgba(253, 246, 225, 0.6); color: #FFFFFF; }
.eql-punto.actual .eql-punto-glifo { background: #FFFFFF; color: #0e1b3a; border-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(253, 246, 225, 0.18), 0 0 18px rgba(253, 246, 225, 0.9); transform: scale(1.18); }

/* Escenario y escenas */
.eql-escenario { position: absolute; inset: 58px 0 0 250px; perspective: 1200px; z-index: 3; }
.eql-escena { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 26px 34px 90px; outline: none; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(253, 246, 225, 0.4) transparent; }
.eql-escena.entra-adelante { animation: eqlEntraA .76s cubic-bezier(.2, .7, .2, 1) both; }
.eql-escena.entra-atras { animation: eqlEntraB .76s cubic-bezier(.2, .7, .2, 1) both; }
.eql-escena.sale-adelante { animation: eqlSaleA .6s ease both; pointer-events: none; }
.eql-escena.sale-atras { animation: eqlSaleB .6s ease both; pointer-events: none; }
@keyframes eqlEntraA { from { opacity: 0; transform: translateZ(-260px) translateY(40px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes eqlEntraB { from { opacity: 0; transform: translateZ(160px) translateY(-30px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes eqlSaleA { to { opacity: 0; transform: translateZ(220px) translateY(-40px); filter: blur(8px); } }
@keyframes eqlSaleB { to { opacity: 0; transform: translateZ(-240px) translateY(40px); filter: blur(8px); } }

/* La tarjeta de lectura: pergamino claro sobre el cielo */
.eql-tarjeta {
    max-width: 780px; margin: 0 auto; border-radius: 6px; position: relative;
    background: radial-gradient(130% 90% at 50% 0%, #fbf6ea 0%, #f1e6cf 55%, #e8d8b8 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(252, 242, 212, 0.5), 0 0 0 6px rgba(14, 27, 58, 0.65), 0 0 0 7px rgba(252, 242, 212, 0.35);
    padding: 48px 64px 40px;
}
.eql-tarjeta::before, .eql-tarjeta::after { content: '✦'; position: absolute; top: 14px; color: #b8913f; font-size: .9rem; }
.eql-tarjeta::before { left: 18px; } .eql-tarjeta::after { right: 18px; }
.eql-cab { text-align: center; margin-bottom: 26px; }
.eql-glifo { width: 104px; height: 104px; margin: 0 auto 12px; position: relative; display: grid; place-items: center; }
.eql-glifo svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #b8913f; stroke-width: 1; }
.eql-glifo svg circle { stroke-dasharray: 340; stroke-dashoffset: 340; animation: eqlTraza 1.6s .15s ease forwards; }
.eql-glifo svg circle + circle { stroke-dasharray: 3 5; animation-delay: .5s; }
.eql-glifo span { font-size: 2.6rem; color: #223d7d; font-family: 'Cinzel', serif; opacity: 0; transform: scale(.6) rotate(-25deg); animation: eqlGlifo .9s .45s cubic-bezier(.2, .9, .3, 1.3) forwards; }
@keyframes eqlTraza { to { stroke-dashoffset: 0; } }
@keyframes eqlGlifo { to { opacity: 1; transform: none; } }
.eql-num { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: #8a7a4a; margin: 0 0 8px; opacity: 0; animation: eqlSube .7s .6s ease forwards; }
.eql-titulo { font-family: 'Cinzel', serif; font-weight: 700; color: #1f366c; font-size: clamp(1.35rem, 2.6vw, 2.05rem); letter-spacing: 2px; line-height: 1.25; margin: 0; text-transform: uppercase; }
.eql-titulo .eql-pal { display: inline-block; white-space: nowrap; }
.eql-titulo .eql-pal span { display: inline-block; opacity: 0; transform: translateY(14px); animation: eqlLetra .5s ease forwards; animation-delay: calc(.55s + var(--k) * 22ms); }
@keyframes eqlLetra { to { opacity: 1; transform: none; } }
@keyframes eqlSube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.eql-titulo::after { content: ''; display: block; width: 120px; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, #b8913f, transparent); }

.eql-cuerpo { font-size: 1.22rem; line-height: 1.78; color: #233d79; background: none !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
.eql-cuerpo p { margin: 0 0 1.05em; text-align: left; hyphens: manual; overflow-wrap: break-word; } /* Ronda 69: sin cortes con guion; con una letra por <span> el navegador no hyphena, y la página medida distinta de la escrita se desbordaba */
.eql-cuerpo h5, .eql-cuerpo .sub-astro-title { font-family: 'Cinzel', serif; letter-spacing: 2px; color: #2e4b8e; font-size: .98rem; margin: 1.8em 0 .7em; text-transform: uppercase; }
.eql-cuerpo blockquote { margin: 1.4em 0; padding: 14px 20px; border-left: 3px solid #b8913f; background: rgba(184, 145, 63, 0.09); font-style: italic; }
.eql-cuerpo strong { color: #172b5a; background-image: linear-gradient(transparent 62%, rgba(79, 106, 168, 0.22) 62%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 1.1s .35s ease; }
.eql-cuerpo .eql-visto strong, .eql-cuerpo strong.eql-visto { background-size: 100% 100%; }
.eql-cuerpo table { width: 100%; }
/* Ronda 69 (3/10/2026): las tablas del reporte, legibles dentro de la lectura (antes salían diminutas). */
.eql-cuerpo .vintage-data-table th { font-size: .78rem; padding: 10px 8px; }
.eql-cuerpo .vintage-data-table td { font-size: 1rem; padding: 9px 8px; line-height: 1.35; }
.eql-cuerpo .vintage-table-responsive { width: 100%; min-width: 0; }
.eql-cuerpo svg { max-width: 100%; height: auto; }
.eql-portada .eql-cuerpo .report-header-vintage .user-name { font-size: clamp(2rem, 5vw, 3.4rem); }

/* Aparición de cada bloque al leer */
.eql-rev { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.eql-rev.eql-visto { opacity: 1; transform: none; }
.eql-w { opacity: .07; transition: opacity .35s ease; }
.eql-w.on { opacity: 1; }
/* Ronda 69: escritura letra por letra (eq-lector.js escribirPagina) */
.eql-c { opacity: 0; transition: opacity .28s ease, text-shadow .6s ease; text-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
.eql-c.on { opacity: 1; text-shadow: inherit; }

/* Pie: el próximo capítulo */
.eql-pie { margin-top: 34px; text-align: center; }
.eql-pie-txt { font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: #8a7a4a; margin: 0 0 10px; }
.eql-siguiente { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; padding: 12px 24px 12px 12px; border-radius: 60px; border: 1px solid rgba(35, 61, 121, 0.35); background: linear-gradient(135deg, #1f3a7a, #0e1b3a); color: #fff; font-family: 'Cinzel', serif; letter-spacing: 1.5px; font-size: .86rem; text-transform: uppercase; box-shadow: 0 10px 28px rgba(14, 27, 58, 0.35); transition: transform .3s ease, box-shadow .3s ease; max-width: 100%; }
.eql-siguiente:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 34px rgba(14, 27, 58, 0.5); }
.eql-escena.al-final .eql-siguiente { animation: eqlLlama 1.8s ease-in-out infinite; }
@keyframes eqlLlama { 0%, 100% { box-shadow: 0 10px 28px rgba(14, 27, 58, 0.35), 0 0 0 0 rgba(253, 246, 225, 0.55); } 50% { box-shadow: 0 10px 28px rgba(14, 27, 58, 0.35), 0 0 0 10px rgba(253, 246, 225, 0); } }
.eql-anillo { position: relative; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem; color: #FFFFFF; flex: 0 0 44px; }
.eql-anillo svg { position: absolute; inset: 0; transform: rotate(-90deg); fill: none; stroke-width: 2; }
.eql-anillo svg circle { stroke: rgba(255, 255, 255, 0.15); }
.eql-anillo svg .eql-anillo-av { stroke: #FFFFFF; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; transition: stroke-dashoffset .25s linear; }
.eql-sig-glifo { font-size: 1.2rem; color: #FFFFFF; }
.eql-sig-tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Final del viaje */
.eql-final { padding: 10px 0 4px; }
.eql-final-glifo { font-size: 3rem; color: #b8913f; animation: eqlGira 12s linear infinite; display: inline-block; }
@keyframes eqlGira { to { transform: rotate(360deg); } }
.eql-final h3 { font-family: 'Cinzel', serif; color: #1f366c; letter-spacing: 2px; text-transform: uppercase; margin: 10px 0 8px; }
.eql-final p { font-size: 1.15rem; color: #3f578f; margin: 0 0 20px; }
.eql-final-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.eql-btn { cursor: pointer; padding: 12px 22px; border-radius: 40px; border: 1px solid #1f3a7a; background: #1f3a7a; color: #fff; font-family: 'Cinzel', serif; letter-spacing: 1.5px; font-size: .8rem; text-transform: uppercase; }
.eql-btn-sec { background: transparent; color: #1f3a7a; }

/* Flechas laterales */
.eql-flechas button { position: absolute; top: 50%; z-index: 6; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(253, 246, 225, 0.45); background: rgba(9, 17, 37, 0.55); color: #FFFFFF; font-size: 1.8rem; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: background .2s, opacity .2s; }
.eql-flechas button:hover { background: rgba(253, 246, 225, 0.18); }
.eql-flechas button:disabled { opacity: 0; pointer-events: none; }
.eql-ant { left: 262px; } .eql-sig { right: 18px; }

/* Aviso "retomé donde quedaste" */
.eql-retomar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 7; display: flex; gap: 14px; align-items: center; padding: 10px 14px 10px 20px; border-radius: 40px; background: rgba(9, 17, 37, 0.88); border: 1px solid rgba(253, 246, 225, 0.4); color: #fff8e1; font-size: .98rem; animation: eqlSube .5s ease both; transition: opacity .6s; }
.eql-retomar.fuera { opacity: 0; }
.eql-retomar button { background: #FFFFFF; color: #0e1b3a; border: none; border-radius: 30px; padding: 6px 14px; cursor: pointer; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; }

/* Tablet y celular: el mapa pasa a una fila de puntos arriba; la tarjeta ocupa todo el ancho */
@media (max-width: 960px) {
    .eql-mapa { top: 58px; left: 0; right: 0; bottom: auto; width: auto; height: 46px; padding: 8px 14px; overflow-x: auto; overflow-y: hidden; }
    .eql-mapa ol { display: flex; gap: 8px; }
    .eql-mapa li, .eql-mapa li:nth-child(odd) { margin: 0; padding: 0; }
    .eql-punto-tit, .eql-mapa-svg { display: none; }
    .eql-escenario { inset: 104px 0 0 0; }
    .eql-escena { padding: 10px 12px 90px; }
    .eql-tarjeta { padding: 34px 22px 30px; }
    .eql-cuerpo { font-size: 1.12rem; }
    .eql-flechas { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 6; pointer-events: none; background: linear-gradient(0deg, rgba(9, 17, 37, 0.92), rgba(9, 17, 37, 0)); }
    .eql-flechas button { top: auto; bottom: 14px; transform: none; pointer-events: auto; }
    .eql-escena { padding-bottom: 110px; }
    .eql-ant { left: 14px; } .eql-sig { right: 14px; }
    .eql-cap-tit { display: none; }
    .eql-cuenta { margin-left: auto; } /* Ronda 69: sin el título del medio, la cuenta y la X van a la derecha */
}

@media (prefers-reduced-motion: reduce) {
    .eq-lector, .eql-escena, .eql-rev, .eql-titulo .eql-pal span, .eql-glifo span, .eql-glifo svg circle, .eql-num, .eql-w, .eql-c { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}


/* =========================================================================
   Ronda 69 (3/10/2026) — lector v2: páginas animadas (sin tira larga), acciones siempre visibles e inmersiva por defecto.
   ========================================================================= */
.eql-escena { overflow-y: auto; padding: 22px 34px 26px; display: flex; flex-direction: column; justify-content: center; }
.eql-escena > .eql-tarjeta { width: 100%; box-sizing: border-box; max-width: 908px; } /* Ronda 69: el lector cuelga del <body> (fuera de #astral-app-wrapper, que es el que pone border-box): sin esto, en el celular la hoja salía 44 px más ancha que la pantalla y cortaba el final de cada renglón */
.eql-oculto { display: none !important; }
.eql-entra { animation: eqlEntraBloque .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes eqlEntraBloque { from { opacity: 0; transform: translateY(22px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.eql-hoja-pasa { animation: eqlHojaPasa .55s cubic-bezier(.2, .7, .2, 1); }
.eql-hoja-vuelve { animation: eqlHojaVuelve .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes eqlHojaPasa { from { transform: perspective(1200px) rotateY(-6deg) translateX(30px); opacity: .55; } to { transform: none; opacity: 1; } }
@keyframes eqlHojaVuelve { from { transform: perspective(1200px) rotateY(6deg) translateX(-30px); opacity: .55; } to { transform: none; opacity: 1; } }
.eql-cab-mini { display: none; text-align: center; font-family: 'Cinzel', serif; letter-spacing: 2px; text-transform: uppercase; font-size: .78rem; color: #5f729e; margin: -10px 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(35, 61, 121, 0.15); }
.eql-cab-mini span { font-size: 1rem; margin-right: 4px; }
.eql-pags { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.eql-pags span { width: 8px; height: 8px; border-radius: 50%; background: rgba(35, 61, 121, 0.2); transition: all .3s; }
.eql-pags span.leida { background: rgba(35, 61, 121, 0.45); }
.eql-pags span.on { width: 26px; border-radius: 4px; background: #1f3a7a; }
.eql-seguir { display: inline-flex; align-items: center; gap: 10px; margin: 18px auto 0; padding: 12px 26px; border-radius: 40px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #1f3a7a, #0e1b3a); color: #fff; font-family: 'Cinzel', serif; letter-spacing: 1.5px; font-size: .85rem; text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(14, 27, 58, 0.3); transition: transform .25s ease; }
.eql-seguir:hover { transform: translateY(-2px); }
.eql-seguir i { transition: transform .25s ease; }
.eql-seguir:hover i { transform: translateX(4px); }
.eql-pie { display: flex; flex-direction: column; align-items: center; }
/* Barra superior: PDF y "Vista completa" con texto */
.eql-accion, .eql-cerrar { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 38px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; font-family: 'Cinzel', serif; font-size: .74rem; letter-spacing: 1.2px; text-transform: uppercase; transition: background .2s; }
.eql-accion:hover, .eql-cerrar:hover { background: rgba(255, 255, 255, 0.18); }
.eql-cerrar { background: #fff; color: #0e1b3a; border-color: #fff; }
.eql-cerrar:hover { background: #fcf2d4; }
/* Barra del documento (Vista completa) */
.eq-lector-cta { display: flex; flex-direction: column; gap: 10px; }
.eqlc-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.eqlc-b { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 24px; border: 1px solid rgba(35, 61, 121, 0.35); background: rgba(255, 255, 255, 0.75); color: #1f3a7a; cursor: pointer; font-family: 'Cinzel', serif; font-size: .78rem; letter-spacing: 1.2px; text-transform: uppercase; }
.eqlc-b:hover { background: #fff; }
@media (max-width: 960px) {
    .eql-accion span, .eql-cerrar span { display: none; }
    .eql-accion, .eql-cerrar { width: 38px; padding: 0; justify-content: center; }
    .eql-escena { padding: 8px 10px 76px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .eql-entra, .eql-hoja-pasa, .eql-hoja-vuelve { animation: none !important; } }
.eql-cuerpo .eql-abierto { display: block !important; columns: auto !important; }
.eql-cuerpo .eql-abierto > * { margin-bottom: 14px; }
.eql-cuerpo .eql-abierto.eql-oculto, .eql-cuerpo .eql-oculto { display: none !important; }

/* =========================================================================
   Ronda 69 (3/10/2026) — lector v3, pedido de Diego: "esto no es inmersivo, esos cuadrados beige son como diapositivas…
   tendría que verse sobre un mismo fondo inmersivo, sin que parezca un papel". Se saca la hoja: el texto flota en el mismo
   cielo (estrellas + rueda que gira), en blanco lavanda, con una penumbra suave detrás para que se lea. En el celular cada
   página cambia deslizando hacia abajo (y en la compu, con la ruedita del mouse).
   El PDF y la "Vista completa" siguen con el papel de siempre: esto sólo cambia la lectura inmersiva.
   ========================================================================= */
.eq-lector .eql-tarjeta { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(6, 12, 26, 0.55) 0%, rgba(6, 12, 26, 0.25) 55%, rgba(6, 12, 26, 0) 80%); box-shadow: none; border: none; border-radius: 0; color: #fef8e4; }
.eq-lector .eql-tarjeta::before, .eq-lector .eql-tarjeta::after { display: none; }
.eq-lector .eql-cuerpo, .eq-lector .eql-cuerpo * { color: #fef8e4 !important; } /* fondos y bordes: los pasa a negativo eq-lector.js (negativo), para no borrar las barras y puntos de colores */
.eq-lector .eql-cuerpo { text-shadow: 0 1px 14px rgba(5, 9, 19, 0.95), 0 0 2px rgba(5, 9, 19, 0.6); }
.eq-lector .eql-cuerpo strong, .eq-lector .eql-cuerpo b { color: #FFFFFF !important; background-image: linear-gradient(transparent 62%, rgba(252, 242, 212, 0.22) 62%); }
.eq-lector .eql-cuerpo h1, .eq-lector .eql-cuerpo h2, .eq-lector .eql-cuerpo h3, .eq-lector .eql-cuerpo h4, .eq-lector .eql-cuerpo h5, .eq-lector .eql-cuerpo .sub-astro-title { color: #FFFFFF !important; }
.eq-lector .eql-cuerpo em, .eq-lector .eql-cuerpo .eq-res-nota { color: #feedb9 !important; }
.eq-lector .eql-cuerpo blockquote { border-left-color: rgba(252, 242, 212, 0.6) !important; background: rgba(255, 255, 255, 0.05) !important; }
.eq-lector .eql-cuerpo .vintage-data-table th { color: #fce59f !important; }
.eq-lector .eql-cuerpo hr, .eq-lector .eql-cuerpo .vintage-divider { opacity: .6; }
/* Las ruedas están dibujadas para papel claro: dentro del cielo van "en negativo" (líneas claras, mismos colores de aspectos). Eso lo hace
   eq-lector.js (recolorarRueda) cambiando los colores del SVG copiado. */
.eq-lector .eql-cuerpo img { filter: none; }
/* Encabezado del capítulo */
.eq-lector .eql-titulo { color: #FFFFFF; text-shadow: 0 0 24px rgba(252, 242, 212, 0.35); }
.eq-lector .eql-titulo::after { background: linear-gradient(90deg, transparent, rgba(252, 242, 212, 0.8), transparent); }
.eq-lector .eql-num, .eq-lector .eql-pie-txt { color: #fce59f; }
.eq-lector .eql-glifo svg { stroke: rgba(252, 242, 212, 0.75); }
.eq-lector .eql-glifo span { color: #FFFFFF; text-shadow: 0 0 18px rgba(253, 246, 225, 0.8); }
.eq-lector .eql-cab-mini { color: #fce59f; border-bottom-color: rgba(252, 242, 212, 0.18); }
.eq-lector .eql-pags span { background: rgba(252, 242, 212, 0.25); }
.eq-lector .eql-pags span.leida { background: rgba(252, 242, 212, 0.5); }
.eq-lector .eql-pags span.on { background: #FFFFFF; }
.eq-lector .eql-seguir { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(252, 242, 212, 0.55); box-shadow: 0 0 22px rgba(252, 242, 212, 0.12); backdrop-filter: blur(4px); }
.eq-lector .eql-seguir:hover { background: rgba(255, 255, 255, 0.16); }
.eq-lector .eql-final h3 { color: #FFFFFF; } .eq-lector .eql-final p { color: #feedb9; } .eq-lector .eql-final-glifo { color: #fcf2d4; }
.eq-lector .eql-btn { background: #FFFFFF; color: #0e1b3a; border-color: #FFFFFF; } .eq-lector .eql-btn-sec { background: transparent; color: #FFFFFF; border-color: rgba(252, 242, 212, 0.55); }
/* Cambio de página: ya no es una hoja que se da vuelta, el texto sube desde el cielo (hacia abajo = avanzar). */
.eq-lector .eql-hoja-pasa { animation: eqlSubeCielo .6s cubic-bezier(.2, .7, .2, 1); }
.eq-lector .eql-hoja-vuelve { animation: eqlBajaCielo .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes eqlSubeCielo { from { transform: translateY(60px); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes eqlBajaCielo { from { transform: translateY(-60px); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
.eql-desliza { display: none; }
@media (max-width: 960px) {
    .eq-lector .eql-seguir i { transform: rotate(90deg); }
    .eq-lector .eql-seguir:hover i { transform: rotate(90deg) translateY(-3px); }
    .eql-desliza { display: block; margin-top: 10px; font-family: 'Cinzel', serif; font-size: .66rem; letter-spacing: 2px; text-transform: uppercase; color: #fce59f; animation: eqlRebota 2.2s ease-in-out infinite; }
    .eq-lector .eql-tarjeta { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 960px) {
    /* el aviso "seguís donde lo dejaste" salía angosto y encima de los botones */
    .eql-escena { justify-content: safe center; } /* lector v3: el texto queda en el medio del cielo, no pegado arriba */
    .eql-retomar { left: 12px; right: 12px; bottom: 84px; transform: none; justify-content: space-between; padding: 10px 10px 10px 16px; border-radius: 16px; font-size: .95rem; }
    .eql-retomar button { flex: 0 0 auto; }
}
@keyframes eqlRebota { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eql-desliza { animation: none; } }

/* Ronda 69 (3/10/2026, revisión del lector v3): tablas de posiciones que entran enteras en celulares angostos (390 px: la columna "Mov." se cortaba)
   y sin "tirar para refrescar" del navegador al deslizar hacia abajo para volver a la página anterior. */
@media (max-width: 480px) {
    .eql-cuerpo .vintage-data-table th { font-size: .6rem; padding: 8px 2px; letter-spacing: .3px; }
    .eql-cuerpo .vintage-data-table td { font-size: .86rem; padding: 9px 2px; }
    .eql-cuerpo .sym-planet-vintage { font-size: 1.05rem; margin-right: 3px; }
}
html.eq-lector-abierto, html.eq-lector-abierto body, .eq-lector, .eql-escena { overscroll-behavior: none; }

/* Ronda 69 (3/10/2026, pedido de Diego): la rueda del fondo centrada con el texto (en la compu el texto está corrido por el
   mapa de capítulos de la izquierda, 250 px) y una X clara para salir de la lectura. */
@media (min-width: 961px) { .eql-rueda { left: calc(50% + 125px); top: calc(50% + 29px); } } /* + la mitad de la barra de arriba (58 px) para que también quede centrada hacia arriba/abajo */
/* Celular: con la X la barra se quedaba corta y el logo y el "1 / 22" se partían en dos renglones. */
.eql-marca, .eql-cuenta { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 960px) {
    .eql-barra { gap: 8px; padding: 0 14px; }
    .eql-x { margin-left: 0; }
}
@media (max-width: 480px) { .eql-marca { letter-spacing: 3px; font-size: .95rem; } }
.eql-x { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; font-size: 1.05rem; transition: background .2s, transform .2s; flex: 0 0 38px; }
.eql-x:hover { background: rgba(255, 255, 255, 0.22); transform: rotate(90deg); }

/* Ronda 69 (3/10/2026): listas armadas por la app (con clase, p. ej. la Numerología del vínculo) sin viñetas sueltas, y los textos chicos
   de las tarjetas de Compatibilidad legibles dentro de la lectura inmersiva. */
.eq-lector .eql-cuerpo ul[data-eql-app], .eq-lector .eql-cuerpo ol[data-eql-app] { list-style: none; padding-left: 0; }
.eq-lector .eql-cuerpo li[data-eql-app] { list-style: none; }
.eq-lector .eql-cuerpo em, .eq-lector .eql-cuerpo small { font-size: max(.85rem, 1em); }
.eq-lector .eql-cuerpo .sin-num-linea, .eq-lector .eql-cuerpo .sin-cruce p { font-size: 1.02rem; }
.eq-lector .eql-cuerpo .sin-comp span { font-size: .8rem; letter-spacing: 1.5px; }
.eq-lector .eql-cuerpo .sin-comp strong { font-size: 1.15rem; }
.eq-lector .eql-ir-form { display: flex; justify-content: center; margin: 22px 0 6px; }
.eq-lector .eql-cuerpo .eql-ir-form .eql-btn, .eq-lector .eql-cuerpo .eql-ir-form .eql-btn * { background-color: #FFFFFF !important; color: #0e1b3a !important; text-shadow: none !important; }
.eq-lector .eql-cuerpo .eql-ir-form .eql-btn { padding: 14px 30px; font-size: .9rem; border: none; box-shadow: 0 0 26px rgba(252, 242, 212, 0.35); }


/* Ronda 69 (3/10/2026, revisión de la nube): los retoques de legibilidad de Compatibilidad ("#view-sinastria ..." en page-acceso-vip.css) no llegan a
   la lectura inmersiva, que cuelga del <body> y no de esa vista: las etiquetas chicas (.58 a .62rem = 9-10 px) quedaban diminutas ("letras muy pequeñas").
   Se repiten acá, un poco más grandes, y las cartas del Tarot del vínculo se ven más bajas para que las 6 entren en una página del celular. */
.eq-lector .eql-cuerpo .sin-label, .eq-lector .eql-cuerpo .sin-tipo, .eq-lector .eql-cuerpo .sin-elem span, .eq-lector .eql-cuerpo .sin-num-afinidad span,
.eq-lector .eql-cuerpo .sin-toggle, .eq-lector .eql-cuerpo .sin-leyenda, .eq-lector .eql-cuerpo .sin-area-tit, .eq-lector .eql-cuerpo .sin-parte-nom { font-size: .9rem; }
.eq-lector .eql-cuerpo .sin-cruce-cab em, .eq-lector .eql-cuerpo .sin-parte-nom em, .eq-lector .eql-cuerpo .sin-cons-preg span,
.eq-lector .eql-cuerpo .sin-tar-carta figcaption span, .eq-lector .eql-cuerpo .sin-anillo span { font-size: .8rem; }
.eq-lector .eql-cuerpo .sin-casas-lista li { font-size: 1.05rem; }
.eq-lector .eql-cuerpo .sin-subtitulo, .eq-lector .eql-cuerpo .sin-num-sub { font-size: 1rem; }
.eq-lector .eql-cuerpo .sin-chip { font-size: .92rem; }
.eq-lector .eql-cuerpo .sin-tar-carta figcaption strong { font-size: .95rem; }
.eq-lector .eql-cuerpo .sin-tar-img { aspect-ratio: 2 / 2.9; }
eql-t, eql-l { display: inline; }

/* Ronda 69 (3/10/2026, pedido de Diego: "no te deja hacer la pregunta… no hay botón de enviar ni hace nada al presionar Enter"): formulario vivo
   dentro de la lectura (eq-lector.js, formularioVivo): campo, preguntas de ejemplo, botón blanco y la espera mientras llega la respuesta. */
.eq-lector .eql-form { margin: 20px 0 8px; text-align: left; }
.eq-lector .eql-form [hidden] { display: none !important; }
.eq-lector .eql-cuerpo .eql-form-lbl { display: block; margin: 0 0 8px; font-family: 'Cinzel', serif; font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; color: #feedb9 !important; }
.eq-lector .eql-cuerpo .eql-form-campo { display: block; width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(252, 242, 212, 0.6); background: rgba(255, 255, 255, 0.09); font-family: 'EB Garamond', Georgia, serif; font-size: 1.2rem; line-height: 1.5; padding: 12px 14px; resize: none; outline: none; text-shadow: none; }
.eq-lector .eql-cuerpo textarea.eql-form-campo { min-height: 5.4em; }
.eq-lector .eql-cuerpo .eql-form-campo:focus { border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); }
.eq-lector .eql-cuerpo .eql-form-campo::placeholder { color: rgba(252, 242, 212, 0.6); }
.eq-lector .eql-cuerpo .eql-form-campo:disabled { opacity: .6; }
.eq-lector .eql-form-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.eq-lector .eql-form-chips:empty { display: none; }
.eq-lector .eql-cuerpo .eql-chip { font-family: 'EB Garamond', Georgia, serif; font-size: 1rem; line-height: 1.3; text-align: left; padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(252, 242, 212, 0.5); background: rgba(255, 255, 255, 0.07); cursor: pointer; }
.eq-lector .eql-cuerpo .eql-chip:hover { background: rgba(255, 255, 255, 0.18); }
.eq-lector .eql-form-acc { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 16px; }
.eq-lector .eql-cuerpo .eql-form-enviar, .eq-lector .eql-cuerpo .eql-form-enviar * { background-color: #FFFFFF !important; color: #0e1b3a !important; text-shadow: none !important; }
.eq-lector .eql-cuerpo .eql-form-enviar { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; font-size: .9rem; border: none; box-shadow: 0 0 26px rgba(252, 242, 212, 0.35); }
.eq-lector .eql-form-enviar:disabled { opacity: .55; cursor: wait; }
.eq-lector .eql-form-costo { font-size: 1rem; opacity: .85; }
.eq-lector .eql-cuerpo .eql-form-aviso { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 120, 120, 0.12); border: 1px solid rgba(255, 170, 170, 0.5); color: #FFD6D6 !important; font-size: 1.05rem; }
.eq-lector .eql-form-espera { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 1.15rem; font-style: italic; }

/* Ronda 69 (revisión de la nube): el anillo del porcentaje (Compatibilidad). En la lectura queda centrado y con el centro oscuro (en el papel era claro: aquí
   se volvía un disco lleno), con la parte llena en lavanda clara para que se vea sobre el cielo. */
.eq-lector .eql-cuerpo .sin-anillo { margin: 8px auto 16px; background: conic-gradient(#fff1c6 calc(var(--p) * 1%), rgba(252, 242, 212, 0.16) 0); }
.eq-lector .eql-cuerpo .sin-anillo > div { background: #0b1630 !important; box-shadow: inset 0 0 0 1px rgba(252, 242, 212, 0.4); }
/* Ronda 69 (revisión de la nube): con el teclado del celular abierto las flechas de abajo tapaban las preguntas de ejemplo del formulario. */
.eq-lector:has(.eql-form-campo:focus) .eql-flechas { display: none; }


/* Ronda 69 (4/10/2026, revisión de la nube): en pantallas bajas (celulares de 740 px de alto o menos) el aviso "Desliza" y el aire sobre el pie le robaban ~45 px a cada página:
   la grilla de cartas del Tarot y la rueda se salían 11 a 27 px y el botón "Seguir leyendo" quedaba cortado. Con el botón y las flechas alcanza para saber cómo seguir. */
@media (max-width: 960px) and (max-height: 780px) {
    .eql-desliza { display: none; }
    .eql-pie { margin-top: 16px; }
}

/* Ronda 69 (lector v3.2): el botón del capítulo siguiente no puede ser más ancho que la pantalla (con 'max-width: 100%' solo no alcanzaba: .eql-prox se ajusta a su contenido dentro de una columna flexible). */
.eql-prox { align-self: stretch; max-width: 100%; }
.eql-siguiente { min-width: 0; }

/* Ronda 69 (lector v3.2): en celulares la cabecera del capítulo (glifo + número + título) se comía la mitad de la primera página: se compacta para que el primer párrafo entre sin achicarse. */
@media (max-width: 480px) {
    .eql-glifo { width: 56px; height: 56px; margin-bottom: 6px; }
    .eql-glifo span { font-size: 1.6rem; }
    .eql-cab { margin-bottom: 14px; }
    .eql-titulo::after { margin-top: 10px; }
}

/* Ronda 69 (lector v3.2): el cartel "Seguís en el capítulo N, donde lo dejaste" (6 s) tapaba el botón "Seguir leyendo" en celulares angostos (a 360 px ocupaba 119 px: el texto se partía en 4 renglones
   al lado del botón). En celular va arriba, en una sola columna, y deja pasar los toques (sólo su botón los recibe). */
@media (max-width: 480px) {
    .eql-retomar { top: 112px; bottom: auto; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; pointer-events: none; }
    .eql-retomar button { pointer-events: auto; }
}

/* Ronda 69 (lector v3.2): la lista de capítulos de la izquierda (compu) tenía la letra en 10,2 px y a media opacidad sobre un violeta apagado (contraste 2,3:1): los capítulos sin leer casi no se veían. */
.eql-punto { color: #f5dd94; }
.eql-punto-tit { font-size: .72rem; opacity: .85; }

/* Ronda 69 (lector v3.3): si en la última página no entra ni achicando el bloque, el anuncio del capítulo siguiente pierde su rótulo ("Tu viaje sigue en") y queda sólo el botón; nunca va solo en una página. */
.eql-escena.eql-prox-compacto .eql-pie-txt { display: none; }

/* Ronda 69 (lector v3.3): la página se mide con el texto corrido y se muestra con una etiqueta por letra (efecto de escritura). Con kerning y ligaduras, cada letra suelta se acomoda distinto
   que en el texto corrido y la página medida salía hasta 40 px más alta que la escrita (un renglón de más: el botón 'Seguir leyendo' quedaba tapado). Sin ellos las dos medidas son idénticas. */
.eql-cuerpo { font-kerning: none; font-variant-ligatures: none; text-rendering: geometricPrecision; } /* geometricPrecision: avances de letra sin redondear, igual en la letra suelta que en el texto corrido (en pantallas de 1x el redondeo de cada letra suelta sumaba un renglón más) */

/* Ronda 69 (4/10/2026, celular de verdad): el formulario vivo tiene que entrar ENTERO en una página de celular (342 px de alto en un 360 x 740): campo más bajo, preguntas de ejemplo más
   compactas y, en pantallas bajas, menos preguntas de ejemplo (siguen siendo opcionales). */
@media (max-width: 480px) {
    .eq-lector .eql-form { margin: 12px 0 6px; }
    .eq-lector .eql-cuerpo .eql-form-lbl { margin-bottom: 6px; }
    .eq-lector .eql-cuerpo textarea.eql-form-campo { min-height: 0; height: 5.4rem; font-size: 1.1rem; line-height: 1.4; padding: 10px 12px; }
    .eq-lector .eql-form-chips { gap: 6px; margin-top: 8px; }
    .eq-lector .eql-cuerpo .eql-chip { font-size: .95rem; line-height: 1.25; padding: 5px 12px; }
    .eq-lector .eql-form-acc { margin-top: 12px; gap: 8px 14px; }
    .eq-lector .eql-form-costo { font-size: .92rem; }
}
@media (max-width: 480px) and (max-height: 760px) { .eq-lector .eql-form-chips .eql-chip:nth-child(n+3) { display: none; } }
@media (max-width: 480px) and (max-height: 690px) { .eq-lector .eql-form-chips .eql-chip:nth-child(n+2) { display: none; } }

/* Ronda 69 (4/10/2026, celular de verdad): en un celular de 700 px de alto o menos el glifo del capítulo (56 px) le quita a la primera página lo que necesita el primer bloque: se oculta. */
@media (max-width: 480px) and (max-height: 700px) {
    .eql-glifo { display: none; }
    .eql-cab { margin-bottom: 10px; }
}

/* Ronda 69 (4/10/2026, celular chico): cabecera sin glifo cuando el título ocupa 3 renglones y a la primera página le quedan menos de 150 px (lo decide paginar() con la clase eql-cab-chica). */
.eql-escena.eql-cab-chica .eql-glifo { display: none; }
.eql-escena.eql-cab-chica .eql-cab { margin-bottom: 10px; }

/* Ronda 69 (4/10/2026): en pantallas de poca altura (tablets, notebooks de 768 px) el glifo grande del capítulo (104 px) le quita a la primera página lo que necesita el primer bloque
   (quedaba el recuadro "Pareja · Bruno" solo y la rueda del porcentaje en la página siguiente). */
@media (min-width: 481px) and (max-height: 860px) {
    .eql-glifo { width: 76px; height: 76px; margin-bottom: 8px; }
    .eql-glifo span { font-size: 2rem; }
    .eql-cab { margin-bottom: 18px; }
}

/* Ronda 69 (4/10/2026, revisión de Numerología): los <small> del reporte heredaban 21 px (1em del padre): las etiquetas de las Realizaciones y de los números se veían casi como el texto. */
.eq-lector .eql-cuerpo .nx-trad small, .eq-lector .eql-cuerpo .nx-etapa > small { font-size: .8rem; letter-spacing: 1px; }

/* Ronda 69 (4/10/2026, revisión de Numerología): la tarjeta del Sendero de Vida (círculo + texto) con su diseño en el lector (las reglas del reporte llevan el prefijo #pdf-export-numerologia y acá no llegan). */
.eq-lector .eql-cuerpo .num-hero { display: flex; gap: 22px; align-items: center; padding: 22px; border: 1px solid rgba(252, 242, 212, 0.35); border-radius: 4px; background: rgba(255, 255, 255, 0.05); }
.eq-lector .eql-cuerpo .num-hero-circulo { flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; border: 2px solid #fcf2d4; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 2.6rem; font-weight: 700; background: rgba(252, 242, 212, 0.12); }
.eq-lector .eql-cuerpo .num-hero-texto .num-clave { font-size: 1.35rem; }
@media (max-width: 600px) { .eq-lector .eql-cuerpo .num-hero { flex-direction: column; text-align: center; padding: 16px; } .eq-lector .eql-cuerpo .num-hero-circulo { width: 88px; height: 88px; font-size: 2.1rem; } }

/* Ronda 69 (4/10/2026, revisión de Numerología): el bloque "Modo 1/2/3" en celular, compacto, para que entre en una pantalla. */
@media (max-width: 600px) {
  .eq-lector .eql-cuerpo .nx-modos-bloque { padding: 10px 12px; }
  .eq-lector .eql-cuerpo .nx-modos { grid-template-columns: 1fr; gap: 8px; }
  .eq-lector .eql-cuerpo .nx-modo { display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: center; column-gap: 10px; text-align: left; }
  .eq-lector .eql-cuerpo .nx-modo span { grid-column: 1; margin: 0; }
  .eq-lector .eql-cuerpo .nx-modo-cuenta { grid-column: 2; margin: 0; }
  .eq-lector .eql-cuerpo .nx-modo strong { grid-column: 3; }
}

/* Ronda 69 (4/10/2026, revisión de Tránsitos y Numerología): textos del marco de la lectura (rótulo "Tu viaje sigue en", aviso "Desliza") en 11,5 px o más (estaban en 10,5 a 10,9 px),
   y la leyenda de los dos tipos de número de la Numerología con sus marcadores visibles sobre el cielo. */
.eql-pie-txt { font-size: .72rem; }
@media (max-width: 960px) { .eql-desliza { font-size: .72rem; } }
.eq-lector .eql-cuerpo .num-leyenda-doble { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.eq-lector .eql-cuerpo .num-leyenda-doble > span { display: inline-flex; align-items: center; gap: 6px; }
.eq-lector .eql-cuerpo .nx-punto { margin-left: 0; border-color: #fcf2d4; }

/* =========================================================================
   Ronda 69 (4/10/2026): acentos dorados de Equinox 13 (Diego: "con el fondo del tema de Equinox").
   El texto corrido sigue claro sobre el cielo; los títulos, la marca, el progreso y los botones van en los dorados del sitio.
   ========================================================================= */
.eq-lector .eql-marca, .eq-lector .eql-titulo, .eq-lector .eql-final h3, .eq-lector .eql-cuerpo h1, .eq-lector .eql-cuerpo h2,
.eq-lector .eql-cuerpo h3, .eq-lector .eql-cuerpo h4 { color: #FDE08B !important; }
.eq-lector .eql-cuerpo h5, .eq-lector .eql-cuerpo .sub-astro-title, .eq-lector .eql-num, .eq-lector .eql-pie-txt,
.eq-lector .eql-cap-tit, .eq-lector .eql-cuerpo .sin-subtitulo, .eq-lector .eql-cuerpo .sin-num-sub { color: #D4AF37 !important; }
.eq-lector .eql-cuerpo strong { color: #FDE08B; }
.eq-lector .eql-titulo::after { background: linear-gradient(90deg, transparent, #D4AF37, transparent) !important; }
.eq-lector .eql-progreso > div { background: linear-gradient(90deg, #D4AF37, #FDE08B) !important; }
.eq-lector .eql-punto.actual .eql-punto-glifo { background: #D4AF37 !important; color: #020611 !important; border-color: #FDE08B !important; }
.eq-lector .eql-punto.visto .eql-punto-glifo { border-color: rgba(212, 175, 55, 0.7) !important; }
.eq-lector .eql-siguiente, .eq-lector .eql-ant, .eq-lector .eql-sig, .eq-lector .eql-x, .eq-lector .eql-accion { border-color: rgba(212, 175, 55, 0.55) !important; }
.eq-lector .eql-cerrar { background: linear-gradient(135deg, #D4AF37, #FDE08B) !important; color: #020611 !important; border-color: #D4AF37 !important; }
.eq-lector .eql-btn { background: linear-gradient(135deg, #D4AF37, #FDE08B) !important; color: #020611 !important; border-color: #D4AF37 !important; }
.eq-lector-cta .eqlc-vivir { border-color: rgba(212, 175, 55, 0.6) !important; }
.eq-lector-cta .eqlc-txt strong, .eq-lector-cta .eqlc-glifo { color: #FDE08B !important; }

/* =========================================================================
   Ronda 70 (4/10/2026) — PIEL DE EQUINOX 13. Pedido de Diego: "tiene que tener el mismo formato de vista inmersiva pero
   NO con la estética de la réplica". Se conserva el formato (capítulos, páginas que se escriben, mapa, progreso, flechas) y se
   cambia todo lo visual por lo de la app de Equinox:
     · fondo quieto azul noche con el doble filete dorado del reporte (propuesta 2, elegida por Diego): sin estrellas que se mueven ni rueda;
     · texto en el crema de Equinox (--eq-luz), títulos en Cinzel dorado, adornos ✦;
     · barra de arriba igual a la de la app (vidrio oscuro con línea dorada) y el logo del sol con el 13 dorado;
     · botones rectos como los de Equinox (dorado lleno o contorno dorado), no píldoras blancas;
     · capítulos marcados con rombos dorados.
   ========================================================================= */
.eq-lector {
    background: radial-gradient(ellipse 70% 60% at 58% 50%, #16263a 0%, #111c27 55%, #0b131c 100%);
    color: #ecdcc0; font-family: 'EB Garamond', Georgia, serif;
}
/* Fondo quieto (propuesta 2, elegida por Diego el 4/10/2026): azul noche liso con el doble filete dorado y los ✦ en las
   esquinas, como el marco del reporte. Sin estrellas que se mueven ni rueda de signos detrás. */
.eq-lector .eql-rueda, .eq-lector .eql-cielo { display: none; }
.eql-marco { position: absolute; inset: 70px 14px 14px 14px; border: 1px solid rgba(201, 162, 78, 0.55); pointer-events: none; z-index: 1; }
.eql-marco::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(201, 162, 78, 0.3); }
.eql-marco i { position: absolute; font-style: normal; color: #c9a24e; font-size: 1.05rem; line-height: 1; }
.eql-marco i:nth-child(1) { left: -8px; top: -9px; } .eql-marco i:nth-child(2) { right: -8px; top: -9px; }
.eql-marco i:nth-child(3) { left: -8px; bottom: -8px; } .eql-marco i:nth-child(4) { right: -8px; bottom: -8px; }
@media (min-width: 961px) { .eq-lector .eql-mapa { top: 84px; left: 14px; } }
@media (max-width: 960px) { .eql-marco { inset: 112px 6px 6px 6px; } .eql-marco i { font-size: .85rem; } }
/* Barra superior = la de la app */
.eq-lector .eql-barra { background: rgba(9, 16, 24, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(201, 162, 78, 0.34); color: #ecdcc0; }
.eq-lector .eql-marca { display: inline-flex; align-items: center; gap: 10px; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 4px; font-size: 1rem; color: #ecdcc0 !important; }
.eq-lector .eql-marca b { color: #c9a24e; font-weight: 700; margin-left: -4px; }
.eq-lector .eql-sol { width: 24px; height: 24px; color: #c9a24e; flex: 0 0 24px; }
.eq-lector .eql-cap-tit { color: #e2c47f !important; }
.eq-lector .eql-cuenta { color: rgba(236, 220, 192, 0.75); }
.eq-lector .eql-progreso { background: rgba(201, 162, 78, 0.15); }
.eq-lector .eql-progreso > div { background: linear-gradient(90deg, #b98f3f, #e2c47f) !important; box-shadow: none; }
/* Botones rectos de Equinox */
.eq-lector .eql-accion, .eq-lector .eql-x, .eq-lector .eql-flechas button, .eq-lector .eql-seguir, .eq-lector .eql-siguiente, .eq-lector .eql-btn-sec {
    background: rgba(9, 16, 24, 0.55) !important; color: #e2c47f !important; border: 1px solid rgba(201, 162, 78, 0.55) !important;
    border-radius: 3px !important; box-shadow: none !important; font-family: 'Cinzel', serif; letter-spacing: 2px;
}
.eq-lector .eql-accion:hover, .eq-lector .eql-x:hover, .eq-lector .eql-flechas button:hover, .eq-lector .eql-seguir:hover, .eq-lector .eql-siguiente:hover, .eq-lector .eql-btn-sec:hover {
    border-color: #e2c47f !important; color: #ecdcc0 !important; background: rgba(201, 162, 78, 0.12) !important;
}
.eq-lector .eql-x:hover { transform: none; }
.eq-lector .eql-cerrar, .eq-lector .eql-btn, .eq-lector .eql-cuerpo .eql-ir-form .eql-btn, .eq-lector .eql-cuerpo .eql-form-enviar {
    background: linear-gradient(180deg, #d8b467, #b98f3f) !important; color: #16222f !important; border: 1px solid #e3c784 !important; border-radius: 3px !important;
    font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}
.eq-lector .eql-cuerpo .eql-ir-form .eql-btn *, .eq-lector .eql-cuerpo .eql-form-enviar * { background-color: transparent !important; color: #16222f !important; }
.eq-lector .eql-cerrar:hover, .eq-lector .eql-btn:hover { background: linear-gradient(180deg, #e3c27a, #c79d4c) !important; }
.eq-lector .eql-escena.al-final .eql-siguiente { animation: eqlLlamaOro 1.8s ease-in-out infinite; }
@keyframes eqlLlamaOro { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 78, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(201, 162, 78, 0); } }
.eq-lector .eql-anillo, .eq-lector .eql-sig-glifo { color: #e2c47f; }
.eq-lector .eql-anillo svg circle { stroke: rgba(201, 162, 78, 0.2); }
.eq-lector .eql-anillo svg .eql-anillo-av { stroke: #e2c47f; }
/* Texto y títulos */
.eq-lector .eql-tarjeta { color: #ecdcc0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(9, 16, 24, 0.55) 0%, rgba(9, 16, 24, 0.25) 55%, rgba(9, 16, 24, 0) 80%); }
.eq-lector .eql-cuerpo, .eq-lector .eql-cuerpo * { color: #ecdcc0 !important; }
.eq-lector .eql-cuerpo { text-shadow: 0 1px 12px rgba(9, 16, 24, 0.95), 0 0 2px rgba(9, 16, 24, 0.6); }
.eq-lector .eql-cuerpo strong, .eq-lector .eql-cuerpo b { color: #e2c47f !important; background-image: linear-gradient(transparent 62%, rgba(201, 162, 78, 0.2) 62%); }
.eq-lector .eql-cuerpo em, .eq-lector .eql-cuerpo .eq-res-nota { color: #e2c47f !important; }
.eq-lector .eql-marca, .eq-lector .eql-titulo, .eq-lector .eql-final h3, .eq-lector .eql-cuerpo h1, .eq-lector .eql-cuerpo h2, .eq-lector .eql-cuerpo h3, .eq-lector .eql-cuerpo h4 { color: #e2c47f !important; }
.eq-lector .eql-cuerpo h5, .eq-lector .eql-cuerpo .sub-astro-title, .eq-lector .eql-num, .eq-lector .eql-pie-txt, .eq-lector .eql-cuerpo .vintage-data-table th,
.eq-lector .eql-cuerpo .sin-subtitulo, .eq-lector .eql-cuerpo .sin-num-sub, .eq-lector .eql-cuerpo .eql-form-lbl, .eq-lector .eql-desliza { color: #c9a24e !important; }
.eq-lector .eql-titulo { text-shadow: 0 2px 16px rgba(9, 16, 24, 0.9); letter-spacing: 3px; }
.eq-lector .eql-titulo::after { content: '✦'; width: auto; height: auto; background: none !important; color: #c9a24e; font-size: .8rem; letter-spacing: 0; margin: 14px auto 0;
    border-top: 0; padding: 0; display: block; text-align: center; position: relative; }
.eq-lector .eql-cab { position: relative; }
.eq-lector .eql-glifo svg { stroke: rgba(201, 162, 78, 0.8); }
.eq-lector .eql-glifo span { color: #e2c47f; text-shadow: none; }
.eq-lector .eql-cab-mini { color: #c9a24e; border-bottom-color: rgba(201, 162, 78, 0.3); }
.eq-lector .eql-cuerpo blockquote { border-left-color: #c9a24e !important; background: rgba(201, 162, 78, 0.07) !important; }
.eq-lector .eql-final p { color: rgba(236, 220, 192, 0.85); } .eq-lector .eql-final-glifo { color: #c9a24e; }
/* Páginas: rayitas doradas en vez de puntos */
.eq-lector .eql-pags span { width: 14px; height: 2px; border-radius: 0; background: rgba(201, 162, 78, 0.3); }
.eq-lector .eql-pags span.leida { background: rgba(201, 162, 78, 0.6); }
.eq-lector .eql-pags span.on { width: 30px; border-radius: 0; background: #e2c47f; }
/* Mapa de capítulos: rombos dorados (el rombo es un fondo girado; el símbolo queda derecho) */
.eq-lector .eql-punto, .eq-lector .eql-punto.visto { color: rgba(236, 220, 192, 0.8); }
.eq-lector .eql-punto-glifo, .eq-lector .eql-punto.visto .eql-punto-glifo, .eq-lector .eql-punto.actual .eql-punto-glifo {
    position: relative; isolation: isolate; border: none !important; background: none !important; box-shadow: none !important; transform: none !important; color: #e2c47f !important; font-size: .78rem;
}
.eq-lector .eql-punto-glifo::before { content: ''; position: absolute; inset: 4px; z-index: -1; transform: rotate(45deg); border: 1px solid rgba(201, 162, 78, 0.45); background: rgba(9, 16, 24, 0.8); transition: all .35s ease; }
.eq-lector .eql-punto.visto .eql-punto-glifo::before { border-color: rgba(201, 162, 78, 0.9); }
.eq-lector .eql-punto.actual .eql-punto-glifo { color: #16222f !important; }
.eq-lector .eql-punto.actual .eql-punto-glifo::before { inset: 2px; background: #c9a24e; border-color: #e2c47f; box-shadow: 0 0 0 4px rgba(201, 162, 78, 0.15); }
.eq-lector .eql-punto.actual .eql-punto-tit { color: #e2c47f; }
.eq-lector .eql-mapa-svg line { stroke: rgba(201, 162, 78, 0.25); }
.eq-lector .eql-mapa-svg line.on { stroke: rgba(226, 196, 127, 0.7); filter: none; }
/* Aviso "seguís donde lo dejaste", formulario y anillo del porcentaje */
.eq-lector .eql-retomar { background: rgba(9, 16, 24, 0.92); border: 1px solid rgba(201, 162, 78, 0.5); border-radius: 3px; color: #ecdcc0; }
.eq-lector .eql-retomar button { background: linear-gradient(180deg, #d8b467, #b98f3f); color: #16222f; border-radius: 3px; }
.eq-lector .eql-cuerpo .eql-form-campo { border-radius: 3px; border-color: rgba(201, 162, 78, 0.55); background: rgba(9, 16, 24, 0.55); }
.eq-lector .eql-cuerpo .eql-form-campo:focus { border-color: #e2c47f; box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.18); }
.eq-lector .eql-cuerpo .eql-form-campo::placeholder { color: rgba(236, 220, 192, 0.55); }
.eq-lector .eql-cuerpo .eql-chip { border-radius: 3px; border-color: rgba(201, 162, 78, 0.45); background: rgba(9, 16, 24, 0.5); }
.eq-lector .eql-cuerpo .eql-chip:hover { background: rgba(201, 162, 78, 0.12); }
.eq-lector .eql-cuerpo .sin-anillo { background: conic-gradient(#e2c47f calc(var(--p) * 1%), rgba(201, 162, 78, 0.16) 0); }
.eq-lector .eql-cuerpo .sin-anillo > div { background: #111c27 !important; box-shadow: inset 0 0 0 1px rgba(201, 162, 78, 0.4); }
.eq-lector .eql-cuerpo .num-hero { border-color: rgba(201, 162, 78, 0.4); background: rgba(9, 16, 24, 0.45); }
.eq-lector .eql-cuerpo .num-hero-circulo { border-color: #c9a24e; }
.eq-lector .eql-cuerpo .nx-punto { border-color: #c9a24e; }
@media (max-width: 960px) {
    .eq-lector .eql-flechas { background: linear-gradient(0deg, rgba(9, 16, 24, 0.92), rgba(9, 16, 24, 0)); }
}
/* Botón de entrada (arriba de cada reporte): panel oscuro de Equinox con borde dorado, no el degradé azul redondeado */
.eq-lector-cta button, .eq-lector-cta .eqlc-vivir {
    border-radius: 4px !important; background: rgba(9, 16, 24, 0.88) !important; border: 1px solid rgba(201, 162, 78, 0.6) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important; color: #ecdcc0;
}
.eq-lector-cta button::before { background: linear-gradient(110deg, transparent 30%, rgba(201, 162, 78, 0.16) 45%, transparent 60%); }
.eq-lector-cta .eqlc-glifo { color: #c9a24e !important; text-shadow: none; }
.eq-lector-cta .eqlc-txt strong { color: #e2c47f !important; }
.eq-lector-cta .eqlc-txt small { color: rgba(236, 220, 192, 0.8); }
.eq-lector-cta .eqlc-flecha { color: #c9a24e; }
.eq-lector-cta .eqlc-b { border-radius: 3px; border-color: rgba(201, 162, 78, 0.55); background: rgba(9, 16, 24, 0.85); color: #e2c47f; }
.eq-lector-cta .eqlc-b:hover { background: rgba(201, 162, 78, 0.14); color: #ecdcc0; }