/* ======== VARIABLES ======== */

:root {

    --azul: #041E42;
    --verde: #006B3F;
    --doradoo: #caa34e;
    --blanco: #FAFAF8;
    --celeste: #EAF5FF;



    --azul: #2F6EA3;
    --celeste: #DCEEFF;
    --dorado: #D8B56A;
    --verde: #006B3F;
    --blanco: #FAFAF8;

}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--blanco);
    color: var(--azul);
    overflow-x: hidden;
}


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

header {

    position: fixed;
    width: 100%;
    top: 0;
    left: 0;

    padding: 20px 8%;

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

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

    backdrop-filter: blur(20px);

    z-index: 999;

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

}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img {
    height: 90px;
}

.hero-logo {

    position: relative;

    z-index: 3;

    margin-bottom: 50px;

}

.hero-logo img {

    height: 155px;

    margin-bottom: 30px;

}

.hero-logo h1 {

    font-size: 6rem;

    max-width: 1200px;

    margin: auto;

    line-height: 1.05;

    color: #041E42;

    margin-bottom: 25px;

}

.hero-logo p {

    font-size: 1.3rem;

    color: #666;

}

.titulo h2 {
    font-size: 20px;
    color: black;
}

.titulo p {
    font-size: 13px;
    color: black;
}

nav {
    display: flex;
    gap: 40px;
}

nav a {

    color: black;
    text-decoration: none;
    font-weight: 600;
    transition: .4s;

}

nav a:hover {

    color: var(--doradoo);

}

/*nav a.active{
    background: rgba(202, 163, 78, .18);
    color: var(--doradoo);
    box-shadow: 0 0 18px rgba(202, 163, 78, .35);
}
*/

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

