.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
}

.chiaroscuro-overlay {
    background: radial-gradient(circle at 15% 50%,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(236, 182, 19, 0.2) 10%,
            rgba(0, 0, 0, 0.8) 60%,
            #000 100%);
}

.solar-flare {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 1px;
    height: 1px;
    box-shadow:
        0 0 200px 150px rgba(255, 255, 255, 0.2),
        0 0 400px 300px rgba(236, 182, 19, 0.1);
    filter: blur(80px);
}

.glass-card {
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.laser-beam {
    position: absolute;
    bottom: 60px;
    left: 100px;
    width: 800px;
    height: 2px;
    background: linear-gradient(90deg, #ecb613 0%, rgba(236, 182, 19, 0) 100%);
    transform: rotate(-35deg);
    transform-origin: left center;
    filter: blur(1px) drop-shadow(0 0 8px #ecb613);
    z-index: 2;
}

.tech-bg {
    background: radial-gradient(circle at 0% 100%, #110c22 0%, #02020a 100%);
}

.flux-effect {
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
}

.terrestrial-gradient {
    background: linear-gradient(to bottom, #000000 0%, transparent 15%, transparent 85%, #110c22 100%);
}

.hero-banner {
    background: var(--dominant-color);
}

.hero-bg {
    background: var(--dominant-color);
}

/* Overlay azul oscuro */
.hero-overlay {
    background: radial-gradient(circle at 60% 40%,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(0, 0, 0, 0.35) 45%,
            rgba(0, 0, 0, 0.75) 100%);
}

/* Tu capa tipo .cm-eexZxN (blend overlay) */
.hero-blend {
    background: var(--dominant-color);
    mix-blend-mode: overlay;
    opacity: 0.15;
    pointer-events: none;
}

/* El “fade” lateral fuerte, que es lo que hace que se vea como la segunda */
.hero-sidefade {
    background: linear-gradient(90deg,
            var(--side-fade-color) 0%,
            rgba(0, 0, 0, 0.0) 55%,
            rgba(0, 0, 0, 0.55) 100%);
    opacity: 0.85;
    pointer-events: none;
}

/* Un fade arriba para que el header se lea limpio */
.hero-topfade {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.25) 25%,
            rgba(0, 0, 0, 0.0) 60%);
    pointer-events: none;
}


.hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-leftblock {
    background: linear-gradient(90deg,
            #213989 0%,
            rgba(33, 57, 137, 0.95) 38%,
            rgba(33, 57, 137, 0.35) 60%,
            rgba(33, 57, 137, 0.0) 72%);
}

.signal-line {
    display: inline-block !important;
    background: #f4f434 !important;
    color: #000 !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    padding: 6px 12px !important;
}

/* --- FIXES: mobile first --- */

/* 1) Hero image: cover on mobile, Patreon-style shift only on desktop */
.hero-img {
    object-fit: cover;
    object-position: 75% 35%;
    transform: none;
}

@media (min-width: 1024px) {
    .hero-img {
        object-fit: contain;
        transform: translate(19%, 0%);
    }
}



/* If you want it hidden only on small screens, do this instead:
@media (max-width: 767px) {
  .header-access-hidden { display: none; }
}
*/

/* Hide Access Portal without breaking layout */
.header-access-hidden {
  visibility: hidden;
}


.notif-tab {
  padding: 8px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all .2s ease;
}

.notif-tab:hover {
  color: #f4f434;
  border-color: rgba(244,244,52,0.3);
}

.notif-tab.active {
  color: #000;
  background: #f4f434;
  border-color: #f4f434;
}