section.recursos {
      background-color: #FFFFFF;
      padding: 60px 20px;

    }

    section.recursos h2 {
      text-align: center;
      font-size: 32px;
      margin-bottom: 40px;
      color:black;
    }

    .contenedor-recursos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      max-width: 1200px;
      margin: auto;
    }

    .recurso {
      background-color: #DFFFED;
      color: black;
      border: solid 1px  #2ecc71;
      border-radius: 10px;
      padding: 30px 20px;
      flex: 1 1 300px;
      max-width: 360px;
      text-align: center;
    }
    .recurso h3 {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .recurso p {
      font-size: 16px;
      /*line-height: 1.5;*/
    }

    .btn-dinamicoR{
      background-color: #FFFFFF;
      color:black; 
      border: solid 1px  #2ecc71;
      border-radius: 30px;
      min-width: 100px;
      text-decoration:none;
      text-align: center;

    }
    .btn-dinamicoR:hover {
      background-color: #2ecc71 !important;
      color:white !important;
      text-decoration: none;
      cursor: pointer;
    }

    /*Testimonios */
    .testimonio {
      padding: 32px 0;
    }
    /* Foto del autor */
    .testimonio-autor {
      flex: 0 1 20%; /* 20% para la primera celda */
      text-align: center;
    }

    .testimonio-autor-img img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 50%;
    }

    .testimonio-author-nombre {
      margin-top: 1rem;
      font-size: 1.2rem;
    }

    /* Mensaje del testimonio */
    .testimonio-cita {
      flex: 1 1 50%; /* 50% para la segunda celda */
      font-size: 1.1rem;
      margin-left: 1rem;
      text-align: left;
    }

    /* Botón */
    .testimonio-button {
      flex: 0 1 30%; /* 30% para la tercera celda */
      justify-content: center;
      text-align: center;
      margin-top: 2rem;
    }

    .testimonio-button a {
      text-decoration: none;
      background-color: #2a60ba;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
    }
    .testimonio-button a:hover {
      text-decoration: none;
      background-color: #f7fa51;
      color:#032154;
      padding: 10px 20px;
      border-radius: 5px;
    }

    /**BLOG */
    .card {
      min-height: 200px; 
    }

    .card img {
      object-fit: cover;
      height: 200px;
    }

    .card-body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

.border-testimonio {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 4px solid #032154;
}
.testimonio-mensaje {
  font-style: italic;
  padding: 15px;
  border-radius: 8px;
  background-color: rgb(3, 33, 84, 0.4);
  color: white;
}



@media (max-width: 767px) { 
  .recurso {
    flex: 1 1 100%;
    padding: 20px;
    margin-bottom: 20px;
  }

  /* Ajustar el tamaño de las fuentes */
  .recurso h3 {
    font-size: 1.2rem;
  }

  .recurso p {
    font-size: 0.9rem;
  }

  .recurso img {
    max-width: 100%;
    height: auto;
  }

  /* Resources */
  .row {
    flex-direction: column;
  }

  .col {
    width: 100%;
    margin-bottom: 20px;
  }

  /* Ajustar botones */
  .btn-dinamicoR {
    width: 20%;
    padding: 10px 15px;
    text-align: center;
  }

  /* Ajustar las tarjetas de blog */
  .card-body {
    padding: 10px;
    text-align: center;
  }

  .card-title {
    font-size: 1.2rem;
  }
}
/* =========================================
   EFECTOS DINÁMICOS (Microinteracciones)
   ========================================= */

/* 1. Cajas que sobresalen (Sección de celulares, Blogs y Webinars) */
.card-programa, 
.blog-section .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-programa:hover, 
.blog-section .card:hover {
  transform: translateY(-10px); /* Levanta la tarjeta 10px */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important; /* Sombra más profunda */
  cursor: pointer;
}

/* 2. Íconos dinámicos (Para la primera sección superior) */
.icono-dinamico {
  transition: transform 0.3s ease;
}

.icono-dinamico:hover {
  transform: scale(1.08); /* Crece un 8% al pasar el mouse */
}

/* 3. Actualización de tus botones existentes para darles movimiento */
.btn-dinamicoR, 
.testimonio-button a {
  transition: all 0.2s ease-in-out;
  display: inline-block; /* Necesario para que el transform funcione correctamente en enlaces */
}

.btn-dinamicoR:hover, 
.testimonio-button a:hover {
  transform: scale(1.05); /* Crece ligeramente */
}

/* Efecto al hacer clic en los botones (se hunden) */
.btn-dinamicoR:active, 
.testimonio-button a:active {
  transform: scale(0.95);
}