/* =========================================================
   UFO FILES
   STYLE.CSS — DISEÑO PRINCIPAL
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #ffffff;

    background:
        linear-gradient(
            rgba(2, 8, 18, 0.70),
            rgba(2, 8, 18, 0.88)
        ),
        url("Imagenes/general/auroras-noche.jpg.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

button,
input {
    font: inherit;
}


/* =========================================================
   PANTALLA DE CARGA
========================================================= */
/* =========================================================
   ACCESO INICIAL UFO FILES
========================================================= */

const initialScreen =
    document.getElementById(
        "initial-password-screen"
    );

const initialInput =
    document.getElementById(
        "initial-password"
    );

const initialButton =
    document.getElementById(
        "initial-password-button"
    );

const initialMessage =
    document.getElementById(
        "initial-password-message"
    );

const initialFill =
    document.getElementById(
        "initial-progress-fill"
    );

const initialPercent =
    document.getElementById(
        "initial-progress-percent"
    );

const initialLabel =
    document.getElementById(
        "initial-progress-label"
    );

const initialStatus =
    document.getElementById(
        "initial-status"
    );


const INITIAL_PASSWORD =
    "minipecka";


/* Mantener bloqueado al abrir */
if (initialScreen) {

    initialScreen.style.display =
        "flex";

}


/* Verificar */
function verifyInitialPassword() {

    const value =
        initialInput.value.trim();


    if (
        value !==
        INITIAL_PASSWORD
    ) {

        initialMessage.textContent =
            "> ACCESS DENIED // INVALID PASSWORD";

        initialMessage.className =
            "initial-message error";

        initialStatus.textContent =
            "DENIED";

        initialFill.style.width =
            "0%";

        initialPercent.textContent =
            "0%";

        initialLabel.textContent =
            "AUTHORIZATION FAILED";

        initialInput.select();

        return;
    }


    /* Contraseña correcta */

    initialMessage.textContent =
        "> ACCESS GRANTED";

    initialMessage.className =
        "initial-message success";

    initialStatus.textContent =
        "VERIFYING";

    let progress = 0;


    const timer =
        setInterval(
            function () {

                progress += 10;

                if (
                    progress >
                    100
                ) {

                    progress =
                        100;

                }


                initialFill.style.width =
                    progress + "%";

                initialPercent.textContent =
                    progress + "%";


                if (
                    progress < 40
                ) {

                    initialLabel.textContent =
                        "VERIFYING PASSWORD";

                } else if (
                    progress < 70
                ) {

                    initialLabel.textContent =
                        "ACCESSING ARCHIVE";

                } else if (
                    progress < 100
                ) {

                    initialLabel.textContent =
                        "LOADING UFO FILES";

                } else {

                    initialLabel.textContent =
                        "ACCESS GRANTED";

                }


                if (
                    progress >=
                    100
                ) {

                    clearInterval(
                        timer
                    );


                    setTimeout(
                        function () {

                            initialScreen.style.opacity =
                                "0";

                            initialScreen.style.transition =
                                "opacity .5s ease";


                            setTimeout(
                                function () {

                                    initialScreen.style.display =
                                        "none";

                                    /*
                                     * AQUÍ empieza tu
                                     * pantalla de carga
                                     * normal de UFO FILES.
                                     */

                                },
                                500
                            );

                        },
                        400
                    );

                }

            },
            70
        );

}


if (initialButton) {

    initialButton.addEventListener(
        "click",
        verifyInitialPassword
    );

}


if (initialInput) {

    initialInput.addEventListener(
        "keydown",
        function (event) {

            if (
                event.key ===
                "Enter"
            ) {

                verifyInitialPassword();

            }

        }
    );

}
#loading-screen {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 102, 125, 0.22),
            rgba(1, 5, 12, 0.98) 68%
        ),
        url("Imagenes/general/auroras-noche.jpg.jpg");

    background-size: cover;

    background-position: center;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

#loading-screen.hide {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.loading-interface {
    position: relative;

    width: min(850px, 90%);

    min-height: 440px;

    padding: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(7, 18, 30, 0.96),
            rgba(2, 8, 17, 0.97)
        );

    border:
        1px solid rgba(67, 236, 213, 0.28);

    box-shadow:
        0 0 45px rgba(0, 235, 210, 0.08),
        inset 0 0 60px rgba(0, 90, 130, 0.06);

    overflow: hidden;
}


.loading-interface::before {
    content: "";

    position: absolute;

    inset: 18px;

    border:
        1px solid rgba(116, 200, 255, 0.08);

    pointer-events: none;
}


/* esquinas */

.loading-corner {
    position: absolute;

    width: 45px;
    height: 45px;

    z-index: 2;
}

.loading-corner.top-left {
    top: 12px;
    left: 12px;

    border-top: 2px solid #21eed0;
    border-left: 2px solid #21eed0;
}

.loading-corner.top-right {
    top: 12px;
    right: 12px;

    border-top: 2px solid #21eed0;
    border-right: 2px solid #21eed0;
}

.loading-corner.bottom-left {
    bottom: 12px;
    left: 12px;

    border-bottom: 2px solid #21eed0;
    border-left: 2px solid #21eed0;
}

.loading-corner.bottom-right {
    bottom: 12px;
    right: 12px;

    border-bottom: 2px solid #21eed0;
    border-right: 2px solid #21eed0;
}


.loading-system {
    width: min(620px, 100%);

    text-align: center;

    position: relative;

    z-index: 3;
}


.loading-brand {
    font-size: clamp(42px, 7vw, 80px);

    font-weight: 900;

    letter-spacing: 8px;

    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.12);
}


.loading-subtitle {
    margin-top: 9px;

    font-size: 11px;

    letter-spacing: 4px;

    color: #29eed2;
}


.loading-core {
    position: relative;

    width: 120px;
    height: 120px;

    margin: 30px auto;

    display: flex;

    align-items: center;

    justify-content: center;
}


.core-ring {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        2px solid rgba(34, 237, 210, 0.22);

    box-shadow:
        0 0 20px rgba(34, 237, 210, 0.08);

    animation:
        spin 5s linear infinite;
}


.core-ring::before {
    content: "";

    position: absolute;

    inset: 12px;

    border-radius: 50%;

    border:
        1px dashed rgba(109, 178, 255, 0.55);

    animation:
        spin-reverse 3s linear infinite;
}


.core-center {
    position: relative;

    z-index: 2;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 900;

    color: #061117;

    background:
        radial-gradient(
            circle,
            #70ffea,
            #1bd9bf
        );

    box-shadow:
        0 0 30px rgba(34, 237, 210, 0.38);
}


.loading-bar-box {
    width: 100%;

    padding: 5px;

    border:
        1px solid rgba(112, 188, 255, 0.25);

    background:
        rgba(0, 0, 0, 0.35);

    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.55);
}


.loading-bar {
    width: 100%;

    height: 19px;

    background:
        rgba(255, 255, 255, 0.035);

    overflow: hidden;
}


