/**
 * nosotros.css
 * Estilos específicos para la página Nosotros
 * 
 * Estructura del documento:
 * 
 * 1. Historia Section
 *    - historia-section (contenedor principal)
 *      - historia-container (contenedor del contenido)
 *        - historia-content (grid 2 columnas)
 *          - historia-text (contenido textual)
 *          - historia-image (imagen)
 * 
 * 2. Quienes Somos Section
 *    - quienes-somos-section (contenedor principal)
 *      - historia-container (contenedor del contenido)
 *        - historia-content (grid 1 columna)
 *          - historia-image (imagen)
 *          - historia-text (contenido textual en columnas)
 * 
 * 3. Valores Section
 *    - valores-section (contenedor principal)
 *      - valores-grid (contenedor flex columna)
 *        - valores-intro (descripción)
 *        - valor-section (cada valor individual)
 *          - valor-content (grid 2 columnas)
 *            - valor-icon (icono)
 *            - valor-text (contenido textual)
 */

/* ==========================================================================
   1. Historia Section
   ========================================================================== */

.historia-section {
    background-color: var(--bg-hero);
    padding: clamp(3rem, 6vw, var(--spacing-3xl)) 0;
    position: relative;
    margin-bottom: var(--spacing-4xl);
}

/* ==========================================================================
   2. Quienes Somos Section
   ========================================================================== */

.quienes-somos-section {
    background-color: var(--bg-reason-1);
    padding: var(--spacing-3xl) 0;
    position: relative;
    margin-bottom: 0; /* Eliminamos el espacio extra */
}

/* Elementos decorativos comunes */
.historia-section,
.quienes-somos-section,
.valores-section {
    position: relative;
}

/* Elementos decorativos */
.historia-section::after,
.quienes-somos-section::before {
    content: '';
    position: absolute;
    width: 8rem;
    height: 8rem;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

/* Posición específica para cada sección */
.historia-section::after {
    bottom: -4rem;
    left: 10%;
    background-image: var(--decorative-top);
}

.quienes-somos-section::before {
    top: 0rem;
    left: 10%;
    background-image: var(--decorative-top);
}

/* Flor decorativa debajo de la imagen */
.quienes-somos-section .historia-image::after {
    content: '';
    position: absolute;
    width: 8rem;
    height: 8rem;
    bottom: -5.9rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--decorative-top) no-repeat center/contain;
    z-index: 1;
}

.historia-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Grid layout para Historia section */
.historia-section .historia-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

/* Grid layout para Quienes Somos section */
.quienes-somos-section .historia-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
}

/* Orden específico para Quienes Somos section */
.quienes-somos-section .historia-image {
    order: -1; /* Coloca la imagen antes del texto */
    position: relative;
    margin-bottom: 0; /* Eliminamos el espacio extra */
}

.historia-text {
    text-align: left;
}

.historia-text h2 {
    font-family: var(--font-secondary);
    font-size: clamp(2rem, 4vw, var(--text-4xl));
    color: var(--color-primary);
    margin-bottom: var(--spacing-xl);
}

.historia-text p {
    font-size: clamp(1rem, 2vw, var(--text-lg));
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

/* Columnas de texto para Quienes Somos */
.text-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.text-column {
    display: flex;
    flex-direction: column;
}

/* Ajustes específicos para cada columna */
.text-column:first-child p {
    margin-bottom: 0; /* Elimina el espacio entre párrafos de la primera columna */
}

.text-column:last-child {
    gap: var(--spacing-lg); /* Mantiene el espacio original en la segunda columna */
}

/* Ajustes responsive para las columnas */
@media (max-width: 768px) {
    .text-columns {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
}

.historia-image {
    position: relative;
    margin-bottom: var(--spacing-2xl);
}

.historia-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   3. Valores Section
   ========================================================================== */

.valores-section {
    position: relative;
    padding: 0;
}

.valores-header {
    background-color: var(--bg-packs);
    padding: var(--spacing-xl) 0;
    margin-bottom: 0;
}

.valores-section h2 {
    text-align: center;
    font-family: var(--font-secondary);
    font-size: clamp(2.5rem, 5vw, var(--text-5xl)); /* Aumentado el tamaño */
    color: var(--color-primary);
    margin-bottom: clamp(2rem, 4vw, var(--spacing-3xl));
    position: relative;
}

.valores-grid {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.valores-intro {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    text-align: center;
    position: relative;
}

.valores-intro p {
    font-size: clamp(1.2rem, 2vw, var(--text-xl));
    color: var(--text-primary);
    max-width: 70ch;
    margin: 0 auto;
    line-height: 1.6;
}

/* Subsecciones de Valores */
.valor-section {
    width: 100%;
    padding: var(--spacing-3xl) 0;
    position: relative;
    margin: 0;
}

/* Contenido del valor */
.valor-content {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr;
    gap: var(--spacing-6xl);
    align-items: center;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

/* Layout reverso para el contenido */
.valor-content.reverse {
    grid-template-columns: 2fr minmax(200px, 1fr);
}

.valor-content.reverse .valor-icon {
    width: 240px; /* Mantener consistencia con el tamaño base */
    height: 240px;
    order: 2;
    margin-left: auto;
}

.valor-content.reverse .valor-text {
    order: 1;
}

/* Estilos base para iconos */
.valor-icon {
    width: 240px; /* Aumentado de 200px a 240px */
    height: 240px; /* Aumentado de 200px a 240px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.valor-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.valor-text h3 {
    font-family: var(--font-secondary);
    font-size: clamp(2.5rem, 4vw, var(--text-4xl));
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

.valor-text p {
    font-size: clamp(1.2rem, 2vw, var(--text-xl));
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 55ch;
}

@media (max-width: 768px) {
    .valor-content,
    .valor-content.reverse {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-2xl);
    }

    .valor-icon,
    .valor-content.reverse .valor-icon {
        width: 180px; /* Aumentado de 140px a 180px */
        height: 180px; /* Aumentado de 140px a 180px */
        order: 1;
        margin: 0 auto;
    }

    .valor-text,
    .valor-content.reverse .valor-text {
        order: 2;
    }

    .valor-text p {
        margin: 0 auto;
    }
}

/* ==========================================================================
   4. Media Queries
   ========================================================================== */

/* Pantallas grandes (1024px y superiores) */
@media (max-width: 1200px) {
    .historia-container,
    .valores-intro,
    .valor-section {
        padding: 0 var(--spacing-xl);
    }
}

/* Tablets (768px - 1023px) */
@media (max-width: 1024px) {
    .historia-section .historia-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .historia-image {
        order: -1;
    }
}

/* Tablets pequeñas y móviles grandes (481px - 767px) */
@media (max-width: 768px) {
    .historia-container,
    .valores-intro,
    .valor-section {
        padding: 0 var(--spacing-md);
    }

    .historia-section,
    .quienes-somos-section {
        padding: var(--spacing-2xl) 0;
    }

    .valores-section {
        padding: 0;
    }

    .valor-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .valor-icon {
        margin: 0 auto;
    }
}

/* Móviles (480px y menos) */
@media (max-width: 480px) {
    .historia-section,
    .quienes-somos-section {
        padding: var(--spacing-xl) 0;
    }

    .valores-section {
        padding: 0;
    }

    .valor-icon {
        width: 200px; /* Aumentado de 160px a 200px */
        height: 200px; /* Aumentado de 160px a 200px */
    }

    .valor-text h3 {
        font-size: clamp(1.8rem, 3vw, var(--text-3xl));
    }

    .valor-text p {
        font-size: clamp(1rem, 2vw, var(--text-lg));
    }
}