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

.hero-video{

    position:relative;
    height:85vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

}


/* OSCURECER VIDEO */

.hero-video::before{

    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1;

}

/* VIDEO FONDO */

.video-bg{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;

}

/* CONTENIDO */

.hero-video .contenido-nosotros{

    position:relative;
    z-index:2;

}

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

.texto-cobertura-video h3{

    color:white;
    font-size:2rem;
    font-weight:500;
    line-height:1.5;
    margin:0;

}

/* =========================
   MAPA ANIMADO
========================= */


.mapa-animado{

    position:relative;
    z-index:2;
    width:85%;
    max-width:900px;
    aspect-ratio:1 / 1;
    transform:translateY(-40px);
    opacity:0;

}

.mapa-animado.mostrar{

    animation:
    aparecerMapa 1.5s ease forwards;

}

/* =========================
   TEXTO FINAL COBERTURA
========================= */

.texto-cobertura-video{

    position:absolute;
    left:50%;
    bottom:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
    z-index:20;
    opacity:1;

}


.texto-cobertura-video h3{

    color:#fff;
    font-size:2.5rem;
    font-weight:600;
    margin:0;
    letter-spacing:1px;
    text-shadow:
    0 0 20px rgba(0,0,0,.8);

}

/* MAPA BASE */

.mapa{
    position:absolute;
    width:110%;
    height:110%;
    left:0;
    top:0;
    opacity:0;

    transition:
    transform 3s ease,
    opacity 3s ease;
}

/* =========================
   LOGO INICIAL
========================= */

.logo-cobertura{

    position:absolute;
    width:400px;
    height:400px;
    top:50%;
    left:50%;
    transform:
    translate(-50%,-50%);
    z-index:10;

}

/* =========================
   OCULTAR LOGO
========================= */

.logo-cobertura.ocultar{

    animation:
    desaparecerLogo 1s ease forwards;

}


@keyframes desaparecerLogo{

    from{

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

    }


    to{

        opacity:0;
        transform:
        translate(-50%,-50%)
        scale(.3);

    }

}


/* CAPAS DEL LOGO */

.logo-cobertura img{

    position:absolute;
    width:100%;
    left:0;
    top:0;
    opacity:0;

}

/* CAPA 1 */

.logo-cobertura img:nth-child(1){

    animation:
    capaEntrada 1s .5s forwards;

}

/* CAPA 2 */

.logo-cobertura img:nth-child(2){

    animation:
    capaEntrada 1s 1s forwards;

}

/* CAPA 3 */

.logo-cobertura img:nth-child(3){

    animation:
    capaEntrada 1s 1.5s forwards;

}

/* CAPA 4 */

.logo-cobertura img:nth-child(4){

    animation:
    capaEntrada 1s 2s forwards;

}

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

@keyframes aparecerMapa{

from{

    opacity:0;
    transform:
    translateY(-40px)
    scale(.8);

}


to{

    opacity:1;
    transform:
    translateY(-40px)
    scale(1);

}


}

@keyframes capaEntrada{

0%{

    opacity:0;
    transform:
    translateY(-60px)
    rotate(180deg)
    scale(.5);

}

70%{

    opacity:1;
    transform:
    translateY(10px)
    rotate(-10deg)
    scale(1.05);

}

100%{

    opacity:1;
    transform:
    translateY(0)
    rotate(0)
    scale(1);

}


}

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


@media(max-width:1024px){


.texto-cobertura-video{

    top:140px;
    width:85%;
    padding:1.5rem;

}

.texto-cobertura-video h3{

    font-size:1.6rem;

}


.mapa-animado{

    width:80%;

}

}

@media(max-width:768px){


.texto-cobertura-video{

    top:120px;
    width:90%;
    padding:1.2rem;

}

.texto-cobertura-video h3{

    font-size:1.4rem;

}

.mapa-animado{

    width:95%;

}


}

/* =========================
   CONTENEDOR DE RUTAS
========================= */

.rutas{

    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
    transform:translateY(180px);
    

}


/* =========================
   CAMIONES
========================= */

.camion{

    position:absolute;
    width:70px;
    left:0;
    top:0;
    opacity:0;
    z-index:6;
    will-change:transform;

}


/* Imagen del tracto */

.camion img{

    width:100%;
    display:block;

}

/* =========================
   PUNTOS DE COBERTURA
========================= */

.destino{

    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#1cff3a;
    left:50%;
    top:50%;
    transform:
    translate(-50%,-50%)
    scale(0);

    box-shadow:
    0 0 10px #1cff3a,
    0 0 25px #1cff3a;

}



.destino.activo{

    animation:
    pulso .8s ease forwards;

}



@keyframes pulso{

0%{

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

}

70%{

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

}

100%{

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

}


}

/* =========================
   LINEAS DE RUTA
========================= */

.ruta-linea{

    position:absolute;
    height:2px;
    background:#1cff3a;
    transform-origin:left center;
    opacity:.8;
    box-shadow:
    0 0 10px #1cff3a;
    z-index:3;

}

/* =========================
   DIBUJAR MAPA SVG
========================= */

.mapa object{

    opacity:1;

}

/* =========================
   FRASE SVG COBERTURA
   PRUEBA SIN ESCALAR
========================= */

.frase-svg{

    position:absolute;

    top:60%;
    left:50%;

    width:150%;
    height:auto;
    color: #ffffff;

    transform:
    translate(-30%,-40%);

    opacity:0;

    pointer-events:none;

    z-index:3;

}

@media(max-width:768px){

    .mapa-animado{

        width:95%;

    }


    .mapa{

        width:110%;
        height:110%;

        left:0;
        top:0;

        transform:none;

    }

}

@media(max-width:768px){

    .rutas{

        transform-origin:top left;

        transform:
        scale(.40)
        translate(20px,190px);

    }

}