#loading-progress {
    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #15cdb6,
            #61f5dc,
            #718dff
        );

    box-shadow:
        0 0 18px rgba(44, 237, 208, 0.5);

    transition:
        width 0.08s linear;
}


.loading-data {
    margin-top: 11px;

    display: flex;

    justify-content: space-between;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 10px;

    letter-spacing: 2px;
}


#loading-percent {
    color: #35efcf;
}


.loading-terminal {
    margin-top: 28px;

    padding: 16px;

    text-align: left;

    background:
        rgba(0, 0, 0, 0.20);

    border:
        1px solid rgba(255, 255, 255, 0.05);

    font-family:
        Consolas,
        monospace;

    font-size: 10px;

    line-height: 1.8;

    color:
        rgba(173, 203, 221, 0.48);
}


.loading-terminal span {
    color: #35efcf;
}


/* =========================================================
   SITIO
========================================================= */

#site {
    opacity: 0;

    transition:
        opacity 0.8s ease;
}

#site.show {
    opacity: 1;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    position: sticky;

    top: 0;

    z-index: 2000;

    min-height: 82px;

    padding:
        12px 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background:
        rgba(4, 10, 18, 0.90);

    border-bottom:
        1px solid rgba(98, 185, 218, 0.10);

    backdrop-filter:
        blur(18px);
}


.brand {
    display: flex;

    align-items: center;

    gap: 13px;
}


.brand img {
    width: 50px;
    height: 50px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 10px rgba(36, 239, 209, 0.18)
        );
}


.brand h1 {
    font-size: 22px;

    letter-spacing: 3px;

    line-height: 1;

    color: #24edd0;
}


.brand p {
    margin-top: 5px;

    font-size: 9px;

    letter-spacing: 2px;

    color:
        rgba(255, 255, 255, 0.40);
}


/* =========================================================
   BUSCADOR
========================================================= */

.search-box {
    width: min(460px, 100%);

    display: flex;

    gap: 8px;
}


.search-box input {
    flex: 1;

    min-width: 0;

    padding:
        12px 15px;

    border:
        1px solid rgba(132, 197, 228, 0.18);

    border-radius: 8px;

    outline: none;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.055);

    transition:
        border-color 0.25s,
        box-shadow 0.25s;
}


.search-box input::placeholder {
    color:
        rgba(255, 255, 255, 0.38);
}


.search-box input:focus {
    border-color:
        rgba(43, 237, 209, 0.65);

    box-shadow:
        0 0 0 3px
        rgba(43, 237, 209, 0.07);
}


.search-box button {
    padding:
        0 17px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 900;

    color: #031216;

    background: #25ebca;

    transition:
        transform 0.25s,
        box-shadow 0.25s;
}


.search-box button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(37, 235, 202, 0.18);
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: sticky;

    top: 82px;

    z-index: 1900;

    min-height: 58px;

    padding:
        8px 5%;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    background:
        rgba(5, 13, 23, 0.94);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(16px);
}


.navbar a,
#theme-button {
    padding:
        9px 14px;

    border-radius: 7px;

    border: none;

    color:
        rgba(255, 255, 255, 0.78);

    background:
        transparent;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.25s,
        background 0.25s,
        transform 0.25s;
}


.navbar a:hover,
#theme-button:hover {
    color: #24edd0;

    background:
        rgba(36, 237, 208, 0.08);

    transform:
        translateY(-2px);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    min-height: 680px;

    padding:
        90px 8%;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(2, 7, 15, 0.96) 0%,
            rgba(2, 7, 15, 0.74) 45%,
            rgba(2, 7, 15, 0.30) 100%
        ),
        url("Imagenes/general/banner.png");

    background-size: cover;

    background-position: center;
}


.hero::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: 3%;
    top: 8%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(42, 240, 210, 0.10),
            transparent 68%
        );

    filter: blur(15px);

    pointer-events: none;
}


.hero-content {
    position: relative;

    z-index: 2;

    width: min(700px, 100%);

    animation:
        hero-in 1s ease both;
}


.eyebrow {
    color: #23edd0;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 4px;
}


.hero h2 {
    margin-top: 17px;

    font-size:
        clamp(48px, 7vw, 90px);

    line-height: 0.93;

    letter-spacing: -3px;

    font-weight: 900;
}


.hero-content p {
    max-width: 650px;

    margin-top: 27px;

    color:
        rgba(255, 255, 255, 0.70);

    font-size: 16px;

    line-height: 1.8;
}


.hero-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;
}


/* =========================================================
   BOTONES
========================================================= */

.btn-primary,
.btn-secondary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding:
        0 23px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 900;

    transition:
        transform 0.25s,
        box-shadow 0.25s,
        background 0.25s;
}


.btn-primary {
    color: #031417;

    background:
        #25ebca;

    box-shadow:
        0 10px 30px
        rgba(37, 235, 202, 0.12);
}


.btn-primary:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 17px 34px
        rgba(37, 235, 202, 0.22);
}


.btn-secondary {
    color: white;

    border:
        1px solid
        rgba(255, 255, 255, 0.55);

    background:
        rgba(255, 255, 255, 0.025);
}


.btn-secondary:hover {
    transform:
        translateY(-4px);

    background:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   SECCIONES
========================================================= */

.section {
    width: min(1200px, 90%);

    margin: auto;

    padding:
        105px 0;
}


.section-heading {
    max-width: 850px;

    margin:
        0 auto 45px;

    text-align: center;
}


.section-heading h2 {
    margin:
        12px 0;

    font-size:
        clamp(34px, 5vw, 55px);

    line-height: 1.05;
}


.section-heading p {
    color:
        rgba(255, 255, 255, 0.55);

    line-height: 1.75;
}


/* =========================================================
   INTRO
========================================================= */

.intro {
    max-width: 1000px;

    text-align: center;
}


.intro h2 {
    margin:
        12px 0 22px;

    font-size:
        clamp(35px, 5vw, 60px);

    line-height: 1.05;
}


.intro p {
    max-width: 800px;

    margin:
        10px auto;

    color:
        rgba(255, 255, 255, 0.61);

    line-height: 1.8;
}


/* =========================================================
   TARJETAS
========================================================= */

.cards-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 24px;
}


.case-card,
.universe-card,
.exploration-card,
.news-card {
    overflow: hidden;

    border-radius: 20px;

    border:
        1px solid
        rgba(143, 184, 216, 0.10);

    background:
        linear-gradient(
            145deg,
            rgba(40, 54, 69, 0.83),
            rgba(13, 22, 35, 0.92)
        );

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.25);

    transition:
        transform 0.35s,
        border-color 0.35s,
        box-shadow 0.35s;
}


.case-card:hover,
.universe-card:hover,
.exploration-card:hover,
.news-card:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(36, 237, 208, 0.45);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.42);
}


.case-card img,
.universe-card img,
.exploration-card img,
.news-card img {
    width: 100%;

    height: 270px;

    object-fit: cover;

    transition:
        transform 0.55s;
}


.case-card:hover img,
.universe-card:hover img,
.exploration-card:hover img,
.news-card:hover img {
    transform:
        scale(1.045);
}


