/* ============================================================
   THEME BASE — Archivos Desclasificados
   Apple-style + cosmic dark + 2000ms+ animations
   ============================================================ */

/* GLOBAL: el atributo HTML `hidden` debe ganarle a cualquier `display:flex/grid/block`.
   Sin esta regla, elementos como lightbox/loader/map quedaban visibles aunque
   tuvieran el atributo `hidden`, cubriendo la página con su backdrop. */
[hidden] { display: none !important; }

:root {
    /* Palette cosmic */
    --ad-bg-deep:     #050811;
    --ad-bg-base:     #0c1220;
    --ad-bg-surface:  #131a2d;
    --ad-bg-elevated: #1a2238;
    --ad-line:        rgba(255,255,255,0.08);
    --ad-line-strong: rgba(255,255,255,0.14);

    --ad-text:        #f5f5f7;
    --ad-text-muted:  #a1a8c0;
    --ad-text-dim:    #6c7290;

    --ad-accent:      #5ac8fa;
    --ad-accent-2:    #bf5af2;
    --ad-accent-3:    #ff9f0a;
    --ad-success:     #30d158;
    --ad-warning:     #ff9f0a;
    --ad-danger:      #ff453a;

    /* Grad signature */
    --ad-grad-primary:  linear-gradient(135deg, #5ac8fa 0%, #bf5af2 100%);
    --ad-grad-cosmic:   linear-gradient(135deg, #5ac8fa 0%, #bf5af2 50%, #ff9f0a 100%);
    --ad-grad-veil:     linear-gradient(180deg, rgba(5,8,17,0) 0%, rgba(5,8,17,0.9) 100%);

    /* Spacing (4px base) */
    --ad-space-1: 4px;
    --ad-space-2: 8px;
    --ad-space-3: 12px;
    --ad-space-4: 16px;
    --ad-space-5: 24px;
    --ad-space-6: 32px;
    --ad-space-7: 48px;
    --ad-space-8: 64px;
    --ad-space-9: 96px;

    /* Radius */
    --ad-r-sm: 8px;
    --ad-r-md: 14px;
    --ad-r-lg: 20px;
    --ad-r-xl: 28px;
    --ad-r-full: 999px;

    /* Easing premium */
    --ad-ease-out: cubic-bezier(.22, 1, .36, 1);
    --ad-ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }

body.ad-body {
    background: var(--ad-bg-deep);
    color: var(--ad-text);
    /* Stack: Inter para texto + fuentes emoji color para que las flags (🇨🇱 🇺🇸 etc)
       y otros emojis tengan glifos disponibles en desktop. Sin esto, Windows con Inter
       cargado mostraba letras ISO ("CL") o tofu boxes en lugar de banderas. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100dvh;
}

/* Force emoji rendering en clases que SIEMPRE contienen emoji (banderas, iconos
   decorativos). Bypaseamos cualquier herencia y mandamos directo a la fuente emoji.
   Sin esto, en Windows el "Segoe UI Emoji" muestra flags como letras ISO. Forzamos
   el orden para macOS/Android/Linux primero. */
.ad-country-featured-flag,
.ad-country-small-flag,
.ad-transcript-flag,
.ad-dlg-pill-flag,
.ad-s-coords-flag,
.ad-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Twemoji Mozilla", "EmojiOne Color", "Android Emoji",
                 "Symbola", sans-serif !important;
    font-variant-emoji: emoji;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 220ms var(--ad-ease-out); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
code, .ad-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }

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

/* ============================================================
   STARFIELD background fijo
   ============================================================ */
.ad-starfield {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--ad-bg-deep);
    overflow: hidden;
}
.ad-starfield svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
    .ad-neb {
        animation: ad-drift 32000ms ease-in-out infinite alternate;
        transform-origin: center;
    }
    .ad-neb-1 { animation-duration: 32000ms; }
    .ad-neb-2 { animation-duration: 38000ms; animation-delay: -8000ms; }
    .ad-neb-3 { animation-duration: 44000ms; animation-delay: -16000ms; }
    @keyframes ad-drift {
        from { transform: translate(0, 0) scale(1); }
        to   { transform: translate(60px, -40px) scale(1.08); }
    }

    .ad-stars circle {
        animation: ad-twinkle 2400ms ease-in-out infinite;
    }
    .ad-stars-2 circle { animation-duration: 4800ms; }
    @keyframes ad-twinkle {
        0%, 100% { opacity: 0.3; }
        50%      { opacity: 1; }
    }

    .ad-shoot {
        animation: ad-shoot 12000ms ease-out infinite;
    }
    @keyframes ad-shoot {
        0%, 92%   { opacity: 0; transform: translate(0, 0); }
        93%       { opacity: 1; }
        100%      { opacity: 0; transform: translate(1500px, 600px); }
    }
}

