/*--------------------------------------------------------------
# Archivo: sobre-nosotros.css
# Estilos para la plantilla "Página Sobre Nosotros".
--------------------------------------------------------------*/

/* --- Hero Section --- */
.about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: calc(var(--spacing) * 3) 0;
    background-color: var(--color-subtle-bg);
    border-bottom: 1px solid var(--color-border);
}

.about-hero__image-wrapper {
    margin-bottom: var(--spacing);
}

.about-hero__image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-background);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.about-hero__content .page-title {
    font-family: var(--font-family-serif);
    font-size: 3rem;
    margin: 0 0 0.5rem 0;
}

.about-hero__content .page-subtitle {
    font-size: 1.25rem;
    color: #6B7280;
    max-width: 60ch;
    margin: 0 auto;
}

/* --- Misión y Valores --- */
.about-mission {
    padding: calc(var(--spacing) * 3) 0;
}

.about-mission__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing) * 2);
}

.about-mission__item h3 {
    font-size: 1.5rem;
    font-family: var(--font-family-serif);
    color: var(--color-primary);
    margin-top: 0;
}

.about-mission__item p {
    text-align: justify;
}

/* --- Nuestro Enfoque --- */
.about-approach {
    background-color: var(--color-dark-bg);
    color: var(--color-text-light);
    padding: calc(var(--spacing) * 3) 0;
    text-align: center;
}

.about-approach .section-title {
    color: var(--color-background);
    margin-bottom: calc(var(--spacing) * 2);
}

.about-approach__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing);
}

.about-approach__item {
    background-color: rgba(255, 255, 255, 0.05);
    padding: var(--spacing);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.about-approach__item svg {
    width: 48px;
    height: 48px;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.about-approach__item h3 {
    font-size: 1.25rem;
    color: var(--color-background);
    margin: 0 0 0.5rem 0;
}

.about-approach__item p {
    color: #A0AEC0;
    font-size: 0.95rem;
    margin: 0;
}

/* --- Compromiso y Confianza (E-E-A-T) --- */
.about-trust {
    padding: calc(var(--spacing) * 3) 0;
    background-color: var(--color-subtle-bg);
}

.about-trust__content {
    max-width: 80ch;
    margin: 0 auto;
    background-color: var(--color-background);
    padding: calc(var(--spacing) * 1.5);
    border-left: 5px solid var(--color-secondary);
    border-radius: 0 8px 8px 0;
}

.about-trust__content h3 {
    margin-top: 0;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .about-approach__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .about-mission__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing);
    }
    .about-hero__content .page-title {
        font-size: 2.2rem;
    }
}