/* ==========================================
   PÁGINA NOSOTROS - ANKANA
========================================== */

.nosotros {

    background: #E4D3AB;

    padding: 70px 0;
}


/* ==========================================
   BLOQUES PRINCIPALES
========================================== */

.bloque-nosotros {

    max-width: 1200px;

    margin: 0 auto 90px auto;

    padding: 0 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;
}


/* Alternancia según el HTML actual */

.bloque-nosotros.invertido {

    flex-direction: row;
}


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

.bloque-nosotros .texto {

    flex: 1;
}

.bloque-nosotros h2 {

    font-family: Georgia, serif;

    font-size: 1.9rem;

    font-weight: bold;

    color: #4B2E1D;

    margin-bottom: 25px;

    line-height: 1.2;
}

.bloque-nosotros p {

    font-family: "Segoe UI", sans-serif;

    font-size: 1.08rem;

    line-height: 2;

    color: #5b4537;

    margin-bottom: 18px;

    text-align: justify;
}


/* ==========================================
   IMÁGENES
========================================== */

.bloque-nosotros .imagen {

    flex: 1;

    display: flex;

    justify-content: center;
}

.bloque-nosotros .imagen img {

    width: 100%;

    max-width: 360px;

    border-radius: 22px;

    box-shadow:
        0 20px 45px rgba(75, 46, 29, .28);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.bloque-nosotros .imagen img:hover {

    transform: translateY(-10px);

    box-shadow:
        0 28px 60px rgba(75, 46, 29, .38);
}


/* ==========================================
   CIERRE
========================================== */

.cierre {

    max-width: 900px;

    margin: 0 auto 70px auto;

    padding: 0 40px;

    text-align: center;
}

.cierre h2 {

    font-family: Georgia, serif;

    font-size: 2.6rem;

    color: #4B2E1D;

    margin-bottom: 35px;
}

.cierre p {

    font-family: "Segoe UI", sans-serif;

    font-size: 1.1rem;

    line-height: 2;

    color: #5b4537;

    margin-bottom: 22px;

    text-align: justify;
}


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

.contacto-nosotros {

    max-width: 1000px;

    margin: 0 auto;

    padding: 0 40px 100px;

    text-align: center;
}

.imagen-contacto img {

    width: 100%;

    max-width: 420px;

    border-radius: 22px;

    box-shadow:
        0 20px 45px rgba(75, 46, 29, .28);

    margin-bottom: 35px;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.imagen-contacto img:hover {

    transform: translateY(-10px);

    box-shadow:
        0 28px 60px rgba(75, 46, 29, .38);
}

.mensaje-contacto {

    max-width: 700px;

    margin: 0 auto 35px;

    font-size: 1.15rem;

    line-height: 1.9;

    color: #5b4537;
}


/* ==========================================
   BOTONES
========================================== */

.botones-contacto {

    display: flex;

    justify-content: center;

    gap: 25px;

    margin-bottom: 50px;

    flex-wrap: wrap;
}

.btn-ankana {

    background: #E4B14A;

    color: #4B2E1D;

    text-decoration: none;

    padding: 16px 36px;

    border-radius: 40px;

    font-weight: 700;

    box-shadow:
        0 12px 25px rgba(228, 177, 74, .40);

    transition: all .35s ease;
}

.btn-ankana:hover {

    transform: translateY(-4px);

    background: #4B2E1D;

    color: #E4B14A;

    box-shadow:
        0 18px 35px rgba(75, 46, 29, .35);
}


/* ==========================================
   ICONOS
========================================== */

.iconos-contacto {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;
}

.iconos-contacto img {

    width: 120px;

    height: 120px;

    object-fit: contain;

    transition:
        transform .3s ease,
        filter .3s ease;
}

.iconos-contacto img:hover {

    transform: scale(1.12);
}


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

@media (max-width: 900px) {

    .bloque-nosotros,
    .bloque-nosotros.invertido {

        flex-direction: column;

        text-align: center;

        gap: 35px;
    }

    .bloque-nosotros p {

        text-align: left;
    }

    .bloque-nosotros h2 {

        font-size: 1.8rem;
    }

    .cierre h2 {

        font-size: 2.1rem;
    }

    .bloque-nosotros .imagen img,
    .imagen-contacto img {

        max-width: 100%;
    }

    .iconos-contacto img {

        width: 65px;

        height: 65px;
    }
}