.card-body {
    padding: 24px;
}


.card-body > span {
    color: #23edd0;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.card-body h3 {
    margin:
        11px 0;

    font-size: 28px;
}


.card-body p {
    color:
        rgba(255, 255, 255, 0.61);

    line-height: 1.75;

    font-size: 14px;
}


.card-body strong {
    display: inline-block;

    margin-top: 18px;

    font-size: 11px;

    letter-spacing: 1.4px;

    color: white;
}


.center-button {
    display: flex;

    justify-content: center;

    margin-top: 40px;
}


/* =========================================================
   UNIVERSO
========================================================= */

.universe-grid {
    grid-template-columns:
        repeat(4, 1fr);
}


.universe-card img {
    height: 220px;
}


.universe-card > div {
    padding: 20px;
}


.universe-card h3 {
    font-size: 23px;

    margin-bottom: 8px;
}


.universe-card p {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 13px;
}


/* =========================================================
   EXPLORACIÓN
========================================================= */

.feature {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 55px;

    align-items: center;
}


.feature-text h2 {
    margin:
        12px 0 20px;

    font-size:
        clamp(38px, 5vw, 62px);

    line-height: 1.02;
}


.feature-text p {
    max-width: 600px;

    color:
        rgba(255, 255, 255, 0.62);

    line-height: 1.8;

    margin-bottom: 25px;
}


.feature-image {
    position: relative;
}


.feature-image::after {
    content: "";

    position: absolute;

    inset: 10%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(31, 227, 201, 0.18),
            transparent 70%
        );

    filter: blur(30px);

    z-index: -1;
}


.feature-image img {
    width: 100%;

    min-height: 390px;

    object-fit: cover;

    border-radius: 20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.38);
}


/* =========================================================
   NOTICIAS
========================================================= */

.news-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 24px;
}


.news-card {
    display: grid;

    grid-template-columns:
        210px 1fr;
}


.news-card img {
    height: 100%;

    min-height: 240px;
}


.news-card > div {
    padding: 24px;
}


.news-card span {
    color: #23edd0;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.news-card h3 {
    margin:
        10px 0;

    font-size: 22px;
}


.news-card p {
    color:
        rgba(255, 255, 255, 0.58);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   GALERÍA
========================================================= */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;
}


.gallery-grid img {
    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius: 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    transition:
        transform 0.35s,
        filter 0.35s,
        border-color 0.35s;
}


.gallery-grid img:hover {
    transform:
        scale(1.025);

    filter:
        brightness(1.08);

    border-color:
        rgba(36, 237, 208, 0.42);
}


/* =========================================================
   MULTIMEDIA
========================================================= */

.multimedia {
    text-align: center;
}


.media-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;
}


.media-card {
    padding: 25px;

    border-radius: 20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.035);

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.20);
}


.media-card h3 {
    margin-bottom: 18px;

    font-size: 24px;
}


.media-card video,
.media-card img {
    width: 100%;

    border-radius: 13px;

    background: #000;
}


/* =========================================================
   ESTADÍSTICAS
========================================================= */

.stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    padding-top: 20px;
}


.stat {
    padding:
        35px 20px;

    text-align: center;

    border-radius: 17px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.035);

    transition:
        transform 0.3s,
        border-color 0.3s;
}


.stat:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(36, 237, 208, 0.32);
}


.stat strong {
    display: block;

    font-size: 45px;

    line-height: 1;

    color: #24edd0;
}


.stat span {
    display: block;

    margin-top: 10px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 10px;

    letter-spacing: 1.5px;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding:
        65px 6% 35px;

    text-align: center;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.07);

    background:
        rgba(2, 6, 12, 0.96);
}


footer h2 {
    color: #24edd0;

    letter-spacing: 4px;
}


footer p {
    margin-top: 10px;

    color:
        rgba(255, 255, 255, 0.40);

    font-size: 13px;
}


.footer-links {
    margin:
        25px auto;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 18px;
}


.footer-links a {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 13px;

    transition: color 0.25s;
}


.footer-links a:hover {
    color: #24edd0;
}


.copyright {
    margin-top: 25px;

    font-size: 11px;
}


/* =========================================================
   BARRA DE DESPLAZAMIENTO
========================================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #03060d;
}

::-webkit-scrollbar-thumb {
    background:
        #283949;

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        #355467;
}


/* =========================================================
   SELECCIÓN DE TEXTO
========================================================= */

::selection {
    background: #25ebca;

    color: #031216;
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes spin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes spin-reverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}


@keyframes pulse {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }

}


