/* ==========================================================================
   nosotros.css — Estilos exclusivos de paginas/nosotros.html.

   Los bloques siguen el orden visual de la página y todos los selectores
   arrancan por el ID de su sección.

   1. NARRATIVA        — #about_story
   2. DIFERENCIADORES  — #about_values

   El héroe (#about_hero), las cifras (#about_stats), los pasos
   (#about_process) y la cinta final (#about_cta) usan los componentes
   compartidos definidos en global.css.
   ========================================================================== */

/* ==========================================================================
   1. NARRATIVA — #about_story
   ========================================================================== */

#about_story {
    padding-block: var(--site-section-space);
    background-color: var(--site-surface);
}

/* 1.1 Contenedor y layout */

#about_story .about-story__shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
}

/* 1.2 Imagen */

#about_story .about-story__media {
    position: relative;
    border-radius: var(--site-radius-large);
    overflow: hidden;
    isolation: isolate;
}

#about_story .about-story__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    /* Sobredimensiona la imagen para dar recorrido al parallax. */
    scale: 1.12;
}

/* 1.3 Contenido */

#about_story .about-story__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--site-space-5);
}

/* 1.4 Títulos y textos */

#about_story .about-story__title {
    max-width: 22ch;
    color: var(--site-ink-900);
}

#about_story .about-story__text {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
    max-width: 60ch;
    color: var(--site-ink-700);
    font-size: 1.0625rem;
}

/* La primera línea del relato entra algo mayor, como entradilla. */
#about_story .about-story__text > p:first-child {
    color: var(--site-ink-900);
    font-size: 1.1875rem;
    font-weight: 500;
}

/* 1.5 Responsive de la narrativa */

@media (min-width: 900px) {
    #about_story .about-story__shell {
        grid-template-columns: 0.85fr 1.15fr;
        align-items: center;
    }
}

/* ==========================================================================
   2. DIFERENCIADORES — #about_values
   ========================================================================== */

#about_values {
    padding-block: var(--site-section-space);
    background-color: var(--site-paper);
}

/* 2.1 Contenedor y layout */

#about_values .about-values__shell {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 72px);
}

#about_values .about-values__intro {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
}

/* 2.2 Títulos */

#about_values .about-values__title {
    max-width: 24ch;
    color: var(--site-ink-900);
}

/* 2.3 Rejilla de tarjetas */

#about_values .about-values__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--site-space-5);
}

#about_values .about-values__card {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
    padding: clamp(28px, 3.5vw, 40px);
    border: 1px solid var(--site-line);
    border-radius: var(--site-radius-large);
    background-color: var(--site-surface);
    /* Contexto 3D para el efecto de inclinación con el ratón. */
    transform-style: preserve-3d;
    transition:
        border-color var(--site-duration-medium) var(--site-ease-out),
        box-shadow var(--site-duration-medium) var(--site-ease-out);
}

/* 2.4 Iconos */

#about_values .about-values__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: var(--site-radius-medium);
    background-color: var(--site-blue-50);
    color: var(--site-blue-500);
}

#about_values .about-values__card-icon svg {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

/* 2.5 Títulos y textos de la tarjeta */

#about_values .about-values__card-title {
    color: var(--site-ink-900);
}

#about_values .about-values__card-description {
    color: var(--site-ink-700);
    font-size: 0.9375rem;
}

/* 2.6 Estados */

#about_values .about-values__card:hover {
    border-color: var(--site-blue-500);
    box-shadow: var(--site-shadow-raised);
}

/* 2.7 Responsive de los diferenciadores */

@media (min-width: 768px) {
    #about_values .about-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    #about_values .about-values__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}