/* Paleta de Colores:
    Verde Pastel: #B2EBF2 (Principal)
    Gris Suave: #546E7A (Texto/Bordes)
    Azul Pastel: #90CAF9 (Énfasis/Hover)
    Fondo: #F9F9F9 (Blanco muy suave)
*/



.header {
    margin-bottom: 40px;
}

.header h1 {
    color: #10393e; /* Verde Pastel para el título principal */
    font-size: 2.5em;
    margin-bottom: 5px;
}

.header p {
    font-size: 1.1em;
}

/* Diseño de la Cuadrícula de Herramientas */
.tools-grid {
    display: grid;
    /* 4 columnas en pantallas grandes, ajusta según necesidad */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px; /* Espacio entre las tarjetas */
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilo de cada Tarjeta/Enlace */
.tool-card {
    display: block; /* Para que el enlace ocupe toda la tarjeta */
    background-color: #e2e9e9;
    padding: 30px 20px;
    border-radius: 12px;
    text-decoration: none; /* Quitar el subrayado de los enlaces */
    color: #143624;
    border: 1px solid #ECEFF1; /* Borde muy sutil */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sombra suave */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Efecto Hover (al pasar el mouse) */
.tool-card:hover {
    transform: translateY(-5px); /* Pequeño levantamiento */
    box-shadow: 0 8px 15px rgba(144, 202, 249, 0.4); /* Sombra con el Azul Pastel */
    border-color: #90CAF9; /* Borde con Azul Pastel */
}

/* Estilo de los Íconos */
.tool-icon {
    display: block;
    font-size: 3em;
    margin-bottom: 15px;
    color: #B2EBF2; /* Íconos en Verde Pastel */
}

/* Estilo de los Títulos */
.tool-title {
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 5px;
    color: #546E7A; /* Gris Suave */
}

/* Estilo de las Descripciones */
.tool-desc {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Media Query para móviles: Mantiene 1 columna */
@media (max-width: 600px) {
    .tools-grid {
        grid-template-columns: 1fr;
    }
}