@keyframes hero-in {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    .header {
        flex-wrap: wrap;

        justify-content: center;
    }

    .search-box {
        width: min(650px, 100%);
    }

    .navbar {
        top: 140px;
    }

    .universe-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE — CELULAR
========================================================= */

@media (max-width: 750px) {

    .header {
        position: relative;

        padding:
            15px 5%;
    }

    .navbar {
        position: relative;

        top: 0;
    }

    .hero {
        min-height: 620px;

        padding:
            75px 7%;
    }

    .hero h2 {
        font-size: 51px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .universe-grid {
        grid-template-columns: 1fr;
    }

    .feature {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-card {
        grid-template-columns: 1fr;
    }

    .news-card img {
        min-height: 0;

        height: 230px;
    }

    .media-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   RESPONSIVE — CELULAR PEQUEÑO
========================================================= */

@media (max-width: 500px) {

    .brand h1 {
        font-size: 19px;
    }

    .brand p {
        font-size: 8px;
    }

    .search-box {
        width: 100%;
    }

    .search-box button {
        padding:
            0 14px;
    }

    .hero h2 {
        font-size: 41px;

        letter-spacing: -1px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .loading-interface {
        padding:
            35px 20px;
    }

    .loading-brand {
        letter-spacing: 4px;
    }

}
/* =========================================
   FONDOS UFO FILES
========================================= */

body {
    background-image:
        linear-gradient(
            rgba(2, 8, 18, 0.62),
            rgba(2, 8, 18, 0.82)
        ),
        url("Imagenes/general/auroras-noche.jpg.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    transition: background 0.6s ease;
}

/* MODO DÍA */
body:not(.dark-mode) {
    background-image:
        linear-gradient(
            rgba(220, 240, 255, 0.25),
            rgba(180, 220, 245, 0.40)
        ),
        url("Imagenes/general/paisaje-dia.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* =========================
   HERO
========================= */

.home-hero {
    min-height: 680px;
    padding: 90px 7%;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 50px;

    background:
        linear-gradient(
            90deg,
            rgba(2,8,18,.96),
            rgba(2,8,18,.72),
            rgba(2,8,18,.35)
        ),
        url("Imagenes/general/banner.png");

    background-size: cover;
    background-position: center;
}

.home-hero-text {
    max-width: 720px;
}

.home-eyebrow {
    display: inline-block;
    color: #25ebca;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 4px;
}

.home-hero h2 {
    margin-top: 15px;
    font-size: clamp(50px, 7vw, 88px);
    line-height: .92;
    letter-spacing: -3px;
}

.home-hero p {
    max-width: 650px;
    margin-top: 25px;
    color: rgba(255,255,255,.68);
    line-height: 1.8;
}

.home-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    transition: .25s;
}

.home-btn.primary {
    background: #25ebca;
    color: #031216;
}

.home-btn.secondary {
    color: white;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.03);
}

.home-btn:hover {
    transform: translateY(-4px);
}

.home-hero-visual {
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.home-hero-visual img {
    width: min(400px, 80%);
    position: relative;
    z-index: 2;
    animation: floating-ufo 4s ease-in-out infinite;
}

.hero-glow {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(37,235,202,.22),
        transparent 68%
    );
    filter: blur(20px);
}


/* =========================
   INTRO
========================= */

.home-intro {
    padding: 110px 10%;
    text-align: center;
    background: rgba(255,255,255,.018);
}

.home-intro h2 {
    max-width: 900px;
    margin: 14px auto 20px;
    font-size: clamp(36px,5vw,60px);
    line-height: 1.05;
}

.home-intro p {
    max-width: 800px;
    margin: 10px auto;
    color: rgba(255,255,255,.58);
    line-height: 1.8;
}


/* =========================
   SECCIONES
========================= */

.home-section {
    padding: 110px 7%;
}

.home-section.alt-section {
    background: rgba(255,255,255,.018);
}

.home-section-heading {
    width: min(850px, 100%);
    margin: 0 auto 45px;
    text-align: center;
}

.home-section-heading h2 {
    margin: 12px 0;
    font-size: clamp(36px,5vw,58px);
    line-height: 1.05;
}

.home-section-heading p {
    color: rgba(255,255,255,.58);
    line-height: 1.7;
}


/* =========================
   CASOS
========================= */

.home-case-grid {
    width: min(1200px, 100%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.home-case-card {
    display: block;
    overflow: hidden;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(35,48,62,.9),
            rgba(10,18,30,.96)
        );

    border: 1px solid rgba(255,255,255,.08);

    transition: .35s;

    box-shadow:
        0 18px 45px rgba(0,0,0,.25);
}

.home-case-card:hover {
    transform: translateY(-8px);
    border-color: rgba(37,235,202,.38);
}

.home-case-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: .45s;
}

.home-case-card:hover img {
    transform: scale(1.045);
}

.home-case-card > div {
    padding: 22px;
}

.home-case-card span {
    color: #25ebca;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.home-case-card h3 {
    margin: 10px 0;
    font-size: 25px;
}

.home-case-card p {
    color: rgba(255,255,255,.60);
    line-height: 1.7;
    min-height: 72px;
}

.home-case-card strong {
    display: inline-block;
    margin-top: 15px;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.home-center {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}


/* =========================
   UNIVERSO
========================= */

.home-universe-grid {
    width: min(1200px,100%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
}

.home-universe-card {
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    transition: .3s;
}

.home-universe-card:hover {
    transform: translateY(-7px);
    border-color: rgba(37,235,202,.35);
}

.home-universe-card img {
    width: 100%;
    height: 215px;
    object-fit: cover;
}

.home-universe-card div {
    padding: 20px;
}

.home-universe-card h3 {
    font-size: 23px;
}

.home-universe-card p {
    margin-top: 6px;
    color: rgba(255,255,255,.53);
}


/* =========================
   EXPLORACIÓN
========================= */

.home-feature {
    padding: 110px 8%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.018),
            rgba(0,255,220,.025)
        );
}

.home-feature-text {
    max-width: 620px;
}

.home-feature-text h2 {
    margin: 13px 0 20px;
    font-size: clamp(38px,5vw,62px);
    line-height: 1.02;
}

.home-feature-text p {
    color: rgba(255,255,255,.60);
    line-height: 1.8;
    margin-bottom: 25px;
}

.home-feature-image img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}


/* =========================
   NOTICIAS
========================= */

.home-news-grid {
    width: min(1150px,100%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
}

.home-news-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    overflow: hidden;

    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    transition: .3s;
}

.home-news-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37,235,202,.32);
}

.home-news-card img {
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
}

.home-news-card > div {
    padding: 22px;
}

.home-news-card span {
    color: #25ebca;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.home-news-card h3 {
    margin: 10px 0;
    font-size: 22px;
}

.home-news-card p {
    color: rgba(255,255,255,.57);
    line-height: 1.7;
}

.home-news-card strong {
    display: inline-block;
    margin-top: 15px;
    font-size: 11px;
}


/* =========================
   GALERÍA
========================= */

.home-gallery-grid {
    width: min(1200px,100%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.home-gallery-grid img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.06);
    transition: .3s;
}

.home-gallery-grid img:hover {
    transform: scale(1.025);
    filter: brightness(1.08);
}


/* =========================
   MULTIMEDIA
========================= */

.home-media-grid {
    width: min(1100px,100%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
}

.home-media-card {
    padding: 22px;

    border-radius: 18px;

    background: rgba(255,255,255,.035);

    border: 1px solid rgba(255,255,255,.08);
}

.home-media-card h3 {
    margin-bottom: 17px;
    font-size: 22px;
}

.home-media-card video,
.home-media-card img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    border-radius: 12px;
    background: black;
}


/* =========================
   ESTADÍSTICAS
========================= */

.home-stats {
    padding: 55px 7%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;

    background:
        rgba(0,0,0,.22);

    border-top:
        1px solid rgba(255,255,255,.05);

    border-bottom:
        1px solid rgba(255,255,255,.05);
}

.home-stats > div {
    padding: 28px 15px;
    text-align: center;
}

.home-stats strong {
    display: block;
    font-size: 42px;
    color: #25ebca;
}

.home-stats span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    letter-spacing: 1.5px;
}


/* =========================
   FOOTER
========================= */

.home-footer {
    padding: 65px 7% 35px;
    text-align: center;
    background: #03070d;
    border-top: 1px solid rgba(255,255,255,.07);
}

.home-footer h2 {
    color: #25ebca;
    letter-spacing: 4px;
}

.home-footer p {
    color: rgba(255,255,255,.42);
    margin-top: 8px;
}

.home-footer div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 25px 0;
}

.home-footer a {
    color: rgba(255,255,255,.55);
}

.home-footer a:hover {
    color: #25ebca;
}

.home-footer small {
    color: rgba(255,255,255,.30);
}


/* =========================
   ANIMACIÓN HERO
========================= */

@keyframes floating-ufo {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-13px);
    }
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1000px) {

    .home-case-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .home-universe-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .home-stats {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 750px) {

    .home-hero {
        grid-template-columns: 1fr;
        padding: 75px 7%;
    }

    .home-hero-visual {
        min-height: 280px;
    }

    .home-case-grid,
    .home-universe-grid,
    .home-news-grid,
    .home-media-grid,
    .home-feature {
        grid-template-columns: 1fr;
    }

    .home-gallery-grid {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 500px) {

    .home-case-grid,
    .home-universe-grid,
    .home-gallery-grid {
        grid-template-columns: 1fr;
    }

    .home-news-card {
        grid-template-columns: 1fr;
    }

    .home-news-card img {
        height: 220px;
        min-height: 0;
    }

    .home-stats {
        grid-template-columns: 1fr;
    }

    .home-buttons {
        flex-direction: column;
    }

    .home-btn {
        width: 100%;
    }

}/* =========================================================
   EXTRATERRESTRES — PORTADA
========================================================= */

.alien-home-section {
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(155, 90, 255, .05),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(40, 237, 208, .04),
            transparent 30%
        );
}

.home-alien-grid {
    width: min(1200px, 90%);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}

.home-alien-card {
    overflow: hidden;

    border-radius: 18px;

    border:
        1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(
            145deg,
            rgba(30,35,52,.92),
            rgba(8,12,22,.97)
        );

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.home-alien-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(155,110,255,.42);

    box-shadow:
        0 25px 55px rgba(0,0,0,.38);
}

.home-alien-card img {
    width: 100%;

    height: 220px;

    object-fit: cover;

    display: block;

    transition:
        transform .5s ease;
}

.home-alien-card:hover img {
    transform: scale(1.05);
}

.home-alien-card div {
    padding: 21px;
}

.home-alien-card span {
    color: #a17cff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.7px;
}

.home-alien-card h3 {
    margin: 10px 0;

    font-size: 22px;
}

.home-alien-card p {
    min-height: 58px;

    color:
        rgba(255,255,255,.55);

    font-size: 13px;

    line-height: 1.7;
}

.home-alien-card strong {
    display: inline-block;

    margin-top: 12px;

    font-size: 10px;

    letter-spacing: 1.4px;
}

@media (max-width: 950px) {

    .home-alien-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .home-alien-grid {
        grid-template-columns: 1fr;
    }

}


/* BUSCADOR ORIGINAL — SUGERENCIAS */

.search-box{
    position:relative;
}

.search-suggestions{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:52px;
    display:none;
    max-height:420px;
    overflow-y:auto;
    padding:8px;
    z-index:5000;
    border:1px solid rgba(36,237,208,.18);
    border-radius:12px;
    background:rgba(2,8,15,.97);
    box-shadow:0 25px 60px rgba(0,0,0,.55);
    backdrop-filter:blur(18px);
}

.search-suggestions.visible{
    display:block;
}

.search-suggestion{
    display:grid;
    grid-template-columns:40px 1fr 20px;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:9px;
    transition:background .2s ease,transform .2s ease;
}

.search-suggestion:hover{
    background:rgba(36,237,208,.07);
    transform:translateX(3px);
}

.search-suggestion-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:rgba(36,237,208,.06);
    font-size:18px;
}

