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

.nosotros-hero{

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    height: 60vh;

    background: url("../img/heronosotros.jpg") center center/cover no-repeat;

    overflow: hidden;

}

.nosotros-hero::before{

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(15,139,131,.70);

}

.nosotros-hero .container{

    position: relative;

    z-index: 2;

}

.nosotros-hero h1{

    font-family: "Playfair Display", serif;

    font-size: 4rem;

    color: #fff;

    margin-bottom: 20px;

}

.nosotros-hero p{

    color: rgba(255,255,255,.95);

    font-size: 1.2rem;

    max-width: 700px;

    margin: auto;

    line-height: 1.8;

}

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

.historia{

    max-width:1200px;

    margin:100px auto 70px;

    padding:0 20px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:70px;

    align-items:center;

}

.historia-subtitulo{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:#e9f8f6;

    color:#18B5A4;

    font-size:.95rem;

    font-weight:600;

    margin-bottom:22px;

}

.historia-subtitulo i{

    font-size:1.2rem;

}

.historia-texto h2{

    font-family:"Playfair Display",serif;

    font-size:3rem;

    color:#1f2937;

    margin-bottom:25px;

    line-height:1.2;

}

.historia-texto p{

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

    font-size:1rem;

}

.historia-imagen{

    position:relative;

}

.historia-imagen img{

    width:100%;

    display:block;

    border-radius:28px;

    box-shadow:0 25px 50px rgba(0,0,0,.12);

    transition:.45s;

}

.historia-imagen:hover img{

    transform:scale(1.03);

}

.historia-card{

    position:absolute;

    right:25px;

    bottom:25px;

    background:#fff;

    border-radius:18px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:18px;

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

}

.historia-card i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#e9f8f6;

    color:#18B5A4;

    font-size:1.9rem;

}

.historia-card h3{

    font-size:1.7rem;

    color:#1f2937;

    margin-bottom:4px;

    font-weight:700;

}

.historia-card span{

    color:#666;

    font-size:.95rem;

}

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

.frase{

    max-width:1200px;

    margin:0 auto 90px;

    padding:0 20px;

}

.frase-contenido{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #f8f5ef 0%,
        #eefaf8 50%,
        #f8f5ef 100%
    );

    border-radius:28px;

    padding:70px 40px;

    text-align:center;

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

    border:1px solid rgba(24,181,164,.12);

}

.frase-contenido::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(24,181,164,.05);

    top:-120px;

    left:-120px;

}

.frase-contenido::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(24,181,164,.05);

    right:-80px;

    bottom:-80px;

}

.frase-contenido h2{

    position:relative;

    z-index:2;

    max-width:800px;

    margin:auto;

    font-family:"Playfair Display",serif;

    font-size:2.4rem;

    font-style:italic;

    color:#1f2937;

    line-height:1.5;

}

.frase-contenido .ri-double-quotes-l{

    position:relative;

    z-index:2;

    display:block;

    font-size:3rem;

    color:#18B5A4;

    margin-bottom:18px;

}

.frase-contenido .avion{

    position:absolute;

    right:40px;

    top:35px;

    font-size:2rem;

    color:#18B5A4;

    transform:rotate(-15deg);

    opacity:.8;

}

.frase-contenido::selection{

    background:#18B5A4;

    color:#fff;

}

/*====================================
    NUESTROS VALORES
=====================================*/

.empresa-valores{

    max-width:1200px;

    margin:0 auto 100px;

    padding:0 20px;

    text-align:center;

}

.empresa-valores h2{

    font-family:"Playfair Display",serif;

    font-size:2.8rem;

    color:#1f2937;

    margin-bottom:55px;

}

.empresa-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.empresa-card{

    background:#fff;

    padding:40px 30px;

    border-radius:25px;

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

    transition:.4s;

    border:1px solid rgba(24,181,164,.1);

}

.empresa-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.12);

}

.empresa-icono{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#e9f8f6;

    color:#18B5A4;

    font-size:2rem;

}

.empresa-card h3{

    font-size:1.5rem;

    color:#1f2937;

    margin-bottom:15px;

    font-family:"Playfair Display",serif;

}

.empresa-card p{

    color:#666;

    line-height:1.8;

}

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

.cta{

    max-width:1200px;

    margin:0 auto 100px;

    padding:0 20px;

}

.cta-contenido{

    position:relative;

    overflow:hidden;

    padding:80px 40px;

    text-align:center;

    border-radius:30px;

    box-shadow:0 20px 45px rgba(24,181,164,.25);

}

/* Imagen de fondo */

.cta-contenido::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(24,181,164,.72),
        rgba(24,181,164,.72)
    ),
    url("../img/ctanosotros.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transition:.6s;

    z-index:0;

}

/* Efecto de zoom */

