/*====================================================
  GEO SUR BOLIVIA
  CONTACTOS - DISEÑO PREMIUM
====================================================*/


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

.contact-hero{

    position:relative;

    padding:150px 0 90px;

    overflow:hidden;

}


.contact-heading{

    max-width:850px;

}


.contact-heading h1{

    margin:25px 0;

    color:#ffffff;

    font-size:4.2rem;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-1.5px;

}


.contact-heading p{

    max-width:720px;

    color:#d6e0ea;

    font-size:1.12rem;

    line-height:1.9;

}


/*====================================================
  SECCIÓN PRINCIPAL
====================================================*/

.contact-section{

    position:relative;

    padding:40px 0 110px;

}


.contact-grid{

    display:grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap:70px;

    align-items:start;

}


/*====================================================
  INFORMACIÓN DE CONTACTO
====================================================*/

.contact-info{

    padding-top:20px;

}


.contact-info h2{

    margin:20px 0;

    color:#ffffff;

    font-size:2.6rem;

    line-height:1.15;

}


.contact-intro{

    max-width:520px;

    margin-bottom:35px;

    color:#bfcbd8;

    font-size:1rem;

    line-height:1.8;

}


/*====================================================
  TARJETAS DE CONTACTO
====================================================*/

.contact-card{

    display:flex;

    align-items:center;

    gap:20px;

    width:100%;

    margin-bottom:16px;

    padding:20px;

    text-decoration:none;

    color:#ffffff;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius:20px;

    backdrop-filter:blur(14px);

    transition:

        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.contact-card:hover{

    transform:translateY(-5px);

    border-color:rgba(18,216,255,.45);

    box-shadow:

        0 15px 40px rgba(0,0,0,.30),

        0 0 25px rgba(18,216,255,.08);

}


.contact-icon{

    flex-shrink:0;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(18,216,255,.10);

    border:1px solid rgba(18,216,255,.20);

    color:#12d8ff;

    font-size:1.4rem;

}


.contact-card span{

    display:block;

    margin-bottom:5px;

    color:#12d8ff;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:1px;

}


.contact-card strong{

    display:block;

    color:#ffffff;

    font-size:1rem;

}


.contact-card small{

    display:block;

    margin-top:5px;

    color:#91a0af;

    font-size:.82rem;

}


/*====================================================
  NOTA DE CONTACTO
====================================================*/

.contact-note{

    margin-top:28px;

    padding:24px;

    border-left:3px solid #12d8ff;

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

    border-radius:0 16px 16px 0;

}


.contact-note span{

    color:#12d8ff;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:1px;

}


.contact-note p{

    margin-top:10px;

    color:#aebbc8;

    font-size:.9rem;

    line-height:1.7;

}


/*====================================================
  FORMULARIO
====================================================*/

.contact-form-box{

    padding:42px;

    background:

        linear-gradient(
            145deg,
            rgba(12,25,43,.78),
            rgba(7,16,29,.62)
        );

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

    border-radius:30px;

    backdrop-filter:blur(20px);

    box-shadow:

        0 30px 80px rgba(0,0,0,.38),

        inset 0 0 0 1px rgba(255,255,255,.02);

}


.form-header{

    margin-bottom:30px;

}


.form-header h2{

    margin:15px 0 10px;

    color:#ffffff;

    font-size:2rem;

}


.form-header p{

    color:#9eacba;

    line-height:1.7;

}


/*====================================================
  CAMPOS
====================================================*/

.form-group{

    margin-bottom:20px;

}


.form-group label{

    display:block;

    margin-bottom:8px;

    color:#dce6ef;

    font-size:.86rem;

    font-weight:600;

}


.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    color:#ffffff;

    font-family:inherit;

    font-size:.95rem;

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

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

    border-radius:13px;

    outline:none;

    transition:

        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#718091;

}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

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

    border-color:#12d8ff;

    box-shadow:

        0 0 0 3px rgba(18,216,255,.08);

}


.form-group select{

    cursor:pointer;

}


.form-group textarea{

    resize:vertical;

    min-height:130px;

}


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