/* ============================================================
   HEADER glassmorphism
   ============================================================ */
.ad-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(5, 8, 17, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--ad-line);
}
.ad-header-inner {
    max-width: 1400px; margin: 0 auto; padding: 14px 32px;
    display: flex; align-items: center; gap: var(--ad-space-5);
}

.ad-logo {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
.ad-logo-mark {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ad-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.ad-logo-name {
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--ad-text);
}
.ad-logo-name-accent {
    background: var(--ad-grad-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    margin-left: 2px;
}
.ad-logo-tagline {
    font-size: 10.5px; color: var(--ad-text-muted); font-weight: 500;
    letter-spacing: 0.04em; margin-top: 2px;
}

.ad-nav { flex: 1; display: flex; justify-content: flex-end; }
.ad-nav-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 4px;
}
.ad-nav-list a {
    display: inline-block; padding: 8px 16px;
    font-size: 14px; font-weight: 500; color: var(--ad-text-muted);
    border-radius: var(--ad-r-full);
    transition: color 220ms var(--ad-ease-out), background 220ms var(--ad-ease-out);
}
.ad-nav-list a:hover { color: var(--ad-text); background: rgba(255,255,255,0.06); }
.ad-nav-list .current-menu-item a,
.ad-nav-list .current_page_item a { color: var(--ad-accent); }

.ad-header-search {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ad-text-muted);
    border: 1px solid var(--ad-line);
    transition: background 220ms var(--ad-ease-out), color 220ms var(--ad-ease-out);
}
.ad-header-search:hover { background: rgba(255,255,255,0.06); color: var(--ad-text); }

.ad-nav-toggle { display: none; }

/* ============================================================
   MAIN container
   ============================================================ */
.ad-main { min-height: 60vh; }

/* ============================================================
   HERO front-page
   ============================================================ */
.ad-hero {
    position: relative;
    max-width: 1400px; margin: 0 auto;
    padding: 120px 32px 100px;
    display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--ad-space-7);
    align-items: center; overflow: hidden;
}
.ad-hero-inner { position: relative; z-index: 2; }

.ad-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: var(--ad-r-full);
    background: rgba(90, 200, 250, 0.1);
    border: 1px solid rgba(90, 200, 250, 0.3);
    color: var(--ad-accent);
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.ad-hero-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ad-accent);
    box-shadow: 0 0 0 0 rgba(90, 200, 250, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
    .ad-hero-dot { animation: ad-pulse 2400ms ease-in-out infinite; }
    @keyframes ad-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(90, 200, 250, 0.6); }
        50%      { box-shadow: 0 0 0 8px rgba(90, 200, 250, 0); }
    }
}

.ad-hero-title {
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
}
.ad-hero-grad {
    background: var(--ad-grad-cosmic);
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
    .ad-hero-grad { animation: ad-grad-shift 12000ms ease-in-out infinite; }
    @keyframes ad-grad-shift {
        0%, 100% { background-position: 0% 50%; }
        50%      { background-position: 100% 50%; }
    }
}

.ad-hero-lead {
    font-size: 18px; line-height: 1.6; color: var(--ad-text-muted);
    max-width: 540px; margin: 0 0 40px;
}

.ad-hero-actions { display: flex; gap: 12px; margin-bottom: 60px; flex-wrap: wrap; }

