/* CSS CORE Y COMPARTIDO (Mantiene la UI Dark para el Dashboard) */
    /* Ronda 10 (23/09): "overflow-x: hidden" en html Y body A LA VEZ (como estaba acá) es un bug
       conocido de Chrome/Chromium que rompe "position: sticky" para CUALQUIER elemento de la
       página -- no sólo el nuevo .eq-quicknav, sino que .app-topbar (la barra superior) y
       .sidebar-nav (el menú lateral) YA estaban rotos por esto desde antes (se probó y confirmó:
       al scrollear, los dos se iban con el resto del contenido en vez de quedarse fijos, aunque su
       CSS decía "sticky"). Sacando overflow-x sólo de "html" (dejándolo en "body", que ya alcanza
       para evitar el scroll horizontal -- se probó de forma aislada) se arregla el sticky de los
       tres a la vez, sin tocar nada del bloqueo de scroll horizontal que ya funcionaba. */
    html, body { width: 100%; max-width: 100vw; margin: 0; padding: 0; background: #050508; }
    body { overflow-x: hidden; }
    /* Ronda 12 (23/09): que la app "se sienta" nativa una vez instalada -- dos detalles chicos
       que un navegador normal siempre resuelve por vos y que una PWA tiene que resolver sola.
       "overscroll-behavior" es una propiedad distinta de "overflow-x" (la del bug de sticky de
       arriba), así que agregarla acá no reabre ese problema. */
    html, body { overscroll-behavior-y: contain; } /* sin rebote elástico raro en los bordes al scrollear */
    /* Compensa el notch/esquinas redondeadas en horizontal -- en un teléfono sin notch esto da
       0px y no cambia nada; necesita viewport-fit=cover en header.php (Ronda 12) para no dar
       siempre 0px. */
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .workspace-block { display: none; animation: fadeIn 0.5s ease; width: 100%; }
    .workspace-block.active-view { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    .btn-mystic { background: rgba(168, 130, 79, 0.05); color: #a8824f; font-family: 'Cinzel', serif; font-weight: 700; padding: 15px 30px; border: 1px solid rgba(168, 130, 79, 0.5); border-radius: 4px; cursor: pointer; letter-spacing: 2px; transition: 0.4s; font-size: 0.9rem; text-transform: uppercase; display: inline-flex; justify-content:center; align-items:center; gap: 10px; }
    .btn-mystic:hover { background: rgba(168, 130, 79, 0.15); box-shadow: 0 0 20px rgba(168, 130, 79, 0.2); color: #fff; border-color: #a8824f;}

    /* Ronda 50: aviso de "esta lectura se generó en otro idioma" (astral-idioma-banner /
       transitos-idioma-banner en page-acceso-vip.php). Vive aparte del resto porque no es un
       estado vacío ni un resultado: es una advertencia puntual arriba de un reporte que SÍ se
       está mostrando (con los datos ya traducidos), así que se mantiene chica y no bloquea nada. */
    /* Ronda 60: el aviso pasó de caja grande a una tira finita de una sola fila (ícono, frase corta, botón de texto y ×),
       para que no tape ni empuje la lectura. */
    #astral-idioma-banner, #transitos-idioma-banner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background: rgba(168, 130, 79, 0.07); border: 1px solid rgba(168, 130, 79, 0.28); border-left: 3px solid #a8824f; border-radius: 4px; padding: 9px 12px 9px 14px; margin: 0 0 18px 0; }
    .eq-idioma-banner-ico { color:#a8824f; font-size:1rem; flex:0 0 auto; }
    .eq-idioma-banner-msg { flex: 1 1 260px; margin:0; font-size:0.85rem; line-height:1.45; color: var(--text-muted, #8a8b9a); }
    .eq-idioma-banner-msg strong { color:#a8824f; font-family:'Cinzel', serif; font-size:0.78rem; letter-spacing:1px; font-weight:600; text-transform:none; margin-right:4px; }
    .eq-idioma-banner-btn { flex:0 0 auto; background:none; border:1px solid rgba(168, 130, 79, 0.6); color:#a8824f; border-radius:3px; padding:6px 12px; font-family:'Cinzel', serif; font-size:0.72rem; letter-spacing:1px; cursor:pointer; transition:0.25s; }
    .eq-idioma-banner-btn:hover { background: rgba(168, 130, 79, 0.15); color:#e2c47f; border-color:#a8824f; }
    .eq-idioma-banner-x { flex:0 0 auto; background:none; border:none; color:var(--text-muted, #8a8b9a); cursor:pointer; padding:4px 6px; font-size:0.9rem; }
    .eq-idioma-banner-x:hover { color:#e2c47f; }
    .btn-link { background:none; border:none; color: var(--text-muted, #8a8b9a); font-family: var(--font-body); font-size:0.82rem; text-decoration:underline; cursor:pointer; padding:0; }
    .btn-link:hover { color: #a8824f; }

    .section-header { text-align: center; margin-bottom: 30px; width: 100%; }
    .section-header h1 { font-family: 'Cinzel', serif; font-size: 2.3rem; color: #a8824f; margin-bottom: 10px; text-shadow: 0 0 15px rgba(168, 130, 79, 0.4); text-transform: uppercase; }
    .section-header p { color: #8a8b9a; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }

    /* MODALES */
    .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 9999; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(8px); }
    .modal-overlay.active { display: flex; opacity: 1; }
    .modal-box { background: #08080c; border: 1px solid rgba(168, 130, 79, 0.3); border-radius: 8px; padding: 40px; width: 100%; max-width: 450px; text-align: center; position: relative; transform: scale(0.95); transition: transform 0.3s ease; box-shadow: 0 20px 50px rgba(0,0,0,0.9); }
    .modal-overlay.active .modal-box { transform: scale(1); }
    .close-modal { position: absolute; top: 15px; right: 20px; color: #6b7280; font-size: 1.2rem; cursor: pointer; transition: 0.3s; font-family: sans-serif; font-weight: bold; }
    .close-modal:hover { color: #fff; }

    /* DASHBOARD Y FORMULARIOS (DARK UI) */
    #astral-app-wrapper {
        --bg-panel: rgba(8, 8, 12, 0.4);
        --border-subtle: rgba(255, 255, 255, 0.05);
        --border-gold: rgba(168, 130, 79, 0.3);
        --gold: #a8824f;
        --gold-light: #d1b48c;
        --text-light: #e0e2ec;
        --text-muted: #8a8b9a;
        --font-title: 'Cinzel', serif;
        --font-body: 'Montserrat', sans-serif;
        /* Paleta del REPORTE (carta astral / PDF): navy profundo + dorado, inspirada en la
           referencia visual del cliente. Vive aparte de --gold/--text-light de arriba (que son
           del dashboard oscuro) porque el reporte es su propia "hoja" dentro de la app. */
        --rpt-font-script: 'Great Vibes', cursive;
        /* Tipografía de LECTURA del reporte: serif humanista en vez de la sans geométrica.
           Montserrat es una sans de retícula fría; sobre pergamino y en textos largos leía como
           informe técnico. EB Garamond es del linaje de la tipografía de imprenta histórica:
           misma familia visual que Cinzel, y da la calidez de manuscrito que pide el proyecto. */
        --rpt-font-read: 'EB Garamond', 'Cinzel', Georgia, serif;
        /* Pergamino con noche astrológica: el papel es la base, la tinta es azul marino y el
           dorado queda para adornos y líneas, como en la referencia del cliente. */
        --rpt-bg-deep: #f2e9d6;
        --rpt-bg-mid: #e8dcc2;
        --rpt-ink: #16233a;
        --rpt-gold: #9a7734;
        --rpt-gold-bright: #7d5f22;
        --rpt-gold-line: rgba(154, 119, 52, 0.45);
        --rpt-gold-line-soft: rgba(154, 119, 52, 0.26);
        --rpt-text: #1b2a44;
        --rpt-text-dim: rgba(27, 42, 68, 0.72);
        color: var(--text-light); font-family: var(--font-body);
        position: relative; width: 100%; box-sizing: border-box;
    }
    #astral-app-wrapper * { box-sizing: border-box; }
    
    #astral-app-wrapper .dynamic-header { text-align: center; margin-bottom: 40px; width: 100%; }
    #astral-app-wrapper .dynamic-header h1 { font-family: var(--font-title); font-size: 2.5rem; color: var(--gold); margin-bottom: 10px; text-shadow: 0 0 20px rgba(168, 130, 79, 0.2); text-transform: uppercase; font-weight: 700; letter-spacing: 2px;}
    #astral-app-wrapper .dynamic-header h2 { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; }
    
    #astral-app-wrapper .astral-form-card { background: var(--bg-panel); border: 1px solid var(--border-gold); border-radius: 8px; padding: 50px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); max-width: 900px; margin: 0 auto; backdrop-filter: blur(10px); }
    #astral-app-wrapper .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
    @media(max-width: 600px) { #astral-app-wrapper .form-row { grid-template-columns: 1fr; } }
    #astral-app-wrapper .form-group { position: relative; width: 100%; text-align: left; }
    #astral-app-wrapper .form-group label { font-family: var(--font-title); color: var(--gold-light); margin-bottom: 12px; display: block; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; }
    #astral-app-wrapper .form-control { width: 100%; padding: 16px; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--border-subtle); border-radius: 4px; color: #fff; font-family: var(--font-body); font-size: 1rem; outline: none; transition: 0.3s; }
    #astral-app-wrapper .form-control:focus { border-color: var(--gold); background: #000; box-shadow: 0 0 15px rgba(168, 130, 79, 0.2); }
    
    #astral-app-wrapper .lang-selector { display: flex; justify-content: center; gap: 15px; margin-top: 10px; flex-wrap: wrap; }
    #astral-app-wrapper .lang-selector input[type="radio"] { display: none; }
    #astral-app-wrapper .lang-selector .lang-btn { padding: 12px 25px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: var(--text-muted); cursor: pointer; font-family: var(--font-title); transition: 0.3s; font-size: 0.85rem; letter-spacing: 2px; background: transparent; }
    #astral-app-wrapper .lang-selector input[type="radio"]:checked + .lang-btn { background: rgba(168, 130, 79, 0.1); color: var(--gold); border-color: var(--gold); }
    
    #astral-app-wrapper .sugerencias-box { position: absolute; top: 100%; left: 0; width: 100%; background: #08080c; border: 1px solid var(--gold); border-radius: 4px; z-index: 1000; max-height: 200px; overflow-y: auto; display: none; margin-top: 5px; box-shadow: 0 10px 30px rgba(0,0,0,0.9); }
    #astral-app-wrapper .sugerencia-item { padding: 14px 18px; color: var(--text-light); cursor: pointer; border-bottom: 1px solid var(--border-subtle); font-size: 0.9rem; }
    #astral-app-wrapper .sugerencia-item:hover { background: rgba(168, 130, 79, 0.15); color: var(--gold-light); }

    .glass-progress-container { width: 100%; max-width: 500px; margin: 30px auto; padding: 40px; background: var(--bg-panel); border: 1px solid var(--border-gold); border-radius: 8px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); }
    .glass-progress-track { width: 100%; height: 3px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; margin-top: 25px; position: relative; }
    .glass-progress-fill { height: 100%; width: 0%; background: var(--gold); transition: width 0.8s ease; box-shadow: 0 0 15px var(--gold); }
    .loader-global { color: var(--gold); font-family: var(--font-body); padding: 60px 20px; text-align: center; position: relative; z-index: 20; }

    /* ============================================================
       PORTAL DE BIENVENIDA (transición inmersiva pago -> dashboard)
       Ronda 18: cierra el salto en seco entre "pago confirmado" (portada) y
       la carga del dashboard -- mismo lenguaje visual que el loader del motor
       astronómico (ícono + barra dorada), para que se sienta una transición
       continua en vez de dos pantallas de carga distintas. Sólo aparece
       cuando la URL trae &bienvenida=1 (ver page-acceso-vip.php), nunca en
       una visita normal al dashboard. Vive fuera de #astral-app-wrapper /
       #tarot-app-wrapper, así que repite los colores a mano en vez de usar
       las variables de esos wrappers. */
    #eq-portal-transicion {
        position: fixed; inset: 0; z-index: 999999;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: radial-gradient(ellipse at center, #0d0c1c 0%, #070714 55%, #050508 100%);
        text-align: center; padding: 20px;
        opacity: 1; transition: opacity 0.7s ease;
    }
    #eq-portal-transicion.eq-portal-oculto { opacity: 0; pointer-events: none; }
    #eq-portal-transicion .eq-portal-nucleo {
        width: 84px; height: 84px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; margin-bottom: 28px;
        background: rgba(226, 183, 101, 0.08);
        border: 1px solid rgba(226, 183, 101, 0.35);
        box-shadow: 0 0 40px rgba(226, 183, 101, 0.35), inset 0 0 20px rgba(226, 183, 101, 0.15);
        animation: eqPortalPulso 2.2s ease-in-out infinite;
    }
    #eq-portal-transicion .eq-portal-nucleo i { font-size: 2.1rem; color: #e2b765; }
    #eq-portal-transicion .eq-portal-titulo {
        font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
        font-size: 1.3rem; color: #fbe3b5; margin-bottom: 14px;
    }
    #eq-portal-transicion .eq-portal-texto {
        font-family: 'Montserrat', sans-serif; font-size: 0.85rem; letter-spacing: 1.5px;
        text-transform: uppercase; color: #9a9bba; min-height: 1.4em; transition: opacity 0.35s ease;
    }
    #eq-portal-transicion .eq-portal-barra {
        width: 200px; max-width: 60vw; height: 2px; margin-top: 30px; border-radius: 10px;
        background: rgba(255,255,255,0.06); overflow: hidden; position: relative;
    }
    #eq-portal-transicion .eq-portal-barra::after {
        content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
        background: linear-gradient(90deg, transparent, #e2b765, transparent);
        animation: eqPortalBarra 1.4s ease-in-out infinite;
    }
    @keyframes eqPortalPulso {
        0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(226, 183, 101, 0.35), inset 0 0 20px rgba(226, 183, 101, 0.15); }
        50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(226, 183, 101, 0.5), inset 0 0 26px rgba(226, 183, 101, 0.22); }
    }
    @keyframes eqPortalBarra {
        0% { left: -40%; }
        100% { left: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
        #eq-portal-transicion .eq-portal-nucleo, #eq-portal-transicion .eq-portal-barra::after { animation: none; }
    }

    /* =========================================================================
       DISEÑO DE REPORTE CARTA ASTRAL: NAVY PROFUNDO Y DORADO
       (paleta inspirada en la referencia del cliente: fondo nocturno con viñeta,
       tipografía Cinzel en mayúsculas + Great Vibes en script para el nombre)
       ========================================================================= */
    #pdf-export-area, #pdf-export-transitos, #pdf-export-numerologia, body.eq-imprimir-sin .sin-imprimir {
        background-color: var(--rpt-bg-deep);
        /* Ronda 21: las dos acuarelas (cabecera y mosaico) pasan a variables para poder cambiarlas
           en pantallas angostas por una versión con el borde azul más fino (ver más abajo). */
        /* Ronda 80: los valores de --eq-acu-cab y --eq-acu-mos (las dos acuarelas) están en page-acceso-vip-imagenes.css. */
        /* FONDO "pintado a la acuarela", como la portada de referencia (Theme astral, pág. 1):
           cúmulos con borde festoneado por bandas (núcleo azul noche con polvo dorado, banda gris
           azulada, fleco tibio con borde ocre) que se funden sobre el pergamino crema, más margen
           azul noche con doble filete dorado. Lo genera scratchpad acuarela2.py (colores medidos en
           la portada: pergamino 240,219,188; azul noche 22,38,53; ocre 153,109,46).
           Capas, de arriba hacia abajo: 4 esquineros, órbitas, luna, estrella de 8 puntas,
           acuarela-cabecera-v2.jpg (esquinas superiores) y acuarela-mosaico-v2.jpg (se repite
           hacia abajo; la cabecera empalma exacto con sus filas).
           Los nombres llevan versión (-v1): al cambiar la imagen se cambia el nombre, así ningún
           navegador ni caché del servidor sigue mostrando la anterior. */
        background-image:
            url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"%3E%3Cg transform="translate(0,0)"%3E%3Cpath d="M6 60 L6 6 L60 6" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M14 44 C14 24 24 14 44 14" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M14 44 C24 44 30 38 30 30 C30 22 24 18 19 21 C15 24 18 30 23 28" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M44 14 C44 24 38 30 30 30" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M6 78 C10 70 12 66 12 60" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/%3E%3Cpath d="M78 6 C70 10 66 12 60 12" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/%3E%3Cpolygon points="30.0,25.0 31.3,28.7 35.0,30.0 31.3,31.3 30.0,35.0 28.7,31.3 25.0,30.0 28.7,28.7" fill="%23d9b465"/%3E%3C/g%3E%3C/svg%3E'),
            url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"%3E%3Cg transform="translate(120,0) scale(-1,1)"%3E%3Cpath d="M6 60 L6 6 L60 6" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M14 44 C14 24 24 14 44 14" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M14 44 C24 44 30 38 30 30 C30 22 24 18 19 21 C15 24 18 30 23 28" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M44 14 C44 24 38 30 30 30" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M6 78 C10 70 12 66 12 60" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/%3E%3Cpath d="M78 6 C70 10 66 12 60 12" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/%3E%3Cpolygon points="30.0,25.0 31.3,28.7 35.0,30.0 31.3,31.3 30.0,35.0 28.7,31.3 25.0,30.0 28.7,28.7" fill="%23d9b465"/%3E%3C/g%3E%3C/svg%3E'),
            url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"%3E%3Cg transform="translate(0,120) scale(1,-1)"%3E%3Cpath d="M6 60 L6 6 L60 6" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M14 44 C14 24 24 14 44 14" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M14 44 C24 44 30 38 30 30 C30 22 24 18 19 21 C15 24 18 30 23 28" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M44 14 C44 24 38 30 30 30" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M6 78 C10 70 12 66 12 60" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/%3E%3Cpath d="M78 6 C70 10 66 12 60 12" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/%3E%3Cpolygon points="30.0,25.0 31.3,28.7 35.0,30.0 31.3,31.3 30.0,35.0 28.7,31.3 25.0,30.0 28.7,28.7" fill="%23d9b465"/%3E%3C/g%3E%3C/svg%3E'),
            url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"%3E%3Cg transform="translate(120,120) scale(-1,-1)"%3E%3Cpath d="M6 60 L6 6 L60 6" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M14 44 C14 24 24 14 44 14" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M14 44 C24 44 30 38 30 30 C30 22 24 18 19 21 C15 24 18 30 23 28" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M44 14 C44 24 38 30 30 30" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round"/%3E%3Cpath d="M6 78 C10 70 12 66 12 60" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/%3E%3Cpath d="M78 6 C70 10 66 12 60 12" fill="none" stroke="%23d9b465" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/%3E%3Cpolygon points="30.0,25.0 31.3,28.7 35.0,30.0 31.3,31.3 30.0,35.0 28.7,31.3 25.0,30.0 28.7,28.7" fill="%23d9b465"/%3E%3C/g%3E%3C/svg%3E'),
            url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Ccircle cx="100" cy="100" r="92" fill="none" stroke="%23b8913f" stroke-width="1.1" opacity="0.9"/%3E%3Ccircle cx="100" cy="100" r="66" fill="none" stroke="%23b8913f" stroke-width="1.0" opacity="0.9"/%3E%3Ccircle cx="100" cy="100" r="40" fill="none" stroke="%23b8913f" stroke-width="0.9" opacity="0.9"/%3E%3Ccircle cx="172.5" cy="43.4" r="7" fill="%23b8913f"/%3E%3Ccircle cx="42.8" cy="133.0" r="5.5" fill="%23b8913f"/%3E%3Ccircle cx="120.0" cy="134.6" r="4" fill="%23b8913f"/%3E%3Ccircle cx="56.8" cy="181.2" r="3.2" fill="%23b8913f"/%3E%3Cpolygon points="100.0,87.0 103.4,96.6 113.0,100.0 103.4,103.4 100.0,113.0 96.6,103.4 87.0,100.0 96.6,96.6" fill="%23b8913f"/%3E%3C/svg%3E'),
            url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"%3E%3Ccircle cx="100" cy="100" r="92" fill="none" stroke="%23b8913f" stroke-width="0.9" opacity="0.75" stroke-dasharray="1.5 4"/%3E%3Ccircle cx="100" cy="100" r="74" fill="none" stroke="%23b8913f" stroke-width="0.9" opacity="0.8"/%3E%3Cdefs%3E%3Cmask id="m"%3E%3Crect width="200" height="200" fill="%23fff"/%3E%3Ccircle cx="118" cy="88" r="40" fill="%23000"/%3E%3C/mask%3E%3ClinearGradient id="g" x1="0" y1="0" x2="1" y2="1"%3E%3Cstop offset="0" stop-color="%23d9b465"/%3E%3Cstop offset="1" stop-color="%23b8913f"/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx="100" cy="100" r="46" fill="url%28%23g%29" mask="url%28%23m%29"/%3E%3Cpolygon points="160.0,41.0 161.8,46.2 167.0,48.0 161.8,49.8 160.0,55.0 158.2,49.8 153.0,48.0 158.2,46.2" fill="%23b8913f"/%3E%3Cpolygon points="44.0,151.0 45.3,154.7 49.0,156.0 45.3,157.3 44.0,161.0 42.7,157.3 39.0,156.0 42.7,154.7" fill="%23b8913f"/%3E%3C/svg%3E'),
            url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpolygon points="50.0,2.0 53.4,41.7 68.4,31.6 58.3,46.6 98.0,50.0 58.3,53.4 68.4,68.4 53.4,58.3 50.0,98.0 46.6,58.3 31.6,68.4 41.7,53.4 2.0,50.0 41.7,46.6 31.6,31.6 46.6,41.7" fill="%23b8913f"/%3E%3Ccircle cx="50" cy="50" r="3.2" fill="%23f2e3c4"/%3E%3Ccircle cx="50" cy="50" r="30" fill="none" stroke="%23b8913f" stroke-width="0.7" opacity="0.6"/%3E%3C/svg%3E'),
            var(--eq-acu-cab),
            var(--eq-acu-mos);
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
        background-size: 84px 84px, 84px 84px, 84px 84px, 84px 84px, 76px 76px, 72px 72px, 64px 64px, 100% auto, 100% auto;
        background-position: 30px 30px, calc(100% - 30px) 30px, 30px calc(100% - 30px), calc(100% - 30px) calc(100% - 30px),
                             25% 22px, 75% 22px, center 26px, top center, top center;
        /* el marco (margen azul noche y doble filete dorado) viene pintado en las imágenes */
        border: none;
        outline: none;
        padding: 118px 18% 90px 18%;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        color: var(--rpt-text);
        box-sizing: border-box;
        border-radius: 4px;
        position: relative;
        /* Sin esto, el motor de impresión de Chrome puede descartar la textura al exportar. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @media(max-width:1000px){
        #pdf-export-area, #pdf-export-transitos, #pdf-export-numerologia {
            padding: 90px 11.5% 60px 11.5%; outline-offset: -8px;
            /* Ronda 17 (24/09): las dos últimas capas (acuarela-cabecera/mosaico, el borde azul
               noche que se funde hacia el pergamino) estaban al 150% -- eso las "acerca" tanto que
               las nubes de los bordes, que es lo que se ve como diseño en los márgenes, quedaban
               mayormente fuera del ancho visible: el usuario reportó que en mobile no se veía ese
               diseño. Vuelven a 100% auto (igual que en escritorio, sólo que en un ancho más
               angosto), así el borde completo queda visible en cualquier tamaño de pantalla. */
            background-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px, 0 0, 0 0, 48px 48px, 100% auto, 100% auto;
        }
    }
    @media(max-width:600px){
        #pdf-export-area, #pdf-export-transitos, #pdf-export-numerologia {
            padding: 70px 11% 40px 11%; outline: none;
            background-size: 44px 44px, 44px 44px, 44px 44px, 44px 44px, 0 0, 0 0, 40px 40px, 100% auto, 100% auto;
        }
    }

    /* RONDA 21 — BUG MOBILE: EL BORDE DE NEBULOSA TAPABA EL TEXTO DE LAS CARTAS.
       El borde azul noche pintado en las acuarelas ocupa hasta ~16% del ancho de cada lado (se
       escala con el ancho de la carta, 100% auto). En escritorio el padding es 18%, así que el
       texto nunca lo pisa; pero en mobile el padding era 20px fijos (~6%) y en tablet 10%: el
       texto corría por debajo de las nubes azules (Carta Natal, Tránsitos y Numerológica, que
       comparten este fondo). Arreglo en dos partes, sólo pantalla (el PDF queda igual):
       1) En pantallas de hasta 1000px se usa una versión de las mismas acuarelas con la franja de
          nubes comprimida a la mitad (generada desde las originales: mismo marco, mismo filete
          dorado, mismas nubes, más angostas) -> el borde azul ocupa ~9% en vez de ~16%.
       2) El padding lateral pasa a porcentaje (11-11.5%), siempre mayor que ese borde, así el
          texto queda siempre sobre el pergamino y el diseño del borde se sigue viendo. */
    /* Ronda 80: la versión angosta de las dos acuarelas (--eq-acu-cab / --eq-acu-mos para pantallas de hasta 1000px)
       ahora está en page-acceso-vip-imagenes.css, con el mismo @media. */
    /* El nombre en letra manuscrita a 4rem no entraba en el ancho de un teléfono con nombres de
       cuatro apellidos: la última palabra quedaba cortada debajo del borde. */
    @media screen and (max-width: 600px) {
        /* con el id delante: la regla de max-width:768px (4rem) está más abajo en el archivo */
        :is(#pdf-export-area, #pdf-export-transitos, #pdf-export-numerologia) .report-header-vintage .user-name { font-size: 2.9rem; overflow-wrap: break-word; }
        :is(#pdf-export-area, #pdf-export-transitos, #pdf-export-numerologia) .report-header-vintage h1 { font-size: 1.45rem; letter-spacing: 2px; }
        /* justificado en una columna angosta abre huecos enormes entre palabras */
        .reading-panel-vintage p { text-align: left; }
    }

    .report-element { z-index: 2; position: relative; }

    /* Header del Reporte */
    .report-header-vintage { text-align: center; margin-bottom: 15px; }
    .report-header-vintage h1 {
        font-family: var(--font-title); color: var(--rpt-ink); font-size: 2.45rem; letter-spacing: 2px; margin-bottom: 5px; text-transform: uppercase; font-weight: 700; line-height: 1.15;
    }
    .report-header-vintage .user-name {
        font-family: var(--rpt-font-script); font-size: 5.8rem; color: var(--rpt-ink); margin: 15px 0 25px 0; line-height: 1.1; font-weight: 400;
    }
    .report-header-vintage .subtitle-evolutiva {
        font-family: var(--font-title); font-size: 1.08rem; letter-spacing: 1.5px; color: var(--rpt-ink); text-transform: uppercase; margin: 0 auto 10px auto; font-weight: 600; max-width: 760px; line-height: 1.55;
    }
    .report-header-vintage .user-data-small {
        font-family: var(--font-title); font-size: 0.9rem; letter-spacing: 1.5px; color: var(--rpt-text); text-transform: uppercase; margin-top: 15px; font-weight: 600; opacity: 0.85;
    }
    /* filete dorado con estrella debajo del nombre, como en la portada de referencia.
       Bug real encontrado en la Ronda 8 probando Carta Natal en mobile por primera vez con
       Playwright: con "width: 360px" Y "max-width: 72%" juntos, el navegador renderiza el
       elemento ya clampeado por max-width (bien, ~259px en un teléfono), pero para el cálculo
       del ancho de los ANCESTROS (.main-workspace) usa el "width" de 360px sin clampear, así
       que en mobile toda la columna central del dashboard se ensanchaba a 400px en vez de 343px
       -- no se veía como scroll horizontal evidente porque un ancestor con overflow-x:hidden lo
       enmascaraba de document.documentElement.scrollWidth (la misma trampa ya documentada en la
       Ronda 7 con .nx-subnav: scrollWidth no alcanza como prueba de "sin desborde", hace falta
       medir getBoundingClientRect() de los contenedores reales). Con sólo "max-width: 72%" (sin
       "width" fijo) el resultado visual es idéntico -- el ancho real siempre lo terminaba
       poniendo max-width -- pero desaparece el desborde. */
    .report-header-vintage .user-name::after {
        content: '\2726'; display: block; max-width: 72%; margin: 16px auto 0 auto;
        font-family: Georgia, serif; font-size: 15px; line-height: 1; color: var(--rpt-gold);
        background: linear-gradient(var(--rpt-gold-line), var(--rpt-gold-line)) left center / 44% 1px no-repeat,
                    linear-gradient(var(--rpt-gold-line), var(--rpt-gold-line)) right center / 44% 1px no-repeat;
    }
    .report-header-vintage .user-data-small div { margin-bottom: 5px; }
    .report-header-vintage .user-data-small div:last-child { margin-bottom: 0; }
    .report-header-vintage .user-signature-line {
        font-family: var(--font-title); font-size: 1rem; letter-spacing: 1.5px; color: var(--rpt-text-dim); text-transform: uppercase; margin-top: 18px; font-weight: 500;
    }
    .report-header-vintage .user-signature-line div { margin-bottom: 6px; }
    .report-header-vintage .user-signature-line div:last-child { margin-bottom: 0; }
    .report-header-vintage .user-signature-line strong { color: var(--rpt-gold-bright); font-weight: 800; }
    .report-header-vintage .user-signature-line .divider-dot { color: var(--rpt-gold-line); margin: 0 12px; }

    @media(max-width: 768px){
        .report-header-vintage h1 { font-size: 1.6rem; letter-spacing: 3px; }
        .report-header-vintage .user-name { font-size: 4rem; }
        .report-header-vintage .user-signature-line { font-size: 0.7rem; letter-spacing: 1px; }
    }

    /* Rueda Astrológica Centrada */
    .vintage-chart-panel-centered {
        display: flex; justify-content: center; align-items: center; width: 100%; margin: 40px 0 50px 0;
    }
    #svg-chart-wrapper { width: 100%; max-width: 800px; display: flex; justify-content: center; align-items: center;}
    #svg-chart-wrapper svg { width: 100%; height: auto; }

    /* Divisor Elegante */
    .vintage-divider { display: flex; align-items: center; text-align: center; color: var(--rpt-gold); margin: 30px 0; opacity: 0.8;}
    .vintage-divider::before, .vintage-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--rpt-gold-line); }
    .vintage-divider::before { margin-right: 15px; } .vintage-divider::after { margin-left: 15px; }
    .vintage-divider span { font-size: 1.2rem; }

    /* Código Cósmico UI */
    /* El Código Cósmico ya no es el bloque protagonista de arriba de todo: ahora es una
       sección más entre las demás (se movió en el HTML a después de las tablas de datos),
       así que su tipografía se alinea a la de un sub-título normal del reporte en vez de
       un titular gigante. */
    .uid-vintage-container { margin: 0 auto; text-align: center; max-width: 800px; }
    .uid-vintage-code {
        font-family: 'Courier New', Courier, monospace; font-size: 1.25rem; color: var(--rpt-gold-bright); letter-spacing: 5px; word-break: normal; overflow-wrap: anywhere;
        background: rgba(154, 119, 52, 0.10); padding: 15px 25px; border: 1px solid var(--rpt-gold-line); border-radius: 2px;
        display: inline-block; margin-bottom: 18px;
    }
    .uid-vintage-synthesis { font-family: var(--rpt-font-read); color: var(--rpt-text-dim); letter-spacing: 0.5px; font-size: 0.95rem; font-weight: 400; }
    .uid-vintage-synthesis span { font-size: 1rem; color: var(--rpt-gold-bright); font-weight: 700; margin-left: 6px; }

    /* Tablas Minimalistas Clásicas.
       Otro bug real encontrado en la Ronda 8 (mismo diagnóstico que el de arriba): estas tablas
       tienen columnas con white-space:nowrap (para que los números no salten de línea), así que
       en mobile su ancho de contenido real supera los 360px. .vintage-table-responsive ya tenía
       overflow-x:auto para dejarlas hacer scroll horizontal propio -- la intención siempre fue
       esa -- pero al ser un hijo de .vintage-tables-container (que es flex, flex-direction:
       column), un item de flex sin min-width:0 no se achica para dejar lugar al scroll interno:
       empuja el ancho de TODA la columna central del dashboard en vez de scrollear adentro suyo.
       Mismo fix ya usado en toda la app para esta clase de bug: width:0 + min-width:100% en vez
       de width:100%. */
    .vintage-tables-container { display: flex; flex-direction: column; gap: 40px; margin-bottom: 50px; width: 100%; }
    .vintage-table-responsive { width: 0; min-width: 100%; box-sizing: border-box; overflow-x: auto; background: transparent; }
    .vintage-data-table { width: 100%; border-collapse: collapse; }
    .vintage-data-table th {
        background: transparent; color: var(--rpt-gold-bright); font-family: var(--font-title); padding: 14px 10px; font-size: 0.85rem;
        text-transform: uppercase; border-top: 1px solid var(--rpt-gold-line); border-bottom: 1px solid var(--rpt-gold-line);
        text-align: center; letter-spacing: 2px; font-weight: 700;
    }
    .vintage-data-table td {
        padding: 15px 10px; border-bottom: 1px solid rgba(154, 119, 52, 0.22); font-size: 1.16rem; text-align: center;
        white-space: nowrap; color: var(--rpt-text); font-family: var(--rpt-font-read); font-weight: 500;
        /* números alineados en columna (Garamond trae por defecto cifras de estilo antiguo, que en una tabla bailan) */
        font-variant-numeric: lining-nums tabular-nums;
    }
    .vintage-data-table tr:last-child td { border-bottom: 1px solid var(--rpt-gold-line); }
    .vintage-data-table th:first-child, .vintage-data-table td:first-child { text-align: left; }
    .sym-planet-vintage { font-size: 1.45rem; margin-right: 12px; color: var(--rpt-gold); font-weight: bold;}

    /* Ronda 17 (24/09): esta tabla (posiciones de los astros y Tabla de Casas) es la que el
       usuario reportó teniendo que "deslizar con el dedo" en mobile. Confirmado midiendo en el
       sitio en vivo: a 375px el contenido real de la tabla mide 570px -- 267px quedan fuera de
       la pantalla, y como .vintage-table-responsive no da ninguna pista visual de que hay más
       columnas (nada se corta a la vista, las dos primeras columnas ya llenan todo el ancho),
       nadie se entera de que puede deslizar. Achicando letra y relleno en mobile entran las 5
       columnas completas sin scroll -- verificado que el ancho de la tabla ya no supera al del
       contenedor en 375px. */
    @media (max-width: 640px) {
        .vintage-data-table th { font-size: 0.62rem; padding: 8px 3px; letter-spacing: 0.3px; }
        .vintage-data-table td { font-size: 0.82rem; padding: 10px 3px; white-space: normal; }
        .sym-planet-vintage { font-size: 1.05rem; margin-right: 4px; }
    }

    /* PANELES DE LECTURA E IA */
    .reading-panel-vintage {
        background: transparent; text-align: left; margin-top: 30px;
        font-family: var(--rpt-font-read); font-size: 1.32rem; line-height: 1.85; color: var(--rpt-text);
    }

    .reading-panel-vintage .section-divider {
        border-top: 1px solid var(--rpt-gold-line-soft); border-bottom: 1px solid var(--rpt-gold-line-soft);
        padding: 12px 0; margin: 50px 0 30px 0; display: flex; align-items: center; justify-content: flex-start;
    }

    .reading-panel-vintage .astro-title {
        color: var(--rpt-ink); margin: 0; font-family: var(--font-title); font-size: 1.65rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 900;
    }

    .reading-panel-vintage h4.astro-title {
        border: none; border-bottom: 1px solid var(--rpt-gold-line-soft); padding-bottom: 8px; margin-top: 48px; margin-bottom: 22px; font-size: 1.45rem; color: var(--rpt-ink); text-align: left; justify-content: flex-start; opacity: 0.95;
    }

    .reading-panel-vintage h5.sub-astro-title {
        color: var(--rpt-gold-bright); font-family: var(--font-title); font-size: 1.18rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; margin-top: 32px; margin-bottom: 12px;
    }

    .reading-panel-vintage p { color: var(--rpt-text); line-height: 1.85; margin-bottom: 22px; font-size: 1.32rem; font-weight: 400; letter-spacing: 0.1px; font-family: var(--rpt-font-read); text-align: justify; }
    .reading-panel-vintage p strong, .reading-panel-vintage li strong { color: var(--rpt-gold-bright); font-weight: 700; font-family: var(--rpt-font-read); letter-spacing: 0; text-transform: none; font-size: inherit; }
    .reading-panel-vintage ul { margin-bottom: 30px; padding-left: 20px; list-style-type: square; color: var(--rpt-gold); }
    .reading-panel-vintage li { color: var(--rpt-text); line-height: 1.85; margin-bottom: 14px; font-size: 1.32rem; font-weight: 400; font-family: var(--rpt-font-read); }
    .reading-panel-vintage blockquote {
        background: rgba(154, 119, 52, 0.10); border-left: 3px solid var(--rpt-gold); padding: 22px 28px; margin: 32px 0; font-style: italic; color: var(--rpt-gold-bright); font-family: var(--rpt-font-read); font-weight: 600; font-size: 1.3rem;
    }
    .reading-panel-vintage blockquote p { margin-bottom: 0; color: inherit; text-align: left; }

    /* ESTÉTICA PARA TRÁNSITOS */
    #caja-lectura-transitos .section-divider { justify-content: center; }
    .transits-lead-in { text-align: center; color: var(--rpt-text-dim); font-family: var(--rpt-font-read); font-size: 1.08rem; font-style: italic; max-width: 640px; margin: 0 auto 10px auto; }

    /* El Código Cósmico ahora vive como una sección más entre las demás (ver HTML: se movió
       después de las tablas de datos), con el mismo tratamiento visual de section-divider que
       el resto de los bloques del reporte, en vez de un panel destacado arriba de todo. */
    /* Alineado a la izquierda y con la misma tipografía de cuerpo que cualquier otra sección
       del reporte: antes iba centrado y con el código dentro de una caja destacada, y por eso
       seguía leyéndose como un bloque especial en vez de una sección más. */
    #caja-codigo-cosmico .uid-vintage-container { margin: 0; text-align: left; max-width: none; }
    #caja-codigo-cosmico .uid-vintage-code {
        font-family: 'Courier New', Courier, monospace; font-size: 1.15rem; color: var(--rpt-gold-bright);
        letter-spacing: 3px; background: none; border: none; padding: 0; margin: 0;
        display: inline; word-break: normal; overflow-wrap: anywhere;
    }
    #caja-codigo-cosmico .uid-vintage-synthesis { display: block; margin-top: 14px; }

    #print-footer { display: none; }

    /* ---- Navegación rápida de Carta Natal y Carta de Tránsitos (Ronda 9, 23/09): la Ronda 8
       había convertido el reporte en pestañas (.eq-tabs-wrapper/.eq-subnav/.eq-tab-btn/
       .eq-tab-content, que ocultaban contenido con display:none). El usuario probó esas pestañas
       y no le gustaron -- pidió volver al scroll continuo de siempre, con el mismo fondo, pero
       agregando accesos directos por si alguien quiere saltar a una sección. Por eso estas clases
       son nuevas y NO ocultan nada: .eq-quicknav-btn son <a href="#..."> normales que sólo
       desplazan el scroll (scroll-behavior: smooth, más abajo) hasta la sección elegida. Misma
       paleta que antes (--rpt-* del reporte, no la del dashboard), mismo aspecto visual de
       "píldoras", para que se sienta parte del reporte. */
    .eq-quicknav {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px 0;
        /* Mismo truco que .nx-subnav de Numerología y .vintage-table-responsive de más arriba,
           para que en mobile la fila que no entra haga scroll propio en vez de ensanchar TODA la
           columna central del dashboard (ver Ronda 7 para el diagnóstico completo). */
        width: 0; min-width: 100%; box-sizing: border-box;
        /* Ronda 10 (23/09): pedido explícito del usuario de que el acceso a las secciones "quede
           siempre en el mismo lugar" mientras se scrollea, en vez de tener que volver hasta arriba
           a mano. Mismo patrón ya usado en .sidebar-nav de este archivo (position: sticky; top:
           96px), que es el espacio libre real bajo la barra superior fija (.app-topbar, sticky
           top:0 en style.css). z-index por debajo del topbar (100) pero por encima del contenido
           del reporte (.report-element usa z-index:2). Fondo propio + blur porque, al quedar fija,
           el texto del reporte pasa scrolleando por detrás. */
        position: sticky; top: 96px; z-index: 40;
        background: rgba(242, 233, 214, 0.92);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-radius: 16px; padding: 10px 8px;
    }
    .eq-quicknav-btn {
        display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.35);
        border: 1px solid var(--rpt-gold-line); border-radius: 30px; color: var(--rpt-text-dim);
        font-family: var(--font-title); font-size: 0.74rem; letter-spacing: 1.5px; text-transform: uppercase;
        padding: 10px 16px; cursor: pointer; transition: all 0.2s ease; text-decoration: none;
    }
    .eq-quicknav-btn i { color: var(--rpt-gold); }
    .eq-quicknav-btn:hover { border-color: var(--rpt-gold); color: var(--rpt-ink); background: rgba(255, 255, 255, 0.55); }
    @media (max-width: 640px) {
        /* Ronda 14 (24/09): antes esto forzaba una sola fila con scroll horizontal propio
           (overflow-x:auto + flex-wrap:nowrap) -- sin ninguna pista visual de que había más
           opciones fuera de pantalla, así que en la práctica quedaban escondidas. En desktop esta
           misma barra ya usa flex-wrap:wrap (la regla base, más arriba) y se ve perfecto en varias
           filas, todo visible de una. Acá se aplica el mismo criterio en mobile: nada de scroll
           horizontal, todas las opciones a la vista, en las filas que hagan falta. */
        .eq-quicknav { justify-content: center; gap: 8px; margin: 0 0 24px 0; }
        .eq-quicknav-btn { font-size: 0.78rem; padding: 9px 14px; }

        /* Ronda 14 (24/09): al renombrar "Numerología" a "Carta Numerológica", la palabra
           "NUMEROLÓGICA" sola (mayúsculas + letter-spacing:5px del título, ver más abajo
           #astral-app-wrapper .dynamic-header h1, .section-header h1) ya no entra en una fila a
           375px de ancho y desborda la página unos px hacia la derecha. Los demás títulos de
           vista (Tránsitos, Consulta, etc.) entran bien porque son más cortos -- este es el único
           que hacía falta achicar en mobile. */
        #view-numerologia .section-header h1 { font-size: 1.6rem; }
    }
    /* El salto al hacer click en una ancla de arriba es suave (el scroll libre con el dedo en
       mobile o con mouse/rueda en desktop no cambia: esto sólo afecta el salto del click). Va en
       html, no en #pdf-export-area, porque en este layout el que scrollea es el documento
       (.main-workspace no tiene overflow propio -- se confirmó en style.css antes de tocar esto).
       scroll-margin-top evita que el título de la sección quede tapado bajo la barra superior fija
       del dashboard al llegar. */
    html { scroll-behavior: smooth; }
    #eq-astral-sec-rueda, #eq-astral-sec-posiciones, #eq-astral-sec-codigo, #eq-astral-sec-resumen, #eq-astral-sec-fundamento, #eq-astral-sec-guia, #eq-astral-sec-lectura,
    #eq-transitos-sec-rueda, #eq-transitos-sec-posiciones, #eq-transitos-sec-fundamento, #eq-transitos-sec-guia, #eq-transitos-sec-lectura {
        scroll-margin-top: 100px;
    }

    /* Ronda 10 (23/09): el usuario pidió que el contenido "vaya apareciendo de a poco" al hacer
       scroll, como apps modernas -- sin volver a pestañas que oculten nada (eso ya lo rechazó en
       la Ronda 9). eqInitScrollReveal() en page-acceso-vip.js agrega .eq-reveal-active al
       contenedor del reporte cuando arranca el IntersectionObserver, y .eq-revealed a cada bloque
       la primera vez que entra en pantalla. El estado "oculto antes de aparecer" SÓLO existe bajo
       .eq-reveal-active: si el JS no corriera por algún motivo, el reporte se ve igual que
       siempre, nunca desaparece. */
    .eq-reveal-active .report-element {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .eq-reveal-active .report-element.eq-revealed {
        opacity: 1;
        transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
        .eq-reveal-active .report-element { opacity: 1; transform: none; transition: none; }
    }

    /* MOTOR DE IMPRESIÓN NATIVA */
    @media print {
        @page { margin: 0 !important; size: A4 portrait; }
        html, body, #astral-app-wrapper { background: var(--rpt-bg-deep, #f2e9d6) !important; color: var(--rpt-text, #1b2a44) !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; }
        header, footer, .app-sidebar, .no-print, #stars-canvas, #particles-js, #form-container, #loading-box-global { display: none !important; }
        /* El pie del theme se estaba imprimiendo al final del PDF, con su fondo gris, y dejaba
           además una página casi vacía. No forma parte del reporte. */
        .reading-panel-vintage { font-size: 14pt !important; }
        .app-layout, .main-workspace, #view-astral, #view-transitos, #view-numerologia { padding: 0 !important; margin: 0 !important; width: 100% !important; background: transparent !important;}
        .app-layout, .main-workspace { display: block !important; }
        /* Sólo se imprime la carta que está abierta. Antes la regla de arriba forzaba a mostrar
           las DOS vistas (Carta Natal y Carta de Tránsitos) y el PDF de una traía también la otra:
           de ahí las ~20 páginas de pergamino antes de la Carta de Tránsitos. */
        .workspace-block, #view-astral:not(.active-view), #view-transitos:not(.active-view), #view-numerologia:not(.active-view) { display: none !important; }
        #view-astral.active-view, #view-transitos.active-view, #view-numerologia.active-view { display: block !important; }
        /* Ronda 15: Carta Numerológica también se exporta. El Diagnóstico sólo sale si ya se generó. */
        #num-resultados { display: block !important; }
        #num-sin-perfil, #num-loading, #num-estado, #num-sec-diagnostico:not(.num-diag-listo) { display: none !important; }
        #pdf-export-numerologia .num-tarjeta, #pdf-export-numerologia .nx-etapa, #pdf-export-numerologia .num-hero { break-inside: avoid; page-break-inside: avoid; }
        /* Ronda 16: la grilla de letras y la tabla de Casas usan scroll horizontal en pantalla
           (nombres largos, con 4 apellidos, no entran en ningún ancho fijo). Eso está bien en la
           pantalla, pero en el PDF no hay forma de "scrollear": lo que queda fuera del ancho de
           la hoja se pierde, como si fuera una foto recortada -- exactamente lo que reportó el
           usuario. Acá se saca el scroll y se fuerza cada tabla a compartir el ancho real de la
           hoja entre todas sus columnas (table-layout: fixed + sin anchos fijos en px), así se ve
           completa: las columnas quedan más angostas si el nombre es largo, pero nada se corta. */
        .nx-grilla-scroll, .nx-casas-scroll { overflow-x: visible !important; width: 100% !important; min-width: 0 !important; padding-bottom: 0 !important; }
        .nx-grilla { table-layout: fixed !important; width: 100% !important; }
        .nx-grilla td, .nx-grilla td.esp { width: auto !important; min-width: 0 !important; font-size: 7.5pt !important; height: 16px !important; }
        .nx-casas { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; }
        .nx-casas th { width: 13% !important; font-size: 6.5pt !important; padding-right: 3px !important; white-space: normal !important; }
        .nx-casas th small { font-size: 6pt !important; }
        .nx-casas td { font-size: 7.5pt !important; padding: 3px 1px !important; }

        #pdf-export-area, #pdf-export-transitos, #pdf-export-numerologia, body.eq-imprimir-sin .sin-imprimir { border: none !important; box-shadow: none !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 1.5cm 1.5cm 2cm 1.5cm !important; box-sizing: border-box !important;}
        /* Ronda 10 (23/09): la animación de aparición al hacer scroll (.eq-reveal-active, más
           arriba) es sólo para pantalla. En impresión/PDF se fuerza SIEMPRE visible, sin importar
           si el usuario scrolleó toda la carta antes de exportar o pidió el PDF de entrada -- la
           exportación no puede depender de eso. "transition: none" además evita que, si algún
           bloque estaba a mitad de la animación justo cuando se pidió el PDF, quede capturado en
           un cuadro intermedio (opacity a medio camino) en vez de saltar directo a visible. */
        .report-element { opacity: 1 !important; transform: none !important; transition: none !important; }
        /* En la impresión la hoja mide ~794px: sin esto aplicaba la regla de pantallas chicas
           (fondo al 150%) y las nubes quedaban fuera de la hoja. Se fuerza el fondo a lo ancho. */
        #pdf-export-area, #pdf-export-transitos, #pdf-export-numerologia, body.eq-imprimir-sin .sin-imprimir {
            background-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px, 56px 56px, 54px 54px, 46px 46px, 100% auto, 100% auto !important;
            background-position: 22px 22px, calc(100% - 22px) 22px, 22px calc(100% - 22px), calc(100% - 22px) calc(100% - 22px), 27% 16px, 73% 16px, center 18px, top center, top center !important;
            /* Ronda 17: el padding inferior de 2cm era, muchas veces, justo lo que sobraba para
               empujar una página entera extra casi en blanco al final (el contenido real termina
               a milímetros del borde de una página, y ese resto de padding alcanza para "abrir"
               una página nueva que después no tiene nada más que la imprima). 1cm sigue dejando
               aire debajo del texto sin arriesgar tanto esa página de más. */
            padding: 2.4cm 3cm 1cm 3cm !important;
        }
        /* Ronda 17: el último párrafo del Diagnóstico no necesita su margen inferior habitual --
           es lo último que se imprime, así que ese margen sólo puede sumar a la misma "página de
           más" casi en blanco explicada arriba. */
        #eq-astral-sec-lectura > div > *:last-child,
        #eq-astral-sec-lectura p:last-child,
        #eq-astral-sec-guia > *:last-child, /* Ronda 69: la guía ahora es lo último del reporte */
        #caja-lectura-ia > *:last-child { margin-bottom: 0 !important; }
        #results-container, #final-reading, #transitos-resultados { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
        #transitos-sin-carta, #transitos-trigger, #transitos-loading { display: none !important; }

        /* Ronda 17 (24/09): "hueco" grande en la página 1 del PDF y la rueda recién aparecía en
           la página 2. Causa real (confirmada armando el PDF real con Playwright y midiendo cada
           bloque): el encabezado usa el tamaño de ESCRITORIO en la impresión (nunca se achicaba
           para imprimir -- el único achique que existía era el de pantallas chicas, a 768px, que
           no aplica al ancho de una hoja A4 ~794px). Con un nombre de varias palabras (4 apellidos
           es algo común en este sitio) el nombre en script solo ya mide ~840px de alto -- más que
           una hoja entera (1123px) -- así que el encabezado + la rueda (break-inside:avoid, no se
           puede partir) nunca entraban juntos en la página 1: la rueda se empujaba completa a la
           página 2, dejando ese hueco. Acá se achica el encabezado y la rueda SÓLO para imprimir
           (la pantalla no cambia en nada) para que quepan juntos en la primera página casi siempre. */
        .report-header-vintage { margin-bottom: 8px !important; }
        .report-header-vintage h1 { font-size: 1.3rem !important; letter-spacing: 1.5px !important; margin-bottom: 4px !important; }
        .report-header-vintage .user-name { font-size: 2.5rem !important; margin: 8px 0 14px 0 !important; line-height: 1.05 !important; }
        .report-header-vintage .subtitle-evolutiva { font-size: 0.68rem !important; letter-spacing: 0.8px !important; margin-bottom: 6px !important; }
        .report-header-vintage .user-data-small { font-size: 0.6rem !important; margin-top: 8px !important; }
        .report-header-vintage .user-signature-line { font-size: 0.6rem !important; margin-top: 10px !important; }
        .report-header-vintage .user-name::after { margin: 8px auto 0 auto !important; }
        .vintage-divider { margin: 14px 0 !important; }

        .vintage-chart-panel-centered { margin: 0 auto 20px auto !important; padding: 0 !important; break-inside: avoid; page-break-inside: avoid; }
        #svg-chart-wrapper { width: 100% !important; display: flex !important; justify-content: center !important; }
        #svg-chart-wrapper svg { width: 100% !important; max-width: 9.5cm !important; height: auto !important; margin: 0 auto !important; display: block !important;}

        /* Ronda 9: ya no hay pestañas que forzar a mostrar en la impresión -- desde la Ronda 9 el
           reporte volvió a ser scroll continuo, así que la impresión imprime todo tal cual está en
           pantalla. La barra de navegación rápida (.eq-quicknav) ya lleva la clase .no-print, que
           más arriba en este mismo bloque la oculta igual que a cualquier otro control de UI. */

        .section-divider { page-break-after: avoid !important; break-after: avoid !important; border-bottom: 1px solid rgba(154, 119, 52, 0.45) !important; border-top: 1px solid rgba(154, 119, 52, 0.45) !important; margin: 20px 0 !important; }
        h4.astro-title { page-break-after: avoid !important; break-after: avoid !important; border-bottom: 1px solid rgba(154, 119, 52, 0.45) !important; color: #16233a !important;}
        p, li { font-size: 14pt !important; line-height: 1.68 !important; margin-bottom: 11px !important; page-break-inside: auto !important; break-inside: auto !important; color: #1b2a44 !important;}
        blockquote { break-inside: avoid; page-break-inside: avoid; background: rgba(154, 119, 52, 0.10) !important; border-left: 3px solid #9a7734 !important; color: #7d5f22 !important;}
    }

    /* ESTILOS PARA TAROT */
    .tarot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px 0; }
    .tarot-card { background: rgba(168, 130, 79, 0.05); border: 1px solid rgba(168, 130, 79, 0.3); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: 0.3s; }
    .tarot-card:hover { background: rgba(168, 130, 79, 0.15); border-color: #a8824f; transform: translateY(-5px); }
    .tarot-card h3 { font-family: 'Cinzel', serif; color: #a8824f; font-size: 1.2rem; margin-bottom: 10px; }
    .tarot-card p { color: #8a8b9a; font-size: 0.9rem; }
    .tarot-card img { max-width: 100%; border-radius: 4px; margin-bottom: 15px; }

    /* ============================= */
    /* TAROT EQUINOCCIAL (integrado desde tarot.php) */
    /* ============================= */
    #tarot-app-wrapper .tarot-subnav { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 25px; }
        /* ESTILOS BASE */
        #tarot-app-wrapper {
            --bg-dark: #070714; --bg-card: rgba(20, 18, 38, 0.75); --border-gold: rgba(226, 183, 101, 0.4);
            --gold: #e2b765; --gold-light: #fbe3b5; --gold-glow: rgba(226, 183, 101, 0.6);
            --purple-accent: #9d4edd; --cyan-accent: #00f5d4; --text-light: #e0e2ec; --text-muted: #9a9bba;
            --font-title: 'Cinzel', serif; --font-body: 'Montserrat', sans-serif;
            background-color: var(--bg-dark); color: var(--text-light); font-family: var(--font-body);
            position: relative; min-height: 100vh; overflow: hidden; width: 100%;
        }
        #tarot-app-wrapper * { box-sizing: border-box; margin: 0; padding: 0; }
        #tarot-app-wrapper #stars-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
        #tarot-app-wrapper header { background: rgba(10, 8, 22, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-gold); position: relative; z-index: 100; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
        #tarot-app-wrapper .logo-container { display: flex; align-items: center; gap: 12px; }
        #tarot-app-wrapper .logo-container i { font-size: 1.8rem; color: var(--gold); filter: drop-shadow(0 0 8px var(--gold-glow)); }
        #tarot-app-wrapper .logo-title { font-family: var(--font-title); font-size: 1.4rem; font-weight: 700; letter-spacing: 2px; background: linear-gradient(135deg, #fff 0%, var(--gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        #tarot-app-wrapper nav { display: flex; gap: 10px; flex-wrap: wrap; }
        #tarot-app-wrapper .nav-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(226, 183, 101, 0.2); color: var(--text-light); padding: 10px 18px; border-radius: 20px; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; }
        #tarot-app-wrapper .nav-btn:hover, #tarot-app-wrapper .nav-btn.active { background: rgba(226, 183, 101, 0.15); border-color: var(--gold); color: var(--gold-light); box-shadow: 0 0 15px var(--gold-glow); transform: translateY(-2px); }
        
        #tarot-app-wrapper .tarot-container { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; padding: 30px 20px 80px 20px; }
        #tarot-app-wrapper .tab-content { display: none; animation: fadeIn 0.5s ease forwards; }
        #tarot-app-wrapper .tab-content.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        #tarot-app-wrapper .section-header { text-align: center; margin-bottom: 30px; }
        #tarot-app-wrapper .section-header h1 { font-family: var(--font-title); font-size: 2.3rem; color: var(--gold); margin-bottom: 10px; text-shadow: 0 0 10px rgba(226, 183, 101, 0.3); }
        #tarot-app-wrapper .section-header p { color: var(--text-muted); font-size: 1rem; max-width: 700px; margin: 0 auto; }

        /* SELECTOR TIRADAS */
        #tarot-app-wrapper .spread-selector { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
        #tarot-app-wrapper .spread-option { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 15px; padding: 20px; width: 260px; text-align: center; cursor: pointer; transition: all 0.3s ease; }
        #tarot-app-wrapper .spread-option:hover, #tarot-app-wrapper .spread-option.selected { border-color: var(--gold); box-shadow: 0 0 20px rgba(226, 183, 101, 0.25); background: rgba(30, 26, 58, 0.85); transform: translateY(-4px); }
        #tarot-app-wrapper .spread-option i { font-size: 2rem; color: var(--gold); margin-bottom: 12px; }
        #tarot-app-wrapper .spread-option h3 { font-family: var(--font-title); color: #fff; margin-bottom: 8px; }

        /* Ronda 11 (23/09): elegir entre tirada general o con pregunta, antes de tirar. Mismas
           variables de color que .spread-option/.nav-btn de acá arriba, así hereda automáticamente
           el reskin papel/dorado que #tarot-app-wrapper aplica más abajo en este archivo (no hace
           falta un bloque de override aparte). */
        #tarot-app-wrapper .pregunta-modo-selector { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
        #tarot-app-wrapper .pregunta-modo-btn { background: var(--bg-card); border: 1px solid var(--border-gold); color: var(--text-light); padding: 10px 20px; border-radius: 20px; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; }
        #tarot-app-wrapper .pregunta-modo-btn i { color: var(--gold); }
        #tarot-app-wrapper .pregunta-modo-btn:hover, #tarot-app-wrapper .pregunta-modo-btn.active { border-color: var(--gold); box-shadow: 0 0 15px rgba(226, 183, 101, 0.25); background: rgba(30, 26, 58, 0.85); }
        #tarot-app-wrapper .tarot-pregunta-input-wrap { max-width: 560px; margin: 0 auto 24px auto; }
        #tarot-app-wrapper #tarot-pregunta-texto { width: 100%; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 10px; padding: 12px 16px; color: var(--text-light); font-family: var(--font-body); font-size: 0.95rem; resize: vertical; }
        #tarot-app-wrapper #tarot-pregunta-texto:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 12px rgba(226, 183, 101, 0.25); }
        #tarot-app-wrapper #tarot-pregunta-texto::placeholder { color: var(--text-muted); }
        #tarot-app-wrapper .tarot-pregunta-error { color: #ff758f; font-size: 0.85rem; margin-top: 6px; text-align: center; }
        #tarot-app-wrapper .tarot-pregunta-mostrada { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 18px; font-style: italic; }
        #tarot-app-wrapper .tarot-pregunta-mostrada em { color: var(--gold); font-style: normal; }

        #tarot-app-wrapper .action-area { text-align: center; margin-bottom: 40px; }
        #tarot-app-wrapper .btn-mystic { background: linear-gradient(135deg, #a8721c 0%, #e2b765 50%, #8c5b0d 100%); color: #0d0b1a; font-family: var(--font-title); font-weight: 700; padding: 16px 40px; border: none; border-radius: 30px; cursor: pointer; box-shadow: 0 0 20px rgba(226, 183, 101, 0.4); display: inline-flex; align-items: center; gap: 12px; transition: transform 0.3s; }
        #tarot-app-wrapper .btn-mystic:hover { transform: scale(1.05); }

        /* CARTAS ANIMADAS */
        #tarot-app-wrapper .cards-board { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; margin-bottom: 40px; perspective: 1000px; }
        #tarot-app-wrapper .tarot-card-container { width: 250px; height: 444px; perspective: 1000px; cursor: pointer; }
        #tarot-app-wrapper .tarot-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; }
        #tarot-app-wrapper .tarot-card-container.flipped .tarot-card-inner { transform: rotateY(180deg); }
        #tarot-app-wrapper .card-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 14px; border: 2px solid var(--gold); box-shadow: 0 10px 25px rgba(0,0,0,0.6); }
        #tarot-app-wrapper .card-back { background: linear-gradient(135deg, #120e29 0%, #201847 100%); display: flex; justify-content: center; align-items: center; }
        #tarot-app-wrapper .card-front { transform: rotateY(180deg); background: transparent; overflow:hidden;}

        /* RESULTADOS Y ACORDEÓN */
        #tarot-app-wrapper .reading-results { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 20px; padding: 30px; margin-top: 20px; display: none; }
        #tarot-app-wrapper .reading-results.active { display: block; animation: fadeIn 0.6s ease; }
        #tarot-app-wrapper .reading-card-detail { display: grid; grid-template-columns: 140px 1fr; gap: 20px; margin-bottom: 25px; background: rgba(255, 255, 255, 0.02); padding: 20px; border-radius: 12px; border-left: 4px solid var(--gold); }
        @media (max-width: 600px) { #tarot-app-wrapper .reading-card-detail { grid-template-columns: 1fr; } }
        #tarot-app-wrapper .detail-img { width: 100%; height: 230px; border-radius:8px; border:1px solid var(--gold); overflow: hidden; position:relative; }
        #tarot-app-wrapper .detail-text h3 { font-family: var(--font-title); color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
        #tarot-app-wrapper .detail-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
        #tarot-app-wrapper .tag { background: rgba(226, 183, 101, 0.15); color: var(--gold-light); padding: 4px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
        
        #tarot-app-wrapper .btn-toggle-info { background: rgba(0,0,0,0.4); border: 1px solid var(--gold); color: var(--gold); padding: 8px 15px; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; margin-top: 15px; transition: 0.3s; }
        #tarot-app-wrapper .btn-toggle-info:hover { background: rgba(226, 183, 101, 0.1); color: #fff; }
        #tarot-app-wrapper .library-content { display: none; padding: 15px; background: rgba(0,0,0,0.3); border-radius: 8px; margin-top: 10px; border-left: 2px solid var(--purple-accent); font-size: 0.95rem; line-height: 1.6; color: var(--text-light); }
        
        /* CAJA DEL ORÁCULO */
        #tarot-app-wrapper .oracle-box { margin-top: 30px; padding: 35px; background: linear-gradient(135deg, rgba(157, 78, 221, 0.08) 0%, rgba(20, 18, 38, 0.95) 100%); border: 1px solid var(--purple-accent); border-radius: 15px; box-shadow: 0 0 25px rgba(157, 78, 221, 0.15); }
        #tarot-app-wrapper .oracle-box h3 { color: var(--cyan-accent); font-family: var(--font-title); margin-bottom: 15px; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(157,78,221,0.3); padding-bottom:10px; }

        /* TABS RESTANTES */
        #tarot-app-wrapper .calculator-card { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 20px; padding: 40px; max-width: 700px; margin: 0 auto; box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
        #tarot-app-wrapper .form-group { margin-bottom: 25px; text-align: left; }
        #tarot-app-wrapper .form-group label { display: block; font-family: var(--font-title); color: var(--gold); margin-bottom: 10px; font-size: 1rem; }
        #tarot-app-wrapper .form-control { width: 100%; padding: 14px 18px; background: rgba(10, 8, 22, 0.8); border: 1px solid var(--border-gold); border-radius: 10px; color: #fff; font-family: var(--font-body); font-size: 1rem; outline: none; transition: border-color 0.3s; }
        #tarot-app-wrapper .calc-result { margin-top: 30px; padding: 25px; background: rgba(15, 12, 36, 0.9); border-radius: 15px; border: 1px solid var(--gold); display: none; }
        #tarot-app-wrapper .calc-result.active { display: block; animation: fadeIn 0.5s ease; }
        #tarot-app-wrapper .calc-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
        #tarot-app-wrapper .calc-item { background: rgba(255, 255, 255, 0.03); padding: 15px; border-radius: 10px; border: 1px solid rgba(226, 183, 101, 0.2); }
        #tarot-app-wrapper .calc-item-title { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 5px; }
        #tarot-app-wrapper .calc-item-value { font-family: var(--font-title); font-size: 1.2rem; color: var(--gold-light); font-weight: 700; }

        #tarot-app-wrapper .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; }
        #tarot-app-wrapper .enc-card { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 16px; padding: 20px; text-align: left; }
        #tarot-app-wrapper .enc-img-container { height: 350px; border-radius: 10px; overflow: hidden; margin-bottom: 15px; border: 1px solid var(--gold); }
        #tarot-app-wrapper .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 99999; display: none; justify-content: center; align-items: center; padding: 20px; }
        #tarot-app-wrapper .modal-overlay.active { display: flex; }
        #tarot-app-wrapper .modal-content { background: #110e26; border: 2px solid var(--gold); border-radius: 20px; max-width: 750px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 30px; position: relative; }
        #tarot-app-wrapper .modal-close { position: absolute; top: 15px; right: 20px; color: var(--gold); font-size: 1.8rem; cursor: pointer; }

    /* Todo el rediseño va dentro de @media screen: la impresión/PDF del reporte queda exactamente como estaba. */
    @media screen {

    /* =========================================================================
       REDISEÑO DEL DASHBOARD: UN SOLO MUNDO CON EL REPORTE
       Antes la app era un tablero oscuro genérico (fondo casi negro, verdes/cian, emojis) y el
       reporte en pergamino aparecía "descolgado" adentro. Ahora las dos cosas son el mismo
       mundo de la referencia del cliente:
         · el FONDO de la app es el cielo nocturno azul prusia con nebulosa y polvo dorado
           (cielo-nebulosa-v2.jpg, pintado con el mismo motor de acuarela y los mismos colores que las
           nubes del reporte);
         · todo CONTENIDO (formularios, tarjetas, avisos, carga) es una HOJA DE PERGAMINO con
           tinta azul marino, igual que el reporte, así la carta se lee como una hoja más;
         · el dorado queda para líneas, íconos y el llamado a la acción.
       Va al final del archivo a propósito: pisa las reglas oscuras viejas sin tocarlas.
       ========================================================================= */
    :root {
        --eq-cielo: #111c27;
        --eq-panel: rgba(12, 21, 30, 0.62);
        --eq-papel: #ecd6b8;
        --eq-tinta: #1b2a44;
        --eq-tinta-dim: rgba(27, 42, 68, 0.66);
        --eq-oro: #c9a24e;
        --eq-oro-claro: #e2c47f;
        --eq-oro-linea: rgba(201, 162, 78, 0.34);
        --eq-luz: #ecdcc0;
        --eq-luz-dim: rgba(236, 220, 192, 0.66);
        --eq-titulo: 'Cinzel', serif;
        --eq-lectura: 'EB Garamond', Georgia, serif;
    }

    html, body { background: var(--eq-cielo); }
    body {
        background-color: var(--eq-cielo);
        /* nebulosa azul noche a la acuarela con polvo dorado (cielo-nebulosa-v2.jpg, incrustada
           abajo en --eq-img-cielo); se repite en las dos direcciones.
           Ronda 13 (24/09): tenía "background-attachment: fixed" (fondo anclado al viewport en
           vez de a la página). En páginas largas como Tarot después de una tirada eso deja un
           área plana/sin textura hacia el final -- es un comportamiento conocido de los fondos
           "fixed" con capturas de pantalla de página completa y con el scroll de Safari en iOS
           (que es probablemente lo que se ve como "fondo infinito interminable"). Con el fondo
           en "scroll" (el default; alcanza con no declarar el atributo) se repite normalmente
           con toda la altura real de la página, sin importar cuánto crezca el contenido. */
        background-image: var(--eq-img-cielo);
        background-size: 1200px 1200px; background-repeat: repeat; background-position: center top;
        color: var(--eq-luz); font-family: var(--eq-lectura);
    }
    #particles-js { display: none; }

    /* ---------- barra superior ---------- */
    .app-topbar {
        background: rgba(9, 16, 24, 0.74); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--eq-oro-linea); padding: 14px 40px;
    }
    .logo-icon { color: var(--eq-oro); text-shadow: none; display: flex; }
    .logo-text { font-family: var(--eq-titulo); font-size: 1rem; letter-spacing: 4px; color: var(--eq-luz); font-weight: 600; line-height: 1.25; }
    .logo-text span { display: block; color: var(--eq-oro); font-size: 0.78rem; letter-spacing: 5px; }
    .user-profile { background: rgba(236, 220, 192, 0.05); border: 1px solid var(--eq-oro-linea); padding: 6px 18px 6px 6px; border-radius: 40px; }
    .user-profile:hover { border-color: var(--eq-oro); }
    .user-iniciales {
        width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--eq-oro); color: var(--eq-oro-claro);
        display: flex; align-items: center; justify-content: center; font-family: var(--eq-titulo); font-size: 0.85rem; letter-spacing: 1px;
    }
    .user-info .name { font-family: var(--eq-titulo); font-size: 0.85rem; letter-spacing: 1px; color: var(--eq-luz); }
    .user-info .tier { font-family: var(--eq-lectura); font-size: 0.9rem; color: var(--eq-luz-dim); font-style: italic; }

    /* ---------- botón "Instalar app" (Ronda 12) ---------- */
    .top-actions-group { display: flex; align-items: center; gap: 14px; }
    .btn-instalar-app {
        display: none; align-items: center; gap: 8px; background: rgba(201, 162, 78, 0.1);
        border: 1px solid var(--eq-oro-linea); color: var(--eq-oro-claro); font-family: var(--eq-lectura);
        font-size: 0.95rem; padding: 9px 18px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease;
        white-space: nowrap;
    }
    .btn-instalar-app:hover { border-color: var(--eq-oro); background: rgba(201, 162, 78, 0.18); color: var(--eq-luz); }
    .btn-instalar-app i { color: var(--eq-oro); }
    /* JS le pone display:inline-flex cuando corresponde mostrarlo (ver eqInitInstalarApp en
       page-acceso-vip.js) -- si el JS no corre, el botón simplemente no aparece, no rompe nada. */

    /* ---------- aviso "Instalá Equinox 13 como app" (Ronda 50e) ---------- */
    /* Ronda 60: el aviso de instalar pasó de una franja ancha pegada a la barra a una tarjeta compacta y centrada, con aire
       arriba y abajo, ícono chico, una sola línea de texto y un botón de borde dorado (el botón "Instalar app" de la barra
       ya es el principal; éste es el recordatorio amable). */
    .eq-instalar-banner {
        display: none; align-items: center; gap: 14px; width: calc(100% - 80px); max-width: 780px; margin: 22px auto 10px;
        padding: 10px 12px 10px 14px; border: 1px solid var(--eq-oro-linea); border-radius: 12px;
        background: linear-gradient(135deg, rgba(201, 162, 78, 0.10), rgba(9, 16, 24, 0.55)); color: var(--eq-luz); position: relative; z-index: 5;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); box-sizing: border-box;
    }
    .eq-instalar-banner-icono { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; }
    .eq-instalar-banner-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
    .eq-instalar-banner-texto strong { font-family: var(--eq-titulo); font-size: 0.82rem; letter-spacing: 1.5px; color: var(--eq-oro-claro); font-weight: 600; text-transform: uppercase; }
    .eq-instalar-banner-texto span { font-family: var(--eq-lectura); font-size: 0.95rem; color: var(--eq-luz-dim); line-height: 1.35; }
    .eq-instalar-banner-btn {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
        background: transparent; color: var(--eq-oro-claro); border: 1px solid var(--eq-oro); border-radius: 30px;
        padding: 8px 16px; font-family: var(--eq-titulo); font-size: 0.75rem; letter-spacing: 1.5px; font-weight: 600; text-transform: uppercase; transition: 0.25s;
    }
    .eq-instalar-banner-btn:hover { background: var(--eq-oro); color: var(--eq-tinta); }
    .eq-instalar-banner-cerrar {
        flex-shrink: 0; background: none; border: 0; color: var(--eq-luz-dim); font-size: 1.3rem;
        line-height: 1; cursor: pointer; padding: 4px 6px; opacity: 0.7;
    }
    .eq-instalar-banner-cerrar:hover { color: var(--eq-luz); opacity: 1; }
    @media (max-width: 760px) {
        .eq-instalar-banner { width: calc(100% - 24px); margin: 14px auto 6px; flex-wrap: wrap; gap: 10px 12px; }
        .eq-instalar-banner-texto { flex-basis: calc(100% - 100px); padding-right: 22px; }
        .eq-instalar-banner-btn { flex: 1; justify-content: center; }
        .eq-instalar-banner-cerrar { position: absolute; top: 6px; right: 6px; }
    }

    /* ---------- modal de instrucciones (sólo iPhone/iPad) ---------- */
    .eq-instalar-box {
        background: var(--eq-papel) var(--eq-img-papel); background-size: 400px 400px;
        color: var(--eq-tinta); border: 1px solid rgba(154, 119, 52, 0.55); border-radius: 6px;
        padding: 38px 32px; width: 100%; max-width: 380px; text-align: center; position: relative;
    }
    .eq-instalar-cerrar {
        position: absolute; top: 14px; right: 18px; font-size: 1.4rem; line-height: 1; cursor: pointer;
        color: rgba(27, 42, 68, 0.5);
    }
    .eq-instalar-cerrar:hover { color: var(--eq-tinta); }
    .eq-instalar-icono { font-size: 2.2rem; color: var(--eq-oro); margin-bottom: 14px; }
    .eq-instalar-box h3 { font-family: var(--eq-titulo); font-size: 1.15rem; letter-spacing: 1px; margin-bottom: 12px; }
    .eq-instalar-intro { font-family: var(--eq-lectura); font-size: 1rem; color: rgba(27, 42, 68, 0.8); margin-bottom: 22px; line-height: 1.5; }
    .eq-instalar-pasos { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 16px; }
    .eq-instalar-pasos li { display: flex; align-items: center; gap: 14px; font-family: var(--eq-lectura); font-size: 1.02rem; }
    .eq-instalar-pasos i { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(154, 119, 52, 0.12); color: var(--eq-oro); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }

    /* ---------- menú lateral ---------- */
    .app-layout { gap: 34px; padding: 34px 40px; }
    .app-sidebar { width: 250px; }
    .sidebar-nav {
        background: var(--eq-panel); border: 1px solid var(--eq-oro-linea); border-radius: 8px; padding: 14px 10px;
        position: sticky; top: 96px; gap: 2px;
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .nav-grupo { font-family: var(--eq-titulo); font-size: 0.66rem; letter-spacing: 3px; text-transform: uppercase; color: var(--eq-oro); opacity: 0.8; padding: 14px 14px 6px 14px; }
    .nav-item {
        font-family: var(--eq-lectura); font-size: 1.1rem; color: var(--eq-luz-dim); padding: 10px 14px; border-radius: 4px;
        border: none; border-left: 2px solid transparent; gap: 14px; font-weight: 500;
    }
    .nav-item .nav-icon { width: 20px; text-align: center; font-size: 0.95rem; color: var(--eq-oro); opacity: 0.75; }
    .nav-item:hover { background: rgba(236, 220, 192, 0.05); color: var(--eq-luz); }
    .nav-item.active { background: rgba(236, 220, 192, 0.09); color: var(--eq-luz); border: none; border-left: 2px solid var(--eq-oro); }
    .nav-item.active .nav-icon { opacity: 1; color: var(--eq-oro-claro); }

    /* ---------- títulos de cada vista, sobre el cielo ---------- */
    #astral-app-wrapper { color: var(--eq-luz); font-family: var(--eq-lectura); }
    #astral-app-wrapper .dynamic-header, .section-header { margin-bottom: 34px; }
    #astral-app-wrapper .dynamic-header h1, .section-header h1 {
        font-family: var(--eq-titulo); color: var(--eq-luz); text-shadow: none; font-weight: 600; letter-spacing: 5px; font-size: 2.2rem;
    }
    #astral-app-wrapper .dynamic-header h1::after, .section-header h1::after {
        content: '✦'; display: block; color: var(--eq-oro); font-size: 0.9rem; letter-spacing: 0; margin-top: 12px;
    }
    #astral-app-wrapper .dynamic-header p, .section-header p {
        font-family: var(--eq-lectura); font-style: italic; font-size: 1.2rem; color: var(--eq-luz-dim) !important;
        text-transform: none; letter-spacing: 0.2px; max-width: 680px; margin: 0 auto;
    }

    /* ---------- HOJA DE PERGAMINO: todo contenido vive en una ---------- */
    .eq-hoja, #astral-app-wrapper .astral-form-card, .glass-progress-container {
        background: var(--eq-papel) var(--eq-img-papel); background-size: 400px 400px;
        color: var(--eq-tinta); border: 1px solid rgba(154, 119, 52, 0.55); border-radius: 4px;
        outline: 1px solid rgba(154, 119, 52, 0.28); outline-offset: -8px;
        box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45); backdrop-filter: none;
    }
    .eq-hoja { padding: 34px 38px; }
    #astral-app-wrapper .astral-form-card h3, .glass-progress-container h3 { color: var(--eq-tinta) !important; font-family: var(--eq-titulo); letter-spacing: 2px; }
    #astral-app-wrapper .astral-form-card p { color: var(--eq-tinta-dim); font-family: var(--eq-lectura); font-size: 1.15rem; }
    #astral-app-wrapper .astral-form-card i.fa-solid { color: var(--eq-oro) !important; }
    .eq-hoja-titulo { font-family: var(--eq-titulo); color: var(--eq-tinta); font-size: 1.25rem; letter-spacing: 2px; margin: 6px 0 8px 0; font-weight: 600; }
    .eq-hoja-bajada { font-family: var(--eq-lectura); font-size: 1.15rem; color: var(--eq-tinta-dim); margin-bottom: 24px; }
    .eq-hoja-etiqueta {
        display: block; font-family: var(--eq-titulo); font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase;
        color: #7d5f22; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid rgba(154, 119, 52, 0.35);
    }

    /* ---------- formulario de perfil sobre papel ---------- */
    #astral-app-wrapper .form-group label { font-family: var(--eq-titulo); color: var(--eq-tinta); font-size: 0.74rem; letter-spacing: 2.5px; }
    #astral-app-wrapper .form-group label i { color: var(--eq-oro); margin-right: 4px; }
    #astral-app-wrapper .form-control {
        background: rgba(255, 250, 240, 0.55); border: 1px solid rgba(27, 42, 68, 0.22); color: var(--eq-tinta);
        font-family: var(--eq-lectura); font-size: 1.15rem; border-radius: 3px; padding: 13px 15px;
    }
    #astral-app-wrapper .form-control::placeholder { color: rgba(27, 42, 68, 0.4); }
    #astral-app-wrapper .form-control:focus { border-color: var(--eq-oro); background: rgba(255, 252, 245, 0.85); box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.22); }
    #astral-app-wrapper .sugerencias-box { background: #f4e6cd; border: 1px solid var(--eq-oro); box-shadow: 0 14px 30px rgba(0,0,0,0.25); }
    #astral-app-wrapper .sugerencia-item { color: var(--eq-tinta); border-bottom: 1px solid rgba(27, 42, 68, 0.1); font-family: var(--eq-lectura); font-size: 1.05rem; }
    #astral-app-wrapper .sugerencia-item:hover { background: rgba(201, 162, 78, 0.18); color: var(--eq-tinta); }
    #astral-app-wrapper .lang-selector .lang-btn { border: 1px solid rgba(27, 42, 68, 0.25); color: var(--eq-tinta-dim); font-family: var(--eq-titulo); }
    #astral-app-wrapper .lang-selector input[type="radio"]:checked + .lang-btn { background: var(--eq-tinta); color: var(--eq-papel); border-color: var(--eq-tinta); }
    #profile-success-msg { color: #2f6b3f !important; font-family: var(--eq-lectura); font-size: 1.1rem; }
    .perfil-carta-activa { max-width: 900px; margin: 0 auto 30px auto; padding: 24px 30px; }
    .perfil-carta-activa > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
    .perfil-carta-activa .eq-hoja-titulo { margin: 0 0 4px 0; }
    .perfil-carta-activa .eq-hoja-etiqueta { border: none; padding: 0; margin-bottom: 6px; }
    #profile-chart-summary { font-family: var(--eq-lectura); font-size: 1.1rem; color: var(--eq-tinta); margin: 0; }

    /* ---------- botones ---------- */
    .btn-mystic {
        background: linear-gradient(180deg, #d8b467, #b98f3f); color: #16222f; border: 1px solid #e3c784; border-radius: 3px;
        font-family: var(--eq-titulo); font-weight: 700; letter-spacing: 2px; font-size: 0.82rem; padding: 14px 26px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }
    .btn-mystic:hover { background: linear-gradient(180deg, #e3c27a, #c79d4c); color: #0f1822; border-color: #f0d89c; box-shadow: 0 8px 24px rgba(201, 162, 78, 0.28); }
    .btn-mystic i { color: inherit; }
    .btn-secundario { background: transparent !important; color: var(--eq-oro-claro) !important; border: 1px solid var(--eq-oro-linea) !important; box-shadow: none; }
    .btn-secundario:hover { border-color: var(--eq-oro) !important; color: var(--eq-luz) !important; }
    /* sobre papel el llamado a la acción va en tinta, no en dorado sobre crema */
    .eq-hoja .btn-mystic, #astral-app-wrapper .astral-form-card .btn-mystic {
        background: var(--eq-tinta); color: #f3e6cc; border: 1px solid var(--eq-oro); box-shadow: none;
    }
    .eq-hoja .btn-mystic:hover, #astral-app-wrapper .astral-form-card .btn-mystic:hover { background: #24375a; color: #fff6e2; }
    .eq-hoja .btn-secundario { background: transparent !important; color: var(--eq-tinta) !important; border: 1px solid rgba(27, 42, 68, 0.35) !important; }
    .eq-hoja .btn-secundario:hover { border-color: var(--eq-tinta) !important; }

    /* ---------- VISTA: MI CUENTA (Ronda 18, Etapa B) ---------- */
    .cuenta-plan-actual { max-width: 900px; margin: 0 auto 26px auto; }
    .cuenta-plan-cabecera { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
    .cuenta-plan-precio { font-family: var(--eq-lectura); font-size: 1.3rem; color: var(--eq-tinta); margin: 0; }
    .cuenta-cuota-barra { background: rgba(27, 42, 68, 0.14); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
    .cuenta-cuota-fill { height: 100%; background: linear-gradient(90deg, #b98f3f, #e3c27a); border-radius: 4px; transition: width 0.4s ease; }
    .cuenta-cuota-texto { font-family: var(--eq-titulo); font-size: 0.78rem; letter-spacing: 1px; color: var(--eq-tinta-dim); margin: 0 0 14px 0; }
    .cuenta-detalle { font-family: var(--eq-lectura); font-size: 1rem; color: var(--eq-tinta-dim); margin: 0; }
    .cuenta-msg { font-family: var(--eq-lectura); font-size: 0.95rem; color: #7d5f22; margin-top: 10px; min-height: 1.2em; }

    .cuenta-planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
    .cuenta-plan-card { border: 1px solid rgba(154, 119, 52, 0.4); border-radius: 4px; padding: 20px; text-align: center; background: rgba(255, 250, 240, 0.3); }
    .cuenta-plan-card-actual { border-color: var(--eq-oro); background: rgba(201, 162, 78, 0.14); }
    .cuenta-plan-card-nombre { font-family: var(--eq-titulo); font-size: 0.95rem; letter-spacing: 1.5px; color: var(--eq-tinta); margin-bottom: 8px; }
    .cuenta-plan-card-precio { font-family: var(--eq-lectura); font-size: 1.6rem; color: var(--eq-tinta); margin-bottom: 4px; }
    .cuenta-plan-card-precio small { font-size: 0.9rem; color: var(--eq-tinta-dim); }
    .cuenta-plan-card-cuota { font-family: var(--eq-lectura); font-size: 0.9rem; color: var(--eq-tinta-dim); margin-bottom: 16px; }
    .cuenta-plan-card .btn-mystic { width: 100%; }
    .cuenta-plan-card .btn-mystic:disabled { opacity: 0.5; cursor: default; }
    .cuenta-facturas-tabla th, .cuenta-facturas-tabla td { text-align: left; }
    .cuenta-creditos-saldo { font-family: var(--eq-lectura); font-size: 1.15rem; color: var(--eq-tinta); margin: 0 0 6px 0; }
    .cuenta-creditos-nota { font-family: var(--eq-lectura); font-size: 0.9rem; color: var(--eq-tinta-dim); margin: 0 0 20px 0; }

    /* ---------- pantalla de carga: una hoja con una rueda que gira ---------- */
    .loader-global { color: var(--eq-luz); font-family: var(--eq-lectura); }
    .loader-global > i.fa-solid { color: var(--eq-oro) !important; }
    .loader-global > h3 { color: var(--eq-luz) !important; font-family: var(--eq-titulo) !important; letter-spacing: 3px; font-weight: 600; }
    .glass-progress-container { padding: 34px 38px; max-width: 520px; }
    .glass-progress-container span { color: var(--eq-tinta) !important; font-family: var(--eq-titulo) !important; font-size: 0.8rem !important; letter-spacing: 2.5px !important; font-weight: 600 !important; }
    .glass-progress-track { background: rgba(27, 42, 68, 0.14); height: 4px; }
    .glass-progress-fill { background: linear-gradient(90deg, #b98f3f, #e3c27a); box-shadow: none; }

    /* ---------- botonera debajo de cada reporte ---------- */
    #results-container .no-print, #transitos-resultados .no-print { gap: 16px !important; }

    /* ---------- tarot: se integra al cielo en vez de ser una caja violeta aparte ---------- */
    #tarot-app-wrapper { --bg-dark: transparent; --purple-accent: #c9a24e; --cyan-accent: #e2c47f; --bg-card: rgba(12, 21, 30, 0.72); --text-light: #ecdcc0; --text-muted: rgba(236, 220, 192, 0.62); --font-body: 'EB Garamond', Georgia, serif; background: transparent !important; }
    #tarot-app-wrapper .nav-btn { font-family: var(--eq-titulo); letter-spacing: 1.5px; font-size: 0.78rem; }

    /* =========================== INICIO =========================== */
    .inicio-cabecera { text-align: center; padding: 18px 10px 34px 10px; }
    .inicio-fecha { font-family: var(--eq-titulo); font-size: 0.78rem; letter-spacing: 3px; text-transform: uppercase; color: var(--eq-oro); margin-bottom: 16px; }
    .inicio-saludo { font-family: var(--eq-titulo); font-size: 2.4rem; letter-spacing: 3px; color: var(--eq-luz); font-weight: 600; margin: 0 0 10px 0; }
    .inicio-saludo::after { content: '✦'; display: block; font-size: 0.85rem; color: var(--eq-oro); margin-top: 12px; }
    .inicio-bajada { font-family: var(--eq-lectura); font-style: italic; font-size: 1.25rem; color: var(--eq-luz-dim); max-width: 640px; margin: 0 auto; }

    .inicio-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
    .firma-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; margin-bottom: 24px; }
    .firma-datos span { display: block; font-family: var(--eq-titulo); font-size: 0.66rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eq-tinta-dim); margin-bottom: 4px; }
    .firma-datos strong { font-family: var(--eq-lectura); font-size: 1.45rem; color: var(--eq-tinta); font-weight: 600; }

    .hoy-fila { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
    .hoy-luna svg { display: block; }
    .hoy-numero {
        width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--eq-oro); background: rgba(201, 162, 78, 0.12);
        display: flex; align-items: center; justify-content: center; font-family: var(--eq-titulo); font-size: 1.45rem; color: var(--eq-tinta); font-weight: 700;
    }
    .hoy-dato { font-family: var(--eq-lectura); font-size: 1.3rem; color: var(--eq-tinta); font-weight: 600; line-height: 1.2; }
    .hoy-sub { font-family: var(--eq-titulo); font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-tinta-dim); margin-top: 3px; }
    .hoy-texto { font-family: var(--eq-lectura); font-size: 1.08rem; color: var(--eq-tinta); line-height: 1.65; margin: 6px 0 0 0; padding-top: 14px; border-top: 1px solid rgba(154, 119, 52, 0.3); }
    .hoy-texto strong { color: #7d5f22; }

    /* Ronda 107 (pedido 33): «Tu cielo de hoy», debajo del panel «El cielo de hoy». */
    .inicio-cielo-lectura { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 34px; margin-bottom: 34px; }
    .inicio-cielo-lectura p { margin: 0; flex: 1 1 260px; }
    .inicio-cielo-lectura.herramienta-gris { opacity: 0.62; }
    .inicio-cielo-lectura .herramienta-linea { display: block; margin-top: 4px; }
    .cielo-tarjeta .consulta-a p { margin: 0 0 12px 0; }
    .inicio-transitos { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px 34px; margin-bottom: 34px; }
    .inicio-transitos .eq-hoja-etiqueta { border: none; padding: 0; margin-bottom: 6px; }
    .inicio-transitos p { font-family: var(--eq-lectura); font-size: 1.2rem; color: var(--eq-tinta); margin: 0; }
    .inicio-transitos.pendiente { border-left: 4px solid var(--eq-oro); }

    #inicio-camino { margin-bottom: 34px; }
    .inicio-pasos { display: flex; flex-direction: column; gap: 14px; }
    .inicio-paso { display: flex; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid rgba(154, 119, 52, 0.3); border-radius: 3px; background: rgba(255, 250, 240, 0.25); }
    .inicio-paso .paso-num {
        width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(27, 42, 68, 0.35);
        display: flex; align-items: center; justify-content: center; font-family: var(--eq-titulo); font-size: 1.2rem; color: var(--eq-tinta);
    }
    .inicio-paso .paso-cuerpo { flex: 1; }
    .inicio-paso h3 { font-family: var(--eq-titulo); font-size: 1rem; letter-spacing: 1.5px; color: var(--eq-tinta); margin: 0 0 4px 0; }
    .inicio-paso p { font-family: var(--eq-lectura); font-size: 1.08rem; color: var(--eq-tinta-dim); margin: 0; }
    .inicio-paso.siguiente { border: 1px solid var(--eq-oro); background: rgba(201, 162, 78, 0.12); }
    .inicio-paso.siguiente .paso-num { background: var(--eq-tinta); color: var(--eq-papel); border-color: var(--eq-tinta); }
    .inicio-paso.hecho .paso-num { background: rgba(201, 162, 78, 0.25); border-color: var(--eq-oro); font-size: 0; }
    .inicio-paso.hecho .paso-num::after { content: '✓'; font-size: 1.1rem; color: #7d5f22; }
    .inicio-paso.hecho .btn-mystic { background: transparent; color: var(--eq-tinta); border: 1px solid rgba(27, 42, 68, 0.3); }
    .inicio-paso.bloqueado { opacity: 0.5; }
    .inicio-paso.bloqueado .btn-mystic { pointer-events: none; background: transparent; color: var(--eq-tinta-dim); border: 1px solid rgba(27, 42, 68, 0.2); }

    .inicio-herramientas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
    .herramienta {
        background: var(--eq-panel); border: 1px solid var(--eq-oro-linea); border-radius: 6px; padding: 22px 20px; cursor: pointer;
        transition: border-color 0.25s, transform 0.25s, background 0.25s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .herramienta:hover { border-color: var(--eq-oro); transform: translateY(-3px); background: rgba(16, 28, 40, 0.75); }
    .herramienta i { color: var(--eq-oro); font-size: 1.25rem; margin-bottom: 14px; display: block; }
    .herramienta h3 { font-family: var(--eq-titulo); font-size: 0.9rem; letter-spacing: 1.5px; color: var(--eq-luz); margin: 0 0 6px 0; font-weight: 600; }
    .herramienta p { font-family: var(--eq-lectura); font-size: 1.02rem; color: var(--eq-luz-dim); margin: 0; }

    /* Ronda 107 (pedido 30, C05): herramientas del acompañamiento mensual, en gris y sin candado. */
    .herramienta.herramienta-gris { opacity: 0.62; border-color: rgba(185, 177, 154, 0.3); background: rgba(185, 177, 154, 0.05); }
    .herramienta.herramienta-gris:hover { transform: none; border-color: rgba(185, 177, 154, 0.45); background: rgba(185, 177, 154, 0.07); }
    .herramienta.herramienta-gris i, .herramienta.herramienta-gris h3 { color: #b9b19a; }
    .herramienta-linea { display: block; margin-top: 4px; font-size: 0.86rem; color: #b9b19a; }
    @media (max-width: 1100px) { .inicio-herramientas { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 900px) {
        /* El panel deslizante en sí (posición fija, ancho, transform) lo define style.css; acá
           sólo se retoma la estética a la carta (papel/dorado) para que el menú abierto combine
           con el resto del rediseño en vez de quedar con el look genérico oscuro de base. */
        .app-sidebar { background: rgba(17, 28, 39, 0.97); border-right: 1px solid var(--eq-oro-linea); }
        .sidebar-nav { position: static; top: auto; }
        .nav-toggle-btn { border-color: var(--eq-oro-linea); color: var(--eq-oro-claro); }
        .nav-toggle-btn:hover { background: rgba(236, 220, 192, 0.08); }
        .inicio-grilla { grid-template-columns: 1fr; }
        .app-layout { padding: 20px 16px; }
        .app-topbar { padding: 12px 16px; }
    }
    @media (max-width: 560px) {
        .inicio-herramientas { grid-template-columns: 1fr; }
        .inicio-saludo { font-size: 1.8rem; }
        .eq-hoja { padding: 26px 22px; }
        .inicio-paso { flex-wrap: wrap; }
        .user-info { display: none; }
        /* mismo criterio que .user-info de arriba: en pantallas muy chicas el botón queda sólo
           con el ícono, para no competir por espacio con el logo y el avatar. */
        .btn-instalar-texto { display: none; }
        .btn-instalar-app { padding: 9px 12px; }
        .top-actions-group { gap: 10px; }
    }

    /* ---------- Ronda 12: área segura del teléfono (notch / barra de gestos), SÓLO cuando la
       app está abierta instalada (no en una pestaña del navegador -- ahí "display-mode" nunca es
       "standalone", así que nada de esto cambia cómo se ve hoy en el navegador). Van al final a
       propósito para pisar, con el mismo selector y la misma especificidad, el padding de las
       reglas de arriba (desktop y mobile) sin tocarlas: sólo se agrega padding-top/bottom extra,
       nunca se reemplaza el padding lateral que ya tenían. */
    @media (display-mode: standalone) {
        .app-topbar { padding-top: calc(14px + env(safe-area-inset-top)); }
        .app-layout { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
    }
    @media (max-width: 900px) and (display-mode: standalone) {
        .app-topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
        .app-layout { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
        /* el panel deslizante del menú (fixed, pantalla completa) es el que de verdad necesita
           esto: sin la barra de direcciones del navegador reservando espacio arriba/abajo, su
           padding fijo (90px/30px, en style.css) quedaría corto contra el notch o la barra de
           gestos del teléfono. */
        .app-sidebar { padding-top: calc(90px + env(safe-area-inset-top)); padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
    }

    } /* fin @media screen del rediseño */

    /* =========================================================================
       MATRIZ Y CONVERSOR (exclusivo de la Formación Equinox) y su hoja de acceso.
       Sólo pantalla: no participa del PDF.
       ========================================================================= */
    @media screen {
    .nav-candado { font-size: 0.72rem; color: var(--eq-oro); opacity: 0.7; margin-left: auto; }
    .herramienta-candado { font-size: 0.7rem; color: var(--eq-oro); margin-left: 6px; vertical-align: 2px; }

    .almanaque-hoja, .conversor-hoja, .formacion-bloqueo { max-width: 980px; margin: 0 auto 28px auto; }
    .almanaque-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
    .almanaque-titulos { text-align: center; flex: 1; }
    .almanaque-antetitulo { font-family: var(--eq-titulo); font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: #7d5f22; }
    #current-month-display { font-family: var(--eq-titulo); font-size: 1.7rem; letter-spacing: 2px; color: var(--eq-tinta); margin: 8px 0 6px 0; font-weight: 600; }
    #current-greg-interval { font-family: var(--eq-lectura); font-style: italic; font-size: 1.1rem; color: var(--eq-tinta-dim); }
    .almanaque-flecha {
        width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(27, 42, 68, 0.3); background: transparent;
        color: var(--eq-tinta); cursor: pointer; font-size: 0.95rem; transition: all 0.2s;
    }
    .almanaque-flecha:hover { border-color: var(--eq-oro); background: rgba(201, 162, 78, 0.15); }

    .almanaque-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
    .alm-dia {
        border: 1px solid rgba(154, 119, 52, 0.3); border-radius: 3px; background: rgba(255, 250, 240, 0.3);
        padding: 10px 10px 8px 10px; min-height: 84px; display: flex; flex-direction: column; gap: 2px;
    }
    .alm-dia .alm-num { font-family: var(--eq-titulo); font-size: 1.35rem; font-weight: 600; color: var(--eq-tinta); line-height: 1.1; }
    .alm-dia .alm-greg { font-family: var(--eq-lectura); font-size: 0.98rem; color: var(--eq-tinta-dim); }
    .alm-dia .alm-arcano { font-family: var(--eq-titulo); font-size: 0.62rem; letter-spacing: 1.5px; color: #7d5f22; margin-top: auto; }
    .alm-dia.hoy { background: var(--eq-tinta); border-color: var(--eq-tinta); }
    .alm-dia.hoy .alm-num { color: #f3e6cc; }
    .alm-dia.hoy .alm-greg { color: rgba(243, 230, 204, 0.75); }
    .alm-dia.hoy .alm-arcano { color: var(--eq-oro-claro); }
    .almanaque-leyenda { font-family: var(--eq-lectura); font-style: italic; font-size: 1rem; color: var(--eq-tinta-dim); text-align: center; margin: 16px 0 0 0; }
    .almanaque-error { grid-column: 1 / -1; font-family: var(--eq-lectura); color: #8a2a1c; text-align: center; }
    .almanaque-acciones { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }

    #almanaque-completo { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(154, 119, 52, 0.35); }
    .alm-completo-titulo { font-family: var(--eq-titulo); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: #7d5f22; text-align: center; margin-bottom: 18px; }
    .alm-completo-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    .alm-mini { border: 1px solid rgba(154, 119, 52, 0.3); border-radius: 3px; padding: 12px; cursor: pointer; background: rgba(255, 250, 240, 0.25); transition: border-color 0.2s; }
    .alm-mini:hover, .alm-mini.activo { border-color: var(--eq-oro); background: rgba(201, 162, 78, 0.12); }
    .alm-mini-nombre { font-family: var(--eq-titulo); font-size: 0.9rem; letter-spacing: 1.5px; color: var(--eq-tinta); font-weight: 600; }
    .alm-mini-greg { font-family: var(--eq-lectura); font-style: italic; font-size: 0.95rem; color: var(--eq-tinta-dim); margin-bottom: 8px; }
    .alm-mini-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .alm-mini-dias span { font-family: var(--eq-lectura); font-size: 0.85rem; color: var(--eq-tinta); text-align: center; }

    .conversor-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .conversor-bloque h3 { font-family: var(--eq-titulo); font-size: 0.95rem; letter-spacing: 1.5px; color: var(--eq-tinta); margin: 0 0 14px 0; }
    .conversor-bloque .form-group { margin-bottom: 14px; }
    .conversor-fila { display: grid; grid-template-columns: 80px 1fr 100px; gap: 8px; margin-bottom: 14px; }
    .conversor-hoja .form-control {
        width: 100%; box-sizing: border-box; background: rgba(255, 250, 240, 0.55); border: 1px solid rgba(27, 42, 68, 0.22); color: var(--eq-tinta);
        font-family: var(--eq-lectura); font-size: 1.08rem; border-radius: 3px; padding: 11px 12px; outline: none;
    }
    .conversor-hoja .form-control:focus, .formacion-canje .form-control:focus { border-color: var(--eq-oro); box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.22); }
    .conversor-resultado { margin-top: 16px; }
    .conv-linea { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(154, 119, 52, 0.25); }
    .conv-linea span { font-family: var(--eq-titulo); font-size: 0.64rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-tinta-dim); padding-top: 4px; }
    .conv-linea strong { font-family: var(--eq-lectura); font-size: 1.08rem; color: var(--eq-tinta); text-align: right; }
    .conversor-error { font-family: var(--eq-lectura); color: #8a2a1c; }
    .conversor-espera { font-family: var(--eq-lectura); font-style: italic; color: var(--eq-tinta-dim); }

    .formacion-bloqueo { max-width: 720px; text-align: center; padding: 42px 46px; }
    .formacion-candado {
        width: 58px; height: 58px; margin: 0 auto 18px auto; border-radius: 50%; border: 1px solid var(--eq-oro); background: rgba(201, 162, 78, 0.12);
        display: flex; align-items: center; justify-content: center; color: #7d5f22; font-size: 1.3rem;
    }
    .formacion-bloqueo .eq-hoja-etiqueta { display: inline-block; }
    .formacion-texto { font-family: var(--eq-lectura); font-size: 1.18rem; line-height: 1.7; color: var(--eq-tinta); margin: 0 0 18px 0; }
    .formacion-canje { display: flex; gap: 10px; max-width: 460px; margin: 8px auto 12px auto; }
    .formacion-canje .form-control {
        flex: 1; min-width: 0; background: rgba(255, 250, 240, 0.6); border: 1px solid rgba(27, 42, 68, 0.25); color: var(--eq-tinta); border-radius: 3px;
        padding: 12px 14px; font-family: var(--eq-titulo); font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; text-align: center; outline: none;
    }
    .formacion-mensaje { font-family: var(--eq-lectura); font-size: 1.05rem; min-height: 1.5em; color: var(--eq-tinta-dim); margin-bottom: 8px; }
    .formacion-mensaje.error { color: #8a2a1c; }
    .formacion-mensaje.ok { color: #2f6b3f; }
    .formacion-mas a { font-family: var(--eq-titulo); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: #7d5f22; text-decoration: none; border-bottom: 1px solid rgba(125, 95, 34, 0.4); }
    .formacion-mas a:hover { color: var(--eq-tinta); border-color: var(--eq-tinta); }

    /* Ronda 22 (24/09): la pantalla de bloqueo del Almanaque pasa de "pedí tu código" a vender
       Formación Equinox 13 ahí mismo -- lista de beneficios + CTA grande al plan, con el canje de
       código como <details> colapsado y secundario para alumnos de antes. */
    .formacion-beneficios { list-style: none; margin: 0 auto 26px auto; padding: 0; max-width: 460px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
    .formacion-beneficios li { font-family: var(--eq-lectura); font-size: 1.05rem; line-height: 1.5; color: var(--eq-tinta); display: flex; align-items: flex-start; gap: 10px; }
    .formacion-beneficios li i { color: #7d5f22; margin-top: 4px; flex-shrink: 0; }
    .formacion-cta { font-size: 1rem !important; padding: 17px 34px !important; }
    .formacion-precio-nota { font-size: 0.95rem !important; color: var(--eq-tinta-dim) !important; margin: 10px 0 22px 0 !important; }
    .formacion-codigo-alt { max-width: 460px; margin: 0 auto; text-align: left; }
    .formacion-codigo-alt summary {
        font-family: var(--eq-titulo); font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eq-tinta-dim);
        cursor: pointer; text-align: center; padding: 8px 0; list-style: none;
    }
    .formacion-codigo-alt summary::-webkit-details-marker { display: none; }
    .formacion-codigo-alt summary:hover { color: var(--eq-tinta); }
    .formacion-codigo-alt[open] summary { margin-bottom: 6px; }
    .formacion-codigo-alt .formacion-texto { font-size: 1rem; text-align: center; }

    @media (max-width: 760px) {
        .almanaque-grilla { grid-template-columns: repeat(4, 1fr); }
        .almanaque-flecha { width: 36px; height: 36px; }
        .almanaque-hoja { padding: 26px 16px; }
        .conversor-columnas { grid-template-columns: 1fr; }
        #current-month-display { font-size: 1.3rem; }
        .formacion-bloqueo { padding: 30px 22px; }
        .formacion-canje { flex-direction: column; }
    }
    } /* fin @media screen de la Matriz y Conversor */


    /* =========================================================================
       HERRAMIENTAS: Conversor de Fechas, Signo Real y Numerología (hojas de pergamino)
       Ronda 15: pasa de "@media screen" a "@media all" porque la Carta Numerológica ahora se
       exporta a PDF y usa estas mismas clases (num-*, nx-*). Todo está acotado a clases de
       estas herramientas, así que no cambia nada de la impresión de Carta Natal/Tránsitos.
       ========================================================================= */
    @media all {
    #view-conversor .eq-hoja, #view-signo .eq-hoja, #view-numerologia .eq-hoja, #view-cuenta .eq-hoja { max-width: 1000px; margin: 0 auto 26px auto; }
    #view-conversor .conversor-bloque .btn-mystic { margin-top: 4px; }
    .herr-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
    .herr-grilla .herr-ancho { grid-column: 1 / -1; }
    .herr-form .form-group { margin-bottom: 14px; }
    .herr-form label { display: block; font-family: var(--eq-titulo); color: var(--eq-tinta); font-size: 0.74rem; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 8px; }
    .herr-opcional { text-transform: none; letter-spacing: 0; font-family: var(--eq-lectura); font-style: italic; font-size: 0.95rem; color: var(--eq-tinta-dim); }
    .herr-form .form-control, #view-conversor .form-control {
        width: 100%; box-sizing: border-box; background: rgba(255, 250, 240, 0.55); border: 1px solid rgba(27, 42, 68, 0.22); color: var(--eq-tinta);
        font-family: var(--eq-lectura); font-size: 1.12rem; border-radius: 3px; padding: 12px 14px; outline: none;
    }
    .herr-form .form-control:focus, #view-conversor .form-control:focus { border-color: var(--eq-oro); box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.22); }
    .herr-form .sugerencias-box { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: none; background: #f4e6cd; border: 1px solid var(--eq-oro); box-shadow: 0 14px 30px rgba(0,0,0,0.25); max-height: 240px; overflow-y: auto; }
    .herr-form .sugerencia-item { padding: 10px 14px; cursor: pointer; color: var(--eq-tinta); font-family: var(--eq-lectura); font-size: 1.05rem; border-bottom: 1px solid rgba(27, 42, 68, 0.1); }
    .herr-form .sugerencia-item:hover { background: rgba(201, 162, 78, 0.18); }
    .herr-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
    .herr-nota { font-family: var(--eq-lectura); font-style: italic; font-size: 1.02rem; color: var(--eq-tinta-dim); margin: 22px 0 0 0; line-height: 1.6; }
    .herr-aviso { text-align: center; font-family: var(--eq-lectura); font-size: 1.15rem; color: var(--eq-tinta-dim); }
    .herr-aviso.error { color: #8a2a1c; }
    .herr-sep { margin-top: 30px; }

    .signo-cabecera { font-family: var(--eq-titulo); font-size: 0.82rem; letter-spacing: 2.5px; text-transform: uppercase; color: #7d5f22; text-align: center; margin-bottom: 26px; }
    .signo-cabecera span { color: rgba(154, 119, 52, 0.6); margin: 0 6px; }
    .signo-astros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .signo-astro { text-align: center; padding: 22px 16px; border: 1px solid rgba(154, 119, 52, 0.35); border-radius: 3px; background: rgba(255, 250, 240, 0.28); }
    .signo-astro .eq-hoja-etiqueta { border: none; padding: 0; margin-bottom: 10px; }
    .signo-real { font-family: var(--eq-titulo); font-size: 1.9rem; font-weight: 600; letter-spacing: 1.5px; color: var(--eq-tinta); }
    .signo-sub { font-family: var(--eq-titulo); font-size: 0.64rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eq-tinta-dim); margin: 4px 0 14px 0; }
    .signo-trad { font-family: var(--eq-lectura); font-size: 1.1rem; color: var(--eq-tinta); }
    .signo-trad strong { color: #7d5f22; }
    .signo-grado { font-family: var(--eq-lectura); font-style: italic; font-size: 0.98rem; color: var(--eq-tinta-dim); margin-top: 6px; }
    .signo-nota { font-family: var(--eq-lectura); font-size: 0.98rem; color: #8a5a1c; margin-top: 10px; }
    .signo-falta p { font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta-dim); margin: 10px 0 0 0; }
    .herr-tabla { width: 100%; border-collapse: collapse; font-family: var(--eq-lectura); font-size: 1.08rem; color: var(--eq-tinta); font-variant-numeric: lining-nums tabular-nums; }
    .herr-tabla th { font-family: var(--eq-titulo); font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: #7d5f22; text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(154, 119, 52, 0.45); font-weight: 600; }
    .herr-tabla td { padding: 9px 8px; border-bottom: 1px solid rgba(154, 119, 52, 0.2); }
    .herr-tabla tr.actual td { background: rgba(201, 162, 78, 0.16); font-weight: 600; }

    .num-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .num-grilla-4 { grid-template-columns: repeat(2, 1fr); }
    .num-tarjeta { display: flex; gap: 16px; padding: 18px; border: 1px solid rgba(154, 119, 52, 0.32); border-radius: 3px; background: rgba(255, 250, 240, 0.28); }
    .num-circulo {
        width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--eq-oro); background: rgba(201, 162, 78, 0.12);
        display: flex; align-items: center; justify-content: center; font-family: var(--eq-titulo); font-size: 1.5rem; font-weight: 700; color: var(--eq-tinta);
    }
    .num-cuerpo h3 { font-family: var(--eq-titulo); font-size: 0.92rem; letter-spacing: 1.5px; color: var(--eq-tinta); margin: 2px 0 6px 0; }
    .num-clave { font-family: var(--eq-lectura); font-size: 1.15rem; font-weight: 600; color: #7d5f22; }
    .num-cuerpo p { font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta); margin: 4px 0 6px 0; line-height: 1.5; }
    .num-cabala { font-family: var(--eq-titulo); font-size: 0.66rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--eq-tinta-dim); margin: 4px 0; }
    .num-que-es { font-family: var(--eq-lectura); font-style: italic; font-size: 0.96rem; color: var(--eq-tinta-dim); margin-top: 6px; }
    .num-trad { font-family: var(--eq-lectura); font-size: 0.98rem; color: #8a5a1c; margin: 4px 0; }
    .num-mapa { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-bottom: 24px; }
    .num-celda { text-align: center; border: 1px solid rgba(154, 119, 52, 0.35); border-radius: 3px; padding: 10px 4px; background: rgba(255, 250, 240, 0.3); }
    .num-celda span { display: block; font-family: var(--eq-titulo); font-size: 0.7rem; letter-spacing: 1px; color: var(--eq-tinta-dim); }
    .num-celda strong { font-family: var(--eq-titulo); font-size: 1.4rem; color: var(--eq-tinta); }
    .num-celda.vacia { background: rgba(138, 42, 28, 0.06); border-style: dashed; }
    .num-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
    .num-dos h3 { font-family: var(--eq-titulo); font-size: 0.95rem; letter-spacing: 1.5px; color: var(--eq-tinta); margin: 0 0 4px 0; }
    .num-dos p { font-family: var(--eq-lectura); font-size: 1.08rem; color: var(--eq-tinta); margin: 6px 0; }
    .num-dos strong { font-family: var(--eq-titulo); color: #7d5f22; }

    @media (max-width: 760px) {
        .herr-grilla, .signo-astros, .num-grilla, .num-grilla-4, .num-dos { grid-template-columns: 1fr; }
        .num-mapa { grid-template-columns: repeat(5, 1fr); }
        .herr-tabla { font-size: 0.95rem; }
    }

    /* ---- Numerología: estudio completo ---- */
    .num-circulo.chico { font-size: 1.05rem; letter-spacing: -0.5px; }
    .nx-par { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
    .nx-trad { display: flex; flex-direction: column; align-items: center; line-height: 1; }
    .nx-trad span { font-family: var(--eq-titulo); font-size: 1rem; font-weight: 600; color: #8a5a1c; border: 1px dashed rgba(138, 90, 28, 0.55); border-radius: 50%; min-width: 34px; height: 34px; padding: 0 4px; display: flex; align-items: center; justify-content: center; }
    .nx-trad small { font-family: var(--eq-titulo); font-size: 0.52rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--eq-tinta-dim); margin-top: 4px; }
    .nx-leyenda { font-family: var(--eq-lectura); font-size: 1rem; color: var(--eq-tinta-dim); margin: -4px 0 16px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .nx-punto { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-left: 10px; }
    .nx-punto:first-child { margin-left: 0; }
    .nx-punto.eq { border: 1px solid var(--eq-oro); background: rgba(201, 162, 78, 0.25); }
    .nx-punto.tr { border: 1px dashed rgba(138, 90, 28, 0.7); }

    /* width 0 + min-width 100%: la tabla ancha no estira la hoja en el celular, se desplaza adentro */
    .nx-grilla-scroll, .nx-casas-scroll { width: 0; min-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    .nx-grilla { border-collapse: separate; border-spacing: 2px; margin: 4px 0 16px 0; font-variant-numeric: lining-nums tabular-nums; }
    .nx-grilla td { width: 20px; min-width: 20px; height: 24px; padding: 0; text-align: center; font-family: var(--eq-titulo); font-size: 0.76rem; color: var(--eq-tinta); border: 1px solid rgba(154, 119, 52, 0.18); background: rgba(255, 250, 240, 0.25); border-radius: 2px; }
    .nx-grilla td.esp { border-color: transparent; background: transparent; width: 6px; min-width: 6px; }
    .nx-grilla .nx-f-voc td.con, .nx-grilla .nx-f-con td.con { background: rgba(27, 42, 68, 0.07); }
    .nx-grilla .nx-f-alma td.con, .nx-grilla .nx-f-per td.con { background: rgba(201, 162, 78, 0.42); border-color: var(--eq-oro); font-weight: 700; }
    .nx-grilla .nx-f-letras td { background: var(--eq-tinta); color: #f4ebd8; font-weight: 600; border-color: var(--eq-tinta); }
    .nx-grilla .nx-f-letras td.esp { background: transparent; border-color: transparent; }
    .nx-sumas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .nx-sumas div { border: 1px solid rgba(154, 119, 52, 0.32); border-radius: 3px; padding: 10px; text-align: center; background: rgba(255, 250, 240, 0.28); }
    .nx-sumas span { display: block; font-family: var(--eq-titulo); font-size: 0.62rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--eq-tinta-dim); margin-bottom: 4px; }
    .nx-sumas strong { font-family: var(--eq-titulo); font-size: 1.15rem; color: var(--eq-tinta); }

    .nx-modos-bloque { margin-bottom: 14px; padding: 14px 16px; border: 1px dashed rgba(138, 90, 28, 0.4); border-radius: 3px; }
    .nx-modos-bloque.destacado { border: 1px solid var(--eq-oro); background: rgba(201, 162, 78, 0.1); }
    .nx-modos-bloque h4, .nx-etapas-bloque h4, .nx-cruz h4 { font-family: var(--eq-titulo); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: #7d5f22; margin: 0 0 10px 0; }
    .nx-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .nx-modo { text-align: center; }
    .nx-modo span { display: block; font-family: var(--eq-titulo); font-size: 0.64rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eq-tinta-dim); }
    .nx-modo-cuenta { font-family: var(--eq-lectura); font-size: 1rem; color: var(--eq-tinta); margin: 4px 0; }
    .nx-modo strong { font-family: var(--eq-titulo); font-size: 1.35rem; color: var(--eq-tinta); }

    .nx-etapas-bloque { margin-bottom: 22px; }
    .nx-etapas-bloque .num-que-es { margin: -4px 0 12px 0; }
    .nx-etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
    .nx-etapa { border: 1px solid rgba(154, 119, 52, 0.32); border-radius: 3px; padding: 12px; text-align: center; background: rgba(255, 250, 240, 0.28); display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .nx-etapa > small { font-family: var(--eq-titulo); font-size: 0.64rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eq-tinta-dim); }
    .nx-etapa .nx-par { flex-direction: row; gap: 12px; }
    .nx-etapa-clave { font-family: var(--eq-lectura); font-size: 1.02rem; font-weight: 600; color: #7d5f22; }
    .nx-etapa .num-trad { font-size: 0.92rem; }

    .nx-casas { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 620px; table-layout: fixed; font-variant-numeric: lining-nums tabular-nums; }
    .nx-casas th { width: 108px; font-family: var(--eq-titulo); font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase; color: #7d5f22; text-align: right; padding-right: 10px; white-space: nowrap; font-weight: 600; }
    .nx-casas td { text-align: center; font-family: var(--eq-titulo); font-size: 0.92rem; color: var(--eq-tinta); border: 1px solid rgba(154, 119, 52, 0.25); background: rgba(255, 250, 240, 0.35); border-radius: 2px; padding: 5px 2px; }
    .nx-casas .nx-cab td { border: none; background: transparent; padding-bottom: 6px; }
    .nx-casas .nx-cab strong { display: block; font-size: 1.1rem; color: var(--eq-tinta); }
    .nx-casas .nx-cab small { font-family: var(--eq-lectura); font-size: 0.78rem; color: var(--eq-tinta-dim); letter-spacing: 0; }
    .nx-casas .nx-hab td { background: transparent; border-style: dashed; color: var(--eq-tinta-dim); font-size: 0.82rem; }
    .nx-casas .nx-base td { background: rgba(201, 162, 78, 0.34); border-color: var(--eq-oro); font-weight: 700; }
    .nx-casas td.vacia { background: rgba(138, 42, 28, 0.12); border-color: rgba(138, 42, 28, 0.6); color: #8a2a1c; }
    .nx-casas .nx-ind td { background: transparent; font-size: 0.85rem; }
    .nx-casas .nx-sep th, .nx-casas .nx-sep td { border-top-width: 1px; }
    .nx-casas tr.nx-sep > * { padding-top: 7px; }

    .nx-dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .nx-herencias td:nth-child(2) { font-size: 0.95rem; color: var(--eq-tinta-dim); }
    .nx-herencias .nx-red { font-family: var(--eq-titulo); font-weight: 700; color: #7d5f22; }
    .nx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px 0; }
    .nx-chips button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(154, 119, 52, 0.5); background: rgba(255, 250, 240, 0.45); font-family: var(--eq-titulo); font-size: 1rem; color: var(--eq-tinta); cursor: pointer; transition: all 0.2s; }
    .nx-chips button:hover { border-color: var(--eq-oro); background: rgba(201, 162, 78, 0.2); }
    .nx-chips button.activo { background: var(--eq-tinta); color: #f4ebd8; border-color: var(--eq-tinta); }
    .nx-cruces { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .nx-cruz { text-align: center; }
    .nx-cruz-grilla { display: grid; grid-template-columns: 1fr 58px 1fr; grid-template-rows: auto 58px auto; align-items: center; justify-items: center; gap: 4px; }
    .nx-cruz-arriba { grid-column: 2; grid-row: 1; }
    .nx-cruz-izq { grid-column: 1; grid-row: 2; }
    .nx-cruz-rombo { grid-column: 2; grid-row: 2; width: 38px; height: 38px; border: 1px solid var(--eq-oro); transform: rotate(45deg); }
    .nx-cruz-der { grid-column: 3; grid-row: 2; }
    .nx-cruz-abajo { grid-column: 2; grid-row: 3; }
    .nx-cruz-grilla > div { display: flex; flex-direction: column; align-items: center; }
    .nx-cruz-num { width: 38px; height: 38px; border: 1px solid rgba(154, 119, 52, 0.5); border-radius: 3px; background: rgba(201, 162, 78, 0.18); display: flex; align-items: center; justify-content: center; font-family: var(--eq-titulo); font-size: 1.15rem; font-weight: 700; color: var(--eq-tinta); }
    .nx-cruz-grilla small { font-family: var(--eq-lectura); font-size: 0.82rem; color: var(--eq-tinta-dim); margin-top: 3px; line-height: 1.15; max-width: 92px; }

    /* ---- Glosario con mouseover: un ícono (i) junto a cada término raro, además de la guía
       de referencia al pie de página. Con :hover y :focus-visible para mouse/teclado, y una
       clase .activo que el JS alterna con un click/tap para que funcione igual en el celular. ---- */
    .nx-info {
        position: relative; display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; margin-left: 6px; border-radius: 50%; cursor: help;
        color: var(--eq-oro); font-size: 0.74rem; vertical-align: 2px; outline: none;
    }
    .nx-info:hover, .nx-info:focus-visible, .nx-info.activo { color: #7d5f22; }
    .nx-tip {
        position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px);
        width: 260px; max-width: 74vw; background: var(--eq-tinta); color: #f4ebd8; text-align: left;
        font-family: var(--eq-lectura); font-size: 0.95rem; font-style: normal; line-height: 1.5;
        padding: 12px 14px; border-radius: 4px; border: 1px solid var(--eq-oro);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); z-index: 40;
        opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .nx-tip::after {
        content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
        border: 6px solid transparent; border-top-color: var(--eq-tinta);
    }
    .nx-info:hover .nx-tip, .nx-info:focus-visible .nx-tip, .nx-info.activo .nx-tip {
        opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
    }
    th .nx-info, .nx-casas th .nx-info { vertical-align: 1px; }

    /* ---- Tu lectura de Numerología (IA): prosa fácil de leer, primera sección de la página.
       El texto lo arma OpenAI a partir del prompt del servidor y llega con <h4 class="astro-title">,
       <p>, <ul><li> y <blockquote> — se estiliza igual que el resto de las lecturas del sistema,
       pero en tinta y oro sobre papel para quedar dentro de la misma hoja. ---- */
    .nx-lectura-ia { font-family: var(--eq-lectura); }
    .nx-lectura-ia .num-que-es { text-align: center; }
    .nx-lectura-ia .num-que-es i { color: var(--eq-oro); margin-right: 8px; }
    .nx-lectura-ia h4.astro-title {
        font-family: var(--eq-titulo); color: var(--eq-tinta); font-size: 1.05rem; letter-spacing: 2px; text-transform: uppercase;
        margin: 28px 0 14px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(154, 119, 52, 0.35);
    }
    .nx-lectura-ia h4.astro-title:first-child { margin-top: 0; }
    .nx-lectura-ia h4.astro-title i { color: var(--eq-oro); margin-right: 8px; }
    .nx-lectura-ia p { font-family: var(--eq-lectura); font-size: 1.12rem; line-height: 1.75; color: var(--eq-tinta); margin: 0 0 16px 0; text-align: justify; }
    .nx-lectura-ia ul { margin: 0 0 18px 0; padding-left: 22px; list-style-type: square; color: var(--eq-oro); }
    .nx-lectura-ia li { font-family: var(--eq-lectura); font-size: 1.1rem; line-height: 1.7; color: var(--eq-tinta); margin-bottom: 10px; }
    .nx-lectura-ia strong { color: #7d5f22; font-weight: 700; }
    .nx-lectura-ia blockquote {
        background: rgba(201, 162, 78, 0.12); border-left: 3px solid var(--eq-oro); padding: 14px 20px; margin: 20px 0;
        font-style: italic; color: #7d5f22; font-family: var(--eq-lectura); font-size: 1.08rem;
    }
    .nx-lectura-ia blockquote p { margin-bottom: 0; text-align: left; }

    /* ---- Ver el cálculo completo: el detalle numérico denso queda plegado por defecto, para
       que lo primero que se vea sea la lectura narrada y las tarjetas, no una pared de tablas. ---- */
    .nx-detalle summary {
        list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
        font-family: var(--eq-titulo); font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; color: #7d5f22;
        padding: 2px 0; transition: color 0.15s ease;
    }
    .nx-detalle summary::-webkit-details-marker { display: none; }
    .nx-detalle summary::before {
        content: '▸'; display: inline-block; color: var(--eq-oro); font-size: 0.9rem; transition: transform 0.2s ease; flex-shrink: 0;
    }
    .nx-detalle[open] summary::before { transform: rotate(90deg); }
    .nx-detalle summary span { font-family: var(--eq-lectura); font-style: italic; font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--eq-tinta-dim); }
    .nx-detalle summary:hover, .nx-detalle summary:hover::before { color: var(--eq-tinta); }
    .nx-detalle-cuerpo { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(154, 119, 52, 0.3); }

    @media (max-width: 760px) {
        .nx-sumas { grid-template-columns: repeat(2, 1fr); }
        .nx-modos { grid-template-columns: 1fr; gap: 12px; }
        .nx-dos-col, .nx-cruces { grid-template-columns: 1fr; }
        .nx-doble { flex-direction: row; }
        .nx-casas { min-width: 540px; }
        .nx-casas th { width: 82px; font-size: 0.6rem; letter-spacing: 1px; padding-right: 6px; }
        .nx-tip { left: auto; right: -10px; transform: translateY(4px); width: 220px; }
        .nx-tip::after { left: auto; right: 16px; transform: none; }
        .nx-info:hover .nx-tip, .nx-info:focus-visible .nx-tip, .nx-info.activo .nx-tip { transform: translateY(0); }
        .nx-lectura-ia p, .nx-lectura-ia li { font-size: 1.03rem; }
        .nx-detalle summary { font-size: 0.76rem; letter-spacing: 1.5px; }
    }

    /* ---- Pestañas de Numerología (Ronda 6, 23/09 — rediseño app-style): sistema propio,
       scopeado a #view-numerologia, para no compartir clases con las pestañas del Tarot
       (#tarot-app-wrapper .nav-btn / .tab-content), que van por índice global y se
       desincronizarían con una segunda barra de pestañas en otra vista. ---- */
    #view-numerologia .nx-tabs-wrapper { max-width: 1000px; margin: 0 auto; }
    #view-numerologia .nx-subnav {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px 0;
        /* mismo truco que .nx-grilla-scroll/.nx-casas-scroll (más abajo) para que una fila que no
           entra (flex-wrap: nowrap + overflow-x: auto en mobile) haga scroll propio en vez de
           empujar el ancho de toda la página — "width:100%" no alcanza en este árbol de flexbox
           anidado (.app-layout > .main-workspace), sólo "width:0; min-width:100%" lo fuerza bien. */
        width: 0; min-width: 100%; box-sizing: border-box;
    }
    #view-numerologia .nx-nav-btn {
        display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 250, 240, 0.45);
        border: 1px solid rgba(154, 119, 52, 0.4); border-radius: 30px; color: var(--eq-tinta-dim);
        font-family: var(--eq-titulo); font-size: 0.74rem; letter-spacing: 1.5px; text-transform: uppercase;
        padding: 10px 16px; cursor: pointer; transition: all 0.2s ease;
    }
    #view-numerologia .nx-nav-btn i { color: var(--eq-oro); }
    #view-numerologia .nx-nav-btn:hover { border-color: var(--eq-oro); color: var(--eq-tinta); }
    #view-numerologia .nx-nav-btn.active { background: var(--eq-tinta); color: #f4ebd8; border-color: var(--eq-tinta); }
    #view-numerologia .nx-nav-btn.active i { color: var(--eq-oro-claro, var(--eq-oro)); }
    #view-numerologia .nx-tab-content { display: none; }
    #view-numerologia .nx-tab-content.active { display: block; animation: fadeIn 0.4s ease forwards; }
    @media (max-width: 640px) {
        /* Ronda 14 (24/09): mismo criterio que .eq-quicknav (Carta Natal/Tránsitos) -- se saca el
           scroll horizontal forzado (que escondía pestañas sin avisar) y se deja que envuelva en
           varias filas, todas las pestañas visibles de una, igual que ya se ve en desktop. */
        #view-numerologia .nx-subnav { justify-content: center; gap: 8px; margin: 0 0 18px 0; }
        #view-numerologia .nx-nav-btn { font-size: 0.78rem; padding: 9px 14px; }
    }
    } /* fin herramientas */

    /* =========================================================================
       TEXTOS FIJOS DE LAS CARTAS (Fundamento y Guía) y CONSULTA A TU CARTA
       Los de las cartas van fuera de @media screen: tienen que salir igual en el PDF.
       ========================================================================= */
    .guia-lista { margin: 10px 0 18px 0; }
    .guia-lista dt { font-family: var(--font-title, 'Cinzel', serif); font-size: 0.9rem; letter-spacing: 1.5px; text-transform: uppercase; color: #7d5f22; font-weight: 700; margin-top: 16px; }
    .guia-lista dd { margin: 4px 0 0 0; font-family: var(--rpt-font-read, 'EB Garamond', Georgia, serif); font-size: 1.18rem; line-height: 1.65; color: var(--rpt-text, #1b2a44); }
    .guia-intro { font-style: italic; }
    .guia-casas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; margin: 8px 0 14px 0; padding: 14px 0; border-top: 1px solid rgba(154, 119, 52, 0.35); border-bottom: 1px solid rgba(154, 119, 52, 0.35); }
    .guia-casas div { display: flex; gap: 10px; align-items: baseline; font-family: var(--rpt-font-read, 'EB Garamond', Georgia, serif); font-size: 1.05rem; line-height: 1.45; color: var(--rpt-text, #1b2a44); break-inside: avoid; page-break-inside: avoid; }
    .guia-casas strong { font-family: var(--font-title, 'Cinzel', serif); font-size: 0.8rem; letter-spacing: 1px; color: #7d5f22; white-space: nowrap; min-width: 62px; }
    .guia-lista dt, .guia-lista dd { break-inside: avoid; page-break-inside: avoid; }
    .fundamento-carta p, .guia-carta p { text-align: justify; }
    @media (max-width: 700px) { .guia-casas { grid-template-columns: 1fr; } }

    @media screen {
    #view-consulta .eq-hoja, .guia-numerologia { max-width: 1000px; margin: 0 auto 26px auto; }
    .guia-numerologia .guia-lista dd { color: var(--eq-tinta); }
    .consulta-form textarea.form-control { resize: vertical; min-height: 110px; line-height: 1.5; }
    .consulta-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px 0; }
    .consulta-chip { background: rgba(255, 250, 240, 0.45); border: 1px solid rgba(154, 119, 52, 0.45); color: var(--eq-tinta); border-radius: 30px; padding: 7px 14px; font-family: var(--eq-lectura); font-size: 1rem; cursor: pointer; transition: all 0.2s; }
    .consulta-chip:hover { background: rgba(201, 162, 78, 0.2); border-color: var(--eq-oro); }
    /* Ronda 107 (pedido 35): línea de uso, línea de qué datos se leyeron, aviso de una línea y mensaje de cuidado. */
    .herr-uso { font-family: var(--eq-lectura); font-size: 1.02rem; color: var(--eq-tinta-dim); margin: 14px 0 0 0; }
    .herr-fuente { font-family: var(--eq-lectura); font-style: italic; font-size: 1rem; color: var(--eq-tinta-dim); margin: 0 0 10px 0; }
    .herr-aviso-linea { font-family: var(--eq-lectura); font-size: 0.98rem; color: var(--eq-tinta-dim); margin: 14px 0 0 0; }
    .herr-cuidado { font-family: var(--eq-lectura); font-size: 1.12rem; line-height: 1.6; color: var(--eq-tinta); }
    .herr-cuidado p { margin: 0 0 12px 0; }
    .consulta-restantes { font-family: var(--eq-lectura); font-style: italic; color: var(--eq-tinta-dim); align-self: center; font-size: 1rem; }
    .consulta-aviso { font-family: var(--eq-lectura); font-size: 1.08rem; color: #7a4b16; background: rgba(201, 162, 78, 0.14); border-left: 3px solid var(--eq-oro); padding: 12px 16px; margin-bottom: 18px; }
    .consulta-aviso a { color: var(--eq-tinta); font-weight: 600; }
    /* Ronda 67: "Consulta a tus Cartas" aclara qué cartas se leen para responder. */
    .consulta-lee { font-family: var(--eq-lectura); font-size: 1.02rem; color: var(--eq-tinta); border: 1px solid rgba(201, 162, 78, 0.35); background: rgba(201, 162, 78, 0.06); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; }
    .consulta-lee p { margin: 0 0 6px; }
    .consulta-lee ul { margin: 0 0 8px; padding-left: 20px; }
    .consulta-lee li { margin-bottom: 4px; }
    .consulta-tarjeta .consulta-q { border-bottom: 1px solid rgba(154, 119, 52, 0.35); margin-bottom: 18px; padding-bottom: 10px; }
    .consulta-tarjeta .consulta-q .eq-hoja-etiqueta { border: none; padding: 0; margin-bottom: 6px; }
    .consulta-tarjeta .consulta-q p { font-family: var(--eq-lectura); font-style: italic; font-size: 1.2rem; color: var(--eq-tinta); margin: 0; }
    .consulta-a, .consulta-a p, .consulta-a li { font-family: var(--eq-lectura); font-size: 1.12rem; line-height: 1.7; color: var(--eq-tinta); }
    .consulta-a strong { color: #7d5f22; }
    .consulta-a h4, .consulta-a h5 { font-family: var(--eq-titulo); color: var(--eq-tinta); letter-spacing: 1.5px; }
    .consulta-a blockquote { margin: 14px 0; padding: 10px 18px; border-left: 3px solid var(--eq-oro); background: rgba(201, 162, 78, 0.12); font-style: italic; }
    } /* fin consulta */

    /* =========================================================================
       TAROT EN LA PALETA DEL SISTEMA: fuera el violeta, adentro el azul noche con filetes
       dorados (paneles) y el dorso de las cartas pintado como el cielo del dashboard.
       ========================================================================= */
    @media screen {
    #tarot-app-wrapper .section-header h1 { color: var(--eq-luz); text-shadow: none; font-size: 1.7rem; letter-spacing: 4px; font-weight: 600; }
    #tarot-app-wrapper .section-header p { font-family: var(--eq-lectura); font-style: italic; font-size: 1.15rem; color: var(--eq-luz-dim); }
    #tarot-app-wrapper .spread-option { background: rgba(12, 21, 30, 0.72); border: 1px solid var(--eq-oro-linea); border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    #tarot-app-wrapper .spread-option:hover, #tarot-app-wrapper .spread-option.selected { background: rgba(22, 37, 53, 0.92); border-color: var(--eq-oro); box-shadow: 0 0 0 1px var(--eq-oro), 0 14px 30px rgba(0,0,0,0.35); }
    #tarot-app-wrapper .spread-option h3 { font-family: var(--eq-titulo); color: var(--eq-luz); letter-spacing: 1.5px; font-size: 1rem; }
    #tarot-app-wrapper .spread-option p { font-family: var(--eq-lectura); color: var(--eq-luz-dim); }
    #tarot-app-wrapper .spread-option i { color: var(--eq-oro); }
    /* Ronda 11: mismo tratamiento que .spread-option (arriba) y .nav-btn (abajo) -- bordes más
       chatos, línea dorada del sistema en vez del dorado genérico, blur en el panel del textarea. */
    #tarot-app-wrapper .pregunta-modo-btn { border-radius: 3px; border-color: var(--eq-oro-linea); }
    #tarot-app-wrapper .pregunta-modo-btn:hover, #tarot-app-wrapper .pregunta-modo-btn.active { background: rgba(22, 37, 53, 0.92); border-color: var(--eq-oro); box-shadow: 0 0 0 1px var(--eq-oro), 0 14px 30px rgba(0,0,0,0.35); }
    #tarot-app-wrapper .pregunta-modo-btn i { color: var(--eq-oro); }
    #tarot-app-wrapper #tarot-pregunta-texto { background: rgba(12, 21, 30, 0.72); border: 1px solid var(--eq-oro-linea); border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--eq-lectura); }
    #tarot-app-wrapper #tarot-pregunta-texto:focus { border-color: var(--eq-oro); box-shadow: 0 0 0 1px var(--eq-oro); }
    #tarot-app-wrapper .tarot-pregunta-mostrada { font-family: var(--eq-lectura); }
    #tarot-app-wrapper .tarot-pregunta-mostrada em { color: var(--eq-oro); }
    #tarot-app-wrapper .btn-mystic { border-radius: 3px; background: linear-gradient(180deg, #d8b467, #b98f3f); color: #16222f; box-shadow: 0 6px 18px rgba(0,0,0,0.3); letter-spacing: 2px; }
    #tarot-app-wrapper .nav-btn { border-radius: 3px; }
    #tarot-app-wrapper .card-face { border-radius: 8px; border: 1px solid var(--eq-oro); }
    #tarot-app-wrapper .card-back { background: #14233a var(--eq-img-cielo) center / 600px 600px; box-shadow: inset 0 0 0 6px #14233a, inset 0 0 0 7px var(--eq-oro); }
    #tarot-app-wrapper .reading-results, #tarot-app-wrapper .calculator-card, #tarot-app-wrapper .enc-card, #tarot-app-wrapper .calc-result {
        background: rgba(12, 21, 30, 0.8); border: 1px solid var(--eq-oro-linea); border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    #tarot-app-wrapper .reading-card-detail { background: rgba(236, 220, 192, 0.04); border-left: 3px solid var(--eq-oro); border-radius: 4px; }
    #tarot-app-wrapper .detail-text h3 { font-family: var(--eq-titulo); color: var(--eq-luz); }
    #tarot-app-wrapper .tag { background: rgba(201, 162, 78, 0.14); color: var(--eq-oro-claro); border-radius: 3px; font-family: var(--eq-titulo); letter-spacing: 1px; }
    #tarot-app-wrapper .library-content { border-left: 2px solid var(--eq-oro); background: rgba(0,0,0,0.25); font-family: var(--eq-lectura); font-size: 1.05rem; }
    #tarot-app-wrapper .oracle-box { background: rgba(236, 214, 184, 0.97) var(--eq-img-papel); background-size: 400px 400px; border: 1px solid rgba(154, 119, 52, 0.55); border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); color: var(--eq-tinta); }
    #tarot-app-wrapper .oracle-box h3 { color: var(--eq-tinta); border-bottom: 1px solid rgba(154, 119, 52, 0.35); font-family: var(--eq-titulo); letter-spacing: 2px; }
    #tarot-app-wrapper .oracle-box, #tarot-app-wrapper .oracle-box p, #tarot-app-wrapper .oracle-box div, #tarot-app-wrapper .oracle-box li { color: var(--eq-tinta) !important; font-family: var(--eq-lectura); font-size: 1.1rem; line-height: 1.7; }
    #tarot-app-wrapper .oracle-box strong, #tarot-app-wrapper .oracle-box b { color: #7d5f22 !important; }
    #tarot-app-wrapper .modal-content { background: #13202f; border: 1px solid var(--eq-oro); border-radius: 6px; }
    #tarot-app-wrapper .form-control { background: rgba(9, 16, 24, 0.7); border-radius: 3px; font-family: var(--eq-lectura); font-size: 1.08rem; }
    } /* fin tarot */

    /* =========================================================================
       IMÁGENES DE FONDO INCRUSTADAS
       Las acuarelas del reporte, el cielo del dashboard y la textura de papel van dentro de este
       mismo CSS (WebP en base64). Así se ven siempre, aunque al servidor sólo se suba el CSS y no
       los .jpg: en la versión anterior las imágenes no estaban en el sitio y el reporte y el
       dashboard se veían lisos. Los .jpg con el mismo nombre quedan en la carpeta como originales.
       Para cambiar una imagen: regenerarla (generadores en el proyecto) y reemplazar su valor acá.
       Las dos acuarelas del reporte (cabecera y mosaico) van escritas directamente en la regla de
       #pdf-export-area, en la lista de fondos.
       Ronda 80 (6/10/2026): las acuarelas y el cielo (las grandes, ~490 KB) pasaron a su propio archivo,
       page-acceso-vip-imagenes.css, igual de incrustadas; acá queda sólo la textura de papel. Ver el
       comentario de arriba de ese archivo (va en el zip del tema como todos los .css).
       ========================================================================= */
    :root {
        /* --eq-img-cielo: Ronda 80, ahora en page-acceso-vip-imagenes.css (la textura de papel, chiquita, sigue acá) */
        --eq-img-papel: url("data:image/webp;base64,UklGRhgKAABXRUJQVlA4IAwKAACwpwCdASogAyADPm02mUmkIqKhIAgAgA2JaW7hQu5u+Ho3mXv7QnP/vVbR27HaMbXj8bSGdAsl5JXrxj/1+wBPYB77ZOQ9/c2VXvu7k3i5OQ99snJSYr3bJyd9k7So1+UoBxc0XxBxuajO1hxz5tza8XQicCAfC//50pIulMJuhRFcPgNubjebc2vF2jfT3E9unTH2uTIDvSoFu2lQWEcIMEGaaRvN0f7EYxAunSCCLNFQDGBOXyCoFa39tN3PFymcYJRpT5LKIOYtSQhtAsl2vFygZeM3s0Oh3enmHL+eO6jhFtvxE74UQXaWRHiTEvmv/PQkdj4VNsmJRXSNL95QMvEm4I3Og6WlArEBDq1xclIvUhfDXichdw5Eh+0o05tsFM5FEFSOcrxiEhfgrp3rXm2Z8kB/hubsXWVXjrpVjicuyX9jy5OW9hB9rHuCVOYJR65YBMsiHRB83L6JcoGYIgnIfBu2meOg0Uv4jw94RX2QMYeZ+/ZxIkqiMpAHvtlAyzoHwBoeS3zPdVCkPfbJ08ERcnRTC+F8h9C+l2X/bQuhyG1naRfjm6e2TkPfWbBfv8YWiKEG6b51rxeeByzw7KlKqiLk5D322nrvKsK+tZ/jm6fPcPKmOnOIi45wb5giXD1GbpTeoxijtPcV5Sqp6Ron5vFzd5l/7A5lOCiUx0iLSGxDnCIMYHwyvmeTopHAAPgrv3VLqH0ICp3CM414rzyzYHwQUMzCYwP3qa8IiyoE+l2vmqUYI9pXpjTQLk4XIfXS5jgwOe25giIh1EXLOykB/rERiPyiUY3M2VdHKJxvxthUHrI9O+lIAQDRD0naTCaBeDFJXrShxQaKwUFRWMpA8GcelMXsEQBZ0/LPfZv0YiOgVhltY9vhn0b+fFQ1t1184PU516EcfE7BOcQ5NOy3P0M0pNPKWgDX3l4v/7QLbwDgD04wyCiK3pd77IYOOuI5wX/5VNJQZ5SGiSIPLuPRTuonpB70U9p7Vk9U7xtSuEGwzfrC+lJMsazd1SJI2sPDE82T1A+MhSwAggOd67gftA6+CKtNIrspm9CcQ0b6MV3IZoTbtBqjFQXitx4ejuz9ym+2h0gkOgGiqD/cayRij+PgJuJtI4wOyERrkmmRfPV3noRbgIFRQNg3IhAJyBSdwsmEIqUELzEQbzrtlN+McxZMBql0aNOJ87zaDRWA+LMftlBMtPv0B9zkuzCSM9/rVEWb4lZpTaUoFWEIqBnW7xgwkrVl762yoXsagdWT9YX0u2oSZ4ulGb5/PbJ77cRn3kGe2xFA70UUUa6uEQpXy+Ity6l9hm+ZfqonskEU4iVw+bsHAFm4mFHGKD4D9LswLRgM/e5dqsbzSULB7NqcQYG30JDSk0/p7czFklLPhZXaY7PcS0J4uFqqxFusCfinaf6kHPEqATfR/iDMCDf2n9Pi78ZEsCuQtBBhLDnmwCG5wnq85vtLcGdco4v3wg2fJYau4au1OguLFcg4RG9xeJEwlXsCX727kerV5VQX9KjXZOQ/e4RztMqRrjaLczsaZAbRBjA96U4kTCJ+ohwARie67nlrMPkhfTXI7fxbWfiHLaUWxrLE4UK450pi/gxJCGU7qQr+lul3y5tNZt94quMSImyUF1wP1V0HA3onBSi4vVd3S5VPDS9ai9stShRTpv169+I7fZUjRRSFM/mUDwOiau5XlBOI/NN9rfFwpiXqymaCghOJAQWEcIEmBcaukfJltA2a5UbKHrMxIEdE9lA1sIedENplonxMN2hXlwod0KhmoDye82UzexjQo842oAAA/vN9l/19/AX5QzD/ul2z8P9OJlUlSWFGWMyU37OUC2egN/unaT6GgWVEvZOle6RhFQzWzs0Sv6/r3qvAN3N52J5C8H3YgrfijStz0C75oAkyW1V+FxGYvySYuRkjgEPK/BkYPOq2qt9l8uaDtjouTD4GPlMwOmdqrEishShbfOKJ4WlP40Pf75z0sKynxPm9gvXVoeDL5jRSnbJ60uoLZeRhjvpavJebStwmW4alw6pVUN4jWrcaCWOm1o1wW45Ofz6UoSs0MNoik9PM1kpMCZ3go+bSCea7CQWr+FQtpFJZvbEZL7szVm/+T9ra+HMxkr54nwrTzg1n0ckennZ7JphOq2Tn7GFGkDrOBivac5dU49QfNC5M+hvs9mt7bwBz8mA2yu6hXeYCBAWyEYJQc3DCOoM1MJ1aWVbQqKwDq/EaNFJUCKqtdbL1/hwtVFj0wwOtDdShNDly5T6EjoP0lOB/aTwGMQ+biDSglSY5jtTs/0WcITynsBAFVnwqdfpaGbSmJpI4dGO3jDAMDQgr1GqfZ0B7GCBF+6CrcyMS9PRYigqmRlwLMm9KmqVASI1Rp0J2UUT+11iKG4/XmMwi2zbYDzutqYfNzkm1vctGDLcOBCYTVdMsfj2S5L9qBpD48+cVz6CDQeO1b3JZn8k5Ol5Iz6CkrnWbxX7QCXRv3dpOnuLTMJapu3u03fmNgFK96WcWBi5PgzloQK0E0LJCrSlMOozWZckeer75LwGXMngsskcEdBlv+RBQLe9jW4C9T7TQ1z4r+O2iHo+m5h9Tyx/PRYEGWlIda+/ODv0xNSt3/oGjV16M6gR6yRI9GiusNtZcUpmUszZLkgxfgxAGGqbJRH7sWJPhysxTuVkI2xTuOFeCaLIgKdpRDX9uyChY+BXGYeFUK/5QsKvufFAMSCmFMGhc7d3Pu6PEBsmXvMPOqXAa40HZlcTXH1FyRMAjPJ+ZgO3ysM9NO85A1WCILKFqUD2p2ijmJUmqFPMsoif2Oiq79DZLQdx0XWFKCQFuDS4WoiJCkeAREYkfExjsUNTajY9pY388P22bfBRXXMySigZLGQ+J7y+91yJ3CKaAxrAFAxrMErel/R7O87i8JWIWCjAgWIaDPdyIskGlO0/V4vyZ53mDpF/OPrPMoajxKQWi9ShriQpXeoKfEK7ZSCiMD74haT+/4YjKHIrRE8eom6QA3I0LN4+dmPo6WpvwCHVcdJivjLSDdcp1qsqPslK7uFVPrsG+TBKg/Rj80KwVHqizpYTaDnskHFHUGcp2AtKKJv/pEjh46X8FZ/S6bHZIA8wQNoZxIwhiw5KAqlxRSkC8BFdxc63JBhnh9aJT08nKnMJXJKaq3fpAYAy7SwcIlXPzz+gFtUYpJb/dWJFlESXXZnlR9nV+S0Miz5xvoLuvf32Nr3197djasif2tzuKEa5XsTJok5z5/bjtVSuNxbQsVTDEaLfxmpUdB/39vnUeoEWaFbTDJpuEW92U9JQjYB3ZDndxR1TBgSEXa9z2E3hjXPd4FjcWRVBGDfme6CtspSgTip8SCyoMGF7VTMKl2Bdpdeo3e2LNSF9QThgC++1o5zr1Cp7e+8sXWfFuUNLRUu3bkLkfp7uGrvD3Xaj3kAAA");
    }

/* =============================================================================================
   RONDA 15 (24/09) — CARTA NUMEROLÓGICA COMO CARTA (pergamino, igual que Carta Natal/Tránsitos)
   Fuera de @media screen a propósito: tiene que verse igual en el PDF.
   ============================================================================================= */
#pdf-export-numerologia {
    /* Las variables --eq-* del resto del dashboard viven dentro de @media screen; acá se
       repiten para que las tarjetas de números también tengan color al imprimir. */
    --eq-tinta: #1b2a44; --eq-tinta-dim: rgba(27, 42, 68, 0.74); --eq-oro: #b8913f;
    --eq-titulo: 'Cinzel', serif; --eq-lectura: 'EB Garamond', Georgia, serif;
}
#pdf-export-numerologia .reading-panel-vintage { margin-top: 10px; }
#pdf-export-numerologia .reading-panel-vintage h4.astro-title { margin-top: 44px; }
#pdf-export-numerologia .num-intro p { text-align: center; font-size: 1.28rem; }
#pdf-export-numerologia .num-intro .num-leyenda-doble { font-size: 1.08rem; font-style: italic; color: var(--rpt-text-dim); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; }
#pdf-export-numerologia .num-explica { font-size: 1.22rem; line-height: 1.7; font-style: italic; color: var(--rpt-text-dim); text-align: left; margin-bottom: 20px; }
#pdf-export-numerologia .num-explica strong { font-style: normal; }

/* Sendero de Vida: el número principal, grande */
#pdf-export-numerologia .num-hero { display: flex; gap: 28px; align-items: flex-start; padding: 26px; border: 1px solid var(--rpt-gold-line); background: rgba(255, 250, 240, 0.35); border-radius: 4px; }
#pdf-export-numerologia .num-hero-circulo { flex-shrink: 0; width: 118px; height: 118px; border-radius: 50%; border: 2px solid var(--rpt-gold); display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 3rem; font-weight: 700; color: var(--rpt-ink); background: rgba(201, 162, 78, 0.16); }
#pdf-export-numerologia .num-hero-texto .num-clave { font-size: 1.55rem; }
#pdf-export-numerologia .num-hero-texto p { font-size: 1.28rem; line-height: 1.7; text-align: left; margin: 8px 0 10px 0; }

/* Tarjetas de números, más legibles dentro de la carta */
#pdf-export-numerologia .num-grilla { gap: 18px; }
#pdf-export-numerologia .num-tarjeta { padding: 20px; background: rgba(255, 250, 240, 0.35); }
#pdf-export-numerologia .num-cuerpo h3 { font-size: 1.05rem; }
#pdf-export-numerologia .num-clave { font-size: 1.28rem; }
#pdf-export-numerologia .num-cuerpo p { font-size: 1.16rem; line-height: 1.6; text-align: left; margin: 6px 0 8px 0; }
#pdf-export-numerologia .num-cabala { font-size: 0.78rem; }
#pdf-export-numerologia .num-que-es { font-size: 1.08rem; }
#pdf-export-numerologia .num-trad { font-size: 1.08rem; }
#pdf-export-numerologia .nx-etapa-clave { font-size: 1.12rem; }
#pdf-export-numerologia .nx-etapa > small, #pdf-export-numerologia .nx-modo span { font-size: 0.74rem; }
#pdf-export-numerologia .nx-trad small { font-size: 0.62rem; }
#pdf-export-numerologia .sub-astro-title { font-size: 1.05rem !important; }
#pdf-export-numerologia .nx-cruz-grilla small { font-size: 0.95rem; max-width: 110px; }

/* Diagnóstico: botón centrado, bien visible */
#pdf-export-numerologia .num-diag-cta { text-align: center; padding: 26px 20px; border: 1px dashed var(--rpt-gold-line); border-radius: 4px; background: rgba(255, 250, 240, 0.3); }
#pdf-export-numerologia .num-diag-cta p { text-align: center; font-size: 1.22rem; margin-bottom: 20px; }
#pdf-export-numerologia .nx-lectura-ia p, #pdf-export-numerologia .nx-lectura-ia li { font-size: 1.28rem; line-height: 1.8; }

@media (max-width: 640px) {
    #pdf-export-numerologia .num-hero { flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
    #pdf-export-numerologia .num-hero-texto p { text-align: left; }
    #pdf-export-numerologia .num-hero-circulo { width: 96px; height: 96px; font-size: 2.4rem; }
    #pdf-export-numerologia .num-tarjeta { flex-direction: column; align-items: center; text-align: center; }
    #pdf-export-numerologia .num-cuerpo p { text-align: left; }
    #pdf-export-numerologia .nx-cruces { grid-template-columns: 1fr; }
}
#pdf-export-numerologia #num-sec-fecha .num-grilla { grid-template-columns: 1fr; }
#pdf-export-numerologia .nx-etapas { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
#pdf-export-numerologia .num-intro .num-leyenda-doble > span { display: inline-flex; align-items: center; gap: 6px; }
#pdf-export-numerologia .nx-punto { margin-left: 0; }

/* Ronda 15: Signo Real automático + descripción fija del signo */
@media screen {
    .signo-origen { max-width: 1000px; margin: -6px auto 22px auto; text-align: center; font-family: var(--eq-lectura); font-style: italic; font-size: 1.12rem; color: var(--eq-luz-dim, #d8cdb6); }
    .signo-origen strong { font-style: normal; color: var(--eq-luz, #f1e6cf); font-weight: 600; }
    .signo-origen a { color: var(--eq-oro-claro, #e3c27d); text-decoration: underline; margin-left: 6px; white-space: nowrap; }
    #signo-sin-perfil { max-width: 700px; margin: 0 auto 26px auto; }
    .signo-explicacion .signo-intro { font-family: var(--eq-lectura); font-size: 1.22rem; line-height: 1.7; color: var(--eq-tinta); margin: 0 0 18px 0; }
    .signo-explicacion .signo-intro strong { color: #7d5f22; }
    .signo-desc-tema { font-family: var(--eq-titulo); font-size: 1.15rem; letter-spacing: 1.5px; color: var(--eq-tinta); font-weight: 600; margin-bottom: 10px; }
    .signo-desc-tema span { font-family: var(--eq-lectura); font-style: italic; font-weight: 400; letter-spacing: 0; color: #7d5f22; }
    .signo-desc > p { font-family: var(--eq-lectura); font-size: 1.24rem; line-height: 1.75; color: var(--eq-tinta); margin: 0 0 18px 0; }
    .signo-desc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
    .signo-desc-dos > div { border: 1px solid rgba(154, 119, 52, 0.32); border-radius: 3px; padding: 14px 16px; background: rgba(255, 250, 240, 0.3); }
    .signo-desc-dos h5 { font-family: var(--eq-titulo); font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; color: #7d5f22; margin: 0 0 6px 0; }
    .signo-desc-dos p { font-family: var(--eq-lectura); font-size: 1.14rem; line-height: 1.6; color: var(--eq-tinta); margin: 0; }
    .signo-breve { font-family: var(--eq-lectura); font-size: 1.16rem; line-height: 1.65; color: var(--eq-tinta); padding: 12px 0; border-top: 1px solid rgba(154, 119, 52, 0.25); }
    .signo-breve strong { font-family: var(--eq-titulo); font-size: 0.9rem; letter-spacing: 1px; color: #7d5f22; margin-right: 4px; }
    @media (max-width: 640px) { .signo-desc-dos { grid-template-columns: 1fr; } }
}

/* =============================================================================================
   RONDA 15 (24/09) — TAROT: selector de dos mitades, pasos numerados, tiradas compactas,
   resultados con la lectura primero.
   ============================================================================================= */
@media screen {
    #tarot-app-wrapper .tarot-seg { display: grid; grid-template-columns: 1fr 1fr; max-width: 560px; margin: 0 auto 34px auto; border: 1px solid var(--eq-oro-linea, rgba(201,162,78,0.45)); border-radius: 4px; overflow: hidden; background: rgba(8, 14, 24, 0.55); }
    #tarot-app-wrapper .tarot-seg-btn { appearance: none; border: none; background: transparent; color: var(--eq-luz-dim, #cfc3aa); font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 0.95rem; letter-spacing: 1.5px; padding: 15px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s, color 0.2s; }
    #tarot-app-wrapper .tarot-seg-btn + .tarot-seg-btn { border-left: 1px solid var(--eq-oro-linea, rgba(201,162,78,0.45)); }
    #tarot-app-wrapper .tarot-seg-btn i { color: var(--eq-oro, #c9a24e); }
    #tarot-app-wrapper .tarot-seg-btn.active { background: var(--eq-oro, #c9a24e); color: #0c1523; font-weight: 700; }
    #tarot-app-wrapper .tarot-seg-btn.active i { color: #0c1523; }

    #tarot-app-wrapper .tarot-paso { max-width: 860px; margin: 8px auto 14px auto; font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 1.05rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-luz, #ecdcc0); display: flex; align-items: center; gap: 12px; }
    #tarot-app-wrapper .tarot-paso-num { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--eq-oro, #c9a24e); color: var(--eq-oro-claro, #e2c47f); display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }

    /* Ronda 107 (pedido 34): con «Tarot por tu signo» son cuatro tiradas: dos y dos. */
    #tarot-app-wrapper .spread-selector { max-width: 860px; margin: 0 auto 30px auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    #tarot-app-wrapper .tarot-signo-periodo { max-width: 860px; margin: -10px auto 22px auto; text-align: center; }
    #tarot-app-wrapper .tarot-signo-periodo-titulo { font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-luz-dim, #cfc3aa); margin-bottom: 10px; }
    #tarot-app-wrapper .tarot-signo-titulo { font-family: var(--eq-titulo, 'Cinzel', serif); color: var(--eq-luz, #ecdcc0); font-size: 1.3rem; letter-spacing: 1.5px; margin: 0 0 6px 0; }
    #tarot-app-wrapper .tarot-signo-fuente, #tarot-app-wrapper .tarot-signo-aviso { font-family: var(--eq-lectura, 'EB Garamond', serif); font-style: italic; font-size: 1rem !important; color: var(--eq-luz-dim, #cfc3aa); margin: 0 0 16px 0; }
    #tarot-app-wrapper .spread-option { width: auto; padding: 18px 14px; }
    #tarot-app-wrapper .spread-option i { font-size: 1.6rem; margin-bottom: 8px; }
    #tarot-app-wrapper .spread-option h3 { font-size: 1.05rem; margin-bottom: 6px; }
    #tarot-app-wrapper .spread-option p { font-size: 1.05rem; line-height: 1.35; margin: 0; }
    #tarot-app-wrapper .pregunta-modo-selector { max-width: 860px; margin: 0 auto 16px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    #tarot-app-wrapper .pregunta-modo-btn { font-size: 1.05rem; padding: 14px 12px; justify-content: center; }
    #tarot-app-wrapper .tarot-pregunta-input-wrap { max-width: 860px; margin-left: auto; margin-right: auto; }
    #tarot-app-wrapper .action-area { margin: 26px 0 36px 0; }
    #tarot-app-wrapper #btn-iniciar-tirada { font-size: 1.05rem; padding: 18px 44px; }

    #tarot-app-wrapper .tarot-resultados-titulo { font-family: var(--eq-titulo, 'Cinzel', serif); color: var(--eq-luz, #ecdcc0); font-size: 1.6rem; letter-spacing: 2px; margin: 0 0 20px 0; padding-bottom: 12px; border-bottom: 1px solid var(--eq-oro-linea, rgba(201,162,78,0.45)); }
    #tarot-app-wrapper .tarot-detalle-titulo { font-family: var(--eq-titulo, 'Cinzel', serif); color: var(--eq-luz, #ecdcc0); font-size: 1.2rem; letter-spacing: 2px; margin: 34px 0 16px 0; }
    #tarot-app-wrapper .tarot-resultados-titulo i, #tarot-app-wrapper .tarot-detalle-titulo i { color: var(--eq-oro, #c9a24e); margin-right: 8px; }
    #tarot-app-wrapper .tarot-enc-intro { text-align: center; font-family: var(--eq-lectura, 'EB Garamond', serif); font-style: italic; font-size: 1.2rem; color: var(--eq-luz-dim, #cfc3aa); max-width: 700px; margin: 0 auto 26px auto; }
    /* Ronda 16: introduce la grilla de cartas (contenido fijo, de referencia) para que no se
       confunda con la lectura personal, que está arriba en "Síntesis del Oráculo Astral". */
    #tarot-app-wrapper .tarot-detalle-intro { font-family: var(--eq-lectura, 'EB Garamond', serif); font-style: italic; font-size: 1rem; color: var(--eq-luz-dim, #cfc3aa); margin: -8px 0 20px 0; }
    #tarot-app-wrapper .oracle-box { margin-top: 0; }
    #tarot-app-wrapper .reading-card-detail p, #tarot-app-wrapper .library-content p { font-size: 1.12rem !important; line-height: 1.65 !important; }
    #tarot-app-wrapper .reading-card-detail h3 { font-size: 1.3rem; }
    #tarot-app-wrapper #oracle-response-content, #tarot-app-wrapper #oracle-response-content p, #tarot-app-wrapper #oracle-response-content li { font-size: 1.15rem !important; line-height: 1.75 !important; }

    @media (max-width: 640px) {
        #tarot-app-wrapper .tarot-seg { margin-bottom: 26px; }
        #tarot-app-wrapper .tarot-seg-btn { font-size: 0.82rem; letter-spacing: 1px; padding: 14px 6px; }
        #tarot-app-wrapper .tarot-paso { font-size: 0.92rem; letter-spacing: 1.5px; }
        #tarot-app-wrapper .spread-selector { grid-template-columns: 1fr; gap: 10px; }
        #tarot-app-wrapper .spread-option { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; padding: 14px 16px; align-items: center; transform: none !important; }
        #tarot-app-wrapper .spread-option i { grid-row: 1 / span 2; margin: 0; font-size: 1.5rem; text-align: center; }
        #tarot-app-wrapper .spread-option h3 { margin: 0; }
        #tarot-app-wrapper .spread-option p { font-size: 1rem; }
        #tarot-app-wrapper .pregunta-modo-btn { font-size: 0.98rem; padding: 13px 8px; }
        #tarot-app-wrapper .cards-board { gap: 14px; }
        #tarot-app-wrapper .tarot-card-container { width: 165px; height: 293px; }
        #tarot-app-wrapper .reading-results { padding: 20px 16px; }
        #tarot-app-wrapper .tarot-resultados-titulo { font-size: 1.25rem; }
    }
}

/* =============================================================================================
   RONDA 15 (24/09) — TIPOGRAFÍA MÁS GRANDE EN TODO EL DASHBOARD
   Pedido del usuario: "la letra general es muy pequeña en muchos casos". Auditado con
   Playwright vista por vista: el cuerpo de lectura (EB Garamond) ya estaba en 16-21px, pero las
   etiquetas en Cinzel mayúscula con letter-spacing (rótulos, botones, encabezados de tabla,
   menús, "small") estaban entre 9,6 y 13px — ilegibles en el celular. Se suben a un mínimo de
   ~13-14px y los botones a 15px. Sólo tamaños: no se toca color, posición ni estructura.
   ============================================================================================= */
@media screen {
    .btn-mystic { font-size: 0.95rem !important; }
    .nav-grupo { font-size: 0.78rem; letter-spacing: 2.5px; }
    .inicio-fecha { font-size: 0.92rem; }
    .herramienta h3 { font-size: 1.02rem; }
    .herramienta p { font-size: 1.12rem; }
    .eq-hoja-etiqueta { font-size: 0.86rem !important; }
    #astral-app-wrapper .form-group label { font-size: 0.88rem; letter-spacing: 1.8px; }
    #astral-app-wrapper .form-group label span { font-size: 0.95rem; }
    #astral-app-wrapper .form-control, .herr-form .form-control { font-size: 1.12rem; }
    .lang-btn { font-size: 0.95rem !important; }
    .herr-form label { font-size: 0.88rem; }
    .herr-tabla th { font-size: 0.82rem; }
    .herr-tabla { font-size: 1.12rem; }
    .signo-cabecera { font-size: 0.92rem; }
    .signo-sub { font-size: 0.8rem; }
    .signo-trad { font-size: 1.18rem; }
    .signo-grado, .signo-nota { font-size: 1.08rem; }
    .guia-lista dt { font-size: 1rem; }
    .guia-lista dd { font-size: 1.24rem; }
    .guia-casas div { font-size: 1.14rem; }
    .guia-casas strong { font-size: 0.88rem; }
    .vintage-data-table th { font-size: 0.92rem; }
    .report-header-vintage .user-data-small { font-size: 1rem; }
    .consulta-a, .consulta-a p, .consulta-a li { font-size: 1.2rem; }
    .herr-nota { font-size: 1.12rem; }
    .herr-aviso { font-size: 1.22rem; }
    .num-cabala { font-size: 0.8rem; }
    .nx-casas th { font-size: 0.8rem; }
    .nx-casas td { font-size: 1rem; }
    .nx-casas .nx-cab small { font-size: 0.9rem; }
    .nx-sumas span, .nx-modo span, .nx-etapa > small { font-size: 0.76rem; }
    .nx-trad small { font-size: 0.64rem; }
    .nx-modos-bloque h4, .nx-etapas-bloque h4, .nx-cruz h4 { font-size: 0.9rem; }
    .nx-grilla td { font-size: 0.84rem; }
    #tarot-app-wrapper .tag { font-size: 0.9rem; }
    #tarot-app-wrapper .enc-title { font-size: 1.05rem; }
    #tarot-app-wrapper .btn-toggle-info { font-size: 0.95rem; }
}

/* Ronda 15: aviso sólo para administradores en el Almanaque, y pie de página integrado al dashboard */
@media screen {
    .eq-admin-aviso { max-width: 1000px; margin: 0 auto 24px auto; padding: 14px 18px; border: 1px dashed var(--eq-oro, #c9a24e); border-radius: 4px; background: rgba(8, 14, 24, 0.6); color: var(--eq-luz, #ecdcc0); font-family: var(--eq-lectura, 'EB Garamond', serif); font-size: 1.1rem; line-height: 1.55; }
    .eq-admin-aviso i { color: var(--eq-oro, #c9a24e); margin-right: 6px; }
    .eq-admin-aviso a { color: var(--eq-oro-claro, #e2c47f); text-decoration: underline; }
    body.page-template-page-acceso-vip > footer { background: transparent !important; margin-top: 0 !important; padding: 18px 16px 28px 16px !important; color: rgba(236, 220, 192, 0.45) !important; font-family: var(--eq-lectura, 'EB Garamond', serif); font-size: 0.95rem; border-top: 1px solid rgba(201, 162, 78, 0.15); }
}
@media screen and (max-width: 640px) {
    /* Ronda 15: con la letra más grande, las tablas de Signo Real ya no entraban en 390px. */
    .herr-tabla { table-layout: fixed; width: 100%; font-size: 1rem; }
    .herr-tabla th, .herr-tabla td { padding: 8px 4px; overflow-wrap: anywhere; }
    .herr-tabla th { font-size: 0.7rem; letter-spacing: 1px; }
    .herr-tabla th:nth-child(1), .herr-tabla td:nth-child(1) { width: 30%; }
    .herr-tabla th:nth-child(4), .herr-tabla td:nth-child(4) { width: 18%; }
}


/* =============================================================================================
   RONDA 21 — REBRAND: logo "EQUINOX 13" + eslogan en la barra superior del dashboard.
   El "13" va en dorado en la misma línea; el eslogan va debajo, en letra de lectura (no en
   Cinzel espaciada, que no entraría), y se oculta en teléfonos, donde la barra ya está al límite
   con el botón de menú y el avatar.
   ============================================================================================= */
@media screen {
    .logo-text b { color: var(--eq-oro, #c9a24e); font-weight: 700; }
    .logo-text span { font-family: var(--eq-lectura, 'EB Garamond', Georgia, serif); font-style: italic; text-transform: none; letter-spacing: 0.4px; font-size: 0.9rem; font-weight: 400; margin-top: 1px; }
}
@media screen and (max-width: 520px) {
    .logo-text span { display: none; }
    .logo-text { font-size: 1.1rem; }
}

/* Ronda 48 (Tanda 2, 29/09): "portal vidriera" (page-acceso-vip.php, rama sin plan activo).
   .eq-acceso-restringido .premium-card ya trae max-width:480px (style.css) pensado para el
   mensaje corto de "Acceso Restringido" -- la vidriera necesita bastante más ancho para la
   grilla de herramientas (reutiliza .inicio-herramientas/.herramienta tal cual, ver más arriba
   en este archivo), de ahí esta clase aparte con su propio ancho. !important porque
   .eq-acceso-restringido .premium-card tiene la misma especificidad (dos clases) y este archivo
   se carga antes que el <style> inline no existe acá, así que no hay garantía de orden. */
.eq-acceso-restringido .eq-vidriera-card { max-width: 900px !important; width: 100% !important; text-align: left !important; padding: 40px !important; }
.eq-vidriera-card .eq-vidriera-eyebrow { color: var(--eq-oro, #c9a24e); font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: 0 0 10px 0; }
.eq-vidriera-card h2 { text-align: center; }
.eq-vidriera-card .eq-vidriera-sub { text-align: center; max-width: 560px; margin: 0 auto 8px auto; }
.eq-vidriera-card .inicio-herramientas { margin: 28px 0 32px 0; }
.eq-vidriera-card .herramienta { cursor: default; }
.eq-vidriera-card .herramienta:hover { transform: none; border-color: var(--border-glass); }
.eq-vidriera-card > a.btn-gold { display: block; width: fit-content; margin: 0 auto; }
@media (max-width: 640px) {
    .eq-acceso-restringido .eq-vidriera-card { padding: 28px 20px !important; }
}

/* Ronda 49 (29/09, versión estática -- SUPERSEDIDA más abajo por ".eq-historia", la versión con
   scroll inmersivo que el cliente terminó aprobando después de 5 rondas de prototipo). Se deja
   definida por si hace falta volver a la versión sin JS (mismo criterio que vip_restringido_* más
   arriba en idiomas.php). */
/* Ronda 49 (29/09): "resultado gratis en el portal" -- reemplaza el resultado que antes se pintaba
   en la portada (front-page.php) para la cuenta recién creada: ahora entra logueada directo acá
   (ver equinoccial_signo_gratis en functions.php) y lo ve junto a la vidriera de herramientas, en
   vez de en dos pasos separados. Reusa el ancho/padding de .eq-vidriera-card (misma tarjeta, acá
   con texto en vez de grilla) para que las dos tarjetas se vean como parte de un mismo flujo.
   El cliente pidió más contraste entre los ítems de "por qué es tu signo" -- antes (front-page.css,
   .fp-signo-identifica) todos los ítems tenían el mismo peso visual, sólo diferenciados por un
   ícono chico. Acá cada ítem lleva su propia etiqueta en mayúsculas + un borde lateral de color, en
   vez de sumarse como un párrafo más a la pila. */
.eq-resultado-gratis .eq-rg-reveal { margin: 0 0 18px 0; }
.eq-resultado-gratis .eq-rg-antes { font-family: var(--eq-lectura); font-size: 1.1rem; color: var(--eq-luz-dim); margin: 0 0 4px 0; }
.eq-resultado-gratis .eq-rg-real { font-family: var(--eq-titulo); font-size: 1.6rem; color: var(--eq-oro-claro); margin: 0 0 10px 0; }
.eq-resultado-gratis .eq-rg-real strong, .eq-resultado-gratis .eq-rg-antes strong { color: var(--eq-oro-claro); }
.eq-resultado-gratis .eq-rg-nota { font-family: var(--eq-lectura); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--eq-luz); margin: 8px 0 0 0; }
.eq-resultado-gratis .eq-rg-borde-dia { font-family: var(--eq-lectura); font-size: 0.98rem; color: var(--eq-luz-dim); background: rgba(201,162,78,0.08); border: 1px solid var(--eq-oro-linea); border-radius: 6px; padding: 10px 14px; margin: 0 0 18px 0; }
.eq-resultado-gratis .eq-rg-identifica { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px 0; }
.eq-resultado-gratis .eq-rg-item { border-left: 3px solid var(--eq-oro-linea); border-radius: 4px; padding: 10px 16px; background: rgba(236, 220, 192, 0.03); }
.eq-resultado-gratis .eq-rg-item--tercio { border-left-color: var(--eq-oro); }
.eq-resultado-gratis .eq-rg-item--numerologia { border-left-color: var(--eq-oro-claro); background: rgba(201, 162, 78, 0.07); }
.eq-resultado-gratis .eq-rg-item--borde { border-left-color: var(--eq-oro-linea); font-style: italic; }
.eq-resultado-gratis .eq-rg-item-label { font-family: var(--eq-titulo); font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-oro-claro); margin: 0 0 6px 0; font-weight: 600; }
.eq-resultado-gratis .eq-rg-item-texto { font-family: var(--eq-lectura); font-size: 1.03rem; line-height: 1.6; color: var(--eq-luz-dim); margin: 0; }
.eq-resultado-gratis .eq-rg-item-texto strong { color: var(--eq-oro-claro); font-weight: 700; }
.eq-resultado-gratis .eq-rg-disclaimer { font-family: var(--eq-lectura); font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--eq-luz); border-top: 1px solid var(--eq-oro-linea); padding-top: 14px; margin: 4px 0 0 0; }
.eq-resultado-gratis details.eq-rg-info { margin: 0 0 18px 0; font-family: var(--eq-lectura); color: var(--eq-luz-dim); }
.eq-resultado-gratis details.eq-rg-info summary { cursor: pointer; color: var(--eq-oro-claro); font-size: 0.95rem; }
.eq-resultado-gratis details.eq-rg-info p { margin: 8px 0 0 0; font-size: 1rem; line-height: 1.6; }

/* Ronda 49 (29/09): "historia" -- experiencia de scroll inmersivo para el resultado gratis +
   vidriera, en reemplazo de la tarjeta estática de arriba. Historial de las 5 versiones que el
   cliente fue rechazando hasta llegar a ésta (ver claude/ronda-49-scroll-inmersivo.md, doc del
   proyecto, para el detalle completo):
     v1: paneles que se achican/alejan al hacer scroll normal -- rechazada, "la transición en sí".
     v2: tarjetas tipo historias de Instagram, había que tocar para pasar -- rechazada, "hay que
         hacer click" (el cliente pidió que sea con scroll, no con tap).
     v3: volvió al scroll normal pero deslizando de costado -- rechazada, seguía sintiéndose
         "igual" (el bloque todavía viajaba por la página).
     v4: escenario fijo con position:sticky, pero necesitaba una pantalla entera de scroll para
         pasar de un dato a otro -- rechazada por eso ("mucho scroll que hacer") y porque no era
         realmente JS el que manejaba el cambio (dependía del scroll nativo del navegador).
     v5 (ÉSTA): JS intercepta la rueda del mouse/el dedo (la página no se mueve, ver el <style>
         inline que imprime page-acceso-vip.php sólo en esta rama) y con el primer movimiento
         chico ya cambia -- el texto anterior se apaga y el siguiente se enciende en el mismo
         lugar, sin desplazamiento. Aprobada.
   El HTML de estos paneles lo arma PHP (equinoccial: ver page-acceso-vip.php, rama sin plan
   activo) con los datos reales guardados en eq_signo_gratis_resultado -- acá sólo va el estilo. */
.eq-historia { position: fixed; inset: 0; z-index: 40; background: var(--eq-fondo, #080c14); }
.eq-historia-nota {
    position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 5;
    background: rgba(8,12,20,0.92); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--eq-oro-linea);
    padding: 10px 18px; text-align: center;
    font-family: var(--eq-titulo); font-size: 0.7rem; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--eq-oro-claro);
}
.eq-historia-dots {
    position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 6;
    display: flex; flex-direction: column; gap: 10px;
}
.eq-historia-dots button {
    width: 9px; height: 9px; border-radius: 50%; padding: 0;
    border: 1px solid var(--eq-oro-linea); background: transparent; cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.eq-historia-dots button.on { background: var(--eq-oro); border-color: var(--eq-oro); transform: scale(1.3); }
@media (max-width: 720px) {
    .eq-historia-dots { right: 12px; gap: 7px; }
    .eq-historia-dots button { width: 7px; height: 7px; }
}
/* Flecha minimalista abajo al centro (pedido del cliente, además de los puntitos de la derecha) --
   un simple chevron con trazo fino, rebote sutil para que se note sin ser invasiva. Se oculta en el
   último panel (JS le agrega .eq-historia-flecha--oculta ahí, ver pintar() en el <script> de
   page-acceso-vip.php) porque en ese panel no hay nada más hacia dónde seguir. */
/* Ronda 49 (ajuste post-lanzamiento, pedido del cliente): la flecha ahora es el ÚLTIMO elemento
   DENTRO de cada panel (ver los echo $eq_flecha en page-acceso-vip.php) en vez de estar fija al pie
   de toda la pantalla -- así queda pegada al texto del panel (con un margen chico) en vez de lejos
   de él cuando el panel es corto y aparece vertical-centrado. Al ser parte normal del panel, se
   muestra/oculta sola junto con el resto del contenido (mismo fade de .eq-historia-panel.activo) y
   no aparece en el panel 8 (CTA) porque ahí, a propósito, no se imprime en absoluto. */
.eq-historia-flecha {
    margin-top: 26px;
    color: var(--eq-oro-claro); opacity: 0.75;
    animation: eqHistoriaRebote 1.8s ease-in-out infinite;
}
@keyframes eqHistoriaRebote {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .eq-historia-flecha { animation: none; } }
.eq-historia-stage {
    position: fixed; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    touch-action: none;
}
.eq-historia-panel {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    max-width: 640px; margin: 0 auto; padding: 90px 24px 60px 24px;
    opacity: 0; transition: opacity 0.22s linear; pointer-events: none;
    text-align: center; overflow-y: auto;
    /* .eq-historia-stage bloquea el gesto táctil por defecto (touch-action: none) para que el
       dedo dispare "pasar de dato" en vez de intentar scrollear la página -- pero si un panel
       puntual tiene más contenido del que entra en una pantalla chica (ej. algún panel en un
       celular bajo, o el desktop con la letra más grande de esta ronda), necesita poder
       scrollearse igual adentro suyo. pan-y reactiva sólo el scroll vertical nativo dentro del
       panel, sin afectar el resto. */
    touch-action: pan-y;
    /* Ronda 49b (feedback en vivo, 29/09): cuando un panel sí desborda, el scrollbar por defecto
       del navegador (gris, ancho) quedaba "totalmente fuera de lugar" contra este fondo oscuro
       minimalista, así que se redibujaba fino y dorado en vez de sacarlo del todo.
       Ronda 137 (23/10/2026, Diego, con capturas de "Tus 3 números clave" y "Tu Ascendente": «se ve
       esa barra de scroll horrible»): en la práctica, con contenido real que sí desborda (el panel
       del Ascendente y la rueda, sobre todo), esa barra quedaba pegada a los puntos de navegación
       de la derecha (.eq-historia-dots) y se veía como un segundo elemento en conflicto, no como
       parte del diseño. Se saca del todo: el scroll sigue funcionando igual (rueda del mouse, dedo,
       flechas del teclado), y ya hay otro aviso de que sigue habiendo contenido, la flechita que
       rebota al pie de cada panel (.eq-historia-flecha) -- por eso ahora sí se la puede sacar sin
       perder esa pista, al revés de lo que decía el comentario de la Ronda 49b. (Ronda 142: esa
       flechita es ahora el botón «Siguiente», .eq-historia-siguiente, al final de este archivo.)
    */
    scrollbar-width: none;
}
.eq-historia-panel::-webkit-scrollbar { display: none; }
.eq-historia-panel.activo { opacity: 1; pointer-events: auto; transition: opacity 0.22s linear 0.1s; }
/* Bug encontrado al verificar la versión de producción (no estaba en el prototipo, que usaba texto
   corto de prueba): con "justify-content: center" de arriba, un panel cuyo contenido real es más alto
   que la pantalla (la vidriera de 5 herramientas, sobre todo en celular) queda centrado de forma que
   la mitad de arriba se recorta contra el borde superior -- y como no se puede scrollear a un
   scrollTop negativo, esa parte de arriba (el título) queda inalcanzable. Este modificador alinea el
   contenido arriba en vez de centrarlo SÓLO para ese panel, así si desborda, desborda hacia abajo
   (scrolleable con normalidad) y no hacia un lugar inaccesible. Los demás paneles, más cortos, se
   quedan centrados como antes. */
.eq-historia-panel--desbordable { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { .eq-historia-panel { transition: none !important; } }
.eq-historia-eyebrow { font-family: var(--eq-titulo); font-size: 0.78rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eq-oro); margin: 0 0 14px 0; }
.eq-historia-panel h2 { font-family: var(--eq-titulo); color: var(--eq-luz); text-wrap: balance; margin: 0 0 14px 0; font-weight: 700; }
/* Ronda 49b (feedback en vivo, 29/09): "el párrafo sigue pequeño" -- segunda pasada de tamaños,
   esta vez más notoria que la de la ronda anterior (que subió esto mismo apenas un 10-15%). */
.eq-historia-antes { font-family: var(--eq-lectura); font-size: 1.4rem; color: var(--eq-luz-dim); margin: 0 0 6px 0; }
.eq-historia-antes strong { color: var(--eq-luz); }
.eq-historia-real { font-family: var(--eq-titulo); font-size: clamp(1.7rem, 6vw, 2.4rem); color: var(--eq-oro-claro); margin: 0 0 18px 0; font-weight: 700; }
.eq-historia-nota-texto { font-family: var(--eq-lectura); font-style: italic; font-size: 1.25rem; line-height: 1.6; color: var(--eq-luz); margin: 0; }
.eq-historia-borde-dia { font-family: var(--eq-lectura); font-size: 1.15rem; color: var(--eq-luz-dim); background: rgba(201,162,78,0.08); border: 1px solid var(--eq-oro-linea); border-radius: 6px; padding: 10px 14px; margin: 16px 0 0 0; }
.eq-historia-item-label { font-family: var(--eq-titulo); font-size: 0.76rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-oro-claro); margin: 0 0 10px 0; font-weight: 600; }
.eq-historia-item-texto { font-family: var(--eq-lectura); font-size: 1.45rem; line-height: 1.65; color: var(--eq-luz-dim); margin: 0; }
.eq-historia-item-texto strong { color: var(--eq-oro-claro); }
.eq-historia-item-secundario { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--eq-oro-linea); font-family: var(--eq-lectura); font-style: italic; font-size: 1.2rem; line-height: 1.6; color: var(--eq-luz-dim); }
.eq-historia-item-secundario strong { color: var(--eq-oro-claro); font-style: normal; }
/* Ronda 75: 'signo_upsell1' pasó de un título corto ("Lo que todavía no ves:") a una oración entera: va en letra de lectura,
   no en mayúsculas de título (en el celular eran cinco renglones de mayúsculas). */
.eq-historia-puente1 { font-family: var(--eq-lectura); font-size: 1.45rem; line-height: 1.6; color: var(--eq-luz); margin: 0 0 22px 0; font-weight: 500; }
.eq-historia-puente2 { font-family: var(--eq-lectura); font-size: 1.45rem; color: var(--eq-oro-claro); margin: 0 0 12px 0; line-height: 1.5; }
.eq-historia-puente3 { font-family: var(--eq-lectura); font-size: 1.25rem; font-style: italic; color: var(--eq-luz-dim); margin: 0; }
.eq-historia-panel .vid-sub { font-family: var(--eq-lectura); font-size: 1.25rem; color: var(--eq-luz-dim); margin: 0 0 22px 0; line-height: 1.55; text-align: center; }
.eq-historia-panel .inicio-herramientas { margin: 0; width: 100%; text-align: left; }
.eq-historia-cta-titulo { font-family: var(--eq-titulo); font-size: clamp(1.5rem, 5.5vw, 2.15rem); color: var(--eq-luz); margin: 0 0 28px 0; font-weight: 700; }
.eq-historia-panel > a.btn-gold { align-self: center; }
/* Ronda 49b: paneles individuales de herramienta (uno por tarjeta, ver el foreach en
   page-acceso-vip.php) -- mismo ícono circular dorado que ya usaba la grilla, pero más grande
   porque acá es el único elemento visual del panel, no una de cinco tarjetas chicas. */
.eq-historia-herramienta-icono {
    width: 64px; height: 64px; border-radius: 50%;
    border: 1px solid var(--eq-oro-linea); background: rgba(201,162,78,0.08);
    display: flex; align-items: center; justify-content: center;
    margin: 0 0 22px 0; font-size: 1.6rem; color: var(--eq-oro-claro); flex-shrink: 0;
}
.eq-historia-herramienta-candado { font-size: 0.55em; color: var(--eq-oro); vertical-align: 0.12em; margin-left: 4px; }
@media (max-width: 640px) {
    .eq-historia-panel { padding: 78px 20px 40px 20px; }
}
@media (max-width: 640px) {
    .eq-resultado-gratis .eq-rg-real { font-size: 1.35rem; }
}


/* MAZO ILUSTRADO (1/10/2026): cartas e imagen del dorso en proporción 9:16; el marco ya viene en la imagen */
#tarot-app-wrapper .card-face.card-art { border: none; background: transparent; box-shadow: 0 10px 25px rgba(0,0,0,0.6); overflow: hidden; border-radius: 8px; }
#tarot-app-wrapper .card-face.card-art .card-art-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }


/* Ronda 53: vista previa de dorsos (antes de barajar) en tamaño chico; al tirar, las cartas vuelven al tamaño normal. */
/* Ronda 60 (pedido del cliente): antes de barajar, los dorsos se ven del MISMO tamaño que las cartas ya reveladas
   (antes eran chicos, 96x171). Sólo se desactiva el cursor de "voltear" porque todavía no hay tirada. */
#tarot-app-wrapper .cards-board.is-preview { margin-bottom: 40px; }
#tarot-app-wrapper .cards-board.is-preview .tarot-card-container { cursor: default; }
#tarot-app-wrapper .tarot-costo-nota { font-family: var(--eq-lectura, 'EB Garamond', serif); font-size: 0.95rem; color: var(--eq-luz-dim, rgba(236, 220, 192, 0.65)); text-align: center; margin: 12px 0 0 0; }
#tarot-app-wrapper .cards-board:empty { margin-bottom: 0; }


/* Ronda 53: selector de idioma del tope del portal (eq_idioma_banner_html). La regla de
   .eq-idioma-banner de más arriba (aviso "lectura en otro idioma") se aplicaba también a este
   selector y separaba las 3 opciones (izquierda / centro / derecha). Ahora ese aviso usa sus ids
   y el selector del tope va junto y centrado. */
.eq-idioma-banner:not(#astral-idioma-banner):not(#transitos-idioma-banner) { display: flex; justify-content: center; align-items: center; gap: 0; padding: 0; margin: 12px auto 14px; background: rgba(236, 220, 192, 0.04); border: 1px solid var(--eq-oro-linea, rgba(201, 162, 78, 0.35)); border-radius: 30px; width: fit-content; overflow: hidden; }
/* Ronda 60: el selector de idioma pasó de 3 palabras sueltas flotando a un selector compacto (píldora con borde dorado fino),
   con aire arriba y abajo para que no se pegue a la barra superior. */
.eq-idioma-banner:not(#astral-idioma-banner):not(#transitos-idioma-banner) .eq-idioma-opcion { font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--eq-luz-dim, #8a8b9a); padding: 7px 16px; border: 0; transition: background 0.25s, color 0.25s; }
.eq-idioma-banner:not(#astral-idioma-banner):not(#transitos-idioma-banner) .eq-idioma-opcion + .eq-idioma-opcion { border-left: 1px solid var(--eq-oro-linea, rgba(201, 162, 78, 0.25)); }
.eq-idioma-banner:not(#astral-idioma-banner):not(#transitos-idioma-banner) .eq-idioma-opcion:hover { color: var(--eq-oro-claro, #e2c47f); background: rgba(201, 162, 78, 0.08); }
.eq-idioma-banner:not(#astral-idioma-banner):not(#transitos-idioma-banner) .eq-idioma-opcion.eq-idioma-activo { color: var(--eq-tinta, #1b2a44); background: var(--eq-oro, #c9a24e); font-weight: 600; }

/* =========================== AFILIADOS (Ronda 57) =========================== */
.nav-etiqueta-afil { margin-left: auto; font-family: var(--eq-titulo); font-size: 0.62rem; letter-spacing: 1px; color: #1b2a44; background: linear-gradient(90deg, #b98f3f, #e3c27a); border-radius: 10px; padding: 2px 7px; }
#view-afiliados .eq-hoja, .afil-cartel { margin-bottom: 24px; }
.afil-cartel { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.afil-cartel-texto { flex: 1 1 320px; }
.afil-cartel-texto p { font-family: var(--eq-lectura); font-size: 1.1rem; color: var(--eq-tinta-dim); margin: 0; }
.afil-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.afil-beneficios div { border: 1px solid rgba(154, 119, 52, 0.4); border-radius: 4px; padding: 16px; background: rgba(255, 250, 240, 0.3); }
.afil-beneficios strong { display: block; font-family: var(--eq-titulo); letter-spacing: 1.5px; color: var(--eq-tinta); margin-bottom: 6px; }
.afil-beneficios span { font-family: var(--eq-lectura); color: var(--eq-tinta-dim); font-size: 1rem; }
.afil-pasos { font-family: var(--eq-lectura); font-size: 1.1rem; color: var(--eq-tinta); line-height: 1.6; padding-left: 22px; margin: 0; }
.afil-nota { font-family: var(--eq-lectura); font-size: 0.98rem; color: var(--eq-tinta-dim); margin: 8px 0 14px 0; }
.afil-terminos { max-height: 320px; overflow-y: auto; border: 1px solid rgba(154, 119, 52, 0.4); border-radius: 4px; padding: 6px 18px; margin-bottom: 18px; background: rgba(255, 250, 240, 0.35); }
.afil-terminos h4 { font-family: var(--eq-titulo); font-size: 0.85rem; letter-spacing: 1.5px; color: #7d5f22; margin: 16px 0 4px 0; }
.afil-terminos p { font-family: var(--eq-lectura); font-size: 1rem; color: var(--eq-tinta); line-height: 1.55; margin: 0 0 6px 0; }
.afil-acepto { display: flex; gap: 10px; align-items: flex-start; font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta); margin-bottom: 18px; cursor: pointer; }
.afil-acepto input { margin-top: 5px; }
#view-afiliados .btn-mystic:disabled { opacity: 0.5; cursor: default; }
.afil-aviso, .afil-alerta { border: 1px solid var(--eq-oro); background: rgba(201, 162, 78, 0.16); color: var(--eq-tinta); font-family: var(--eq-lectura); font-size: 1.05rem; border-radius: 4px; padding: 14px 18px; margin-bottom: 22px; }
.afil-alerta { background: rgba(160, 60, 40, 0.1); border-color: rgba(160, 60, 40, 0.5); }
.afil-link-fila, .afil-nueva-fuente { display: flex; gap: 12px; flex-wrap: wrap; }
.afil-link-fila input, .afil-nueva-fuente input, .afil-cobro-caja select, .afil-cobro-caja textarea {
    flex: 1 1 260px; min-width: 0; font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta); background: rgba(255, 250, 240, 0.6);
    border: 1px solid rgba(154, 119, 52, 0.5); border-radius: 4px; padding: 11px 14px;
}
.afil-nueva-fuente { margin-bottom: 18px; }
.afil-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
.afil-tarjeta, .afil-dinero > div { border: 1px solid rgba(154, 119, 52, 0.4); border-radius: 4px; padding: 16px; background: rgba(255, 250, 240, 0.3); text-align: center; }
.afil-tarjetas .afil-tarjeta { background: var(--eq-papel) var(--eq-img-papel); }
.afil-tarjeta span, .afil-dinero span { display: block; font-family: var(--eq-titulo); font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--eq-tinta-dim); margin-bottom: 6px; }
.afil-tarjeta strong, .afil-dinero strong { font-family: var(--eq-lectura); font-size: 1.7rem; color: var(--eq-tinta); }
.afil-dinero { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.afil-dinero-ok { border-color: var(--eq-oro) !important; background: rgba(201, 162, 78, 0.16) !important; }
.afil-cobro h4 { font-family: var(--eq-titulo); letter-spacing: 1.5px; color: var(--eq-tinta); margin: 22px 0 0 0; }
.afil-cobro-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.afil-cobro-caja { border: 1px solid rgba(154, 119, 52, 0.4); border-radius: 4px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.afil-cobro-caja > strong { font-family: var(--eq-titulo); letter-spacing: 1.5px; color: var(--eq-tinta); }
.afil-cobro-caja > span, .afil-cobro-caja small { font-family: var(--eq-lectura); color: var(--eq-tinta-dim); font-size: 0.98rem; }
.afil-tabla th, .afil-tabla td { text-align: left; }
.afil-url { font-family: var(--eq-lectura); color: var(--eq-tinta-dim); word-break: break-all; }
.afil-acciones { white-space: nowrap; }
.afil-mini { background: transparent; border: 1px solid rgba(154, 119, 52, 0.5); color: var(--eq-tinta); border-radius: 4px; width: 34px; height: 34px; cursor: pointer; margin-right: 6px; }
.afil-mini:hover { border-color: var(--eq-oro); background: rgba(201, 162, 78, 0.18); }
.afil-est { font-family: var(--eq-titulo); font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; border: 1px solid rgba(154, 119, 52, 0.5); color: var(--eq-tinta); }
.afil-est-disponible { background: rgba(60, 130, 80, 0.15); border-color: rgba(60, 130, 80, 0.6); }
.afil-est-pagada { background: rgba(27, 42, 68, 0.1); }
.afil-est-anulada { opacity: 0.6; text-decoration: line-through; }
.afil-releer summary { cursor: pointer; font-family: var(--eq-titulo); letter-spacing: 1.5px; color: var(--eq-tinta); }
@media (max-width: 640px) { .afil-cartel .btn-mystic { width: 100%; } }
/* La tabla de Afiliados vive sobre papel: colores explícitos (las variables --rpt-* sólo existen dentro de los reportes). */
.afil-tabla th { color: #7d5f22; border-color: rgba(154, 119, 52, 0.45); font-size: 0.74rem; padding: 12px 10px; white-space: nowrap; }
.afil-tabla td { color: var(--eq-tinta); border-color: rgba(154, 119, 52, 0.28); font-size: 1.05rem; white-space: normal; }
.afil-cobro-caja select, .afil-cobro-caja textarea { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
.afil-cobro-caja textarea { resize: vertical; }
/* Ronda 70: casillas de los datos de cobro (una por dato, con su nombre arriba). */
.afil-campo { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px 0; }
.afil-campo span { font-family: var(--eq-lectura); color: var(--eq-tinta-dim); font-size: 0.92rem; }
.afil-campo input, .afil-campo select { width: 100%; box-sizing: border-box; font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta); background: rgba(255, 250, 240, 0.6); border: 1px solid rgba(154, 119, 52, 0.5); border-radius: 4px; padding: 11px 14px; }
.afil-cobro-caja .btn-mystic { margin-top: auto; }

/* =========================== TAROT: LECTURAS GUARDADAS (Ronda 61) =========================== */
/* Va aparte de la lectura actual y plegado: una lista de tarjetas finas; sólo una se abre a la vez. */
#tarot-app-wrapper .tarot-historial { max-width: 900px; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid var(--eq-oro-linea, rgba(201, 162, 78, 0.3)); }
#tarot-app-wrapper .tarot-historial-titulo { font-family: var(--eq-titulo, 'Cinzel', serif); color: var(--eq-luz, #ecdcc0); font-size: 1.15rem; letter-spacing: 2px; text-align: center; margin: 0 0 6px 0; font-weight: 600; }
#tarot-app-wrapper .tarot-historial-titulo i { color: var(--eq-oro, #c9a24e); margin-right: 8px; }
#tarot-app-wrapper .tarot-historial-nota { text-align: center; font-family: var(--eq-lectura, 'EB Garamond', serif); font-style: italic; color: var(--eq-luz-dim, rgba(236, 220, 192, 0.65)); font-size: 0.98rem; margin: 0 0 20px 0; }
#tarot-app-wrapper .tarot-historial-vacio { text-align: center; font-family: var(--eq-lectura, 'EB Garamond', serif); color: var(--eq-luz-dim, rgba(236, 220, 192, 0.65)); margin: 10px 0; }
#tarot-app-wrapper .tarot-hist-item { border: 1px solid var(--eq-oro-linea, rgba(201, 162, 78, 0.3)); border-radius: 8px; background: rgba(236, 220, 192, 0.04); margin-bottom: 12px; overflow: hidden; transition: border-color 0.25s; }
#tarot-app-wrapper .tarot-hist-item:hover, #tarot-app-wrapper .tarot-hist-item.abierto { border-color: var(--eq-oro, #c9a24e); }
#tarot-app-wrapper .tarot-hist-cab { width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
#tarot-app-wrapper .tarot-hist-minis { display: flex; gap: 6px; flex: 0 0 auto; }
#tarot-app-wrapper .tarot-hist-mini { width: 34px; height: 60px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(201, 162, 78, 0.5); display: block; background: #0b1118; font-size: 0.7rem; color: var(--eq-oro-claro, #e2c47f); text-align: center; line-height: 60px; }
#tarot-app-wrapper .tarot-hist-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#tarot-app-wrapper .tarot-hist-info strong { font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 0.88rem; letter-spacing: 1px; color: var(--eq-oro-claro, #e2c47f); font-weight: 600; }
#tarot-app-wrapper .tarot-hist-info small { font-family: var(--eq-lectura, 'EB Garamond', serif); font-size: 0.9rem; color: var(--eq-luz-dim, rgba(236, 220, 192, 0.65)); }
#tarot-app-wrapper .tarot-hist-tipo { font-family: var(--eq-lectura, 'EB Garamond', serif); font-size: 0.95rem; color: var(--eq-luz, #ecdcc0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tarot-app-wrapper .tarot-hist-flecha { color: var(--eq-oro, #c9a24e); transition: transform 0.25s; flex: 0 0 auto; }
#tarot-app-wrapper .tarot-hist-item.abierto .tarot-hist-flecha { transform: rotate(180deg); }
#tarot-app-wrapper .tarot-hist-cuerpo { padding: 4px 22px 18px; border-top: 1px solid rgba(201, 162, 78, 0.2); }
#tarot-app-wrapper .tarot-hist-texto { color: var(--text-light, #ecdcc0); line-height: 1.7; font-size: 1rem; }
#tarot-app-wrapper .tarot-hist-acciones { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
#tarot-app-wrapper .tarot-hist-btn { background: none; border: 1px solid var(--eq-oro-linea, rgba(201, 162, 78, 0.4)); color: var(--eq-oro-claro, #e2c47f); border-radius: 30px; padding: 7px 16px; font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 0.72rem; letter-spacing: 1.5px; cursor: pointer; transition: 0.25s; }
#tarot-app-wrapper .tarot-hist-btn:hover { background: rgba(201, 162, 78, 0.15); border-color: var(--eq-oro, #c9a24e); }
#tarot-app-wrapper .tarot-hist-borrar { color: #ff9aa8; border-color: rgba(255, 154, 168, 0.35); }
#tarot-app-wrapper .tarot-hist-borrar:hover { background: rgba(255, 154, 168, 0.1); border-color: #ff9aa8; }
@media (max-width: 600px) {
    #tarot-app-wrapper .tarot-hist-cab { gap: 12px; padding: 12px; }
    #tarot-app-wrapper .tarot-hist-mini { width: 28px; height: 50px; line-height: 50px; }
    #tarot-app-wrapper .tarot-hist-cuerpo { padding: 4px 14px 16px; }
}

/* =========================== TAROT: PROLIJIDAD Y LEGIBILIDAD (Ronda 62) =========================== */
/* 1) Una sola columna de lectura (880 px) para pasos, resultados e historial: antes cada bloque tenía su propio ancho
      (860 / 1280 / 900) y se veía desalineado. Las cartas siguen centradas a todo el ancho.
   2) La lectura de la IA es UNA hoja de pergamino (antes era una caja oscura con otra caja de pergamino adentro).
   3) Los títulos de la IA salían con colores en línea (dorado claro, violeta, cian) casi invisibles sobre el pergamino:
      ahora todos van en tinta dorada oscura con Cinzel, iguales en la lectura actual y en las guardadas. Se fuerza con
      !important porque las lecturas guardadas antes de esta ronda traen esos colores escritos dentro del texto. */
@media screen {
    #tarot-app-wrapper .tarot-paso,
    #tarot-app-wrapper .spread-selector,
    #tarot-app-wrapper .pregunta-modo-selector,
    #tarot-app-wrapper .tarot-pregunta-input-wrap { max-width: 880px; }
    #tarot-app-wrapper .reading-results { max-width: 880px; margin: 10px auto 0; padding: 0 !important; background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    #tarot-app-wrapper .tarot-resultados-titulo { text-align: center; border-bottom: 0; margin-bottom: 14px; padding-bottom: 0; }
    #tarot-app-wrapper .tarot-pregunta-mostrada { text-align: center; margin-bottom: 20px; }
    #tarot-app-wrapper .tarot-historial { max-width: 880px; }
    #tarot-app-wrapper .oracle-box { padding: 40px 46px 30px; }
    #tarot-app-wrapper .oracle-box > h3 { justify-content: center; text-align: center; font-size: 1.3rem; padding-bottom: 14px; margin-bottom: 8px; }
    #tarot-app-wrapper .oracle-box > h3 i { color: #9a7734; }

    /* títulos y texto de la IA (lectura actual y guardadas) */
    #tarot-app-wrapper #oracle-response-content h4,
    #tarot-app-wrapper .tarot-hist-texto h4 {
        color: #7d5f22 !important; font-family: var(--eq-titulo, 'Cinzel', serif) !important; font-size: 1.12rem !important; font-weight: 600 !important;
        letter-spacing: 1.2px !important; line-height: 1.4 !important; text-transform: none !important; background: none !important;
        margin: 30px 0 12px 0 !important; padding: 0 0 8px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(154, 119, 52, 0.35) !important;
    }
    #tarot-app-wrapper #oracle-response-content > h4:first-child,
    #tarot-app-wrapper .tarot-hist-texto > h4:first-child { margin-top: 8px !important; }
    #tarot-app-wrapper #oracle-response-content p,
    #tarot-app-wrapper .tarot-hist-texto p,
    #tarot-app-wrapper .tarot-hist-texto li { color: var(--eq-tinta, #1b2a44) !important; font-family: var(--eq-lectura, 'EB Garamond', serif) !important; margin: 0 0 14px 0 !important; }
    #tarot-app-wrapper #oracle-response-content strong, #tarot-app-wrapper #oracle-response-content b,
    #tarot-app-wrapper .tarot-hist-texto strong, #tarot-app-wrapper .tarot-hist-texto b { color: #7d5f22 !important; font-weight: 700; }
    #tarot-app-wrapper #oracle-response-content em, #tarot-app-wrapper .tarot-hist-texto em { color: inherit !important; }

    /* lectura guardada abierta: la misma hoja de pergamino que la lectura actual */
    #tarot-app-wrapper .tarot-hist-cuerpo { background: rgba(236, 214, 184, 0.97) var(--eq-img-papel); background-size: 400px 400px; padding: 10px 30px 20px; border-top: 1px solid rgba(154, 119, 52, 0.45); }
    #tarot-app-wrapper .tarot-hist-texto { font-size: 1.1rem; line-height: 1.75; color: var(--eq-tinta, #1b2a44); }
    #tarot-app-wrapper .tarot-hist-cuerpo .tarot-historial-vacio { color: var(--eq-tinta, #1b2a44); }
    #tarot-app-wrapper .tarot-hist-cuerpo .tarot-hist-btn { color: var(--eq-tinta, #1b2a44); border-color: rgba(27, 42, 68, 0.35); }
    #tarot-app-wrapper .tarot-hist-cuerpo .tarot-hist-btn:hover { background: rgba(27, 42, 68, 0.08); border-color: var(--eq-tinta, #1b2a44); }
    #tarot-app-wrapper .tarot-hist-cuerpo .tarot-hist-borrar { color: #9b2f3f; border-color: rgba(155, 47, 63, 0.4); }

    @media (max-width: 640px) {
        #tarot-app-wrapper .oracle-box { padding: 26px 18px 20px; }
        #tarot-app-wrapper .tarot-hist-cuerpo { padding: 8px 16px 16px; }
        #tarot-app-wrapper #oracle-response-content h4, #tarot-app-wrapper .tarot-hist-texto h4 { font-size: 1.02rem !important; }
    }
}

/* =========================== COMPATIBILIDAD (Ronda 64) ===========================
   Vista "Compatibilidad" (eq-sinastria.js), cartel de invitación y tarjeta de la vidriera para quien
   llegó invitado. Vive sobre las mismas hojas de papel (.eq-hoja) que Afiliados: tinta oscura sobre papel. */
#view-sinastria .eq-hoja { margin-bottom: 22px; }
.sin-texto { font-family: var(--eq-lectura); font-size: 1.1rem; color: var(--eq-tinta); line-height: 1.55; margin: 0 0 14px 0; }
.sin-nota { font-family: var(--eq-lectura); font-size: 0.98rem; color: var(--eq-tinta-dim); margin: 6px 0 12px 0; }
.sin-label { display: block; font-family: var(--eq-titulo); font-size: 0.74rem; letter-spacing: 1.5px; text-transform: uppercase; color: #7d5f22; margin: 16px 0 8px 0; }
.sin-input { width: 100%; box-sizing: border-box; font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta); background: rgba(255, 250, 240, 0.6); border: 1px solid rgba(154, 119, 52, 0.5); border-radius: 4px; padding: 11px 14px; }
.sin-input:focus { outline: none; border-color: var(--eq-oro); box-shadow: 0 0 0 3px rgba(201, 162, 78, 0.18); }
.sin-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sin-chip { font-family: var(--eq-titulo); font-size: 0.8rem; letter-spacing: 1px; color: var(--eq-tinta); background: rgba(255, 250, 240, 0.45); border: 1px solid rgba(154, 119, 52, 0.5); border-radius: 30px; padding: 9px 16px; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.sin-chip i { color: #9a7734; margin-right: 4px; }
.sin-chip:hover { border-color: var(--eq-oro); }
.sin-chip.activo { background: #1b2a44; border-color: #1b2a44; color: #FDE08B; }
.sin-chip.activo i { color: #FDE08B; }
.sin-btn-crear { margin-top: 20px; }
#view-sinastria .btn-mystic:disabled { opacity: 0.5; cursor: default; }
.sin-link { border-color: var(--eq-oro) !important; }
.sin-compartir { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.sin-compartir a.btn-mystic { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.sin-titulo-lista { font-family: var(--eq-titulo); font-size: 1.15rem; letter-spacing: 2px; color: var(--eq-oro-claro, #e2c47f); margin: 34px 0 14px 0; }
.sin-vinculo-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.sin-vinculo-cab .eq-hoja-titulo { margin: 4px 0 2px 0; }
.sin-tipo { font-family: var(--eq-titulo); font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: #7d5f22; }
.sin-est-lista .sin-estado { background: rgba(60, 130, 80, 0.15); border-color: rgba(60, 130, 80, 0.6); }
.sin-est-pendiente .sin-estado, .sin-est-aceptada .sin-estado { background: rgba(201, 162, 78, 0.16); }
.sin-est-falta_mia .sin-estado { background: rgba(160, 60, 40, 0.1); border-color: rgba(160, 60, 40, 0.5); }
.sin-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.sin-cancelar { background: none; border: 0; padding: 4px; font-family: var(--eq-lectura); font-size: 0.98rem; color: var(--eq-tinta-dim); text-decoration: underline; cursor: pointer; }
/* Ronda 69 (3/10/2026): Compatibilidad sin invitar (cargar yo sus datos). */
.sin-modos { margin: 4px 0 6px 0; }
.sin-man-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sin-man-fila > div { min-width: 0; }
.sin-check { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0 0; font-family: var(--eq-lectura); font-size: 1rem; color: var(--eq-tinta); cursor: pointer; }
.sin-check input { margin-top: 4px; accent-color: #233d79; }
.sin-check-nota { margin: 4px 0 0 26px; font-family: var(--eq-lectura); font-size: .9rem; font-style: italic; color: var(--eq-tinta-dim); line-height: 1.4; } /* Ronda 69 */
.sin-check-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 0 26px; padding: 10px 14px; border-radius: 10px; background: rgba(35, 61, 121, 0.08); border: 1px solid rgba(35, 61, 121, 0.35); font-family: var(--eq-lectura); font-size: .95rem; color: var(--eq-tinta); line-height: 1.4; } /* Ronda 69 (3/10/2026) */
.sin-check-aviso.sin-falta { animation: sinSacude .45s ease; }
.sin-check-aviso .btn-mystic { margin: 0; padding: 7px 14px; font-size: .85rem; }
.sin-lugar { position: relative; }
.sin-lugar-box { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: none; background: #fffcf3; border: 1px solid rgba(52, 83, 154, 0.5); box-shadow: 0 14px 30px rgba(0,0,0,0.25); max-height: 240px; overflow-y: auto; }
.sin-lugar-box .sugerencia-item { padding: 10px 14px; cursor: pointer; color: var(--eq-tinta); font-family: var(--eq-lectura); font-size: 1.05rem; border-bottom: 1px solid rgba(35, 61, 121, 0.1); }
.sin-lugar-box .sugerencia-item:hover { background: rgba(252, 242, 212, 0.5); }
@media (max-width: 520px) { .sin-man-fila { grid-template-columns: 1fr; gap: 0; } }
.sin-pasos { list-style: none; margin: 0; padding: 0; }
.sin-pasos li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--eq-lectura); font-size: 1.08rem; color: var(--eq-tinta); padding: 8px 0; border-bottom: 1px dashed rgba(154, 119, 52, 0.3); }
.sin-pasos li:last-child { border-bottom: 0; }
.sin-pasos li i { color: rgba(154, 119, 52, 0.55); }
.sin-pasos li.ok { color: var(--eq-tinta-dim); }
.sin-pasos li.ok i { color: #3c8250; }
.sin-pasos .sin-ir { margin-left: auto; padding: 6px 16px; font-size: 0.75rem; }
.sin-descuento { display: flex; align-items: center; gap: 10px; }
/* Resultado */
.sin-resultado { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(154, 119, 52, 0.35); }
.sin-cabecera { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.sin-anillo { --p: 50; width: 138px; height: 138px; flex: 0 0 138px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#b98f3f calc(var(--p) * 1%), rgba(154, 119, 52, 0.16) 0); }
.sin-anillo > div { width: 112px; height: 112px; border-radius: 50%; background: #F4EAD5; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(154, 119, 52, 0.35); }
.sin-anillo strong { font-family: var(--eq-titulo); font-size: 1.9rem; color: #1b2a44; line-height: 1; }
.sin-anillo span { font-family: var(--eq-titulo); font-size: 0.56rem; letter-spacing: 1.5px; text-transform: uppercase; color: #7d5f22; margin-top: 6px; }
.sin-areas { flex: 1 1 280px; display: grid; gap: 12px; }
.sin-area-tit { display: flex; justify-content: space-between; font-family: var(--eq-titulo); font-size: 0.78rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--eq-tinta); margin-bottom: 5px; }
.sin-area-tit strong { font-family: var(--eq-lectura); font-size: 1.05rem; letter-spacing: 0; }
.sin-barra { height: 8px; border-radius: 6px; background: rgba(154, 119, 52, 0.16); overflow: hidden; }
.sin-barra > div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #b98f3f, #e3c27a); }
.sin-tres { margin: 20px 0 4px 0; display: grid; gap: 4px; }
/* Ronda 69 (3/10/2026), motor 9: Intensidad del vínculo y "Cómo se arma el porcentaje" (61 + lo que suma o resta cada parte). */
.sin-medidas { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 2fr); gap: 14px 22px; margin: 22px 0 6px; align-items: start; }
.sin-intensidad, .sin-partes { border: 1px solid rgba(52, 83, 154, 0.32); border-radius: 6px; padding: 14px 16px; background: rgba(255, 254, 252, 0.4); min-width: 0; }
.sin-medidas .sin-label { margin: 0 0 10px 0; }
.sin-int-valor { display: flex; align-items: center; gap: 10px; margin: 0 0 6px 0; }
.sin-int-valor strong { font-family: var(--eq-titulo); font-size: 1.15rem; letter-spacing: 1px; color: #233d79; }
.sin-int-puntos { display: inline-flex; gap: 5px; }
.sin-int-puntos i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #3f64b9; display: inline-block; box-sizing: border-box; }
.sin-int-puntos i.on { background: #3f64b9; }
.sin-intensidad .sin-nota { margin-bottom: 0; }
.sin-parte { display: grid; grid-template-columns: minmax(0, 1fr) 110px 48px; align-items: center; gap: 4px 12px; padding: 7px 0; border-bottom: 1px dashed rgba(52, 83, 154, 0.22); }
.sin-parte-nom { font-family: var(--eq-lectura); font-size: 1rem; line-height: 1.3; color: var(--eq-tinta); }
.sin-parte-nom em { font-style: normal; font-family: var(--eq-titulo); font-size: 0.6rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--eq-tinta-dim); white-space: nowrap; }
.sin-parte-barra { position: relative; height: 8px; border-radius: 6px; background: rgba(52, 83, 154, 0.1); }
.sin-parte-barra::after { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(35, 61, 121, 0.45); }
.sin-parte-barra i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.sin-parte.suma .sin-parte-barra i { left: 50%; background: #3f64b9; }
.sin-parte.resta .sin-parte-barra i { right: 50%; background: #a33a28; opacity: 0.8; }
.sin-parte strong { font-family: var(--eq-lectura); font-size: 1.08rem; text-align: right; color: #233d79; white-space: nowrap; }
.sin-parte.resta strong { color: #8f3322; }
.sin-parte-base .sin-parte-barra, .sin-parte-total .sin-parte-barra { background: none; }
.sin-parte-base .sin-parte-barra::after, .sin-parte-total .sin-parte-barra::after { display: none; }
.sin-parte-base .sin-parte-nom, .sin-parte-total .sin-parte-nom { font-family: var(--eq-titulo); font-size: 0.74rem; letter-spacing: 1.3px; text-transform: uppercase; color: #223d7d; }
.sin-parte-total { border-bottom: 0; border-top: 1px solid rgba(35, 61, 121, 0.45); margin-top: 2px; }
.sin-parte-total strong { font-family: var(--eq-titulo); font-size: 1.2rem; }
.sin-partes .sin-nota { margin: 10px 0 0 0; }
@media (max-width: 760px) { .sin-medidas { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
    .sin-parte { grid-template-columns: minmax(0, 1fr) 48px; }
    .sin-parte-nom { grid-column: 1; grid-row: 1; }
    .sin-parte strong { grid-column: 2; grid-row: 1; }
    .sin-parte-barra { grid-column: 1 / -1; grid-row: 2; }
    .sin-parte-base .sin-parte-barra, .sin-parte-total .sin-parte-barra { display: none; }
}
.sin-tres p { font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta); margin: 0; }
.sin-subtitulo { font-family: var(--eq-titulo); font-size: 0.86rem; letter-spacing: 1.8px; text-transform: uppercase; color: #7d5f22; margin: 24px 0 8px 0; }
.sin-generando { font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta-dim); }
.sin-lectura-texto h4 { font-family: var(--eq-titulo); font-size: 1rem; letter-spacing: 1.5px; color: #1b2a44; margin: 22px 0 8px 0; padding-bottom: 6px; border-bottom: 1px solid rgba(154, 119, 52, 0.35); }
.sin-lectura-texto h4:first-child { margin-top: 6px; }
.sin-lectura-texto p { font-family: var(--eq-lectura); font-size: 1.12rem; line-height: 1.65; color: var(--eq-tinta); margin: 0 0 12px 0; }
.sin-lectura-texto strong { color: #1b2a44; }
/* Ronda 65: nivel, rueda de sinastría, cruces explicados, casas, elementos, carta compuesta y consulta */
.sin-nivel { font-family: var(--eq-titulo); font-size: 0.9rem; letter-spacing: 1.5px; color: #1b2a44; margin: 0 0 4px 0; font-weight: 600; }
.sin-centro { text-align: center; }
.sin-rueda { max-width: 560px; margin: 6px auto 4px auto; }
.sin-rueda svg { display: block; width: 100%; height: auto; }
.sin-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-family: var(--eq-titulo); font-size: 0.7rem; letter-spacing: 1px; color: var(--eq-tinta); margin: 4px 0 0 0; }
.sin-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.sin-punto { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.sin-raya { display: inline-block; width: 22px; height: 3px; border-radius: 2px; }
.sin-raya-punteada { background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 12px) !important; }
.sin-cruces { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sin-cruce { padding: 11px 14px; border-radius: 4px; background: rgba(255, 250, 240, 0.45); border-left: 3px solid #2d5f86; }
.sin-cruce.sin-nat-desafia { border-left-color: #a33a28; }
.sin-cruce.sin-nat-intenso { border-left-color: #b98f3f; }
.sin-cruce-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.sin-cruce-cab strong { font-family: var(--eq-lectura); font-size: 1.08rem; color: #1b2a44; font-weight: 600; }
.sin-cruce-cab em { font-family: var(--eq-titulo); font-style: normal; font-size: 0.62rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--eq-tinta-dim); white-space: nowrap; }
.sin-cruce p { font-family: var(--eq-lectura); font-size: 1.04rem; line-height: 1.5; color: var(--eq-tinta); margin: 4px 0 0 0; }
.sin-todos { margin-top: 12px; }
.sin-toggle { font-family: var(--eq-titulo); font-size: 0.74rem; letter-spacing: 1px; text-decoration: none; color: #7d5f22; padding: 6px 0; }
.sin-toggle:hover { text-decoration: underline; }
.sin-casas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 26px; }
.sin-casas .sin-label { margin-top: 6px; }
.sin-casas-lista { list-style: none; margin: 0; padding: 0; }
.sin-casas-lista li { font-family: var(--eq-lectura); font-size: 1.02rem; line-height: 1.45; color: var(--eq-tinta); padding: 6px 0 6px 16px; border-bottom: 1px dashed rgba(154, 119, 52, 0.28); position: relative; }
.sin-casas-lista li::before { content: '✦'; position: absolute; left: 0; top: 7px; font-size: 0.6rem; color: rgba(154, 119, 52, 0.6); }
.sin-casas-lista li.clave::before { color: #b98f3f; font-size: 0.75rem; }
.sin-casas-lista li.clave { color: #1b2a44; }
.sin-elem { font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta); margin: 0 0 8px 0; }
.sin-elem span { font-family: var(--eq-titulo); font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: #7d5f22; margin-right: 6px; }
.sin-comp { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sin-comp div { border: 1px solid rgba(154, 119, 52, 0.38); border-radius: 4px; padding: 10px 12px; background: rgba(255, 250, 240, 0.4); }
.sin-comp span { display: block; font-family: var(--eq-titulo); font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; color: #7d5f22; margin-bottom: 4px; }
.sin-comp strong { font-family: var(--eq-lectura); font-size: 1.05rem; color: #1b2a44; font-weight: 600; }
/* Ronda 67: numerología del vínculo */
.sin-num-afinidad { font-family: var(--eq-lectura); font-size: 1.1rem; margin: 6px 0 12px; }
.sin-num-afinidad span { font-family: var(--eq-titulo); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: #7d5f22; margin-right: 6px; }
.sin-num-linea { font-family: var(--eq-titulo); font-size: 0.85rem; letter-spacing: 0.5px; color: #7d5f22; margin: 2px 0 4px; }
.sin-num-sub { font-family: var(--eq-titulo); font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase; color: #7d5f22; margin: 16px 0 4px; }
.sin-cruce.sin-nat-complementa { border-left-color: #6b7f3a; }
.sin-tar-cartas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.sin-tar-carta { margin: 0; text-align: center; }
.sin-tar-img { aspect-ratio: 2 / 3.4; border: 1px solid rgba(154, 119, 52, 0.5); border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #1b2a44, #020611); display: flex; align-items: center; justify-content: center; }
.sin-tar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sin-tar-numeral { font-family: var(--eq-titulo); color: #FDE08B; font-size: 1.4rem; }
.sin-tar-carta figcaption { margin-top: 6px; line-height: 1.25; }
.sin-tar-carta figcaption span { display: block; font-family: var(--eq-titulo); font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase; color: #7d5f22; }
.sin-tar-carta figcaption strong { font-family: var(--eq-lectura); font-size: 0.92rem; color: #1b2a44; font-weight: 600; }
.sin-tar-actual { margin-top: 10px; }
.sin-tar-vieja { border: 1px solid rgba(154, 119, 52, 0.32); border-radius: 4px; padding: 8px 14px; margin-bottom: 10px; background: rgba(255, 250, 240, 0.35); }
.sin-tar-vieja summary { cursor: pointer; font-family: var(--eq-lectura); font-size: 1rem; color: #1b2a44; }
@media (max-width: 700px) { .sin-tar-cartas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sin-tar-carta figcaption strong { font-size: 0.82rem; } }
.sin-tar-carta figcaption strong { display: block; overflow-wrap: anywhere; hyphens: auto; }
.sin-consulta { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(154, 119, 52, 0.35); }
.sin-consulta textarea.sin-input { resize: vertical; min-height: 84px; }
.sin-chip-cons { font-family: var(--eq-lectura); font-size: 0.95rem; letter-spacing: 0; text-align: left; border-radius: 16px; margin-top: 8px; }
.sin-cons-lista { display: grid; gap: 14px; }
.sin-cons-item { border: 1px solid rgba(154, 119, 52, 0.32); border-radius: 4px; padding: 12px 16px; background: rgba(255, 250, 240, 0.35); }
.sin-cons-preg { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-family: var(--eq-lectura); font-size: 1.05rem; font-weight: 600; color: #1b2a44; margin: 0 0 6px 0; }
.sin-cons-preg i { color: #9a7734; font-size: 0.85rem; }
.sin-cons-preg span { margin-left: auto; font-family: var(--eq-titulo); font-size: 0.6rem; letter-spacing: 1px; font-weight: 400; color: var(--eq-tinta-dim); }
.sin-lectura-texto ul { font-family: var(--eq-lectura); font-size: 1.08rem; line-height: 1.6; color: var(--eq-tinta); padding-left: 22px; }
/* Cartel (Inicio y final de la Carta Natal) */
.sin-cartel-tipos { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 260px; justify-content: flex-end; }
.sin-cartel-tipos .btn-mystic { padding: 9px 16px; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 640px) {
    /* "COMPATIBILIDAD" es una sola palabra larga: con el tamaño de los otros títulos no entra a 375px (igual que Numerología). */
    #view-sinastria .section-header h1 { font-size: 1.5rem; letter-spacing: 3px; }
    .sin-cartel-tipos { justify-content: flex-start; }
    .sin-cartel-tipos .btn-mystic { flex: 1 1 calc(50% - 10px); justify-content: center; }
    .sin-cabecera { justify-content: center; }
    .sin-cruce-cab em { white-space: normal; }
}
/* Vidriera de quien llegó invitado y todavía no tiene plan */
.sin-vidriera { border: 1px solid var(--eq-oro-linea, rgba(201, 162, 78, 0.35)); border-radius: 6px; padding: 26px 22px; margin: 0 0 34px 0; background: rgba(201, 162, 78, 0.06); }
.sin-vidriera .eq-vidriera-sub { margin-bottom: 18px; }
.sin-vidriera-pasos { list-style: none; max-width: 460px; margin: 0 auto 24px auto; padding: 0; }
.sin-vidriera-pasos li { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--eq-luz, #ecdcc0); border-bottom: 1px dashed rgba(201, 162, 78, 0.25); }
.sin-vidriera-pasos li:last-child { border-bottom: 0; }
.sin-vidriera-pasos li i { color: var(--eq-oro, #c9a24e); }
.sin-vidriera-pasos li.ok { color: var(--eq-luz-dim, #8a8b9a); }
.sin-vidriera > a.btn-gold { display: block; width: fit-content; margin: 0 auto; }



/* Ronda 69 (3/10/2026): aviso mientras llegan el perfil y la carta guardada (ver eqAvisoCargandoDatos en page-acceso-vip.js). */
#eq-aviso-cargando-datos { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; background: #192c57; color: #FFFFFF; border: 1px solid #fcf2d4; border-radius: 999px; padding: 10px 18px; font-size: 0.95rem; box-shadow: 0 6px 24px rgba(0,0,0,.35); max-width: calc(100% - 32px); text-align: center; }

/* Ronda 69 (3/10/2026): "Tu cielo en resumen" y el aviso que lleva a la guía (que ahora va al final del reporte). */
.eq-aviso-guia { text-align: center; font-size: 0.92rem; color: #3f578f; margin: 0 auto 26px; max-width: 640px; }
.eq-aviso-guia a { color: #233d79; font-weight: 600; text-decoration: underline; }
.eq-res-tabla { width: 100%; margin: 6px 0 14px; }
.eq-res-tabla td, .eq-res-tabla th { vertical-align: top; }
.eq-res-tabla small { color: #637294; }
.eq-res-asp.tension { color: #a33a28; font-weight: 600; }
.eq-res-asp.fluido { color: #2d5f86; font-weight: 600; }
.eq-res-nota { font-size: 0.88rem; color: #637294; font-style: italic; font-family: 'EB Garamond', 'Cinzel', Georgia, serif; } /* Ronda 69: la misma letra del pergamino (la nota de los grados salía en sans-serif) */
.eq-res-lista { margin: 6px 0 14px 18px; padding: 0; } .eq-res-lista li { margin-bottom: 6px; } /* Ronda 69: figuras de la carta */
@media print { .eq-res-tabla tr { break-inside: avoid; } }

/* Ronda 69 (3/10/2026): Compatibilidad — lectura antes del detalle, y PDF de UNA compatibilidad
   (eq-sinastria.js agrega body.eq-imprimir-sin y .sin-imprimir a la tarjeta elegida). */
.sin-imp-marca, .sin-imp-cabecera { display: none; }
.sin-compartir-barra { margin-top: 18px; }
.sin-detalle-tit { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(52, 83, 154, 0.35); }
@media print {
    body.eq-imprimir-sin #view-sinastria { display: block !important; padding: 0 !important; margin: 0 !important; }
    body.eq-imprimir-sin #view-sinastria > :not(#sin-contenido),
    body.eq-imprimir-sin #sin-contenido > :not(.sin-imprimir),
    body.eq-imprimir-sin .sin-imprimir .sin-noimp,
    body.eq-imprimir-sin .sin-imprimir .sin-acciones,
    body.eq-imprimir-sin .sin-imprimir .sin-estado,
    body.eq-imprimir-sin .sin-imprimir .sin-toggle,
    body.eq-imprimir-sin .sin-imprimir .sin-consulta > label,
    body.eq-imprimir-sin .sin-imprimir .sin-consulta > textarea,
    body.eq-imprimir-sin .sin-imprimir .sin-consulta > input,
    body.eq-imprimir-sin .sin-imprimir .sin-consulta > .sin-chips,
    body.eq-imprimir-sin .sin-imprimir .sin-consulta > .sin-nota,
    body.eq-imprimir-sin .sin-imprimir .sin-consulta > .afil-aviso,
    body.eq-imprimir-sin .sin-imprimir .sin-consulta.sin-vacia { display: none !important; }
    /* Ronda 69 (3/10/2026): el PDF de una compatibilidad usa el MISMO pergamino que la Carta Natal (Diego: "tiene que
       tener la misma identidad visual"): la tarjeta se suma a la lista de #pdf-export-area (fondo, marco y márgenes, más
       arriba) y lleva el mismo encabezado (título, nombres en letra manuscrita y separador). */
    body.eq-imprimir-sin .sin-imprimir { display: block !important; box-shadow: none !important; outline: none !important; border: none !important; margin: 0 !important; max-width: 100% !important; border-radius: 0 !important; }
    body.eq-imprimir-sin .sin-imprimir .sin-imp-cabecera { display: block !important; }
    body.eq-imprimir-sin .sin-imprimir .sin-vinculo-cab { display: none !important; } /* el encabezado de pergamino ya dice quiénes son */
    body.eq-imprimir-sin .sin-imprimir, body.eq-imprimir-sin .sin-imprimir p, body.eq-imprimir-sin .sin-imprimir li { color: #233d79 !important; }
    body.eq-imprimir-sin .sin-imprimir h4, body.eq-imprimir-sin .sin-imprimir h5 { color: #1f366c !important; }
    body.eq-imprimir-sin .sin-imprimir .sin-cruce, body.eq-imprimir-sin .sin-imprimir .sin-comp, body.eq-imprimir-sin .sin-imprimir .sin-area,
    body.eq-imprimir-sin .sin-imprimir .sin-intensidad, body.eq-imprimir-sin .sin-imprimir .sin-partes { background: rgba(255, 255, 255, 0.35) !important; }
    body.eq-imprimir-sin .sin-imprimir .sin-intensidad, body.eq-imprimir-sin .sin-imprimir .sin-partes,
    body.eq-imprimir-sin .sin-imprimir .sin-cruce, body.eq-imprimir-sin .sin-imprimir .sin-area, body.eq-imprimir-sin .sin-imprimir .sin-rueda,
    body.eq-imprimir-sin .sin-imprimir .sin-comp, body.eq-imprimir-sin .sin-imprimir .sin-tar-carta { break-inside: avoid; page-break-inside: avoid; }
    body.eq-imprimir-sin .sin-imprimir h4 { break-after: avoid; page-break-after: avoid; }
}

/* =========================================================================
   Ronda 69 (3/10/2026): Compatibilidad más prolija y legible (pedido de Diego: "la letra es muy pequeña y hay colores
   poco legibles; el guardado tiene que ser más prolijo").
   ========================================================================= */
#view-sinastria { --eq-tinta-dim: rgba(35, 61, 121, 0.86); }
#view-sinastria .sin-texto, #view-sinastria .sin-lectura-texto p, #view-sinastria .sin-lectura-texto li { font-size: 1.2rem; line-height: 1.68; color: #203972; }
#view-sinastria .sin-nota { font-size: 1.05rem; }
#view-sinastria .sin-label, #view-sinastria .sin-tipo, #view-sinastria .sin-elem span, #view-sinastria .sin-num-afinidad span,
#view-sinastria .sin-toggle, #view-sinastria .sin-leyenda, #view-sinastria .sin-area-tit, #view-sinastria .sin-parte-base .sin-parte-nom,
#view-sinastria .sin-parte-total .sin-parte-nom { font-size: 0.86rem; }
#view-sinastria .sin-cruce-cab em, #view-sinastria .sin-comp span, #view-sinastria .sin-parte-nom em, #view-sinastria .sin-cons-preg span,
#view-sinastria .sin-tar-carta figcaption span, #view-sinastria .sin-anillo span { font-size: 0.74rem; }
#view-sinastria .sin-cruce p, #view-sinastria .sin-casas-lista li, #view-sinastria .sin-num-linea, #view-sinastria .sin-comp strong { font-size: 1.08rem; }
#view-sinastria .sin-subtitulo, #view-sinastria .sin-num-sub { font-size: 0.98rem; }
#view-sinastria .sin-chip { font-size: 0.9rem; }

/* Pestañas */
.sin-nav { display: flex; gap: 8px; margin: 0 auto 22px; padding: 6px; max-width: 640px; border-radius: 40px; background: rgba(9, 17, 37, 0.55); border: 1px solid rgba(252, 242, 212, 0.25); }
.sin-nav-b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 30px; border: none; background: transparent; color: #fcf2d4; cursor: pointer; font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 0.86rem; letter-spacing: 1.5px; text-transform: uppercase; transition: background .2s, color .2s; }
.sin-nav-b:hover { background: rgba(255, 255, 255, 0.08); }
.sin-nav-b.activo { background: #fff; color: #0e1b3a; }
.sin-nav-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #1f3a7a; color: #fff; font-size: 0.75rem; letter-spacing: 0; }
.sin-nav-b.activo .sin-nav-n { background: #0e1b3a; }

/* Galería de vínculos */
.sin-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sin-g-card { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer; padding: 18px 18px; border-radius: 16px; border: 1px solid rgba(52, 83, 154, 0.25);
    background: linear-gradient(160deg, #fbf6ea 0%, #efe4cc 100%); color: #203972; box-shadow: 0 8px 24px rgba(4, 9, 19, 0.35); transition: transform .2s ease, box-shadow .2s ease; }
.sin-g-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(4, 9, 19, 0.45); }
.sin-g-anillo { --p: 0; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(#1f3a7a calc(var(--p) * 1%), rgba(31, 58, 122, 0.14) 0); position: relative; }
.sin-g-anillo::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #f7f0df; }
.sin-g-anillo span, .sin-g-anillo i { position: relative; font-family: var(--eq-titulo, 'Cinzel', serif); font-weight: 700; font-size: 1rem; color: #1f3a7a; }
.sin-g-sin { background: rgba(31, 58, 122, 0.14); }
.sin-g-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sin-g-tipo { font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: #3f578f; }
.sin-g-nombre { font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 1.25rem; letter-spacing: 1px; color: #172c5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sin-g-meta { font-size: 1rem; color: #3f578f; }
.sin-g-flecha { color: #1f3a7a; opacity: .6; }
.sin-volver { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 18px; border-radius: 30px; border: 1px solid rgba(252, 242, 212, 0.4); background: rgba(9, 17, 37, 0.55); color: #fff; cursor: pointer; font-family: var(--eq-titulo, 'Cinzel', serif); font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase; }
.sin-volver:hover { background: rgba(255, 255, 255, 0.12); }
.sin-vacio { text-align: center; }
.sin-cons-comp { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(52, 83, 154, 0.4); background: transparent; color: #1f3a7a; cursor: pointer; font-size: 0.98rem; }
.sin-cons-comp:hover { background: rgba(52, 83, 154, 0.08); }
@media print { .sin-nav, .sin-volver, .sin-galeria, .sin-cons-comp { display: none !important; } }
@media (max-width: 600px) { .sin-nav-b { font-size: 0.74rem; padding: 10px 8px; letter-spacing: 1px; } .sin-galeria { grid-template-columns: 1fr; } }
/* Ronda 69: borrar desde la galería y confirmación dentro de la página */
.sin-g-item { position: relative; }
.sin-g-borrar { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(52, 83, 154, 0.3); background: rgba(255, 255, 255, 0.7); color: #6a2b2b; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s; }
.sin-g-borrar:hover { opacity: 1; background: #fff; }
.sin-g-borrar.sin-confirmar { width: auto; padding: 0 12px; border-radius: 16px; background: #8a2c2c; color: #fff; opacity: 1; font-size: 0.85rem; }
.sin-cancelar.sin-confirmar { background: #8a2c2c; color: #fff; border-radius: 16px; padding: 6px 14px; text-decoration: none; }
/* Ronda 69: error del formulario "Cargar yo sus datos", junto al botón */
.sin-man-error { margin: 12px 0 4px; padding: 10px 14px; border-radius: 10px; background: rgba(138, 44, 44, 0.1); border: 1px solid rgba(138, 44, 44, 0.45); color: #7a2323; font-size: 1.05rem; }
.sin-check.sin-falta { outline: 2px solid rgba(138, 44, 44, 0.6); outline-offset: 4px; border-radius: 6px; animation: sinSacude .45s ease; }
@keyframes sinSacude { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Ronda 72 (6/10/2026): historia del resultado gratis en 4 paneles -- lista de "lo que todavía no ves"
   con candados y el precio "desde" debajo del botón final (ver page-acceso-vip.php). */
.eq-historia-candados { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; max-width: 520px; }
.eq-historia-candados li { font-family: var(--eq-lectura); font-size: 1.2rem; line-height: 1.5; color: var(--eq-luz-dim); }
.eq-historia-candados li i { color: var(--eq-oro-claro); font-size: 0.85em; margin-right: 8px; } /* Ronda 75b: vuelve el candado */
/* Ronda 75b (6/10/2026): "Tu Signo Estelar es / OFIUCO" + qué es, y el precio DENTRO del botón, debajo del título. */
.eq-historia-real-estelar { margin-bottom: 8px; }
.eq-historia-estelar-que { font-family: var(--eq-lectura); font-size: 1.2rem; line-height: 1.55; color: var(--eq-luz-dim); margin: 0 0 18px 0; }
.eq-btn-doble { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; text-decoration: none; }
.eq-btn-mini { display: block; margin-top: 5px; font-family: var(--eq-lectura); font-weight: 600; font-size: 1rem; letter-spacing: 0.3px; text-transform: none; color: rgba(0, 0, 0, 0.72); }

/* ===== Ronda 78 (6/10/2026, pedidos de Diego): historia del resultado gratis con jerarquía =====
   "«Diego, tu Signo Estelar es» es muy pequeño… probaría letra más grande y más linda, hasta le pondría el símbolo del
   signo"; "en tu esencia usá distintos niveles de letras, colores y tamaños para que haya contraste y den ganas de leer".
   Niveles: 1) el signo (Cinzel, lo más grande, dorado con brillo) y su símbolo; 2) la frase del signo y la frase principal
   de la esencia (Garamond grande, crema); 3) "Diego, tu Signo Estelar es" (Garamond, nombre en dorado); 4) lo que explica
   (Garamond chico, apagado). Las etiquetas ("TU ESENCIA", "SENDERO DE VIDA") en Cinzel chico con mucho espaciado. */
.eq-historia-intro { font-family: var(--eq-lectura); font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.1rem); line-height: 1.3; color: var(--eq-luz); margin: 0 0 18px 0; font-weight: 500; }
.eq-historia-persona { color: var(--eq-oro-claro); font-style: italic; }
.eq-historia-simbolo { display: block; width: clamp(76px, 20vw, 108px); height: auto; color: #e9c870; margin: 0 auto 12px auto; filter: drop-shadow(0 0 22px rgba(233, 200, 112, 0.38)); }
.eq-historia-real.eq-historia-real-estelar { margin: 0 0 10px 0; line-height: 1.1; }
.eq-historia-real-estelar strong {
    display: inline-block; font-family: var(--eq-titulo); font-weight: 700; letter-spacing: 0.08em;
    font-size: clamp(2.5rem, 1.6rem + 4.5vw, 3.6rem);
    background: linear-gradient(180deg, #fff3cc 0%, #f0cf78 45%, #c9a24e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 18px rgba(233, 200, 112, 0.25));
}
.eq-historia-estelar-que { font-size: 1.15rem; max-width: 30ch; margin: 0 auto 26px auto; }
/* Ronda 120 (pedido 48c): párrafo largo de «por qué puede no coincidir»: 18 px y ancho completo. */
.eq-historia-estelar-que.eq-historia-por-que { font-size: 1.125rem; max-width: none; margin: 0 auto 26px auto; }
.eq-historia-frase { font-family: var(--eq-lectura); font-style: italic; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.7rem); line-height: 1.45; color: var(--eq-luz); max-width: 28ch; margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--eq-oro-linea); }
.eq-historia-panel .eq-historia-item-label { font-size: 1rem; letter-spacing: 4px; color: var(--eq-oro-claro); margin-bottom: 18px; }
.eq-historia-esencia-titular { font-family: var(--eq-lectura); font-weight: 500; font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.05rem); line-height: 1.32; color: var(--eq-luz); max-width: 26ch; margin: 0 auto 14px auto; text-wrap: balance; }
.eq-historia-esencia-apoyo { font-family: var(--eq-lectura); font-size: 1.2rem; line-height: 1.6; color: var(--eq-luz-dim); max-width: 34ch; margin: 0 auto; }
.eq-historia-sendero { margin: 30px auto 0 auto; padding-top: 26px; border-top: 1px solid var(--eq-oro-linea); max-width: 30ch; display: flex; flex-direction: column; align-items: center; }
.eq-historia-sendero-num { font-family: var(--eq-titulo); font-weight: 700; font-size: clamp(2.6rem, 2rem + 2.4vw, 3.4rem); line-height: 1; background: linear-gradient(180deg, #fff3cc 0%, #f0cf78 45%, #c9a24e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eq-historia-sendero-label { font-family: var(--eq-titulo); font-size: 1rem; letter-spacing: 4px; text-transform: uppercase; color: var(--eq-oro-claro); margin: 8px 0 12px 0; }
.eq-historia-sendero-texto { font-family: var(--eq-lectura); font-size: 1.25rem; line-height: 1.5; color: var(--eq-luz); margin: 0; }
@media (max-height: 700px) {
    .eq-historia-simbolo { width: 68px; margin-bottom: 6px; }
    .eq-historia-frase { padding-top: 16px; }
    .eq-historia-sendero { margin-top: 20px; padding-top: 18px; }
}
/* Ronda 78b: el relato que sigue a la lectura gratis lleva el mismo cielo "Violeta" que la portada
   (front-page.css, bloque "Ronda 78b: paleta"), para que el paso de una a otra se sienta continuo. */
.eq-historia {
    background:
        radial-gradient(ellipse 75% 55% at 5% 0%, rgba(132, 72, 205, 0.38), transparent 70%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(200, 80, 150, 0.20), transparent 70%),
        radial-gradient(ellipse 50% 40% at 88% 22%, rgba(70, 90, 210, 0.22), transparent 70%),
        linear-gradient(180deg, #130e30 0%, #080616 100%);
}

/* ===== Ronda 79 (6/10/2026, Diego: "En lo que ofrecemos gratis, será signo estelar y 3 números claves de lo que es
   numerología: el de personalidad, el de alma y el del sendero de vida") =====
   Pantalla "Tus 3 números clave" de la historia (ver page-acceso-vip.php): igual que en el resultado de la portada, cada
   número en un círculo dorado y, al lado, qué número es (Cinzel), qué mide (cursiva, apagado), su clave (Garamond grande,
   crema) y su significado (Garamond, apagado). En pantallas bajas el significado se esconde para que todo entre sin
   scroll (en la historia, deslizar el dedo pasa de pantalla). La letra nunca baja de 16 px, aunque el navegador tenga la
   letra en "pequeña" (igual que la portada desde la Ronda 74). */
html:has(.eq-historia) { font-size: max(100%, 16px); }
.eq-historia-numeros { width: 100%; max-width: 30rem; margin: 0 auto; display: flex; flex-direction: column; text-align: left; }
.eq-historia-numero { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; }
.eq-historia-numero + .eq-historia-numero { border-top: 1px solid rgba(214, 170, 76, 0.18); }
.eq-historia-numero-n {
    width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--eq-oro-linea);
    background: radial-gradient(circle at 50% 30%, rgba(214, 170, 76, 0.18), rgba(214, 170, 76, 0.04) 70%);
    display: flex; align-items: center; justify-content: center;
}
.eq-historia-numero-n > span { font-family: var(--eq-titulo); font-weight: 700; font-size: 1.9rem; line-height: 1; background: linear-gradient(180deg, #fff3cc 0%, #f0cf78 45%, #c9a24e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eq-historia-numero-cuerpo { display: flex; flex-direction: column; min-width: 0; }
.eq-historia-numero-etiqueta { font-family: var(--eq-titulo); font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; color: var(--eq-oro-claro); line-height: 1.3; font-weight: 600; }
.eq-historia-numero-que { font-family: var(--eq-lectura); font-style: italic; font-size: 1.05rem; line-height: 1.35; color: var(--eq-luz-dim); margin-top: 1px; }
.eq-historia-numero-clave { font-family: var(--eq-lectura); font-weight: 500; font-size: 1.3rem; line-height: 1.3; color: var(--eq-luz); margin-top: 8px; }
.eq-historia-numero-desc { font-family: var(--eq-lectura); font-size: 1.08rem; line-height: 1.5; color: var(--eq-luz-dim); margin-top: 3px; }
@media (max-width: 420px) {
    .eq-historia-numero { grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 12px; }
    .eq-historia-numero-n { width: 3.4rem; height: 3.4rem; }
    .eq-historia-numero-n > span { font-size: 1.65rem; }
}
@media (max-height: 760px) {
    .eq-historia-panel .eq-historia-item-label:has(+ .eq-historia-numeros) { margin-bottom: 8px; }
    .eq-historia-numero { padding: 11px 0; }
    .eq-historia-numero-clave { margin-top: 5px; }
    .eq-historia-numeros + .eq-historia-flecha { margin-top: 12px; }
}
/* (Ronda 80: ya no se esconde el significado en pantallas bajas; si no entra, la pantalla se recorre con el dedo, ver abajo) */

/* ===== Ronda 80 (6/10/2026, Diego: "en el 3, la descripción de cómo es cada tipo de dato numerológico y su significado es
   muy pobre (tampoco te excedas)") =====
   Cada número ahora dice de dónde sale y qué significa el tuyo en ese lugar, así que en un celular bajo la pantalla de los
   3 números puede no entrar entera. En vez de esconder texto, esa pantalla se recorre: el contenido arranca arriba (los
   márgenes automáticos lo centran cuando entra, y cuando no entra no lo cortan por arriba como "justify-content: center"),
   y el <script> de la historia (page-acceso-vip.php) scrollea adentro antes de pasar de pantalla. Mientras quede texto
   abajo, un degradé al pie lo avisa (.eq-historia-panel--mas, lo pone ese mismo script). */
.eq-historia-panel { justify-content: flex-start; }
.eq-historia-panel > :first-child { margin-top: auto; }
.eq-historia-panel > :last-child { margin-bottom: auto; }
.eq-historia-panel--mas {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
}
.eq-historia-numero-que { margin-top: 2px; }
.eq-historia-numero-clave { margin-top: 10px; }
.eq-historia-numero-desc { margin-top: 4px; }
@media (max-height: 760px) {
    .eq-historia-numero-clave { margin-top: 7px; }
}
/* En la compu (pantallas anchas) los 3 números van uno al lado del otro, como tres columnas, y entran sin recorrer. */
@media (min-width: 1000px) {
    .eq-historia-panel:has(.eq-historia-numeros) { max-width: 1100px; }
    .eq-historia-numeros { max-width: none; flex-direction: row; align-items: stretch; }
    .eq-historia-numero { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; row-gap: 14px; padding: 6px 26px; text-align: center; }
    .eq-historia-numero:first-child { padding-left: 0; }
    .eq-historia-numero:last-child { padding-right: 0; }
    .eq-historia-numero + .eq-historia-numero { border-top: 0; border-left: 1px solid rgba(214, 170, 76, 0.18); }
    .eq-historia-numero-cuerpo { align-items: center; }
    .eq-historia-numeros + .eq-historia-flecha { margin-top: 26px; }
}

/* ===== Ronda 83 (9/10/2026, pedido 4): "Creá tu contraseña" justo después de pagar (eq_entrada_tarjetaClave) =====
   Ventana centrada por debajo de la transición de bienvenida (que se va sola al cargar). Un solo campo. */
.eq-crear-clave-fondo { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 17, 0.78); }
.eq-crear-clave-fondo[hidden] { display: none; }
.eq-crear-clave { width: 100%; max-width: 420px; box-sizing: border-box; background: #F4EAD5; color: #1b2a44; border: 1px solid #9a7734; border-radius: 6px; padding: 28px 24px; text-align: center; box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.eq-crear-clave h2 { font-family: 'Cinzel', serif; font-size: 1.3rem; color: #7d5f22; margin: 0 0 10px; }
.eq-crear-clave p { font-size: 1.05rem; line-height: 1.5; margin: 0 0 16px; }
.eq-crear-clave label { display: block; text-align: left; font-size: 0.95rem; margin: 0 0 6px; }
.eq-crear-clave-fila { display: flex; gap: 8px; margin: 0 0 16px; }
.eq-crear-clave-fila input { flex: 1; min-width: 0; font-size: 16px; padding: 11px 12px; border: 1px solid rgba(27,42,68,0.3); border-radius: 3px; background: #fffaf0; color: #1b2a44; }
.eq-crear-clave-fila button { font-size: 0.95rem; padding: 0 12px; border: 1px solid rgba(27,42,68,0.3); border-radius: 3px; background: transparent; color: #1b2a44; cursor: pointer; }
.eq-crear-clave .btn-gold { width: 100%; margin: 0 0 10px; }
.eq-crear-clave-luego { background: none; border: 0; color: #7d5f22; text-decoration: underline; font-size: 1rem; cursor: pointer; padding: 6px; }
.eq-crear-clave-msg { color: #a33; margin: 10px 0 0; min-height: 1em; }
.eq-crear-clave-ok { font-size: 1.1rem; margin: 0; }

/* ===== Ronda 84 (9/10/2026, pedido 5): abajo de todo en la cuenta gratis, chico y discreto (no compite con el botón) ===== */
/* Ronda 86 (pedido 8, punto 7: "espacio vacío grande arriba del cuadro «Tenés un regalo»"): la línea de la baja (Ronda 84)
   es el último elemento del panel pero va con position: absolute, así que su margin-bottom: auto (regla de arriba) no
   contaba y el contenido quedaba pegado abajo. Este hueco invisible al final del panel hace de contrapeso y lo vuelve a centrar. */
/* Ronda 119 (13/10/2026, pedido 48b, puntos 8 y 9): la línea legal ya no flota abajo (con la pantalla más alta tapaba las tarjetas): va al final del contenido; el panel se alinea
   arriba y se recorre hacia abajo (centrado y más alto que la pantalla, la parte de arriba no se podía alcanzar), y el dibujo de la rueda no se achica con el alto. */
.eq-historia-panel:has(> .eq-historia-legal) { justify-content: flex-start; }
.eq-historia-panel:has(> .eq-historia-legal)::after { content: none; }
.eq-historia-panel:has(.eq-cg-rueda) { justify-content: flex-start; }
.eq-historia .eq-cg-rueda { flex: none; }
.eq-historia-legal { position: static; margin: 30px 0 0 0; padding: 0 16px 6px 16px; text-align: center; font-size: 0.85rem; color: rgba(236, 220, 192, 0.6); }
.eq-historia-legal a, .eq-historia-legal button { color: rgba(236, 220, 192, 0.7); text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* =========================================================================
   Ronda 85 (9/10/2026, pedido 6 de docs/PEDIDOS-DESDE-REDES.md): regalo de una lectura. El bloque "Abrir mi regalo" de la
   última pantalla del resultado gratis y la página /portal/?regalo=1 (eq-regalo.php). Misma paleta y letras que la historia.
   ========================================================================= */
.eq-regalo-hist { width: 100%; max-width: 520px; margin: 0 auto 30px auto; padding: 20px 18px; border: 1px solid var(--eq-oro-linea); border-radius: 8px; background: rgba(201,162,78,0.08); text-align: center; box-sizing: border-box; }
.eq-regalo-hist-titulo { font-family: var(--eq-titulo); font-size: 0.85rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--eq-oro-claro); margin: 0 0 8px 0; font-weight: 600; }
.eq-regalo-hist-texto { font-family: var(--eq-lectura); font-size: 1.25rem; line-height: 1.5; color: var(--eq-luz); margin: 0 0 16px 0; }
.eq-regalo-hist .btn-gold { display: inline-block; }

/* Ronda 89 (9/10/2026, pedido 12, punto 2): la lectura de prueba se hace dentro de la última pantalla del resultado gratis.
   Esa pantalla queda más alta que el celular: se alinea arriba y se lee bajando (como los paneles largos de la Ronda 80), y
   la línea de abajo (baja de emails · borrar cuenta · cerrar sesión) va al final del contenido en vez de flotar encima. */
.eq-historia-panel:has(.eq-regalo--embebida) { justify-content: flex-start; max-width: 760px; }
.eq-historia-panel:has(.eq-regalo--embebida)::after { content: none; }
.eq-historia-panel:has(.eq-regalo--embebida) > .eq-historia-legal { position: static; margin-top: 30px; padding-bottom: 6px; }
.eq-regalo--embebida { width: 100%; padding: 0 0 10px; }
.eq-historia-legal a, .eq-historia-legal button { white-space: nowrap; } /* «Cerrar sesión» no se parte en dos renglones */

.eq-regalo { max-width: 860px; margin: 0 auto; padding: 40px 16px 70px; text-align: center; color: var(--eq-luz); box-sizing: border-box; }
.eq-regalo-eyebrow { font-family: var(--eq-titulo); font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; color: var(--eq-oro-claro); margin: 0 0 10px 0; }
.eq-regalo-titulo { font-family: var(--eq-titulo); font-size: clamp(1.6rem, 6vw, 2.5rem); color: var(--eq-luz); margin: 0 0 14px 0; font-weight: 700; line-height: 1.25; }
.eq-regalo-intro { font-family: var(--eq-lectura); font-size: 1.3rem; line-height: 1.55; color: var(--eq-luz-dim); max-width: 620px; margin: 0 auto 28px auto; }
.eq-regalo-cartas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 620px; margin: 0 auto 26px auto; }
.eq-regalo-carta { margin: 0; }
.eq-regalo-carta figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.eq-regalo-carta-pos { font-family: var(--eq-titulo); font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eq-oro-claro); }
.eq-regalo-carta-nombre { font-family: var(--eq-lectura); font-size: 1.1rem; color: var(--eq-luz); }
.eq-regalo-accion { margin: 0 0 10px 0; }
.eq-regalo-nota { font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-luz-dim); margin: 14px 0 0 0; }
.eq-regalo-estado { font-family: var(--eq-lectura); font-size: 1.2rem; font-style: italic; color: var(--eq-oro-claro); min-height: 1.5em; margin: 6px 0 18px 0; }
.eq-regalo-lectura { text-align: left; background: var(--eq-papel); color: var(--eq-tinta); border-radius: 8px; padding: 28px 24px; font-family: var(--eq-lectura); font-size: 1.2rem; line-height: 1.7; box-shadow: 0 10px 34px rgba(0,0,0,0.35); }
.eq-regalo-lectura h4 { font-family: var(--eq-titulo); font-size: 1.15rem; color: var(--eq-tinta); margin: 26px 0 10px 0; }
.eq-regalo-lectura h4:first-child { margin-top: 0; }
.eq-regalo-lectura p { margin: 0 0 14px 0; }
.eq-regalo-oferta { margin: 36px auto 0 auto; max-width: 560px; }
.eq-regalo-oferta-titulo { font-family: var(--eq-titulo); font-size: clamp(1.3rem, 5vw, 1.8rem); color: var(--eq-luz); margin: 0 0 10px 0; font-weight: 700; }
.eq-regalo-oferta-texto { font-family: var(--eq-lectura); font-size: 1.25rem; line-height: 1.55; color: var(--eq-luz-dim); margin: 0 0 22px 0; }
.eq-regalo [hidden] { display: none !important; }
@media (max-width: 520px) {
    .eq-regalo-cartas { gap: 8px; }
    .eq-regalo-carta-nombre { font-size: 1rem; }
    .eq-regalo-carta-pos { font-size: 0.68rem; letter-spacing: 1px; }
    .eq-regalo-lectura { padding: 22px 16px; }
    .eq-regalo-pestana summary { font-size: 1rem; }
}
/* Ronda 85 (actualización 9/10 10:52 h): la vista simple lleva UNA pregunta al Tarot y un enlace chico al portal. */
.eq-regalo-form { max-width: 560px; margin: 0 auto 28px auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.eq-regalo-form label { font-family: var(--eq-titulo); font-size: clamp(1.1rem, 4.5vw, 1.35rem); color: var(--eq-oro-claro); }
.eq-regalo-form textarea { width: 100%; box-sizing: border-box; font-family: var(--eq-lectura); font-size: 1.15rem; line-height: 1.5; color: var(--eq-luz); background: rgba(12,21,30,0.7); border: 1px solid var(--eq-oro-linea); border-radius: 6px; padding: 12px 14px; resize: vertical; }
.eq-regalo-form textarea:focus { outline: none; border-color: var(--eq-oro); }
.eq-regalo-form button[disabled] { opacity: .6; cursor: wait; }
.eq-regalo-tu-pregunta { font-family: var(--eq-lectura); font-style: italic; font-size: 1.25rem; color: var(--eq-oro-claro); margin: 0 auto 24px auto; max-width: 620px; }
.eq-regalo-portal { margin: 34px 0 0 0; }
.eq-regalo-portal a { font-family: var(--eq-lectura); font-size: 1rem; color: var(--eq-luz-dim); text-decoration: underline; }

/* Ronda 86 (pedido 8, puntos 1 y 3): las cartas del regalo se barajan y se dan vuelta de a una (como el Tarot de siempre:
   clase .vista con 300 ms + 350 ms por carta, la pone el script de eq_regalo_paginaHtml), y la lectura va por partes:
   panorama, una pestaña por carta (<details>, la primera abierta) y el cierre. */
.eq-regalo-carta-giro { position: relative; aspect-ratio: 2 / 3.4; perspective: 1000px; transform-style: preserve-3d; transition: transform .8s ease; }
.eq-regalo-carta.vista .eq-regalo-carta-giro { transform: rotateY(180deg); }
.eq-regalo-carta-cara { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--eq-oro-linea); background: #14233a; display: flex; align-items: center; justify-content: center; font-family: var(--eq-titulo); font-size: 1.6rem; color: var(--eq-oro-claro); box-shadow: 0 8px 24px rgba(0,0,0,0.35); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.eq-regalo-carta-frente { transform: rotateY(180deg); }
.eq-regalo-carta-cara img { width: 100%; height: 100%; object-fit: cover; display: block; font-size: 0.8rem; }
.eq-regalo-carta.vista .eq-regalo-carta-frente { box-shadow: 0 10px 30px rgba(201,162,78,0.25); }
/* Ronda 87 (9/10/2026, pedido 9, punto 3): barajado de verdad, sin el temblor de la Ronda 86 (a Diego no le gustó).
   El script de eq_regalo_paginaHtml: a) junta las 3 cartas en un mazo al centro (--dx/--dy), b) corta el mazo en dos y
   las mitades se intercalan 3 veces (.eq-regalo-pila), c) reparte las 3 boca abajo a su lugar y d) las da vuelta de a una. */
.eq-regalo-cartas { position: relative; }
.eq-regalo-carta-giro { --dx: 0px; --dy: 0px; transform: translate(var(--dx), var(--dy)); transition: transform .5s ease; }
.eq-regalo-carta.vista .eq-regalo-carta-giro { transform: translate(var(--dx), var(--dy)) rotateY(180deg); transition: transform .8s ease; }
.eq-regalo-carta figcaption { transition: opacity .4s ease; }
.eq-regalo-cartas.barajando figcaption { opacity: 0; }
.eq-regalo-cartas.mazo-listo .eq-regalo-carta-giro { visibility: hidden; }
.eq-regalo-pila { position: absolute; z-index: 5; pointer-events: none; }
.eq-regalo-pila-carta { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--eq-oro-linea); background: #14233a; display: flex; align-items: center; justify-content: center; font-family: var(--eq-titulo); font-size: 1.6rem; color: var(--eq-oro-claro); box-shadow: 0 4px 14px rgba(0,0,0,0.35); transition: transform .26s ease; }
.eq-regalo-pila-carta img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .eq-regalo-carta-giro, .eq-regalo-carta.vista .eq-regalo-carta-giro, .eq-regalo-pila-carta { transition: none; } }
.eq-regalo-panorama p { font-size: 1.25rem; }
.eq-regalo-pestana { border-top: 1px solid rgba(0,0,0,0.12); }
.eq-regalo-pestana:last-of-type { border-bottom: 1px solid rgba(0,0,0,0.12); margin-bottom: 22px; }
.eq-regalo-pestana summary { cursor: pointer; list-style: none; padding: 14px 30px 14px 0; position: relative; font-family: var(--eq-titulo); font-size: 1.08rem; font-weight: 700; color: var(--eq-tinta); }
.eq-regalo-pestana summary::-webkit-details-marker { display: none; }
.eq-regalo-pestana summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; }
.eq-regalo-pestana[open] summary::after { content: '−'; }
.eq-regalo-pestana-texto { padding: 0 0 6px 0; }
.eq-regalo-cierre h4 { margin-top: 0; }

/* Ronda 107 (12/10/2026, pedido 27): el botón chico del último panel de la historia («Entrar a mi cuenta y sumar mi hora»), debajo del botón principal. */
.eq-historia-btn-chico { display: inline-block; font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-oro-claro); text-decoration: none; border: 1px solid var(--eq-oro-linea); border-radius: 999px; padding: 9px 18px; }
.eq-historia-btn-chico:hover { background: rgba(201, 162, 78, 0.12); }

/* Ronda 107 (12/10/2026, pedido 36): CONSULTA POR TEMA. El bloque «Preguntá» del Inicio (cinco temas con ícono de línea + «Otra pregunta») y la pantalla de cada tema. Letras de 16 px como mínimo. */
.inicio-preguntar { margin-bottom: 34px; }
.inicio-preguntar-titulo { font-family: var(--eq-titulo); font-size: 1.1rem; letter-spacing: 3px; text-transform: uppercase; color: var(--eq-luz); margin: 0 0 6px 0; font-weight: 600; }
.inicio-preguntar > p { font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-luz-dim); margin: 0 0 18px 0; }
.preguntar-grid { margin-top: 4px; }
.herramienta svg.tema-icono { color: var(--eq-oro); display: block; margin-bottom: 14px; }
.herramienta.herramienta-gris svg.tema-icono { color: #b9b19a; }
.tema-cabecera { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tema-cabecera svg.tema-icono { color: var(--eq-oro); width: 36px; height: 36px; flex: 0 0 auto; }
.tema-cabecera h1 { margin: 0; }
.tema-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 6px 0; }
.tema-caja { border: 1px solid rgba(154, 119, 52, 0.45); background: rgba(255, 250, 240, 0.45); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tema-caja-etq { font-family: var(--eq-titulo); font-size: 1rem; letter-spacing: 1px; color: var(--eq-tinta); }
.tema-caja-val { font-family: var(--eq-lectura); font-size: 1.05rem; color: var(--eq-tinta); }
.tema-caja-gris { opacity: 0.6; border-style: dashed; background: rgba(185, 177, 154, 0.12); }
.tema-botones { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
.tema-sugerida { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; white-space: normal; }
.tema-sugerida-uso { font-family: var(--eq-lectura); font-size: 1rem; opacity: 0.8; text-transform: none; letter-spacing: 0; }
.tema-tarjeta .eq-hoja-etiqueta svg.tema-icono { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
@media (max-width: 700px) { .tema-cabecera svg.tema-icono { width: 30px; height: 30px; } }

/* Ronda 107 (12/10/2026, pedido 39): botón «Escuchar esta lectura» (voz del aparato). Oculto hasta que el aparato tenga voz para el idioma (body.eq-audio-ok); no sale al imprimir/guardar en PDF. */
.audio-barra { display: none; margin: 0 0 14px; text-align: left; }
body.eq-audio-ok .audio-barra { display: block; }
.audio-barra .audio-boton { width: auto; display: inline-flex; align-items: center; gap: 8px; }
.audio-barra .audio-voz { margin: 6px 0 0; font-size: 0.82rem; opacity: 0.8; }
.audio-barra .audio-estado { margin: 4px 0 0; font-size: 0.85rem; display: none; }
@media print { .audio-barra { display: none !important; } }

/* Ronda 112 (13/10/2026, pedido 42, punto 10): interruptor «Mensual / Anual» arriba de las tarjetas de planes de la cuenta. */
.cuenta-ciclo { display: flex; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto 18px auto; padding: 4px; border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 40px; }
.cuenta-ciclo-btn { border: 0; background: none; color: inherit; font-size: 0.95rem; padding: 8px 16px; border-radius: 40px; cursor: pointer; }
.cuenta-ciclo-btn.activo { background: #D4AF37; color: #140f30; font-weight: 600; }

/* Ronda 142 (24/10/2026, Diego: «que la experiencia de los resultados gratuitos también sea así», como el formulario de a una pregunta
   de la portada): arriba «← Atrás», «Paso N de M» y la barrita; al pie de cada pantalla «Siguiente»; la pantalla nueva entra
   deslizándose. Va con «.eq-historia» delante porque eq-rediseno49.css se carga después y si no la pisaría. */
.eq-historia .eq-historia-pasos { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 14px; padding: 12px 18px 12px 18px; font-style: normal; text-transform: none; letter-spacing: 0; text-align: left; }
.eq-historia .eq-historia-atras { grid-row: 1; grid-column: 1; min-height: 40px; padding: 6px 4px; margin: -6px 0 -6px -4px; border: 0; background: none; color: var(--a-oro-claro, #ecd089); font: inherit; font-size: 1.05rem; cursor: pointer; }
.eq-historia .eq-historia-atras[hidden] { display: none; }
.eq-historia .eq-historia-n { grid-row: 1; grid-column: 2; justify-self: end; color: var(--a-luz-2, rgba(245, 236, 218, 0.75)); font-size: 1.05rem; }
.eq-historia .eq-historia-barra { grid-row: 2; grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.eq-historia .eq-historia-barra span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--a-oro, #d6aa4c), var(--a-oro-claro, #ecd089)); transition: width 0.35s ease; }
.eq-historia .eq-historia-siguiente { align-self: flex-start; margin: 26px 0 0 0; min-height: 50px; padding: 0 30px; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--a-oro-claro, #ecd089), var(--a-oro, #d6aa4c)); color: #1a1206; font-family: var(--a-texto, inherit); font-weight: 600; font-size: 1.15rem; cursor: pointer; flex: none; }
.eq-historia .eq-historia-siguiente:focus-visible, .eq-historia .eq-historia-atras:focus-visible { outline: 2px solid var(--a-oro-claro, #ecd089); outline-offset: 3px; }
/* sin los puntitos de la derecha, las pantallas ya no necesitan el margen extra de ese lado */
.eq-historia .eq-historia-dots { display: none; }
@media (max-width: 640px) { .eq-historia .eq-historia-panel { padding-right: 18px; } }
/* la pantalla que entra se desliza (desde la derecha al avanzar, desde la izquierda al volver) */
.eq-historia .eq-historia-panel { transform: translateX(32px); transition: opacity 0.22s linear, transform 0.35s ease; }
.eq-historia.eq-historia--atras .eq-historia-panel { transform: translateX(-32px); }
.eq-historia .eq-historia-panel.activo { transform: none; transition: opacity 0.3s linear 0.08s, transform 0.4s ease 0.08s; }
@media (prefers-reduced-motion: reduce) { .eq-historia .eq-historia-panel, .eq-historia .eq-historia-panel.activo { transform: none; transition: none; } .eq-historia .eq-historia-barra span { transition: none; } }
/* la última pantalla: la Carta destacada (como siempre) y las demás compactas, una por renglón */
.eq-historia .eq-op.eq-op-resto { border-top: 0; margin-top: 8px; }
.eq-historia .eq-op-fila.eq-op-compacta { padding-top: 14px; padding-bottom: 14px; row-gap: 2px; }
.eq-historia .eq-op-compacta .eq-op-para { font-size: 1.125rem; }
.eq-historia .eq-op-compacta .eq-op-nombre { font-size: 1.3rem; }
.eq-historia .eq-op-compacta .eq-op-precio { font-size: 1.125rem; }
.eq-historia .eq-op-compacta .eq-op-cobro { font-size: 1.05rem; color: var(--a-luz-2, rgba(245, 236, 218, 0.75)); }
@media (min-width: 640px) { .eq-historia .eq-op-compacta .eq-op-cobro { grid-column: 1; } .eq-historia .eq-op-compacta .eq-op-btn { grid-row: 1 / span 4; } }