.contact-submit{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-top:10px;

    padding:16px 24px;

    border:0;

    border-radius:14px;

    background:#12d8ff;

    color:#07111f;

    font-family:inherit;

    font-size:.95rem;

    font-weight:800;

    cursor:pointer;

    transition:

        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.contact-submit span{

    font-size:1.2rem;

    transition:transform .3s ease;

}


.contact-submit:hover{

    transform:translateY(-3px);

    box-shadow:

        0 12px 30px rgba(18,216,255,.25);

}


.contact-submit:hover span{

    transform:translateX(5px);

}


/*====================================================
  CTA
====================================================*/

.contact-cta{

    padding:20px 0 100px;

}


.contact-cta .cta-box{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:45px 50px;

    background:

        linear-gradient(
            135deg,
            rgba(18,216,255,.08),
            rgba(255,255,255,.035)
        );

    border:1px solid rgba(18,216,255,.14);

    border-radius:26px;

}


.contact-cta h2{

    margin:12px 0 8px;

    color:#ffffff;

    font-size:2rem;

}


.contact-cta p{

    color:#9eacba;

}


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

@media (max-width:1000px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:50px;

    }


    .contact-heading h1{

        font-size:3.4rem;

    }


    .contact-cta .cta-box{

        flex-direction:column;

        align-items:flex-start;

    }

}


@media (max-width:650px){

    .contact-hero{

        padding:120px 0 60px;

    }


    .contact-heading h1{

        font-size:2.7rem;

    }


    .contact-heading p{

        font-size:1rem;

    }


    .contact-info h2{

        font-size:2.1rem;

    }


    .contact-form-box{

        padding:25px 20px;

        border-radius:22px;

    }


    .contact-card{

        padding:16px;

    }


    .contact-cta .cta-box{

        padding:30px 25px;

    }


    .contact-cta h2{

        font-size:1.6rem;

    }

}
/* =====================================================
   BANNER ANIMADO CONTACTO
===================================================== */

.contact-animated-banner {

    position: relative;

    width: 100%;
    height: 330px;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 174, 255, 0.16),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #03101b,
            #061c2c 50%,
            #020a12
        );

    isolation: isolate;

    --mouse-x: 0px;
    --mouse-y: 0px;
}


/* =========================================
   BRILLO CENTRAL
========================================= */

.contact-banner-glow {

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 174, 255, 0.20),
            transparent 65%
        );

    filter: blur(25px);

    transform:
        translate(
            var(--mouse-x),
            var(--mouse-y)
        );

    transition:
        transform 1s ease;

    z-index: -3;
}


/* =========================================
   ONDAS
========================================= */

.contact-wave {

    position: absolute;

    width: 150%;
    height: 180px;

    left: -25%;

    border-radius: 50%;

    border-top: 2px solid rgba(0, 200, 255, 0.55);

    filter:
        drop-shadow(
            0 0 12px rgba(0, 180, 255, 0.45)
        );

    opacity: 0.8;

    pointer-events: none;
}


.wave-one {

    top: 90px;

    transform:
        translateX(
            var(--mouse-x)
        )
        rotate(-5deg);

    animation:
        contactWaveOne 8s ease-in-out infinite alternate;
}


.wave-two {

    top: 130px;

    opacity: 0.45;

    transform:
        translateX(
            calc(var(--mouse-x) * -0.6)
        )
        rotate(4deg);

    animation:
        contactWaveTwo 10s ease-in-out infinite alternate;
}


.wave-three {

    top: 175px;

    opacity: 0.25;

    transform:
        translateX(
            calc(var(--mouse-x) * 0.3)
        )
        rotate(-3deg);

    animation:
        contactWaveThree 12s ease-in-out infinite alternate;
}


/* =========================================
   ANIMACIONES DE ONDAS
========================================= */

@keyframes contactWaveOne {

    0% {
        transform:
            translateX(-4%)
            rotate(-5deg)
            scaleY(1);
    }

    100% {
        transform:
            translateX(4%)
            rotate(-2deg)
            scaleY(1.25);
    }
}