.hero {

    min-height: 100vh;

    padding: 140px 8% 120px;

    position: relative;

    overflow: hidden;

    text-align: center;

    background:

        linear-gradient(180deg,

            hwb(210 26% 6%) 0%,
            #c5d9e8 18%,
            #f5f2d1 40%,
            #f4e8c7 70%,
            #f5edbe 100%);

}

.hero::before {

    content: "";

    position: absolute;

    width: 1300px;
    height: 700px;

    left: 50%;
    top: -150px;

    transform: translateX(-50%);

    background:

        radial-gradient(ellipse,

            rgba(255, 228, 130, .55) 0%,

            rgba(255, 220, 100, .25) 20%,

            rgba(255, 255, 255, .12) 45%,

            transparent 75%);

    pointer-events: none;

}





.hero-container {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 80px;

    align-items: center;

    max-width: 1600px;

    margin: auto;

}

.hero-video {

    position: relative;

}

.hero-video video {

    width: 100%;

    border-radius: 40px;

    box-shadow:

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

        0 0 0 10px rgba(255, 255, 255, .3);

}

.hero-video::before {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    background:

        radial-gradient(circle,
            rgba(216, 181, 106, .4),
            transparent);

    top: -100px;
    right: -100px;

    z-index: -1;

}

.video-container {

    position: absolute;

    width: 100%;
    height: 100%;

}

.video-container video {

    width: 100%;
    height: 100%;
    object-fit: cover;

}

.hero-overlay {

    position: absolute;
    width: 100%;
    height: 100%;

    background:

        linear-gradient(180deg,
            rgba(4, 30, 66, .85) 0%,
            rgba(10, 70, 110, .45) 30%,

            rgba(255, 182, 72, .20) 65%,
            rgba(214, 181, 108, .25) 100%);

}

.video-box {

    max-width: 1450px;

    margin: auto;

    position: relative;

    z-index: 3;

    overflow: hidden;

    border-radius: 45px;

    box-shadow:
        0 50px 100px rgba(0, 0, 0, .15),
        0 0 0 15px rgba(255, 255, 255, .35);

    aspect-ratio: 16/9;
}

.video-box video {

    width: 100%;
    height: 100%;

    object-fit: contain;
    /* en vez de cover */
    /*background: #000;*/
    object-position: center;

    border-radius: 45px;

}

.video-box::before {

    content: "";

    position: absolute;

    width: 110%;
    height: 110%;

    left: -5%;
    top: -5%;

    border-radius: 50px;

    background:

        linear-gradient(135deg,

            rgba(255, 255, 255, .2),

            rgba(255, 255, 255, .05));

    backdrop-filter: blur(10px);

    z-index: -1;

}




.hero-content h1 {

    font-size: 6rem;

    font-weight: 800;

    line-height: 1.05;

    text-shadow: 0 10px 30px rgba(0, 0, 0, .5);

    margin-bottom: 30px;

}

.hero-content p {

    font-size: 1.5rem;

    color: #fff;

    max-width: 800px;

    margin: auto;

    margin-bottom: 50px;

}

.hero-buttons {

    display: flex;
    justify-content: center;
    gap: 20px;

}

.btn-principal {

    background: var(--dorado);

    color: var(--azul);

    padding: 18px 40px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 700;

    transition: .4s;

}

.btn-principal:hover {

    transform: translateY(-5px);

}

.btn-secundario {

    border: 2px solid white;

    padding: 18px 40px;

    border-radius: 50px;

    text-decoration: none;

    color: white;

    font-weight: 700;

}

.hero-info span {

    color: var(--verde);

    font-weight: 700;

    letter-spacing: 3px;

}

.hero-info h1 {

    font-size: 5.8rem;

    line-height: 1.05;

    margin: 30px 0;

    color: var(--azul);

}

.hero-info p {

    font-size: 1.4rem;

    line-height: 1.8;

    color: #555;

    margin-bottom: 50px;

    max-width: 650px;

}

.hero-title {

    margin-bottom: 50px;

    position: relative;

    z-index: 2;

}

.hero-title h1 {

    font-size: 5rem;

    color: #1f4d7f;

    font-weight: 800;

    margin-bottom: 20px;

}

.hero-title p {

    font-size: 1.3rem;

    color: #666;

}

.hero-frase {

    margin-top: 50px;

    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

}

.hero-frase p {

    font-size: 1.4rem;

    line-height: 2;

    font-style: italic;

    color: #4f6475;

}

/* ===== HISTORIA ===== */

.historia {

    padding: 140px 10%;

    text-align: center;

    background: white;

}

.historia h2 {

    font-size: 3rem;

    margin-bottom: 30px;

    color: var(--verde);

}

.historia p {

    font-size: 1.2rem;

    line-height: 2;

    max-width: 1000px;

    margin: auto;

}

/*Fotos*/

.momentos {

    padding: 120px 10%;

    background: #f8fcff;

}

.momentos h2 {

    text-align: center;

    font-size: 3rem;

    color: var(--verde);

    margin-bottom: 60px;

}

.momentos-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 25px;

}

.momentos-grid img {

    width: 100%;

    height: 350px;

    object-fit: cover;

    border-radius: 35px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    transition: .6s;

}

.momentos-grid img:hover {

    transform: translateY(-10px) scale(1.03);

}


/* ===== AGUILA Y CONDOR ===== */

.vision {

    padding: 100px 10%;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 40px;

    background: linear-gradient(180deg,
            #f7fbff,
            white);

}

.card-vision {

    padding: 60px;

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

    backdrop-filter: blur(20px);

    border-radius: 40px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    transition: .4s;

}

.card-vision:hover {

    transform: translateY(-10px);

}

.card-vision i {

    font-size: 4rem;

    color: var(--dorado);

    margin-bottom: 20px;

}

.card-vision h2 {

    font-size: 2.3rem;

    color: var(--verde);

    margin-bottom: 15px;

}

.card-vision h3 {

    margin-bottom: 20px;

}

.card-vision p {

    line-height: 1.9;

}


/* ===== ESTADISTICAS ===== */

.estadisticas {

    background: linear-gradient(135deg,
            var(--azul),
            var(--verde));

    padding: 100px 10%;

    display: flex;

    justify-content: space-around;

    flex-wrap: wrap;

}

.numero {

    color: white;
    text-align: center;

}

.numero h1 {

    font-size: 4rem;

    color: var(--dorado);

}

.numero p {

    font-size: 1.2rem;

}


/* ===== PAISES ===== */

.paises {

    padding: 120px 10%;

    background: white;

}

