/* =====================================================
   HOME – BLOQUE SOBRE NOSOTROS (PREMIUM REFINADO)
   Estudio jurídico · Elegante · Editorial
===================================================== */
/* -----------------------------------------------------
   TIPOGRAFÍA BASE – LANDING LEGAL
----------------------------------------------------- */

.landing-section {
    font-family: "Quattrocento", serif;
}

.landing-section h1,
.landing-section h2,
.landing-section h3 {
    font-family: "Cinzel", serif;
}
/* =====================================================
   SECCIÓN GENERAL (FONDO CON PROFUNDIDAD + PARALLAX)
===================================================== */
.home-sobrenosotros {
    position: relative;
    padding: 150px 20px;

    background-image:
        radial-gradient(
            circle at 30% 20%,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            rgba(0, 0, 0, 0.15) 100%
        ),
        linear-gradient(
            180deg,
            rgba(21, 60, 100, 0.65) 0%,
            rgba(21, 60, 100, 0.45) 60%,
            rgba(21, 60, 100, 0.65) 100%
        ),
        url('/img/inicio/sobre-nosotros.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Parallax solo desktop */
@media (min-width: 769px) {
    .home-sobrenosotros {
        background-attachment: fixed;
    }
}

/* =====================================================
   CARD PRINCIPAL (PAPEL PREMIUM / LUZ EDITORIAL)
===================================================== */
.sobrenosotros-card {
    max-width: 1120px;
    margin: 0 auto;
    padding: 80px 76px;
    border-radius: 36px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 55%,
            #eef3f9 100%
        );

    box-shadow:
        0 60px 120px rgba(21, 60, 100, 0.28),
        0 12px 30px rgba(21, 60, 100, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    box-sizing: border-box;
    position: relative;
}

/* =====================================================
   GRID INTERNO
===================================================== */
.sobrenosotros-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 70px;
    align-items: center;
}

/* =====================================================
   COLUMNA IMAGEN (SIN MODIFICAR IMAGEN)
===================================================== */
.sobrenosotros-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 26px;

    box-shadow:
        0 35px 70px rgba(21, 60, 100, 0.35),
        0 8px 18px rgba(21, 60, 100, 0.18);

    transition: transform 0.6s ease;
}

@media (min-width: 769px) {
    .sobrenosotros-image img:hover {
        transform: scale(1.015);
    }
}

/* =====================================================
   COLUMNA TEXTO – JERARQUÍA EDITORIAL
===================================================== */
.sobrenosotros-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: #153c64;
    letter-spacing: 0.6px;
    margin-bottom: 18px;
}

.sobrenosotros-subtitle {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #153c64;
    opacity: 0.7;
    margin-bottom: 28px;
}

.sobrenosotros-content p {
    font-size: 15px;
    line-height: 1.9;
    color: #153c64;
    opacity: 0.85;
    margin-bottom: 20px;
}

/* =====================================================
   LISTA DE BENEFICIOS – LIMPIA Y SÓLIDA
===================================================== */
.sobrenosotros-list {
    margin: 26px 0 8px;
    padding: 0;
    list-style: none;
}

.sobrenosotros-list li {
    font-size: 14px;
    color: #153c64;
    margin-bottom: 14px;
    padding-left: 32px;
    position: relative;
}

.sobrenosotros-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #153c64;
    font-weight: 700;
}

/* =====================================================
   CTA – SOBRIO, CON PRESENCIA
===================================================== */
.sobrenosotros-cta {
    display: inline-block;
    margin-top: 34px;
    padding: 14px 40px;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #153c64 0%,
            #1e4f82 100%
        );

    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-decoration: none;

    box-shadow:
        0 12px 26px rgba(21, 60, 100, 0.35);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.sobrenosotros-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 18px 40px rgba(21, 60, 100, 0.45);
}

/* =====================================================
   RESPONSIVE – MOBILE (MISMA ELEGANCIA)
===================================================== */
@media (max-width: 768px) {

    .home-sobrenosotros {
        padding: 100px 14px;
        background-attachment: scroll;
    }

    .sobrenosotros-card {
        padding: 44px 26px;
        border-radius: 26px;
    }

    .sobrenosotros-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .sobrenosotros-content h2 {
        font-size: 28px;
        text-align: center;
    }

    .sobrenosotros-subtitle,
    .sobrenosotros-content p {
        text-align: center;
    }

    .sobrenosotros-list {
        max-width: 420px;
        margin: 30px auto;
    }

    .sobrenosotros-cta {
        display: block;
        margin: 34px auto 0;
        text-align: center;
    }
}