@keyframes contactWaveTwo {

    0% {
        transform:
            translateX(3%)
            rotate(4deg)
            scaleY(1);
    }

    100% {
        transform:
            translateX(-5%)
            rotate(1deg)
            scaleY(1.3);
    }
}


@keyframes contactWaveThree {

    0% {
        transform:
            translateX(-2%)
            rotate(-3deg);
    }

    100% {
        transform:
            translateX(5%)
            rotate(2deg);
    }
}


/* =========================================
   PARTÍCULAS
========================================= */

.contact-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 2;
}


.contact-particle {

    position: absolute;

    display: block;

    border-radius: 50%;

    background: #7de8ff;

    box-shadow:
        0 0 6px rgba(0, 210, 255, 0.9),
        0 0 14px rgba(0, 150, 255, 0.7);

    opacity: 0;

    animation:
        contactParticleMove
        var(--duration)
        var(--delay)
        ease-in-out
        infinite;
}


@keyframes contactParticleMove {

    0% {

        opacity: 0;

        transform:
            translate(0, 0)
            scale(0.4);
    }

    20% {

        opacity: 0.8;
    }

    50% {

        opacity: 1;

        transform:
            translate(
                var(--move-x),
                var(--move-y)
            )
            scale(1);
    }

    80% {

        opacity: 0.5;
    }

    100% {

        opacity: 0;

        transform:
            translate(
                calc(var(--move-x) * 1.5),
                calc(var(--move-y) * 1.5)
            )
            scale(0.2);
    }
}


/* =========================================
   ANILLOS TECNOLÓGICOS
========================================= */

.contact-tech-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(0, 190, 255, 0.25);

    box-shadow:
        0 0 25px rgba(0, 160, 255, 0.08);

    pointer-events: none;

    z-index: 1;
}


.ring-one {

    width: 380px;
    height: 380px;

    right: -120px;
    top: -130px;

    animation:
        contactRingOne
        18s
        linear
        infinite;
}


.ring-two {

    width: 240px;
    height: 240px;

    left: -80px;
    bottom: -100px;

    animation:
        contactRingTwo
        14s
        linear
        infinite reverse;
}


@keyframes contactRingOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes contactRingTwo {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================
   TEXTO DEL BANNER
========================================= */

.contact-banner-content {

    position: relative;

    z-index: 5;

    width: min(850px, 90%);

    text-align: center;

    transform:
        translate(
            var(--mouse-x),
            var(--mouse-y)
        );

    transition:
        transform 0.8s ease;
}


.contact-banner-label {

    display: inline-block;

    margin-bottom: 12px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #66ddff;

    text-shadow:
        0 0 12px rgba(0, 190, 255, 0.7);
}


.contact-banner-content h1 {

    margin: 0;

    font-size: clamp(32px, 5vw, 58px);

    line-height: 1.05;

    font-weight: 800;

    color: white;

    text-shadow:
        0 0 25px rgba(0, 150, 255, 0.35);
}


.contact-banner-content h1 span {

    color: #55dfff;

}


.contact-banner-content p {

    max-width: 650px;

    margin: 18px auto 0;

    font-size: 16px;

    line-height: 1.6;

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


/* =========================================
   CELULAR
========================================= */

@media (max-width: 768px) {

    .contact-animated-banner {

        height: 280px;
    }

    .contact-banner-content h1 {

        font-size: 34px;
    }

    .contact-banner-content p {

        font-size: 14px;
    }

    .ring-one {

        width: 260px;
        height: 260px;

        right: -100px;
        top: -80px;
    }

}
/* =====================================================
   UBICACIÓN - ANIMACIÓN RADAR
===================================================== */

.location-section {
    position: relative;
    width: min(1200px, 92%);
    min-height: 360px;
    margin: 70px auto;
    padding: 55px 65px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;

    overflow: hidden;

    border: 1px solid rgba(0, 190, 255, 0.18);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 25% 50%,
            rgba(0, 174, 255, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(3, 18, 30, 0.97),
            rgba(5, 28, 43, 0.94)
        );

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.30),
        inset 0 0 50px rgba(0, 160, 255, 0.035);

    isolation: isolate;
}


/* Brillo ambiental */

.location-section::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    left: -220px;
    top: -70px;

    border-radius: 50%;

    background: rgba(0, 174, 255, 0.08);

    filter: blur(70px);

    z-index: -1;
}