.ad-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: var(--ad-r-md);
    font-size: 15px; font-weight: 600; letter-spacing: 0.005em;
    transition: transform 280ms var(--ad-ease-out), box-shadow 280ms var(--ad-ease-out), background 220ms ease;
    white-space: nowrap;
}
.ad-btn-primary {
    background: var(--ad-grad-primary);
    color: #fff;
    box-shadow: 0 6px 28px rgba(90, 200, 250, 0.32);
}
.ad-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(90, 200, 250, 0.48); }
.ad-btn-ghost {
    background: rgba(255,255,255,0.06);
    color: var(--ad-text);
    border: 1px solid var(--ad-line-strong);
}
.ad-btn-ghost:hover { background: rgba(255,255,255,0.1); }

.ad-hero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--ad-space-5);
    max-width: 480px;
    padding-top: 32px;
    border-top: 1px solid var(--ad-line);
}
.ad-stat-num {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 32px; font-weight: 700;
    background: var(--ad-grad-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.ad-stat-lab {
    display: block; font-size: 11.5px; font-weight: 500;
    color: var(--ad-text-muted); letter-spacing: 0.06em;
    text-transform: uppercase; margin-top: 8px;
}

/* Hero orbit decoration */
.ad-hero-orbit { position: relative; z-index: 1; opacity: 0.85; }
.ad-hero-orbit svg { max-width: 600px; margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
    .ad-hero-orbit svg { animation: ad-orbit-spin 80000ms linear infinite; transform-origin: center; }
    @keyframes ad-orbit-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    .ad-orbit-sat-1 { animation: ad-orbit-sat-1 14000ms linear infinite; transform-origin: 300px 300px; }
    .ad-orbit-sat-2 { animation: ad-orbit-sat-2 22000ms linear infinite; transform-origin: 300px 300px; }
    .ad-orbit-sat-3 { animation: ad-orbit-sat-3 30000ms linear infinite reverse; transform-origin: 300px 300px; }
    @keyframes ad-orbit-sat-1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes ad-orbit-sat-2 { from { transform: rotate(120deg); } to { transform: rotate(480deg); } }
    @keyframes ad-orbit-sat-3 { from { transform: rotate(240deg); } to { transform: rotate(-120deg); } }
}

/* ============================================================
   SECTIONS genéricas
   ============================================================ */
.ad-section {
    max-width: 1400px; margin: 0 auto;
    padding: 80px 32px;
    position: relative;
}
.ad-section-head { text-align: center; margin-bottom: 56px; }
.ad-section-head-left { text-align: left; margin-bottom: 28px; }

.ad-section-tag {
    display: inline-block;
    padding: 4px 12px; border-radius: var(--ad-r-full);
    background: rgba(255,159,10,0.1);
    border: 1px solid rgba(255,159,10,0.3);
    color: var(--ad-accent-3);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; margin-bottom: 16px;
}
.ad-section-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
    margin: 0 0 14px;
}
.ad-section-title-sm {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700; letter-spacing: -0.02em;
    margin: 0;
}
.ad-section-lead {
    font-size: 17px; color: var(--ad-text-muted);
    max-width: 600px; margin: 0 auto;
}
.ad-section-cta { text-align: center; margin-top: 48px; }

.ad-link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; font-weight: 600;
    color: var(--ad-accent);
    transition: gap 280ms var(--ad-ease-out);
}
.ad-link-arrow:hover { gap: 14px; }

.ad-empty {
    text-align: center; padding: 80px 24px;
    color: var(--ad-text-muted); font-size: 15px;
}

/* ============================================================
   REVEAL animations 2000ms+
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .ad-reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 2000ms var(--ad-ease-out), transform 2000ms var(--ad-ease-out);
    }
    .ad-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
.ad-footer {
    background: var(--ad-bg-base);
    border-top: 1px solid var(--ad-line);
    margin-top: 120px;
}
.ad-footer-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 64px 32px 32px;
}
.ad-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ad-space-7);
    margin-bottom: 48px;
}
.ad-footer-col-brand { grid-column: span 1; }
.ad-footer-title {
    font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ad-text-muted);
    margin: 0 0 16px;
}
.ad-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ad-footer-list a { font-size: 14px; color: var(--ad-text-muted); }
.ad-footer-list a:hover { color: var(--ad-text); }
.ad-footer-brand {
    display: block; font-weight: 700; font-size: 15px;
    background: var(--ad-grad-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.ad-footer-mission { font-size: 13px; color: var(--ad-text-muted); line-height: 1.55; margin: 0; }
.ad-footer-bottom {
    padding-top: 24px; border-top: 1px solid var(--ad-line);
    text-align: center;
}
.ad-footer-copy { font-size: 12px; color: var(--ad-text-dim); margin: 0; line-height: 1.6; }

/* ============================================================
   404
   ============================================================ */
