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

.hero-sobre-nosotros {
    background-image: url("../img/nosotros/1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    margin-top: 4.6rem;
}

.hero-sobre-capa {
    min-height: 23rem;

    background-color: rgba(0, 0, 0, 0.35);

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

.hero-sobre-contenido {
    width: 90%;
    max-width: 42rem;

    text-align: center;
}

.hero-sobre-titulo {
    color: var(--blanco);

    font-size: var(--titulo-hero);
    line-height: 1.1;

    margin-bottom: 0.8rem;
}

.hero-sobre-texto {
    color: var(--blanco);

    font-size: var(--texto-hero);
    line-height: 1.4;

    margin-bottom: 1.5rem;
}

.boton-hero-sobre {
    display: inline-block;

    padding: 0.7rem 2.8rem;

    background-color: var(--rosa-principal);
    color: var(--blanco);

    border-radius: var(--radio-boton);

    font-size: 1rem;
    font-weight: var(--peso-medio);

    transition: var(--transicion-suave);
}

.boton-hero-sobre:hover {
    transform: translateY(-0.2rem);
    filter: brightness(0.9);
}

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

.seccion-historia {
    padding: 5rem 0 4rem;
}

.historia-contenido {
    max-width: 55rem;
}

.historia-encabezado {
    text-align: center;

    margin-bottom: 2rem;
}

.historia-titulo {
    color: var(--naranja-principal);

    font-size: var(--titulo-seccion);
    line-height: 1.2;

    margin-bottom: 0.8rem;
}

.linea-historia {
    width: 16rem;
    height: 0.15rem;

    background-color: var(--naranja-principal);

    margin: 0 auto;
}

.historia-textos {
    max-width: 48rem;

    margin: 0 auto;

    text-align: justify;
}

.historia-textos p {
    font-size: var(--texto-seccion);
    line-height: 1.45;

    margin-bottom: 0.4rem;
}

.historia-servicios {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 2.5rem 4rem;

    max-width: 42rem;

    margin: 3rem auto;
}

.historia-servicio {
    width: 8rem;

    text-align: center;
}

.historia-servicio img {
    width: 4.5rem;
    height: 4.5rem;

    object-fit: contain;

    margin: 0 auto 0.8rem;
}

.historia-servicio p {
    font-size: 0.85rem;
    line-height: 1.25;
}

.historia-textos-final {
    margin-top: 1rem;
}

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

.seccion-identidad {
    padding: 4rem 0 5rem;
}

.identidad-contenido {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7rem;
}

.identidad-imagen-contenedor {
    width: 32rem;
}

.identidad-imagen {
    width: 100%;
    height: 35rem;

    object-fit: cover;

    border-radius: var(--radio-imagen);
}

.identidad-informacion {
    width: 28rem;
}

.identidad-bloque {
    margin-bottom: 3rem;
}

.identidad-bloque:last-child {
    margin-bottom: 0;
}

.identidad-titulo {
    color: var(--turquesa-principal);

    font-size: var(--titulo-seccion);
    line-height: 1.2;

    margin-bottom: 0.8rem;
}

.linea-identidad {
    width: 16rem;
    height: 0.15rem;

    background-color: var(--turquesa-principal);

    margin-bottom: 1.6rem;
}

.identidad-texto {
    font-size: var(--texto-seccion);
    line-height: 1.5;
}

/* ===============================
        CONTENEDOR DE GALERÍA
================================ */

.galeria-contenedor {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;
}

/* VENTANA DEL CARRUSEL */

.galeria-ventana {
    width: 100%;

    overflow: hidden;
}

/* FILA DE IMÁGENES */

.galeria-carrusel {
    display: flex;

    width: 100%;

    transition: transform 0.5s ease;
    will-change: transform;
}

/* IMÁGENES */

.galeria-imagen {
    width: calc(100% / 3);
    min-width: calc(100% / 3);

    height: 28rem;

    object-fit: cover;

    flex-shrink: 0;

    display: block;
}

/* BOTONES */

.boton-galeria {
    position: absolute;
    top: 50%;

    z-index: 10;

    width: 3.5rem;
    height: 4.5rem;

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

    transform: translateY(-50%);

    border: none;
    background: transparent;

    color: var(--rosa-principal);

    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1;

    cursor: pointer;

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

.boton-galeria:hover {
    transform: translateY(-50%) scale(1.1);
}

.boton-galeria:active {
    transform: translateY(-50%) scale(0.95);
}

.boton-galeria-izquierda {
    left: 0.6rem;
}

.boton-galeria-derecha {
    right: 0.6rem;
}

/* BOTÓN DESACTIVADO */

.boton-galeria:disabled {
    opacity: 0.35;
    cursor: default;
}

.boton-galeria:disabled:hover {
    transform: translateY(-50%);
}

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

@media (max-width: 768px) {

    .galeria-imagen {
        width: 50%;
        min-width: 50%;

        height: 23rem;
    }

    .boton-galeria {
        font-size: 3rem;
    }

}

@media (max-width: 480px) {

    .galeria-imagen {
        width: 100%;
        min-width: 100%;

        height: 20rem;
    }

    .boton-galeria {
        width: 2.5rem;
        height: 3.5rem;

        font-size: 2.5rem;
    }

    .boton-galeria-izquierda {
        left: 0.2rem;
    }

    .boton-galeria-derecha {
        right: 0.2rem;
    }

}

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

/* ==================================
        TABLET GRANDE
================================== */

@media (max-width: 992px) {

    .identidad-contenido {
        gap: 4rem;
    }

    .identidad-imagen-contenedor {
        width: 28rem;
    }

    .identidad-informacion {
        width: 25rem;
    }

}

/* ==================================
        TABLET Y MÓVIL
================================== */

@media (max-width: 768px) {

    .hero-sobre-capa {
        min-height: 28rem;
    }

    .hero-sobre-titulo {
        font-size: var(--titulo-hero-tablet);
    }

    .hero-sobre-texto {
        font-size: var(--texto-hero-tablet);
    }

    .historia-titulo,
    .identidad-titulo,
    .galeria-titulo {
        font-size: var(--titulo-seccion-tablet);
    }

    .historia-textos p,
    .identidad-texto,
    .galeria-texto {
        font-size: var(--texto-seccion-tablet);
    }

    .historia-textos {
        text-align: left;
    }

    .identidad-contenido {
        flex-direction: column;

        gap: 3rem;
    }

    .identidad-imagen-contenedor,
    .identidad-informacion {
        width: 100%;
        max-width: 32rem;
    }

    .identidad-imagen {
        height: 32rem;
    }

    .identidad-titulo {
        text-align: center;
    }

    .linea-identidad {
        margin-left: auto;
        margin-right: auto;
    }

    .identidad-texto {
        text-align: center;
    }

    .galeria-imagen {
        width: 100%;
        height: 24rem;
    }

}

/* ==================================
        MÓVIL PEQUEÑO
================================== */

@media (max-width: 480px) {

    .hero-sobre-capa {
        min-height: 24rem;
    }

    .hero-sobre-titulo {
        font-size: var(--titulo-hero-movil);
    }

    .hero-sobre-texto {
        font-size: var(--texto-hero-movil);
    }

    .boton-hero-sobre {
        width: 100%;

        text-align: center;
    }

    .seccion-historia {
        padding: 4rem 0 3rem;
    }

    .historia-titulo,
    .identidad-titulo,
    .galeria-titulo {
        font-size: var(--titulo-seccion-movil);
    }

    .historia-textos p,
    .identidad-texto,
    .galeria-texto {
        font-size: var(--texto-seccion-movil);
    }

    .linea-historia,
    .linea-identidad,
    .linea-galeria {
        width: 12rem;
    }

    .historia-servicios {
        gap: 2rem;

        margin: 2.5rem auto;
    }

    .historia-servicio {
        width: 7rem;
    }

    .historia-servicio img {
        width: 4rem;
        height: 4rem;
    }

    .identidad-imagen {
        height: 25rem;
    }

    .galeria-imagen {
        height: 19rem;
    }

    .boton-galeria {
        font-size: 2.4rem;
    }

}