/* ══════════════════════════════════════════════════════════════════
   ⚡ QUIROMANCIA SUPREMA — APEX LAYER v13.0
   Rendimiento · Accesibilidad · Refinamiento tipográfico
   Última capa cargada: correcciones finales y utilidades.
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   1 · RENDIMIENTO DE PINTADO
   ═══════════════════════════════════════════ */

/* Las secciones inactivas no se pintan ni se maquetan:
   recorte drástico del coste de layout en una app de 5 secciones. */
.section:not(.active) {
    content-visibility: hidden;
    contain-intrinsic-size: 1px 1200px;
}

/* Aislamiento de subárboles pesados: un cambio dentro no invalida el resto */
.cosmos-card,
.result-card,
.analysis-card,
.guide-step,
.about-card,
.history-drawer {
    contain: layout style;
}

/* Los canvas y capas de fondo no participan del layout */
#cosmicCanvas,
#nebulaCanvas,
.aurora-bg {
    contain: strict;
    will-change: opacity;
}

/* Imágenes: reserva de espacio y decodificación diferida → CLS ≈ 0 */
img {
    max-width: 100%;
    height: auto;
    content-visibility: auto;
}
.pixar-hero-figure img,
.cosmos-hero-banner img {
    aspect-ratio: attr(width) / attr(height);
    background: linear-gradient(135deg, rgba(76,29,149,0.22), rgba(212,175,55,0.10));
    border-radius: 20px;
}

/* Sugerencia de compositor solo en elementos realmente animados */
.gen-char, .gen-ring, .portal-ring, .aurora-blob {
    will-change: transform, opacity;
}

/* Scroll suave con anclaje correcto bajo la barra fija */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height, 70px) + 16px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Evita saltos de scroll cuando entra contenido nuevo arriba */
main, .section { overflow-anchor: auto; }

/* ═══════════════════════════════════════════
   2 · TIPOGRAFÍA DE PRECISIÓN
   ═══════════════════════════════════════════ */
