/* Estilos específicos de la página Cursos | Almasol Industrial */

/* Fondo general para que no se vea la página blanca */
body {
  background-color: #F4F6F8; /* corp-light */
}

.app-wrapper {
  background-color: #F4F6F8;
}

/* Zona de cards con tono suave para dar profundidad */
.cursos-cards {
  background-color: #E8EAED !important; /* corp-gray, más suave que blanco */
}

/* Grid de cards y cards anchas (Aprendizaje Permanente, Habilidades de Liderazgo) al margen derecho */
.cursos-cards .grid {
  display: grid;
  gap: 1.5rem;
}

/* Card 5 (Habilidades de Liderazgo): 100% del ancho de la sección, una sola columna en su fila */
.cursos-card-full {
  grid-column: 1 / -1;
  min-height: 11rem;
}

.cursos-card-full > div {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .cursos-card-full > div {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .cursos-cards .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .cursos-card-wide {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .cursos-cards .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .cursos-card-wide {
    grid-column: span 2;
  }
}

/* Colores corporativos (por si Tailwind no los aplica) */
:root {
  --corp-dark: #0F2B46;
  --corp-teal: #1E6F7A;
  --corp-orange: #F28C28;
  --corp-light: #F4F6F8;
  --corp-gray: #E8EAED;
}

.cursos-cards .rounded-2xl {
  box-shadow: 0 1px 3px rgba(15, 43, 70, 0.06);
  border-color: var(--corp-gray) !important;
}

/* Número de card: teal */
.cursos-num-teal {
  background-color: rgba(30, 111, 122, 0.15) !important;
  color: #1E6F7A !important;
}

/* Número de card: naranja */
.cursos-num-orange {
  background-color: rgba(242, 140, 40, 0.15) !important;
  color: #F28C28 !important;
}

/* Número de card: azul oscuro */
.cursos-num-dark {
  background-color: #0F2B46 !important;
  color: #fff !important;
}

/* Títulos de las cards */
.cursos-cards h2 {
  color: #0F2B46 !important;
}

/* Sección CTA y navbar */
.cursos-cta-section {
  background-color: #F4F6F8 !important;
}

#navbar {
  border-bottom-color: #E8EAED !important;
}

/* Footer */
body .app-wrapper footer {
  background-color: #0F2B46 !important;
}

/* Hero: texto azul con líneas a los lados (como index “NUESTROS PROGRAMAS”) */
.cursos-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #0F2B46;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.cursos-hero-label-line {
  display: inline-block;
  width: 2rem;
  height: 1px;
  background-color: #0F2B46;
  flex-shrink: 0;
}

/* CTA "Solicitar propuesta": mismo estilo que index.html (naranja, hover más oscuro) */
#nav-cta,
a[href*="#contacto"].bg-corp-orange {
  background-color: #F28C28 !important; /* corp-orange */
  color: #fff !important;
}

#nav-cta:hover,
a[href*="#contacto"].bg-corp-orange:hover {
  background-color: #d97a1f !important; /* naranja más oscuro en hover */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}