/* assets/css/quienes_somos.css */

/* ===== MAIN CONTENT ===== */
#quienes-somos {
    background: var(--color-crema);
}

/* ===== COMPANY STORY ===== */
.company-story {
    margin-bottom: var(--bloque-y);
}

.story-content {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.75rem);
}

.story-text {
    flex: 1;
}

.section-title {
    font-size: var(--titulo-lg);
    color: var(--color-verde-oscuro);
    margin-bottom: var(--esp-3);
    font-family: 'Anton', sans-serif;
    position: relative;
    letter-spacing: 0.5px;
    text-align: left;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 56px;
    height: 3px;
    background: var(--color-verde);
    border-radius: 2px;
}

/* El divisor sigue la alineación del título: sin esto quedaba pegado a la
   izquierda debajo de un título centrado (caso "Nuestros Valores"). */
.section-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.story-description {
    font-size: var(--texto-md);
    line-height: 1.75;
    color: var(--color-negro);
    margin-bottom: var(--esp-3);
    max-width: var(--medida);
    text-align: left;
}

.story-image {
    flex: 1;
    text-align: center;
}

.story-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radio-img);
    box-shadow: var(--sombra-card-alta);
}

/* ===== MISSION & VISION SECTION ===== */
.mision-vision-section {
    margin: var(--bloque-y) 0;
}

/* Misión y Visión son las tarjetas jerárquicamente más altas de la sección:
   llevan elevación y la barra verde superior. */
.mission-card,
.vision-card {
    background: #fff;
    padding: var(--esp-4) var(--esp-3) var(--esp-3);
    border-radius: var(--radio-card);
    box-shadow: var(--sombra-card-alta);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.mission-card::before,
.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-verde);
}

.mission-card:hover,
.vision-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(31, 41, 25, 0.14);
}

.card-icon {
    width: 64px;
    height: 64px;
    background: var(--color-verde-oscuro);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--esp-3);
}

.card-icon i {
    font-size: 1.6rem;
    color: #fff;
}

.mission-card h3,
.vision-card h3 {
    font-size: var(--titulo-md);
    color: var(--color-verde-oscuro);
    margin-bottom: var(--esp-2);
}

.mission-card p,
.vision-card p {
    font-size: var(--texto-base);
    line-height: 1.7;
    color: var(--color-negro);
    text-align: left;
    max-width: none;
    margin-bottom: 0;
}

/* ===== VALUES SECTION ===== */
.values-section {
    margin: var(--bloque-y) 0;
}

.values-section .section-title {
    margin-bottom: var(--esp-5);
}

/* Los valores son apoyo, no protagonistas: filete en vez de sombra fuerte,
   así no compiten con Misión/Visión. */
.value-card {
    background: #fff;
    padding: var(--esp-4) var(--esp-3);
    border-radius: var(--radio-card);
    border: 1px solid var(--color-borde);
    box-shadow: var(--sombra-card);
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease;
    height: 100%;
}

.value-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-verde);
}

.value-icon {
    width: 56px;
    height: 56px;
    background: var(--color-verde-oscuro);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--esp-2);
}

.value-icon i {
    font-size: 1.4rem;
    color: #fff;
}

.value-card h4 {
    font-size: var(--titulo-sm);
    color: var(--color-verde-oscuro);
    margin-bottom: var(--esp-1);
}

.value-card p {
    font-size: var(--texto-sm);
    line-height: 1.6;
    color: var(--color-negro);
    max-width: none;
    margin-bottom: 0;
}

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

/* Tablets */
@media (max-width: 991.98px) {
    .story-content {
        flex-direction: column;
        gap: var(--esp-4);
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .section-title {
        text-align: center;
    }

    .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Los párrafos siguen alineados a la izquierda: centrar 5 o 6 líneas
       obliga al ojo a buscar el arranque de cada renglón. */
    .story-description {
        text-align: left;
    }

    .mission-card,
    .vision-card {
        margin-bottom: var(--esp-3);
    }

    .value-card {
        margin-bottom: var(--esp-2);
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .mission-card,
    .vision-card,
    .value-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}