.recursos-titulo {
  color: #163d1e;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}

.recursos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Espacio entre los .recurso-item */
}

.recurso-item {
  box-sizing: border-box; /* Importante para que padding/border no afecten el cálculo del ancho */
  flex-grow: 1;
  flex-shrink: 1;
  /* Por defecto (escritorio): 3 columnas */
  flex-basis: calc(
    (100% - 40px) / 3
  ); /* (100% del contenedor - 2 gaps de 20px) / 3 items */

  /* Para que la tarjeta <a> (hijo) pueda estirarse y ocupar toda la altura si es necesario */
  display: flex;
  flex-direction: column;
}

.recurso-card {
  /* Estilos de la tarjeta <a> */
  display: flex; /* Para organizar el contenido INTERNO de la tarjeta (icono, info) */
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Centra el contenido si la tarjeta es más alta que su contenido */
  border: 1px solid #222d56;
  border-radius: 20px;
  padding: 20px 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease;

  width: 100%; /* La tarjeta ocupa todo el ancho de su padre .recurso-item */
  flex-grow: 1; /* Permite que la tarjeta se estire verticalmente para llenar .recurso-item */
  box-sizing: border-box; /* El padding y borde de la tarjeta se incluyen en su propio tamaño */
}

.recurso-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recurso-icono {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px; /* Espacio entre el icono y la sección de información */
}

.recurso-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 10px; /* Pequeño padding interno si es necesario */
  text-align: center; /* Centra el texto si el nombre es muy largo */
}

.recurso-icono-descarga {
  width: 20px;
  height: auto; /* Para mantener la proporción */
}

.recurso-nombre {
  color: #222d56;
  font-size: 14px;
  font-weight: 700;
}

/* Tablet: 2 columnas */
@media (max-width: 768px) {
  .recurso-item {
    flex-basis: calc(
      (100% - 20px) / 2
    ); /* (100% del contenedor - 1 gap de 20px) / 2 items */
  }
}

/* Móvil: 1 columna */
@media (max-width: 480px) {
  .recurso-item {
    flex-basis: 100%; /* Cada item ocupa todo el ancho */
  }
}

/* Regla para ocultar los <p> no deseados generados por WordPress */
.recurso-item p {
  display: none !important;
}