/* =====================================================
   ZONA DE ANIMACIÓN
===================================================== */

.location-animation {
    position: relative;

    width: 300px;
    height: 250px;

    flex-shrink: 0;

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


/* =====================================================
   RADAR
===================================================== */

.location-radar {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 70px;
    height: 70px;

    border: 1px solid rgba(0, 200, 255, 0.65);

    border-radius: 50%;

    transform: translate(-50%, -50%) scale(0.2);

    opacity: 0;

    animation:
        locationRadar 4s ease-out infinite;
}


.radar-1 {
    animation-delay: 0s;
}


.radar-2 {
    animation-delay: 1.3s;
}


.radar-3 {
    animation-delay: 2.6s;
}


@keyframes locationRadar {

    0% {
        width: 70px;
        height: 70px;
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.2);
    }

    70% {
        opacity: 0.35;
    }

    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* =====================================================
   PIN DE UBICACIÓN
===================================================== */

.location-pin {
    position: relative;

    z-index: 5;

    width: 72px;
    height: 72px;

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

    font-size: 42px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 200, 255, 0.28),
            rgba(0, 100, 180, 0.08) 55%,
            transparent 70%
        );

    filter:
        drop-shadow(
            0 0 12px rgba(0, 200, 255, 0.85)
        );

    animation:
        locationPin 2s ease-in-out infinite;
}


@keyframes locationPin {

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

    50% {
        transform: translateY(-8px) scale(1.06);
    }
}


/* =====================================================
   PUNTO CENTRAL
===================================================== */

.location-animation::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

    transform: translate(-50%, 32px);

    border-radius: 50%;

    background: #4edfff;

    box-shadow:
        0 0 8px #4edfff,
        0 0 20px rgba(0, 190, 255, 0.9);

    animation:
        locationDot 2s ease-in-out infinite;
}


@keyframes locationDot {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, 32px) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, 32px) scale(1.4);
    }
}


/* =====================================================
   INFORMACIÓN
===================================================== */

.location-info {
    position: relative;

    max-width: 570px;
}


.location-label {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;

    color: #55ddff;

    text-shadow:
        0 0 12px rgba(0, 190, 255, 0.6);
}


.location-info h2 {
    margin: 0 0 15px;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.05;

    color: #ffffff;

    font-weight: 800;
}


.location-info p {
    margin: 0 0 28px;

    font-size: 16px;

    line-height: 1.7;

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


/* =====================================================
   BOTÓN GOOGLE MAPS
===================================================== */

.location-button {
    display: inline-flex;

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

    min-height: 48px;

    padding: 0 24px;

    border-radius: 10px;

    border: 1px solid rgba(80, 220, 255, 0.5);

    background:
        linear-gradient(
            135deg,
            rgba(0, 174, 255, 0.20),
            rgba(0, 90, 160, 0.12)
        );

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-decoration: none;

    box-shadow:
        0 0 20px rgba(0, 170, 255, 0.10);

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


.location-button:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            rgba(0, 190, 255, 0.35),
            rgba(0, 110, 190, 0.22)
        );

    box-shadow:
        0 0 25px rgba(0, 190, 255, 0.35);
}


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

@media (max-width: 800px) {

    .location-section {
        width: 90%;

        padding: 45px 25px;

        flex-direction: column;

        gap: 25px;

        text-align: center;
    }


    .location-animation {
        width: 260px;
        height: 220px;
    }


    .location-info {
        max-width: 100%;
    }


    .location-info p {
        font-size: 14px;
    }


    .location-button {
        width: 100%;
    }
}
/* =========================================================
   HUD GEOLOCALIZACIÓN — GEO SUR BOLIVIA
   ANIMACIÓN TECNOLÓGICA
========================================================= */

.location-animation {
    position: relative;
    width: 360px;
    height: 300px;
    flex-shrink: 0;

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

    overflow: hidden;

    perspective: 900px;
}