body {
    font-optical-sizing: auto;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums lining-nums;
}
h1, h2, h3, h4 {
    text-wrap: balance;          /* títulos sin líneas huérfanas */
    hyphens: none;
}
p, li, .cosmos-card-sub, .section-subtitle {
    text-wrap: pretty;
    hyphens: auto;
}
/* Números y datos técnicos siempre monoespaciados y alineados */
.sky-body-alt, .codex-score-val, .mandala-chip, .sky-coords, .aura-tech {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ═══════════════════════════════════════════
   3 · BARRA DE PROGRESO DE LECTURA
   ═══════════════════════════════════════════ */
#readingProgress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    z-index: 9998;
    background: linear-gradient(90deg, #6d28d9, #d4af37 60%, #fbf0cd);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.65);
    transform-origin: left;
    pointer-events: none;
    transition: width 120ms linear, opacity 400ms ease;
}
@media print { #readingProgress { display: none; } }

/* ═══════════════════════════════════════════
   4 · ACCESIBILIDAD
   ═══════════════════════════════════════════ */

/* Solo para lectores de pantalla */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static !important;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip: auto; white-space: normal;
}

/* Enlace de salto visible al enfocarse */
.skip-link {
    position: fixed;
    top: -80px; left: 50%;
    translate: -50% 0;
    z-index: 100000;
    padding: 12px 26px;
    background: linear-gradient(135deg, #d4af37, #fbf0cd);
    color: #2a1055;
    font-weight: 700;
    border-radius: 0 0 14px 14px;
    text-decoration: none;
    box-shadow: 0 10px 30px -8px rgba(212,175,55,0.8);
    transition: top 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-link:focus,
.skip-link:focus-visible { top: 0; outline: none; }

/* Objetivos táctiles mínimos garantizados (WCAG 2.5.8) */
button, [role="tab"], .nav-link, .lang-option, a.btn-primary, .bnav-item {
    min-height: 44px;
}
.cosmos-tab, .guide-tab { min-height: 44px; }

/* Foco visible coherente y siempre por encima */
:focus-visible {
    outline: 3px solid var(--imp-gold-500, #d4af37);
    outline-offset: 3px;
    border-radius: 6px;
    position: relative;
    z-index: 5;
}
/* Nunca eliminar el foco por completo */
:focus:not(:focus-visible) { outline: none; }

/* Estado seleccionado de las pestañas para lectores de pantalla */
[role="tab"][aria-selected="true"] { font-weight: 700; }

/* Indicación explícita de elementos deshabilitados */
button:disabled, [aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: saturate(0.4);
}

/* Modo de alto contraste del sistema */
@media (prefers-contrast: more) {
    :root {
        --text: #ffffff;
        --text-muted: #e2d9ff;
        --border: rgba(212, 175, 55, 0.55);
    }
    [data-theme="light"] {
        --text: #14042c;
        --text-muted: #33206b;
    }
    .cosmos-card, .analysis-card, .about-card, .result-card {
        border-width: 2px;
    }
    .section-title, .portal-title {
        -webkit-text-fill-color: #f4dd9a;
        color: #f4dd9a;
    }
    [data-theme="light"] .section-title,
    [data-theme="light"] .portal-title {
        -webkit-text-fill-color: #5b3d02;
        color: #5b3d02;
    }
}

/* Forced colors (Windows High Contrast) */
@media (forced-colors: active) {
    .cosmos-card, .analysis-card, .result-card, .cosmos-tab {
        border: 1px solid CanvasText;
    }
    .section-title, .portal-title, .nav-title, .codex-archetype {
        -webkit-text-fill-color: CanvasText;
        color: CanvasText;
        background: none;
    }
    .btn-primary, .oracle-spread-btn { forced-color-adjust: none; }
    #genesis .gen-char { -webkit-text-fill-color: CanvasText; color: CanvasText; }
}

/* Movimiento reducido: apagado global de decoración animada */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .aurora-blob, #cosmicCanvas, #nebulaCanvas { opacity: 0.25 !important; }
}

/* ═══════════════════════════════════════════
   5 · SECCIÓN FAQ (contenido SEO nuevo)
   ═══════════════════════════════════════════ */
.faq-section {
    max-width: 900px;
    margin: 48px auto 0;
}
.faq-item {
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 18px;
    background: var(--imp-grad-velvet, rgba(24,8,48,0.7));
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}
.faq-item[open] {
    border-color: rgba(212, 175, 55, 0.48);
    box-shadow: 0 12px 34px -14px rgba(212, 175, 55, 0.35);
}
.faq-item summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    cursor: pointer;
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    margin-left: auto;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--imp-gold-500, #d4af37);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--imp-gold-300, #f4dd9a); }
.faq-item summary i { color: var(--imp-gold-500, #d4af37); }
.faq-answer {
    padding: 0 20px 20px 52px;
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 0.94rem;
    animation: faqOpen 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
    .faq-answer { padding-left: 20px; }
}

/* ═══════════════════════════════════════════
   6 · UTILIDADES FINALES
   ═══════════════════════════════════════════ */
[hidden] { display: none !important; }

/* Contenedor de anuncios para lectores de pantalla */
#a11yAnnouncer {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Estado offline */
.offline-banner {
    position: fixed;
    left: 50%;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    translate: -50% 0;
    z-index: 9997;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(76, 29, 149, 0.92);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: #f4dd9a;
    font-size: 0.82rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 34px -10px rgba(0,0,0,0.7);
    animation: offlineIn 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes offlineIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Impresión limpia */
@media print {
    .main-nav, .bottom-nav, .imperial-seal, .back-to-top,
    .aurora-bg, #cosmicCanvas, #nebulaCanvas, .gen-skip,
    .cosmos-tabs, .guide-tabs, .offline-banner { display: none !important; }
    .section { content-visibility: visible !important; display: block !important; }
    body { background: #fff !important; color: #000 !important; }
    a[href^="#"]::after { content: ''; }
}