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

.hero-nosotros{
    height:420px;
    margin-bottom:100px;
}

.hero-nosotros .hero-overlay{
    background:linear-gradient(
        rgba(0,0,0,.18),
        rgba(0,0,0,.25)
    );
}

.hero-nosotros .hero-content{
    left:80px;
    bottom:80px;
    max-width:700px;
}


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

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

@media (max-width: 991px) {

    .about-hero {
        height: 500px;
        margin-bottom: 80px;
    }

    .about-hero-content {
        left: 40px;
        right: 40px;
        bottom: 40px;
    }

    .about-hero-content h1 {
        font-size: 54px;
    }

    .about-story-grid,
    .about-values-grid,
    .about-gallery-grid {
        grid-template-columns: 1fr;
    }

    .about-gallery-small {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .about-cta {
        padding: 60px 40px;
    }

    .about-cta h2 {
        font-size: 44px;
    }
}

@media (max-width: 767px) {

    .about-hero {
        height: 360px;
        border-radius: 20px;
        margin-bottom: 60px;
    }

    .about-hero-content {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .about-hero-content h1 {
        font-size: 40px;
        margin-bottom: 12px;
        letter-spacing: -1px;
    }

    .about-hero-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .about-story,
    .about-values,
    .about-gallery,
    .about-cta {
        margin-bottom: 60px;
    }

    .about-story h2,
    .about-cta h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .about-story-text p,
    .about-value-card p,
    .about-cta p {
        font-size: 16px;
        line-height: 1.8;
    }

    .about-value-card {
        padding: 28px;
    }

    .about-gallery-small {
        grid-template-columns: 1fr;
    }

    .about-cta {
        padding: 42px 24px;
        border-radius: 24px;
    }
}