/* =========================================================
   MAPA HUD
========================================================= */

.hud-map {
    position: absolute;
    inset: 0;

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

    z-index: 1;

    transform:
        translate(
            calc(var(--mouse-x, 0px) * 0.35),
            calc(var(--mouse-y, 0px) * 0.35)
        );

    transition: transform 1s ease;

    animation: hudMapFloat 8s ease-in-out infinite;
}


.hud-map img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0.78;

    filter:
        drop-shadow(
            0 0 18px rgba(0, 180, 255, 0.30)
        );
}


@keyframes hudMapFloat {

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

    50% {
        transform:
            translateY(-4px)
            scale(1.015);
    }
}


/* =========================================================
   ESCÁNER ROTATIVO
========================================================= */

.hud-scan {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 250px;
    height: 250px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    z-index: 3;

    pointer-events: none;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 275deg,
            rgba(0, 210, 255, 0.04) 295deg,
            rgba(0, 220, 255, 0.38) 315deg,
            rgba(0, 220, 255, 0.08) 335deg,
            transparent 360deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 43%,
            #000 44% 100%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 43%,
            #000 44% 100%
        );

    animation:
        hudScanRotate
        5s
        linear
        infinite;
}


@keyframes hudScanRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* =========================================================
   RADAR
========================================================= */

.location-radar {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 55px;
    height: 55px;

    border:
        1px solid rgba(0, 220, 255, 0.75);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.2);

    opacity: 0;

    z-index: 4;

    pointer-events: none;

    box-shadow:
        0 0 12px rgba(0, 200, 255, 0.20);

    animation:
        hudRadarPulse
        4.2s
        ease-out
        infinite;
}


.radar-1 {
    animation-delay: 0s;
}


.radar-2 {
    animation-delay: 1.4s;
}


.radar-3 {
    animation-delay: 2.8s;
}


@keyframes hudRadarPulse {

    0% {
        width: 55px;
        height: 55px;

        opacity: 0.95;

        transform:
            translate(-50%, -50%)
            scale(0.2);
    }

    65% {
        opacity: 0.35;
    }

    100% {
        width: 290px;
        height: 290px;

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   CRUZ DE PRECISIÓN
========================================================= */

.hud-crosshair {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 125px;
    height: 125px;

    transform: translate(-50%, -50%);

    border:
        1px dashed rgba(0, 210, 255, 0.38);

    border-radius: 50%;

    z-index: 5;

    pointer-events: none;

    animation:
        crosshairRotate
        18s
        linear
        infinite;
}


.hud-crosshair::before,
.hud-crosshair::after {
    content: "";

    position: absolute;

    background:
        rgba(0, 210, 255, 0.45);
}


.hud-crosshair::before {
    width: 155px;
    height: 1px;

    left: -15px;
    top: 50%;
}


.hud-crosshair::after {
    width: 1px;
    height: 155px;

    left: 50%;
    top: -15px;
}


@keyframes crosshairRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* =========================================================
   PIN
========================================================= */

.location-pin {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 58px;
    height: 58px;

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

    transform:
        translate(-50%, -50%);

    z-index: 10;

    font-size: 38px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 80, 70, 0.25),
            rgba(255, 30, 50, 0.05) 55%,
            transparent 72%
        );

    filter:
        drop-shadow(
            0 0 10px rgba(255, 50, 50, 0.9)
        );

    animation:
        hudPinPulse
        2s
        ease-in-out
        infinite;
}


@keyframes hudPinPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -54%)
            scale(1.10);
    }
}


/* =========================================================
   PUNTO DE LOCALIZACIÓN
========================================================= */

.location-animation::after {
    content: "";

    position: absolute;

    left: 50%;
    top: calc(50% + 32px);

    width: 9px;
    height: 9px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #66eaff;

    box-shadow:
        0 0 8px #66eaff,
        0 0 20px rgba(0, 210, 255, 0.85);

    z-index: 11;

    animation:
        hudTargetDot
        1.6s
        ease-in-out
        infinite;
}