.search-suggestion-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.search-suggestion-text strong{
    color:#fff;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.search-suggestion-text small{
    color:#28ead0;
    font:9px Consolas,monospace;
    letter-spacing:1px;
}

.search-suggestion-arrow{
    color:#28ead0;
    font-weight:900;
    text-align:right;
}

.search-suggestion-empty{
    padding:16px;
    color:rgba(255,255,255,.5);
    font:10px Consolas,monospace;
    letter-spacing:1px;
    text-align:center;
}

@media(max-width:700px){
    .search-suggestions{
        left:0;
        right:0;
    }
}


.search-suggestion-icon img{
    width:36px;
    height:36px;
    object-fit:cover;
    border-radius:7px;
    border:1px solid rgba(36,237,208,.18);
}


/* =========================================================
   UFO FILES — TOP SECRET STABLE
========================================================= */

html.ufo-top-secret-boot{
    background:#020604 !important;
}
html.ufo-top-secret-boot body{
    background:
        linear-gradient(rgba(0,12,4,.42),rgba(0,5,2,.58)),
        url("Imagenes/general/fondo-top-secret.jpg")
        center/cover fixed no-repeat !important;
}
body.ufo-hacked{
    background:
        linear-gradient(rgba(0,12,4,.42),rgba(0,5,2,.58)),
        url("Imagenes/general/fondo-top-secret.jpg")
        center/cover fixed no-repeat !important;
    color:#effff1;
}
body.ufo-hacked #site{
    background:transparent !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
}
body.ufo-hacked main{background:transparent !important}
body.ufo-hacked .header,
body.ufo-hacked .navbar{
    background:rgba(0,8,4,.68) !important;
    border-color:rgba(117,255,136,.16) !important;
}
body.ufo-hacked .home-section,
body.ufo-hacked .intro,
body.ufo-hacked .section{
    background:rgba(0,8,4,.24) !important;
}
body.ufo-hacked .brand h1,
body.ufo-hacked .home-eyebrow,
body.ufo-hacked .eyebrow,
body.ufo-hacked .section-heading span{color:#74ff88 !important}
body.ufo-hacked .search-box input{
    background:rgba(0,10,4,.46) !important;
    border-color:rgba(116,255,136,.30) !important;
}
body.ufo-hacked .search-box button,
body.ufo-hacked .btn-primary,
body.ufo-hacked .home-btn.primary{
    background:#74ff88 !important;
    color:#031108 !important;
}

#ufo-secret-button{
    min-height:38px;
    padding:0 14px;
    border:1px solid rgba(117,255,136,.45);
    border-radius:8px;
    background:rgba(117,255,136,.05);
    color:#75ff84;
    font:900 10px Consolas,monospace;
    letter-spacing:1px;
    cursor:pointer;
}
#ufo-secret-button:hover{
    background:#75ff84;
    color:#031108;
}

