/* Reset y base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    padding: 20px;
}

.navbar.hidden {
    transform: translateY(-120%);
    transition: transform 0.3s ease;
}

.card {
    /* margin: 0; */
    /* margin-left: 100px; */
    background: rgb(128, 128, 128, 0.3);
    color: white;
    /* border: 2px solid greenyellow; */
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    /* width: 120%; */
    height: 330px;
    /* transition: box-shadow 0.3s ease; */
    /* margin-left: 10px; */
}

/* /////////// */
.contenedor {
    position: absolute;
    width: 90vh;
    /* height: 90vh; */
}

/* Edificios */
.edificio {
    position: absolute;
}

.edificio img {
    width: 80vh;
    max-width: 90%;
    height: auto;
}

.e1 {
    width: 80%;
    top: 130px;
    right: 250px;
    animation: flotar 5s infinite ease-in-out;
}

.e2 {
    width: 70%;
    top: 280px;
    right: 10px;
    animation: flotar 8s infinite ease-in-out;
}

.e3 {
    width: 50%;
    top: 360px;
    right: 450px;
    animation: flotar 11s infinite ease-in-out;
}

.e4 {
    width: 50%;
    top: 250px;
    right: 650px;
    animation: flotar 13s infinite ease-in-out;
}

/* Líneas */
.linea {
    position: absolute;
    background: #c6ff00;
    box-shadow:
        0 0 6px #c6ff00,
        0 0 12px #c6ff00;
}
.linea.horizontal {
    height: 2px;
}
.linea.vertical {
    width: 2px;
}

/* Punto intermitente */
.punto {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c6ff00;
    right: -5px; /* para horizontal */
    bottom: -5px; /* para vertical */
    box-shadow:
        0 0 8px #c6ff00,
        0 0 16px #c6ff00;
    animation: blink 2s infinite ease-in-out;
}

.puntoBig {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c6ff00;
    right: -5px; /* para horizontal */
    bottom: -5px; /* para vertical */
    /* box-shadow: */
    /* 0 0 8px #c6ff00, */
    /* 0 0 16px #c6ff00; */
    animation: blinkBig 2s infinite ease-in-out;
}

.puntoBig2 {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c8ff00a2;
    right: -5px; /* para horizontal */
    bottom: -5px; /* para vertical */
    /* box-shadow: */
    /* 0 0 8px #c6ff00, */
    /* 0 0 16px #c6ff00; */
    animation: blinkBig2 2s infinite ease-in-out;
}

.puntoBig3 {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c8ff00a2;
    right: -5px; /* para horizontal */
    bottom: -5px; /* para vertical */
    box-shadow:
        0 0 1px #c6ff00,
        0 0 8px #c6ff00;
    animation: blinkBig3 2s infinite ease-in-out;
}

.puntoCentro {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    right: -5px; /* para horizontal */
    bottom: -5px; /* para vertical */
    box-shadow:
        0 0 8px gray,
        0 0 16px gray;
    animation: blinkCentro 2s infinite ease-in-out;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

@keyframes blinkBig {
    0%,
    100% {
        opacity: 1;
        transform: scale(2);
    }
    50% {
        opacity: 0.9;
        transform: scale(3.5);
    }
}

@keyframes blinkBig2 {
    0%,
    100% {
        opacity: 1;
        transform: scale(3.5);
    }
    50% {
        opacity: 0.9;
        transform: scale(5.5);
    }
}

@keyframes blinkBig3 {
    0%,
    100% {
        opacity: 1;
        transform: scale(5.5);
    }
    50% {
        opacity: 0.9;
        transform: scale(7);
    }
}

@keyframes blinkCentro {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes flotar {
    0%,
    100% {
        /* opacity: 1; */
        transform: translateY(0px);
    }
    50% {
        /* opacity: 0.5; */
        transform: translateY(2px);
    }
}

/* Solo afecta a <p class="maquina"> */
.maquina {
    /* font-size: 24px; */
    /* font-weight: bold; */
    color: black;
    /* display: inline-block; no obliga a una sola línea */
}

.maquina span {
    opacity: 0;
    /* display: inline-block; permite animar transform en letras */
    transform: translateY(20px);
    animation: aparecer 1.5s forwards; /* fade + subida + glow suave */
    will-change: transform, opacity;
    color: blue;
}

@keyframes aparecer {
    0% {
        opacity: 0;
        transform: translateY(20px);
        text-shadow: none;
    }
    50% {
        opacity: 0.1;
        transform: translateY(5px);
        text-shadow:
            0 0 8px blue,
            0 0 15px blue,
            0 0 25px blue; /* glow */
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
        text-shadow: 0 0 0 transparent; /* se desvanece suavemente */
    }
}

.fondo1 {
    background-image: url("../../Imagenes/cargando.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    padding: 64px;
}

input::placeholder,
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
    color: white !important;
}