.ad-404 {
    max-width: 720px; margin: 0 auto; padding: 100px 32px;
    text-align: center;
}
.ad-404-orbit { max-width: 320px; margin: 0 auto 32px; opacity: 0.8; }
@media (prefers-reduced-motion: no-preference) {
    .ad-404-sat { animation: ad-orbit-spin 8000ms linear infinite; transform-origin: 200px 200px; }
}
.ad-404-title {
    font-size: clamp(32px, 5vw, 44px); font-weight: 800;
    letter-spacing: -0.025em; margin: 0 0 12px;
}
.ad-404-lead { font-size: 16px; color: var(--ad-text-muted); margin: 0 0 32px; }
.ad-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PAGE genérica (about, contact, etc.)
   ============================================================ */
.ad-page-hero { padding: 80px 32px 48px; max-width: 1000px; margin: 0 auto; }
.ad-page-shell { max-width: 720px; margin: 0 auto; padding: 0 32px 80px; }
.ad-page-title {
    font-size: clamp(32px, 5vw, 52px); font-weight: 800;
    letter-spacing: -0.03em; margin: 0;
}

.ad-content-prose {
    font-size: 17px; line-height: 1.75; color: var(--ad-text);
}
.ad-content-prose h2 {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
    margin: 48px 0 16px;
}
.ad-content-prose h3 {
    font-size: 20px; font-weight: 650; margin: 32px 0 12px;
}
.ad-content-prose p { margin: 0 0 18px; color: var(--ad-text); }
.ad-content-prose a { color: var(--ad-accent); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.ad-content-prose a:hover { border-bottom-color: var(--ad-accent); }
.ad-content-prose ul, .ad-content-prose ol { margin: 0 0 18px; padding-left: 22px; }
.ad-content-prose blockquote {
    border-left: 3px solid var(--ad-accent); padding: 4px 0 4px 20px;
    margin: 24px 0; color: var(--ad-text-muted); font-style: italic;
}
.ad-content-prose code {
    background: var(--ad-bg-elevated); padding: 2px 6px; border-radius: 4px;
    font-size: 14px; color: var(--ad-accent-3);
}
.ad-content-prose img, .ad-content-prose figure {
    margin: 24px 0; border-radius: var(--ad-r-md); overflow: hidden;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ad-hero { grid-template-columns: 1fr; gap: var(--ad-space-6); padding: 80px 24px 60px; }
    .ad-hero-orbit { max-width: 360px; margin: 0 auto; }
    .ad-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ad-header-inner { padding: 12px 20px; gap: 12px; }
    .ad-logo-tagline { display: none; }
    .ad-nav-list { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
                   background: rgba(5,8,17,0.96); backdrop-filter: blur(20px);
                   padding: 16px; border-bottom: 1px solid var(--ad-line); }
    .ad-nav.is-open .ad-nav-list { display: flex; }
    .ad-nav-toggle {
        display: inline-flex; flex-direction: column; gap: 4px;
        width: 36px; height: 36px;
        align-items: center; justify-content: center;
        border-radius: 50%; border: 1px solid var(--ad-line);
    }
    .ad-nav-toggle span {
        display: block; width: 16px; height: 1.5px;
        background: var(--ad-text); border-radius: 1px;
        transition: transform 280ms var(--ad-ease-out);
    }

    .ad-hero { padding: 60px 20px 40px; }
    .ad-hero-stats { grid-template-columns: 1fr; gap: var(--ad-space-3); }

    .ad-section { padding: 60px 20px; }
    .ad-footer-cols { grid-template-columns: 1fr; gap: var(--ad-space-5); }
}