/* ESTILOS INDEPENDIENTES PARA LA SECCIÓN DE CURSOS */
/* Técnica N°2 "Dr. René Favaloro" */

/* Importar Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/* Configuración base */
body {
  font-family: "Inter", sans-serif;
}

/* Sección principal */
.section.layout_padding {
  padding: 80px 0;
  background-color: #ffffff;
}

/* Título principal "Cursos" */
.cursos.text_align_center h2 {
  color: #0d668a;
  font-weight: 700;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

/* Línea decorativa bajo "Cursos" */
.cursos.text_align_center h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  background: linear-gradient(
    to right,
    #4caf50 0%,
    #4caf50 25%,
    #042149 25%,
    #042149 100%
  );
  margin: 1rem auto;
  border-radius: 2px;
}

/* Tarjetas de cursos */
.full.blog_img_popular {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-bottom: 2rem;
  border: 1px solid #e5e7eb;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.full.blog_img_popular:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Estado activo de las tarjetas */
.full.blog_img_popular.active {
  background: linear-gradient(135deg, #4caf50 0%, #4caf50 100%);
  color: white;
}

/* Imágenes dentro de las tarjetas */
.blog_img_popular .img-responsive {
  width: 230px !important;
  height: 230px !important;
  object-fit: cover; /* mantiene proporciones recortando */
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

/* Títulos de los ciclos */
.blog_img_popular h4.ciclo {
  color: #0d668a;
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
}

.blog_img_popular.active h4.ciclo {
  color: white;
}

/* Textos descriptivos */
#texto_ciclo_basico,
#texto_ciclo_superior,
#texto_septimo_año {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  margin: 2rem 0;
  line-height: 1.7;
  color: #374151;
  font-size: 1rem;
  display: none; /* Oculto por defecto */
}

#texto_ciclo_basico.active,
#texto_ciclo_superior.active,
#texto_septimo_año.active {
  display: block;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spans destacados en los textos */
#texto_ciclo_basico span,
#texto_ciclo_superior span,
#texto_septimo_año span {
  color: #4caf50;
  font-weight: 600;
}

/* Enlaces en los textos */
#texto_ciclo_basico a,
#texto_ciclo_superior a,
#texto_septimo_año a {
  color: #4caf50;
  text-decoration: none;
  font-weight: 500;
}

#texto_ciclo_basico a:hover,
#texto_ciclo_superior a:hover,
#texto_septimo_año a:hover {
  color: #059669;
  text-decoration: underline;
}

/* Estilos responsivos */
@media (max-width: 991.98px) {
  .section.layout_padding {
    padding: 60px 0;
  }
  .heading_main.text_align_center h2 {
    font-size: 2.5rem;
  }
  .full.blog_img_popular {
    height: 250px;
  }
}

@media (max-width: 767.98px) {
  .heading_main.text_align_center h2 {
    font-size: 2rem;
  }
  .full.blog_img_popular {
    padding: 1.5rem;
    height: 400px;
  }
  #texto_ciclo_basico,
  #texto_ciclo_superior,
  #texto_septimo_año {
    padding: 1.5rem;
  }
}

/* Utilidades adicionales */
.text_align_center {
  text-align: center;
}

.img-responsive {
  max-width: 100%;
  height: auto;
}
/*imagenes*/
.img-pequena {
  width: 100px !important;
  height: 100px !important;
}