/* ==================================================
   FONDO NOSOTROS
================================================== */

.fondo-nosotros{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    background:

    linear-gradient(
        120deg,
        #ffffff,
        #eaf4ff
    );

}


/* ==================================================
   CONTENEDOR PRINCIPAL
================================================== */

.nosotros{

    position:relative;

    z-index:5;

    max-width:1200px;

    margin:auto;

    padding:100px 30px 80px;

}


/* ==================================================
   CABECERA
================================================== */

.cabecera-nosotros{

    display:grid;

    grid-template-columns:400px 1fr;

    align-items:center;

    gap:80px;

    margin-bottom:100px;

}


/* ==================================================
   CIRCULO EXPERIENCIA
================================================== */

.circulo-experiencia{

    width:350px;

    height:350px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
        135deg,
        #003b73,
        #00aaff
    );

    box-shadow:

    0 0 20px rgba(0,170,255,.5),

    0 0 60px rgba(0,170,255,.3),

    0 0 100px rgba(0,170,255,.15);

    animation:

    pulsoCirculo 4s ease-in-out infinite;

}


/* ==================================================
   CIRCULO INTERIOR
================================================== */

.circulo-interior{

    width:310px;

    height:310px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    box-shadow:

    inset 0 0 30px rgba(0,170,255,.15);

}


.numero{

    font-size:90px;

    font-weight:800;

    line-height:1;

    color:#0066cc;

}


.texto-circulo{

    font-size:18px;

    font-weight:700;

    letter-spacing:3px;

    color:#003b73;

}


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

.etiqueta{

    display:inline-block;

    margin-bottom:15px;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(0,170,255,.1);

    color:#0066cc;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

}


.texto-nosotros h1{

    margin:0 0 25px;

    font-size:48px;

    line-height:1.15;

    color:#003b73;

}


.texto-nosotros p{

    max-width:650px;

    margin-bottom:18px;

    font-size:17px;

    line-height:1.8;

    color:#4b6075;

}


.texto-nosotros strong{

    color:#0066cc;

}


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

.contenedor-tarjetas{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

    margin-bottom:110px;

}


.tarjeta-nosotros{

    position:relative;

    padding:40px 30px;

    text-align:center;

    border-radius:25px;

    background:

    rgba(255,255,255,.75);

    border:

    1px solid rgba(0,170,255,.25);

    box-shadow:

    0 15px 40px rgba(0,59,115,.08);

    backdrop-filter:

    blur(12px);

    transition:

    .4s ease;

}


.tarjeta-nosotros:hover{

    transform:

    translateY(-12px);

    border-color:

    #00aaff;

    box-shadow:

    0 20px 50px rgba(0,170,255,.25);

}


.icono-tarjeta{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:35px;

    background:

    linear-gradient(
        135deg,
        #eaf7ff,
        #ffffff
    );

    box-shadow:

    0 0 20px rgba(0,170,255,.25);

}


.tarjeta-nosotros h2{

    margin-bottom:18px;

    color:#003b73;

}


.tarjeta-nosotros p{

    color:#5b6f82;

    line-height:1.7;

    font-size:15px;

}


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

.galeria-nosotros{

    margin-bottom:100px;

}


.titulo-galeria{

    text-align:center;

    margin-bottom:50px;

}


.titulo-galeria h2{

    margin:15px 0;

    font-size:38px;

    color:#003b73;

}


.titulo-galeria p{

    color:#5b6f82;

    font-size:17px;

}


/* ==================================================
   IMAGENES
================================================== */

.contenedor-imagenes{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;

}


.imagen-nosotros{

    height:280px;

    overflow:hidden;

    border-radius:25px;

    box-shadow:

    0 15px 40px rgba(0,59,115,.15);

}


.imagen-nosotros img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform .5s ease;

}


.imagen-nosotros:hover img{

    transform:

    scale(1.08);

}


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

.cta-nosotros{

    padding:60px 30px;

    text-align:center;

    border-radius:30px;

    background:

    linear-gradient(
        135deg,
        #003b73,
        #0066cc
    );

    box-shadow:

    0 20px 50px rgba(0,59,115,.25);

}


.cta-nosotros h2{

    margin-bottom:15px;

    color:#ffffff;

    font-size:35px;

}


.cta-nosotros p{

    margin-bottom:30px;

    color:#eaf4ff;

    font-size:17px;

}


.boton-nosotros{

    display:inline-block;

    padding:15px 30px;

    border-radius:30px;

    background:#ffffff;

    color:#0066cc;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;

}


.boton-nosotros:hover{

    transform:

    scale(1.08);

    box-shadow:

    0 0 25px rgba(255,255,255,.5);

}


/* ==================================================
   ANIMACION CIRCULO
================================================== */

@keyframes pulsoCirculo{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}


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

@media(max-width:900px){

    .cabecera-nosotros{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

    }


    .texto-nosotros p{

        margin-left:auto;

        margin-right:auto;

    }


    .contenedor-tarjetas{

        grid-template-columns:1fr;

    }


    .contenedor-imagenes{

        grid-template-columns:1fr;

    }


    .texto-nosotros h1{

        font-size:40px;

    }

}


@media(max-width:500px){

    .nosotros{

        padding:

        70px 20px;

    }


    .circulo-experiencia{

        width:280px;

        height:280px;

    }


    .circulo-interior{

        width:245px;

        height:245px;

    }


    .numero{

        font-size:70px;

    }


    .texto-nosotros h1{

        font-size:34px;

    }

}





/* ==================================================
   MODO OSCURO - NOSOTROS
================================================== */

body.oscuro .fondo-nosotros{

    background:

    linear-gradient(
        120deg,
        #061525,
        #0b2238
    );

}


/* TEXTO PRINCIPAL */

body.oscuro .texto-nosotros h1{

    color:#ffffff;

}


body.oscuro .texto-nosotros p{

    color:#c5d7e8;

}


body.oscuro .texto-nosotros strong{

    color:#00aaff;

}


/* ETIQUETAS */

body.oscuro .etiqueta{

    background:

    rgba(0,170,255,.15);

    color:#00aaff;

}


/* CIRCULO INTERIOR */

body.oscuro .circulo-interior{

    background:#0b2238;

    box-shadow:

    inset 0 0 30px rgba(0,170,255,.2);

}


body.oscuro .numero{

    color:#00aaff;

}


body.oscuro .texto-circulo{

    color:#ffffff;

}


/* TARJETAS */

body.oscuro .tarjeta-nosotros{

    background:

    rgba(10,35,58,.85);

    border:

    1px solid rgba(0,170,255,.25);

    box-shadow:

    0 15px 40px rgba(0,0,0,.3);

}


body.oscuro .tarjeta-nosotros h2{

    color:#ffffff;

}


body.oscuro .tarjeta-nosotros p{

    color:#b9ccdd;

}


/* ICONOS */

body.oscuro .icono-tarjeta{

    background:

    linear-gradient(
        135deg,
        #0b2b47,
        #102f4b
    );

    box-shadow:

    0 0 20px rgba(0,170,255,.3);

}


/* GALERIA */

body.oscuro .titulo-galeria h2{

    color:#ffffff;

}


body.oscuro .titulo-galeria p{

    color:#b9ccdd;

}


/* CTA */

body.oscuro .cta-nosotros{

    background:

    linear-gradient(
        135deg,
        #031a2d,
        #00509e
    );

}


/* BOTON */

body.oscuro .boton-nosotros{

    background:#00aaff;

    color:#ffffff;

}


body.oscuro .boton-nosotros:hover{

    box-shadow:

    0 0 25px rgba(0,170,255,.6);

}