.paises h2 {

    text-align: center;

    font-size: 3rem;

    margin-bottom: 80px;

}

.grid-paises {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 35px;

}

.pais {

    overflow: hidden;

    border-radius: 30px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, .1);

    transition: .5s;

}

.pais:hover {

    transform: translateY(-10px);

}

.pais img {

    width: 100%;
    height: 300px;

    object-fit: cover;

}

.pais h3 {

    padding: 25px;

    text-align: center;

    color: var(--verde);

}


/* ===== GALERIA ===== */

.galeria {

    padding: 120px 10%;

    background: var(--celeste);

}

.galeria h2 {

    text-align: center;

    font-size: 3rem;

    margin-bottom: 70px;

}

.masonry {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

}

.item {

    overflow: hidden;

    border-radius: 30px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);

}

.item img,
.item video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.item:hover img {

    transform: scale(1.08);

}

.grande {

    grid-row: span 2;

}

.masonry img {

    width: 100%;

    margin-bottom: 20px;

    border-radius: 25px;

    transition: .4s;

    cursor: pointer;

}

.masonry img:hover {

    transform: scale(1.03);

}


/* ===== ACTUALIZACIONES ===== */

.actualizaciones {

    padding: 140px 10%;

    background: white;

}

.actualizaciones h2 {

    text-align: center;

    font-size: 3rem;

    margin-bottom: 80px;

}

.news-wrapper{
    position:relative;
    width:100%;
}

.news-slider {

    display: flex;

    gap: 40px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding: 20px;

}

.news-slider::-webkit-scrollbar {
    display: none;
}

.news-card {

    min-width: 380px;
    max-width: 380px;

    background: white;

    border-radius: 35px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    flex-shrink: 0;

}

.news-card:hover {

    transform: translateY(-10px);

}

.news-card:hover {

    transform: translateY(-15px);

}

.news-card img {

    width: 100%;

    height: 270px;

    object-fit: cover;

}

.news-info {

    padding: 35px;

}

.news-info span {

    color: var(--dorado);

    font-weight: 700;

}

.news-info h3 {

    font-size: 1.8rem;

    margin: 20px 0;

    color: var(--azul);

}

.news-info p {

    line-height: 1.8;

    color: #666;

    margin-bottom: 30px;

}

.news-info a {

    text-decoration: none;

    padding: 15px 30px;

    background: linear-gradient(135deg,
            var(--verde),
            var(--azul));

    border-radius: 50px;

    color: white;

    font-weight: 700;

    display: inline-block;

    transition: .4s;

}

.news-info a:hover {

    background: var(--dorado);

    color: var(--azul);

}


.extra-text {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
    line-height: 1.8;
    color: #666;
}

.news-card.active .extra-text {
    max-height: 500px;
    opacity: 1;
    margin-top: 20px;
}

.leer-mas {
    margin-top: 25px;
    border: none;
    background: linear-gradient(135deg, var(--verde), var(--azul));
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
}

/* BOTONES*/

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:70px;
    height:70px;

    border:none;
    border-radius:50%;

    background:white;
    color:var(--azul);

    font-size:1.7rem;
    cursor:pointer;

    box-shadow:0 15px 35px rgba(0,0,0,.12);
    transition:.4s;

    z-index:10;
}

.prev{
    left:-70px;     /* más a la izquierda */
}

.next{
    right:-70px;    /* más a la derecha */
}

.slider-btn:hover{
    background:var(--dorado);
    color:white;
}



/* ===== FRASE ===== */

.frase {

    padding: 180px 10%;

    text-align: center;

    background:

        linear-gradient(rgba(4, 30, 66, .85),
            rgba(4, 30, 66, .85)),

        url(img/fondo-andes.jpg);

    background-size: cover;

    background-position: center;

    color: white;

}

.frase h1 {

    font-size: 3.5rem;

    max-width: 1200px;

    margin: auto;

    line-height: 1.4;

}

.frase p {

    margin-top: 40px;

    font-size: 1.3rem;

    color: var(--dorado);

}


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

footer {

    background: var(--azul);

    padding: 80px;

    text-align: center;

    color: white;

}