@keyframes hudTargetDot {

    0%,
    100% {
        opacity: 0.45;
        transform:
            translate(-50%, -50%)
            scale(0.7);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.5);
    }
}


/* =========================================================
   NODOS DE CONEXIÓN
========================================================= */

.hud-node {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #6beaff;

    box-shadow:
        0 0 8px #6beaff,
        0 0 18px rgba(0, 200, 255, 0.9);

    z-index: 8;

    animation:
        hudNodeBlink
        2s
        ease-in-out
        infinite;
}


.node-1 {
    left: 22%;
    top: 37%;

    animation-delay: 0.3s;
}


.node-2 {
    right: 18%;
    top: 45%;

    animation-delay: 1s;
}


.node-3 {
    left: 30%;
    bottom: 22%;

    animation-delay: 1.7s;
}


@keyframes hudNodeBlink {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}


/* =========================================================
   COORDENADAS
========================================================= */

.hud-coordinate {
    position: absolute;

    right: 8px;
    top: 20px;

    z-index: 12;

    padding: 8px 12px;


    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    line-height: 1.7;

    letter-spacing: 0.5px;

    color:
        rgba(150, 235, 255, 0.85);

    border-left:
        1px solid rgba(0, 200, 255, 0.45);

    background:
        rgba(0, 25, 40, 0.45);

    backdrop-filter:
        blur(4px);

    box-shadow:
        0 0 15px rgba(0, 180, 255, 0.06);

    animation:
        coordinateFlicker
        4s
        ease-in-out
        infinite;
}


.hud-coordinate span {
    color: #42dcff;

    font-weight: 700;
}


@keyframes coordinateFlicker {

    0%,
    100% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   LÍNEAS DE ESCANEO HORIZONTALES
========================================================= */

.location-animation::before {
    content: "";

    position: absolute;

    left: 5%;
    right: 5%;

    height: 1px;

    top: 0;

    z-index: 15;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 220, 255, 0.65),
            transparent
        );

    box-shadow:
        0 0 10px rgba(0, 210, 255, 0.45);

    animation:
        hudHorizontalScan
        4s
        ease-in-out
        infinite;
}


@keyframes hudHorizontalScan {

    0% {
        top: 5%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    85% {
        opacity: 1;
    }

    100% {
        top: 95%;
        opacity: 0;
    }
}


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

@media (max-width: 800px) {

    .location-animation {
        width: 320px;
        height: 270px;
    }

    .hud-coordinate {
        right: 0;
        top: 10px;

        font-size: 9px;
    }

}


@media (max-width: 480px) {

    .location-animation {
        width: 290px;
        height: 245px;
    }

    .hud-scan {
        width: 210px;
        height: 210px;
    }

    .hud-crosshair {
        width: 105px;
        height: 105px;
    }

    .location-pin {
        font-size: 34px;
    }

    .hud-coordinate {
        display: none;
    }

}
/* =========================================================
   AJUSTE FINAL HUD — ESCALA Y PROFUNDIDAD
========================================================= */

.location-animation {
    width: 430px;
    height: 320px;
}


/* Hacemos que el mapa tenga mayor presencia */

.hud-map {
    inset: -12px -35px;

    animation:
        hudMapFloat
        8s
        ease-in-out
        infinite;
}


.hud-map img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0.92;

    filter:
        drop-shadow(
            0 0 22px rgba(0, 190, 255, 0.38)
        );
}


/* El radar se adapta al nuevo tamaño */

.hud-scan {
    width: 270px;
    height: 270px;
}


/* Radar exterior ligeramente mayor */