.cta-contenido:hover::before{

    transform:scale(1.08);

}

/* Todo el contenido encima de la imagen */

.cta-contenido>*{

    position:relative;

    z-index:2;

}

.cta-contenido h2{

    font-family:"Playfair Display",serif;

    font-size:2.8rem;

    color:#fff;

    margin-bottom:20px;

}

.cta-contenido p{

    max-width:650px;

    margin:0 auto 35px;

    color:rgba(255,255,255,.95);

    line-height:1.8;

    font-size:1.05rem;

}

.cta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:50px;

    background:#fff;

    color:#18B5A4;

    text-decoration:none;

    font-weight:700;

    font-size:1rem;

    transition:.35s;

}

.cta-btn i{

    font-size:1.2rem;

}

.cta-btn:hover{

    background:#f8f5ef;

    transform:translateY(-5px);

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

}

/*====================================
    VISIÓN Y MISIÓN
=====================================*/

.valores{

    max-width:1200px;

    margin:0 auto 100px;

    padding:0 20px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.valor-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:28px;

    padding:45px 40px;

    text-align:center;

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

    border:1px solid rgba(24,181,164,.12);

    transition:.4s ease;

}

.valor-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        #18B5A4,
        #52d6c7
    );

}

.valor-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.valor-icono{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #18B5A4,
        #56d8ca
    );

    color:#fff;

    font-size:2.3rem;

    transition:.4s;

}

.valor-card:hover .valor-icono{

    transform:rotate(8deg) scale(1.08);

}

.valor-card h3{

    font-family:"Playfair Display",serif;

    font-size:2rem;

    color:#1f2937;

    margin-bottom:18px;

}

.valor-card p{

    color:#666;

    line-height:1.9;

    font-size:1rem;

}

.valor-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(24,181,164,.04);

    right:-120px;

    bottom:-120px;

    transition:.4s;

}

.valor-card:hover::after{

    transform:scale(1.2);

}

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

@media(max-width:992px){

    .historia{

        grid-template-columns:1fr;

        gap:50px;

    }

    .historia-texto{

        order:2;

        text-align:center;

    }

    .historia-imagen{

        order:1;

    }

    .historia-card{

        right:20px;

        bottom:20px;

    }

    .valores{

        grid-template-columns:1fr;

    }

    .empresa-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .frase-contenido{

        padding:60px 30px;

    }

    .frase-contenido h2{

        font-size:2rem;

    }

    .cta-contenido{

        padding:70px 35px;

    }

}

@media(max-width:768px){

    .nosotros-hero{

        padding:130px 20px 70px;

    }

    .nosotros-hero h1{

        font-size:2.5rem;

    }

    .historia{

        margin:70px auto;

        gap:40px;

    }

    .historia-subtitulo{

        font-size:.85rem;

    }

    .historia-texto h2{

        font-size:2.2rem;

    }

    .historia-texto p{

        font-size:.95rem;

    }

    .historia-card{

        position:static;

        margin-top:20px;

        justify-content:center;

        width:100%;

    }

    .valor-card{

        padding:35px 25px;

    }

    .valor-card h3{

        font-size:1.7rem;

    }

    .frase-contenido{

        padding:50px 25px;

    }

    .frase-contenido h2{

        font-size:1.7rem;

    }

    .frase-contenido .avion{

        display:none;

    }

    .empresa-valores h2{

        font-size:2.2rem;

        margin-bottom:40px;

    }

    .empresa-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .empresa-card{

        padding:35px 25px;

    }

    .cta{

        padding:0 20px 80px;

    }

    .cta-contenido{

        padding:60px 25px;

    }

    .cta-contenido h2{

        font-size:2rem;

        line-height:1.3;

    }

    .cta-contenido p{

        font-size:.95rem;

        margin-bottom:30px;

    }

    .cta-btn{

        width:100%;

        justify-content:center;

    }

}

@media(max-width:480px){

    .historia-texto h2{

        font-size:1.9rem;

    }

    .historia-card{

        flex-direction:column;

        text-align:center;

        gap:12px;

    }

    .valor-card{

        padding:30px 20px;

    }

    .valor-icono{

        width:75px;

        height:75px;

        font-size:2rem;

    }

    .frase-contenido{

        padding:40px 20px;

    }

    .frase-contenido h2{

        font-size:1.45rem;

        line-height:1.6;

    }

    .empresa-valores h2{

        font-size:1.9rem;

    }

    .empresa-card{

        padding:30px 20px;

    }

    .empresa-card h3{

        font-size:1.3rem;

    }

    .cta-contenido{

        padding:50px 20px;

    }

    .cta-contenido h2{

        font-size:1.7rem;

    }

    .cta-contenido p{

        font-size:.9rem;

    }

    .cta-btn{

        padding:15px 25px;

        font-size:.95rem;

    }

}