/* =======================
   QUIÉNES SOMOS
======================= */
/* =======================
   ANIMACION SCROLL - QUIENES SOMOS
======================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* CONTENEDOR */

.contenido {
    position: relative;
    margin: 0 auto 70px;
    max-width: 1100px;
    color: #0D2A4D;
}

/* =======================
   TITULO CON RECUADRO
======================= */

.contenido h1 {
    position: relative;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 50px;
    z-index: 1;
}

/* Recuadro gris detrás del título */

.contenido h1::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    max-width: 800%;
    height: 48px;
    background: #E0E0E0;
    z-index: -1;
}

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

.texto {
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 28px;
    text-align: justify;
    color: #1F4E79;
}

.texto strong {
    color: var(--naranja);
    font-weight: 600;
}

/* =======================
   DESTACADO FINAL
======================= */

.destacado {
    margin-top: 50px;
    padding: 20px;
    text-align: center;
    border-top: 2px solid var(--naranja);
    font-size: 18px;
    font-weight: 600;
    color: #0D2A4D;
}

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

@media (max-width: 768px) {
    .contenido h1 {
        font-size: 34px;
    }

    .contenido h1::before {
        width: 90%;
        height: 42px;
    }

    .texto {
        text-align: left;
    }
}