footer img {

    height: 140px;

    margin-bottom: 30px;

}

footer h2 {

    color: var(--dorado);

    margin-bottom: 30px;

}

.redes {

    display: flex;

    justify-content: center;

    gap: 25px;

    margin-bottom: 30px;

}

.redes i {

    font-size: 2rem;

    transition: .4s;

    cursor: pointer;

}

.redes i:hover {

    color: var(--dorado);

}

/* LOGO FOOTER */


/* CONTENEDOR */

.logo-footer-box {

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

    margin: auto;
    margin-bottom: 30px;

}

.logo-footer {

    width: 150px;

    background: white;

    border-radius: 50%;

    padding: .150px;

    position: relative;

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

}

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

@media(max-width:900px) {

    .hero-content h1 {
        font-size: 3rem;
    }

    header {

        flex-direction: column;

    }

    nav {

        margin-top: 20px;

        gap: 20px;

    }

    .estadisticas {

        gap: 40px;

    }

    .frase h1 {

        font-size: 2.2rem;

    }

}

/*=========== VUELO ===========*/

.vuelo {

    padding: 140px 10%;

    background: linear-gradient(180deg,
            white,
            #eef7ff);

}

.titulo-seccion {

    text-align: center;

    margin-bottom: 80px;

}

.titulo-seccion h2 {

    font-size: 3rem;

    color: var(--verde);

    margin-bottom: 20px;

}

.titulo-seccion p {

    font-size: 1.2rem;

    color: #555;

}

.vuelo-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));

    gap: 40px;

}

.vuelo-card {

    overflow: hidden;

    border-radius: 40px;

    background: white;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    transition: .5s;

}

.vuelo-card:hover {

    transform: translateY(-15px);

}

.vuelo-card img {

    width: 100%;

    height: 500px;

    object-fit: cover;

}

.vuelo-texto {

    padding: 40px;

}

.vuelo-texto h3 {

    font-size: 2rem;

    color: var(--verde);

    margin-bottom: 20px;

}

.vuelo-texto p {

    line-height: 2;

    color: #555;

}

/* MAPA */

.continente {

    padding: 140px 10%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 100px;

    background: #f7fbff;

    flex-wrap: wrap;

}

.continente-info {

    flex: 1;

}

.continente-info h2 {

    font-size: 3.5rem;

    color: var(--azul);

    margin-bottom: 30px;

}

.continente-info p {

    font-size: 1.2rem;

    line-height: 2;

    color: #555;

}





.ruta{
    fill:none;
    stroke:#D8B56A;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:14 10;
    animation:moverRuta 10s linear infinite;
}

.punto{
    fill:#2F6EA3;
    stroke:#fff;
    stroke-width:4;
    r:8;
    filter:drop-shadow(0 0 8px rgba(47,110,163,.5));
}

@keyframes moverRuta{
    to{
        stroke-dashoffset:-96;
    }
}

.mapa-svg text{
    font-size:18px;
    fill:#2F6EA3;
    font-weight:700;
}




@keyframes flotar {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}

/*.hero-rays{

position:absolute;

top:-200px;
left:50%;

transform:translateX(-50%);

width:1800px;
height:1800px;

z-index:0;

opacity:.5;

background:

repeating-conic-gradient(

from 270deg,

rgba(214,181,108,.35) 0deg,

rgba(214,181,108,.15) 2deg,

transparent 8deg,

transparent 16deg

);

filter:blur(2px);

}*/

.hero-logo,
.video-box,
.hero-frase {

    position: relative;

    z-index: 10;

}

.continente {

    padding: 160px 10%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 100px;

    background:

        linear-gradient(180deg,
            #ffffff,
            #eef7ff);

    flex-wrap: wrap;

}



.mapa-box{
    position:relative;
    width:700px;
}

.mapa-svg{
    width: 96%;
    display:block;
}

/* AGUILA */

.aguila{
    position:absolute;

    width: 305px;

    top:120px;
    right: -70px;

    transform:scaleX(-1);

    z-index:20;
}

/* CONDOR */

.condor{
    position:absolute;

    width: 280px;

    bottom:130px;
    left: 5px;

    z-index:20;
}