#ufo-hack-loader{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(rgba(0,8,2,.54),rgba(0,3,1,.87)),
        url("Imagenes/general/fondo-hacking.gif")
        center/cover no-repeat;
}
#ufo-hack-loader.show{display:flex}
.hack-loader-box{
    width:min(1040px,92vw);
    padding:16px;
    border:1px solid rgba(117,255,136,.30);
    background:rgba(0,10,4,.94);
    box-shadow:0 35px 100px rgba(0,0,0,.82);
}
.hack-top,.hack-bottom{
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:rgba(117,255,136,.65);
    font:900 9px Consolas,monospace;
    letter-spacing:2px;
    padding:8px 4px;
}
.hack-content{
    padding:36px;
    border:1px solid rgba(117,255,136,.13);
    background:
        radial-gradient(circle at 50% 25%,rgba(117,255,136,.06),transparent 45%),
        #010503;
}
.hack-logo{
    color:#78ff8a;
    font:900 clamp(42px,7vw,84px) Consolas,monospace;
    letter-spacing:-3px;
    text-shadow:0 0 14px rgba(117,255,136,.28),2px 0 rgba(255,0,0,.12),-2px 0 rgba(0,255,255,.10);
    animation:tsGlitch 1.1s infinite;
}
.hack-subtitle{margin-top:5px;color:rgba(117,255,136,.58);font:900 10px Consolas,monospace;letter-spacing:3px}
.hack-alert{width:max-content;margin-top:20px;padding:7px 11px;border:1px solid rgba(255,90,90,.28);color:#ff7d7d;font:900 9px Consolas,monospace}
.hack-terminal{min-height:150px;margin-top:26px;white-space:pre-line;color:#78ff8a;font:12px/1.8 Consolas,monospace}
.hack-bar{height:18px;padding:3px;border:1px solid rgba(117,255,136,.25);background:#010503}
#hack-progress-bar{width:0;height:100%;background:linear-gradient(90deg,#1d9b45,#74ff88,#c0ffcb);transition:width .08s linear}
.hack-percent-row{display:flex;justify-content:space-between;margin-top:7px;color:rgba(117,255,136,.54);font:9px Consolas,monospace}
#hack-percent{color:#74ff88}
.hack-status{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:25px}
.hack-status>div{padding:15px 8px;background:#010703;text-align:center}
.hack-status span{display:block;color:rgba(117,255,136,.38);font:8px Consolas,monospace}
.hack-status b{display:block;margin-top:6px;color:#74ff88;font:900 10px Consolas,monospace}
body.ufo-hacked::after{
    content:"TOP SECRET // SECURE CHANNEL";
    position:fixed;left:50%;bottom:12px;transform:translateX(-50%);
    z-index:99990;padding:6px 10px;background:rgba(0,8,3,.78);
    border:1px solid rgba(117,255,136,.22);color:#74ff88;
    font:900 8px Consolas,monospace;letter-spacing:2px;pointer-events:none;
}
@keyframes tsGlitch{0%,100%{transform:translateX(0)}49%{transform:translateX(-2px)}51%{transform:translateX(2px)}}
@media(max-width:700px){.hack-content{padding:24px 16px}.hack-status{grid-template-columns:repeat(2,1fr)}.hack-top,.hack-bottom{flex-direction:column}}


/* =========================================================
   TOP SECRET — FONDO GLOBAL FORZADO
========================================================= */

html.ufo-top-secret-boot,
html.ufo-top-secret-boot body {
    min-height: 100%;
    background: #010705 !important;
}

/* Fixed image layer */
body.ufo-hacked::before,
html.ufo-top-secret-boot body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            rgba(0, 10, 4, 0.25),
            rgba(0, 6, 2, 0.34)
        ),
        url("./Imagenes/general/fondo-top-secret.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Put the complete site above the background image */
body.ufo-hacked > *,
html.ufo-top-secret-boot body > * {
    position: relative;
    z-index: 1;
}

body.ufo-hacked #site,
html.ufo-top-secret-boot body #site {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove opaque page layers that were hiding the background */
body.ufo-hacked main,
body.ufo-hacked section,
body.ufo-hacked .home-section,
body.ufo-hacked .home-feature,
body.ufo-hacked .home-news,
body.ufo-hacked .gallery-section,
body.ufo-hacked .intro,
body.ufo-hacked .section {
    background: transparent !important;
    background-color: transparent !important;
}

/* Keep cards readable */
body.ufo-hacked .home-case-card,
body.ufo-hacked .home-universe-card,
body.ufo-hacked .home-alien-card,
body.ufo-hacked .news-card {
    background: rgba(3, 12, 7, 0.68) !important;
}

/* Header remains readable */
body.ufo-hacked .header,
body.ufo-hacked .navbar {
    background: rgba(0, 8, 4, 0.78) !important;
}
/* =========================================================
   FONDO TOP SECRET DETRÁS DE TODA LA PÁGINA
========================================================= */

#top-secret-bg {
    position: fixed;
    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            rgba(0, 8, 3, 0.30),
            rgba(0, 4, 2, 0.38)
        ),
        url("./Imagenes/general/fondo-top-secret.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.5s ease;
}

/* Aparece únicamente en Top Secret */
body.ufo-hacked #top-secret-bg {
    opacity: 1;
}

/* TODO el sitio queda por encima del fondo */
body.ufo-hacked #site {
    position: relative;
    z-index: 2;

    background: transparent !important;
}

/* Header y navegación */
body.ufo-hacked .header,
body.ufo-hacked .navbar {
    position: relative;
    z-index: 3;

    background:
        rgba(0, 8, 4, 0.72) !important;
}

/* Hero transparente */
body.ufo-hacked .hero {
    position: relative;
    z-index: 2;

    background: transparent !important;
    background-image: none !important;
}

/* Secciones transparentes */
body.ufo-hacked main,
body.ufo-hacked section,
body.ufo-hacked .intro,
body.ufo-hacked .home-section,
body.ufo-hacked .home-feature,
body.ufo-hacked .home-news,
body.ufo-hacked .gallery-section {
    background: transparent !important;
    background-image: none !important;
}

/* LAS TARJETAS sí mantienen un fondo,
   pero transparente para dejar ver el fondo */
body.ufo-hacked .home-case-card,
body.ufo-hacked .home-universe-card,
body.ufo-hacked .home-alien-card,
body.ufo-hacked .news-card {

    background:
        rgba(4, 15, 9, 0.66) !important;

    border-color:
        rgba(116, 255, 136, 0.18) !important;
}/* =========================================================
   TOP SECRET — HACKING PASSWORD SCREEN
========================================================= */

#secret-password-modal {
    position: fixed;
    inset: 0;
    z-index: 999998;

    display: none;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 90, 35, .14),
            rgba(0, 0, 0, .97) 72%
        );

    backdrop-filter: blur(6px);
}

#secret-password-modal.show {
    display: flex;
}


/* =========================================================
   PANTALLA
========================================================= */

.hack-access-screen {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(0, 8, 3, .72),
            rgba(0, 2, 1, .92)
        ),
        url("./Imagenes/general/contraseña.jpg")
        center / cover no-repeat;
}


/* Cuadrícula */

.hack-bg-grid {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(64, 255, 132, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(64, 255, 132, .045) 1px,
            transparent 1px
        );

    background-size:
        25px 25px;

    opacity: .35;

    pointer-events: none;
}


/* Código de fondo */

.hack-bg-code {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-around;

    padding: 30px;

    color:
        rgba(60, 255, 125, .10);

    font:
        10px/2
        Consolas,
        monospace;

    letter-spacing:
        1px;

    transform:
        rotate(-5deg)
        scale(1.25);

    user-select: none;
    pointer-events: none;
}


/* Líneas de escaneo */

.hack-access-screen::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 4px,
            rgba(100,255,140,.035) 5px,
            transparent 6px
        );

    pointer-events: none;

    animation:
        scanMove
        1s linear infinite;
}


/* =========================================================
   CAJA CENTRAL
========================================================= */

.password-dialog {
    position: relative;
    z-index: 5;

    width:
        min(620px, 92vw);

    border:
        1px solid
        rgba(55, 255, 125, .40);

    background:
        linear-gradient(
            145deg,
            rgba(1, 19, 9, .96),
            rgba(0, 7, 3, .98)
        );

    box-shadow:

        0 35px 120px
        rgba(0,0,0,.90),

        0 0 50px
        rgba(45,255,115,.08),

        inset 0 0 50px
        rgba(45,255,115,.025);

}


