/* ===== VARIABLES GLOBALES (heredadas de index.css) ===== */
/* No es necesario redefinirlas aquí si index.css ya está cargado antes */

/* ===== ESTILOS ESPECÍFICOS PARA LA PÁGINA DE METODOLOGÍA ===== */

/* --- SECCIÓN DE DESGLOSE DE STEAM (2 columnas) --- */
.steam-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 2 columnas en pantallas medianas/grandes */
    gap: 2rem;
    margin: 2rem 0;
}

.steam-component {
    background-color: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease;
}

.steam-component:hover {
    transform: translateY(-5px);
}

.steam-component h4 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.steam-component p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-dark);
}

/* --- SECCIÓN DE "STEAM EN ACCIÓN" (4 columnas que abarcan el ancho) --- */
.feature-grid-horizontal-full-width {
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 15px)); /* 4 columnas que ocupan 1/4 del ancho cada una, menos el espacio del gap */
    gap: 20px;
    width: 100%;
    margin: 2rem 0;
}

.feature-card-full {
    background-color: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px; /* Altura mínima para consistencia */
}

.feature-card-full:hover {
    transform: translateY(-5px);
}

.feature-icon-full {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-card-full h4 {
    color: var(--color-primary);
    margin: 0.5rem 0;
}

.feature-card-full p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: var(--color-medium);
}

/* --- SECCIÓN DE "IMPACTO Y FUTURO" (ancho completo y centrado) --- */
.full-width-section {
    width: 100%; /* Asegura que ocupe el 100% del ancho del contenedor padre */
    max-width: 800px; /* Limita el ancho máximo del contenido */
    margin: 0 auto; /* Centra el contenido */
    padding: 2rem;
    background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%); /* Degradado azul claro */
    border-radius: var(--border-radius);
    text-align: center;
}

.full-width-section p,
.full-width-section ul {
    color: var(--color-dark);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.full-width-section ul {
    text-align: left; /* Alinear la lista a la izquierda dentro del contenedor centrado */
    max-width: 600px; /* Limitar ancho de la lista */
    margin: 1rem auto; /* Centrar la lista */
    padding-left: 1.5rem;
}

.full-width-section li {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- RESPONSIVE: En pantallas medianas y pequeñas --- */
@media (max-width: 1024px) {
    .feature-grid-horizontal-full-width {
        grid-template-columns: repeat(2, calc(50% - 10px)); /* 2 columnas en tablets */
        gap: 15px;
    }

    .feature-card-full {
        min-height: 220px; /* Ajustar altura en tablets */
        padding: 1.2rem; /* Ajustar padding */
    }

    .steam-breakdown {
        grid-template-columns: 1fr; /* 1 columna en móviles pequeños */
    }
}

@media (max-width: 768px) {
    .feature-grid-horizontal-full-width {
        grid-template-columns: 1fr; /* 1 columna en móviles */
        gap: 10px;
        padding: 0 5px; /* Reducir padding en móviles */
    }

    .feature-card-full {
        min-height: auto; /* Permitir que se ajuste al contenido en móviles */
        padding: 1.2rem; /* Ajustar padding */
    }

    .full-width-section {
        padding: 1.5rem; /* Reducir padding */
        margin: 0 1rem; /* Añadir margen lateral */
    }

    .full-width-section ul {
        padding-left: 1rem; /* Ajustar padding de la lista */
    }

    /* Ajustar encabezados si es necesario */
    .section-header h2 {
        font-size: 1.8rem;
    }

    .steam-component h4 {
        font-size: 1.3rem;
    }

    .feature-card-full h4 {
        font-size: 1.1rem;
    }

    .feature-card-full p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .feature-grid-horizontal-full-width {
        gap: 8px; /* Reducir espacio entre tarjetas */
    }

    .feature-card-full {
        padding: 1rem; /* Reducir padding */
        min-height: 200px; /* Ajustar altura mínima */
    }

    .feature-icon-full {
        font-size: 2rem; /* Reducir tamaño de icono */
    }

    .metodologia-header h1 {
        font-size: 1.8rem;
    }

    .introduccion-steam p {
        font-size: 1rem; /* Reducir tamaño de texto en móvil */
    }

    .full-width-section {
        padding: 1rem; /* Reducir más padding en móviles muy pequeños */
    }

    .full-width-section p {
        font-size: 0.95rem; /* Reducir tamaño de texto */
    }

    .full-width-section li {
        font-size: 0.9rem; /* Reducir tamaño de texto en lista */
    }
}