@keyframes hudRadarPulse {

    0% {
        width: 55px;
        height: 55px;
        opacity: 0.95;

        transform:
            translate(-50%, -50%)
            scale(0.2);
    }

    65% {
        opacity: 0.30;
    }

    100% {
        width: 320px;
        height: 320px;
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* Cruz de precisión */

.hud-crosshair {
    width: 140px;
    height: 140px;
}


/* =========================================================
   OCULTAR PIN HTML
   El pin ya viene integrado en la imagen HUD.
========================================================= */

.location-pin {
    display: none !important;
}


/* =========================================================
   PUNTO DE LOCALIZACIÓN
========================================================= */

.location-animation::after {
    left: 50%;
    top: calc(50% + 45px);

    width: 8px;
    height: 8px;

    box-shadow:
        0 0 8px #66eaff,
        0 0 18px rgba(0, 210, 255, 0.9),
        0 0 32px rgba(0, 170, 255, 0.45);
}


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

@media (max-width: 800px) {

    .location-animation {
        width: 360px;
        height: 290px;
    }

}


@media (max-width: 480px) {

    .location-animation {
        width: 320px;
        height: 260px;
    }

}
/* =========================================================
   HUD INTERACTIVO — ESCANEO CON CURSOR
========================================================= */

.location-animation {
    --scan-angle: 0deg;
    --cursor-x: 50%;
    --cursor-y: 50%;
}


/* =========================================================
   LÍNEA QUE SIGUE EL CURSOR
========================================================= */

.hud-cursor-scan {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 145px;
    height: 2px;

    transform-origin: 0 50%;

    transform:
        rotate(var(--scan-angle));

    z-index: 9;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 220, 255, 0.95),
            rgba(0, 220, 255, 0.45),
            transparent
        );

    box-shadow:
        0 0 6px rgba(0, 220, 255, 0.9),
        0 0 15px rgba(0, 190, 255, 0.6);

    transition:
        opacity 0.25s ease;
}


/* Cuando el mouse entra */

.location-animation:hover .hud-cursor-scan {
    opacity: 1;
}


/* =========================================================
   PUNTO QUE SIGUE EL CURSOR
========================================================= */

.hud-cursor-point {
    position: absolute;

    left: var(--cursor-x);
    top: var(--cursor-y);

    width: 8px;
    height: 8px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    z-index: 12;

    pointer-events: none;

    opacity: 0;

    background: #ffffff;

    box-shadow:
        0 0 5px #ffffff,
        0 0 12px #35ddff,
        0 0 25px rgba(0, 180, 255, 0.9);

    transition:
        left 0.08s linear,
        top 0.08s linear,
        opacity 0.2s ease;
}


.location-animation:hover .hud-cursor-point {
    opacity: 1;
}


/* =========================================================
   CÍRCULO ALREDEDOR DEL CURSOR
========================================================= */

.hud-cursor-point::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 24px;
    height: 24px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(0, 220, 255, 0.65);

    border-radius: 50%;

    animation:
        cursorTargetPulse
        1.2s
        ease-out
        infinite;
}


@keyframes cursorTargetPulse {

    0% {
        transform:
            translate(-50%, -50%)
            scale(0.5);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.7);

        opacity: 0;
    }
}


/* =========================================================
   RADAR ACELERADO AL PASAR EL MOUSE
========================================================= */

.location-animation:hover .location-radar {
    animation-duration: 1.8s;
}


.location-animation:hover .hud-scan {
    animation-duration: 1.8s;
}


.location-animation:hover .hud-crosshair {
    animation-duration: 6s;
}


.location-animation:hover .hud-node {
    animation-duration: 0.8s;
}


/* =========================================================
   BRILLO DEL HUD AL ACTIVARSE
========================================================= */

.location-animation:hover .hud-map img {

    filter:
        drop-shadow(
            0 0 25px rgba(0, 200, 255, 0.50)
        )
        brightness(1.08);

    transition:
        filter 0.4s ease;
}


/* =========================================================
   EFECTO DE ACTIVACIÓN
========================================================= */

.location-animation:hover {

    filter:
        drop-shadow(
            0 0 18px rgba(0, 190, 255, 0.12)
        );
}
/* =========================================================
   SELECT - OPCIONES DEL MENÚ
========================================================= */

#proyecto {
    color: #ffffff;
    background-color: #111d2d;
}


/* Texto de las opciones */

#proyecto option {
    color: #ffffff;
    background-color: #111d2d;
}


/* Opción seleccionada */

#proyecto option:checked {
    color: #ffffff;
    background-color: #087fca;
}


/* Cuando se abre el select */

#proyecto:focus {
    color: #ffffff;
    background-color: #111d2d;
}