/* Bordes */

.password-dialog::before,
.password-dialog::after {
    content: "";

    position: absolute;

    width: 55px;
    height: 55px;

    pointer-events: none;
}

.password-dialog::before {
    left: -2px;
    top: -2px;

    border-top:
        2px solid
        #4dff83;

    border-left:
        2px solid
        #4dff83;
}

.password-dialog::after {
    right: -2px;
    bottom: -2px;

    border-right:
        2px solid
        #4dff83;

    border-bottom:
        2px solid
        #4dff83;
}


/* =========================================================
   HEADER
========================================================= */

.password-dialog-top,
.password-dialog-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        12px 15px;

    color:
        rgba(100,255,140,.55);

    font:
        900 8px
        Consolas,
        monospace;

    letter-spacing:
        1.5px;

    border-bottom:
        1px solid
        rgba(100,255,140,.10);
}

.password-dialog-bottom {
    border-top:
        1px solid
        rgba(100,255,140,.10);

    border-bottom:
        none;
}


/* =========================================================
   CONTENIDO
========================================================= */

.password-dialog-main {
    padding:
        35px;
}


/* Candado */

.lock-symbol {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 15px;

    border:
        1px solid
        rgba(75,255,130,.35);

    border-radius:
        50%;

    background:
        rgba(75,255,130,.05);

    color:
        #72ff91;

    font-size:
        32px;

    box-shadow:
        0 0 30px
        rgba(75,255,130,.08);

}


/* Título */

.password-title {

    text-align:
        center;

    color:
        #dcffe4;

    font:
        900 clamp(30px,6vw,52px)
        Consolas,
        monospace;

    letter-spacing:
        2px;

    text-shadow:
        0 0 15px
        rgba(80,255,130,.14);
}


.password-subtitle {

    margin-top:
        5px;

    text-align:
        center;

    color:
        #5cff87;

    font:
        900 9px
        Consolas,
        monospace;

    letter-spacing:
        3px;
}


.password-line {

    width:
        85%;

    height:
        1px;

    margin:
        22px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4dff83,
            transparent
        );
}


/* =========================================================
   LOG
========================================================= */

.password-log {

    padding:
        14px;

    border:
        1px solid
        rgba(75,255,130,.10);

    background:
        rgba(0,0,0,.26);

    color:
        rgba(90,255,140,.62);

    font:
        9px/1.9
        Consolas,
        monospace;

    text-align:
        left;
}


/* =========================================================
   INPUT
========================================================= */

.password-label {

    display:
        block;

    margin:
        22px 0 7px;

    color:
        rgba(220,255,230,.60);

    font:
        900 9px
        Consolas,
        monospace;

    letter-spacing:
        2px;
}


#secret-password {

    width:
        100%;

    height:
        48px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(75,255,130,.25);

    outline:
        none;

    background:
        rgba(0,0,0,.38);

    color:
        #ffffff;

    font:
        13px
        Consolas,
        monospace;

    letter-spacing:
        3px;
}

#secret-password:focus {

    border-color:
        #62ff8d;

    box-shadow:
        0 0 18px
        rgba(75,255,130,.08);
}


/* =========================================================
   BOTÓN
========================================================= */

#secret-password-button {

    width:
        100%;

    height:
        48px;

    margin-top:
        12px;

    border:
        1px solid
        #52ff83;

    background:
        linear-gradient(
            90deg,
            #1cff66,
            #66ff97
        );

    color:
        #031108;

    font:
        900 10px
        Consolas,
        monospace;

    letter-spacing:
        1.5px;

    cursor:
        pointer;

    transition:
        .25s ease;
}

#secret-password-button:hover {

    box-shadow:
        0 0 30px
        rgba(65,255,125,.20);

    transform:
        translateY(-2px);
}


/* =========================================================
   MENSAJE
========================================================= */

.password-message {

    min-height:
        20px;

    margin-top:
        10px;

    text-align:
        center;

    font:
        900 9px
        Consolas,
        monospace;

    letter-spacing:
        1px;
}

.password-message.error {
    color:
        #ff6b6b;
}

.password-message.success {
    color:
        #68ff8a;
}


/* =========================================================
   PROGRESO
========================================================= */

.password-progress {

    margin-top:
        20px;
}

.password-progress-bar {

    height:
        8px;

    padding:
        2px;

    border:
        1px solid
        rgba(75,255,130,.18);

    background:
        rgba(0,0,0,.35);
}

#password-progress-fill {

    width:
        0%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #13a94c,
            #5cff86,
            #c1ffd1
        );

    box-shadow:
        0 0 15px
        rgba(75,255,130,.25);

    transition:
        width .15s ease;
}

.password-progress-text {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        6px;

    color:
        rgba(100,255,140,.48);

    font:
        8px
        Consolas,
        monospace;
}


/* =========================================================
   CANCELAR
========================================================= */

.password-close {

    display:
        block;

    margin:
        13px auto 15px;

    border:
        none;

    background:
        transparent;

    color:
        rgba(220,255,230,.36);

    font:
        8px
        Consolas,
        monospace;

    cursor:
        pointer;
}

.password-close:hover {
    color:
        white;
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes scanMove {

    from {
        transform:
            translateY(-6px);
    }

    to {
        transform:
            translateY(6px);
    }

}

@media(max-width:650px) {

    .password-dialog-main {
        padding:
            25px 18px;
    }

    .password-dialog-top,
    .password-dialog-bottom {
        flex-direction:
            column;
    }

}/* =========================================================
   ACCESO INICIAL — UFO FILES
========================================================= */

#initial-password-screen {

    position: fixed;

    inset: 0;

    z-index: 9999999;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #000;

}

.initial-password-bg {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(0, 8, 3, 0.50),
            rgba(0, 2, 1, 0.82)
        ),
        url("./Imagenes/general/contraseña.jpg")
        center / cover
        no-repeat;

    filter: brightness(.75);

}

.initial-password-box {

    position: relative;

    z-index: 2;

    width: min(620px, 92vw);

    border:
        1px solid
        rgba(117,255,136,.35);

    background:
        linear-gradient(
            145deg,
            rgba(0,14,7,.95),
            rgba(0,4,2,.98)
        );

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.9),

        0 0 40px
        rgba(117,255,136,.08);

}

.initial-top,
.initial-bottom {

    display: flex;

    justify-content:
        space-between;

    gap: 12px;

    padding:
        12px 15px;

    color:
        rgba(117,255,136,.58);

    font:
        900 8px
        Consolas,
        monospace;

    letter-spacing:
        1.5px;

}

.initial-top {

    border-bottom:
        1px solid
        rgba(117,255,136,.10);

}

.initial-bottom {

    border-top:
        1px solid
        rgba(117,255,136,.10);

}

.initial-content {

    padding:
        38px;

}

.initial-lock {

    width: 70px;
    height: 70px;

    margin:
        0 auto 18px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(117,255,136,.32);

    border-radius:
        50%;

    background:
        rgba(117,255,136,.04);

    font-size:
        30px;

}

.initial-title {

    text-align:
        center;

    color:
        #effff2;

    font:
        900 clamp(34px,7vw,60px)
        Consolas,
        monospace;

    letter-spacing:
        2px;

}

.initial-subtitle {

    margin-top:
        6px;

    text-align:
        center;

    color:
        #75ff84;

    font:
        900 9px
        Consolas,
        monospace;

    letter-spacing:
        3px;

}

.initial-line {

    width:
        80%;

    height:
        1px;

    margin:
        22px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #75ff84,
            transparent
        );

}

.initial-log {

    padding:
        14px;

    margin-bottom:
        22px;

    border:
        1px solid
        rgba(117,255,136,.10);

    background:
        rgba(0,0,0,.28);

    color:
        rgba(117,255,136,.60);

    font:
        9px/1.9
        Consolas,
        monospace;

}

.initial-content label {

    display: block;

    margin-bottom:
        7px;

    color:
        rgba(238,255,240,.60);

    font:
        900 9px
        Consolas,
        monospace;

    letter-spacing:
        1.5px;

}

#initial-password {

    width:
        100%;

    height:
        48px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(117,255,136,.24);

    outline:
        none;

    background:
        rgba(0,0,0,.35);

    color:
        white;

    font:
        13px
        Consolas,
        monospace;

    letter-spacing:
        3px;

}

#initial-password:focus {

    border-color:
        #75ff84;

    box-shadow:
        0 0 18px
        rgba(117,255,136,.08);

}

#initial-password-button {

    width:
        100%;

    height:
        48px;

    margin-top:
        12px;

    border:
        none;

    background:
        #75ff84;

    color:
        #031108;

    font:
        900 10px
        Consolas,
        monospace;

    letter-spacing:
        1px;

    cursor:
        pointer;

    transition:
        .2s;

}

#initial-password-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 0 28px
        rgba(117,255,136,.20);

}

.initial-message {

    min-height:
        20px;

    margin-top:
        10px;

    text-align:
        center;

    font:
        900 9px
        Consolas,
        monospace;

}

.initial-message.error {
    color:
        #ff6d6d;
}

.initial-message.success {
    color:
        #75ff84;
}

.initial-progress {

    margin-top:
        20px;

}

.initial-progress-bar {

    height:
        8px;

    padding:
        2px;

    border:
        1px solid
        rgba(117,255,136,.16);

    background:
        rgba(0,0,0,.35);

}

#initial-progress-fill {

    width:
        0%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #129748,
            #75ff84,
            #c7ffd2
        );

    transition:
        width .1s linear;

}

.initial-progress-info {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        6px;

    color:
        rgba(117,255,136,.46);

    font:
        8px
        Consolas,
        monospace;

}

#initial-progress-percent {

    color:
        #75ff84;

}

@media(max-width:600px) {

    .initial-content {

        padding:
            25px 18px;

    }

    .initial-top,
    .initial-bottom {

        flex-direction:
            column;

    }

/* =========================================================
   UFO FILES — TARJETAS OSCURAS Y VISIBLES
   Pegar al FINAL de style.css
========================================================= */

/* =========================
   TARJETAS PRINCIPALES
========================= */

.home-case-card,
.home-universe-card,
.home-alien-card,
.news-card {
    position: relative;
    overflow: hidden;

    background: rgba(2, 5, 10, 0.96) !important;

    border: 1px solid rgba(70, 220, 205, 0.22) !important;

    border-radius: 18px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.58),
        inset 0 0 30px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(12px);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* =========================
   TARJETAS — MODO OSCURO
========================= */

body.dark-mode .home-case-card,
body.dark-mode .home-universe-card,
body.dark-mode .home-alien-card,
body.dark-mode .news-card {

    background: rgba(1, 3, 7, 0.97) !important;

    border-color: rgba(70, 220, 205, 0.20) !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.68),
        inset 0 0 28px rgba(0, 0, 0, 0.28);
}


/* =========================
   TARJETAS — MODO DÍA
========================= */

body:not(.dark-mode) .home-case-card,
body:not(.dark-mode) .home-universe-card,
body:not(.dark-mode) .home-alien-card,
body:not(.dark-mode) .news-card {

    background: rgba(2, 6, 12, 0.95) !important;

    border-color: rgba(40, 180, 175, 0.30) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.48),
        inset 0 0 25px rgba(0, 0, 0, 0.22);
}


/* =========================
   EFECTO HOVER
========================= */

.home-case-card:hover,
.home-universe-card:hover,
.home-alien-card:hover,
.news-card:hover {

    transform: translateY(-8px);

    border-color: rgba(37, 235, 202, 0.55) !important;

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.70),
        0 0 25px rgba(37, 235, 202, 0.08);
}


/* =========================
   IMÁGENES
========================= */

.home-case-card img,
.home-universe-card img,
.home-alien-card img,
.news-card img {

    width: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.4s ease;
}


/* Oscurecer ligeramente las imágenes */
.home-case-card img,
.home-universe-card img,
.home-alien-card img,
.news-card img {

    filter: brightness(0.82) contrast(1.08);
}


/* Al pasar el mouse */
.home-case-card:hover img,
.home-universe-card:hover img,
.home-alien-card:hover img,
.news-card:hover img {

    transform: scale(1.05);

    filter:
        brightness(0.90)
        contrast(1.08);
}


/* =========================
   TEXTO
========================= */

.home-case-card h3,
.home-universe-card h3,
.home-alien-card h3,
.news-card h3 {

    color: #ffffff !important;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.45);
}


.home-case-card p,
.home-universe-card p,
.home-alien-card p,
.news-card p {

    color: rgba(255, 255, 255, 0.68) !important;

    line-height: 1.7;
}


/* =========================
   ETIQUETAS
========================= */

.home-case-card span,
.home-universe-card span,
.home-alien-card span,
.news-card span {

    color: #35efd1;
}


/* =========================
   BOTONES / ENLACES
========================= */

.home-case-card strong,
.home-universe-card strong,
.home-alien-card strong,
.news-card strong {

    color: #ffffff;

    transition: color 0.25s ease;
}


.home-case-card:hover strong,
.home-universe-card:hover strong,
.home-alien-card:hover strong,
.news-card:hover strong {

    color: #35efd1;
}


/* =========================
   EXTRA — BORDE INTERIOR
========================= */

.home-case-card::after,
.home-universe-card::after,
.home-alien-card::after,
.news-card::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}


/* =========================
   ASEGURAR CONTRASTE EN DÍA
========================= */

body:not(.dark-mode) .home-case-card h3,
body:not(.dark-mode) .home-universe-card h3,
body:not(.dark-mode) .home-alien-card h3,
body:not(.dark-mode) .news-card h3 {

    color: #ffffff !important;
}


body:not(.dark-mode) .home-case-card p,
body:not(.dark-mode) .home-universe-card p,
body:not(.dark-mode) .home-alien-card p,
body:not(.dark-mode) .news-card p {

    color: rgba(255, 255, 255, 0.72) !important;
}