.header {
    position: relative;
    height: 100vh;
    min-height: 600px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ❌ ELIMINA O COMENTA ESTA REGLA - Ya no es necesaria porque el gradiente viene del backend */
/*
.header.has-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 161, 185, 0.5);
    z-index: 1;
}
*/

.header-content {
    position: relative;
    z-index: 2;
    animation: aparecer 1s ease-out forwards;
    opacity: 0;
}

.header-title {
    margin: 0;
    font-size: 4rem;
    font-weight: bold;
    color: white;
    letter-spacing: 1px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.line {
    margin: 30px auto 0;
    width: 200px;
    height: 4px;
    background: #095f5f;
    border-radius: 3px;
}

/* Animación aparecer */
@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.capacitacion {
  width: 100%;
}

.capacitacion-texto p {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}

.capacitacion-texto1 p {
  font-size: 18px;
  text-align: justify;
  line-height: 1.8;
}

.capacitacion-texto2 h3 {
  font-size: 22px;
  text-align: center;
  color: #095f5f;
  font-weight: bold;
}

/* Estructura base */
.tarjetas-a {
  text-align: center;
}

/* Herencia para íconos y textos */
.contenedor-a i,
.contenedor-t h3,
.contenedor-t .num,
.contenedor-t .texto {
  color: inherit;
}

/* Fondo blanco con estilo institucional */
.bg-white-especial {
  background-color: #fff !important;
  color: #008b8b !important;
  border: 2px solid #008b8b;
}

.bg-white-especial i,
.bg-white-especial .num,
.bg-white-especial h3,
.bg-white-especial .texto {
  color: #008b8b !important;
}

/* 🌟 Tarjetas públicas de capacitación */
.tarjetas-a {
  text-align: center;
}

/* 🧱 Tarjeta visual */
.contenedor-a {
  width: 100%;
  max-width: 320px;
  height: 320px;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 139, 139, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  margin: auto;
  color: inherit;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

/* ✨ Animación suave */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
    }
}

.contenedor-a:hover {
  transform: scale(1.05);
}

/* 🎯 Elementos internos */
.contenedor-a i {
  font-size: 4rem;
  margin-bottom: 12px;
  color: inherit;
}

.contenedor-t h3 {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 6px;
  color: inherit;
}

.contenedor-t .texto {
  font-size: 1.3rem;
  font-weight: 500;
  opacity: 0.95;
  color: inherit;
}

/* 📱 Responsive */
@media (max-width: 768px) {
  .contenedor-a {
    height: auto;
    padding: 20px;
  }

  .contenedor-a i {
    font-size: 3rem;
  }

  .contenedor-t h3 {
    font-size: 2.2rem;
  }

  .contenedor-t .texto {
    font-size: 1.1rem;
  }
}

/* 🎨 Fondos personalizados */
.contenedor-gradiente-personalizado,
.contenedor-color-personalizado {
  color: #fff !important;
}

.contenedor-gradiente-personalizado i,
.contenedor-gradiente-personalizado h3,
.contenedor-gradiente-personalizado .texto,
.contenedor-color-personalizado i,
.contenedor-color-personalizado h3,
.contenedor-color-personalizado .texto {
  color: inherit !important;
}

/* 🧼 Fondo blanco institucional */
.bg-white-especial {
  background-color: #fff !important;
  color: #008b8b !important;
  border: 2px solid #008b8b;
  box-shadow: 0 0 6px rgba(0, 139, 139, 0.2);
}

.bg-white-especial i,
.bg-white-especial h3,
.bg-white-especial .texto {
  color: #008b8b !important;
}

/* 🎨 Fondos sólidos */
.bg-primary {
  background-color: #0d6efd !important;
  color: #fff !important;
}

.bg-success {
  background-color: #198754 !important;
  color: #fff !important;
}

.bg-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
}

.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

.bg-white {
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #dee2e6;
}

/* 🌈 Gradientes vivos */
.bg-gradient-vivo-azul {
  background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
  color: #fff !important;
}

.bg-gradient-vivo-verde {
  background: linear-gradient(135deg, #00ff99, #00cc66) !important;
  color: #fff !important;
}

.bg-gradient-vivo-rojo {
  background: linear-gradient(135deg, #ff4e50, #f9d423) !important;
  color: #fff !important;
}

.bg-gradient-vivo-morado {
  background: linear-gradient(135deg, #a18cd1, #fbc2eb) !important;
  color: #fff !important;
}

.bg-gradient-vivo-naranja {
  background: linear-gradient(135deg, #ffb347, #ffcc33) !important;
  color: #fff !important;
}

section.seccion-capacitaciones {
 padding-bottom: 4rem;
 margin-bottom: 3rem;
 border-bottom: 1px solid #e0e0e0;
 background-color: #fdfdfd;
}

.catalogo h2 {
 text-align: center;
 font-size: 2rem;
 margin-bottom: 2rem;
 color: #333;
 font-weight: 600;
}
.catalogo h2::after {
 content: '';
 display: block;
 width: 60px;
 height: 4px;
 background-color: #007bff;
 margin: 10px auto 0;
 border-radius: 2px;
}

h2 {
 text-align: center;
 font-size: 1.8rem;
 margin-bottom: 2rem;
 color: #333;
}

.categoria-titulo {
 font-size: 1.4rem;
 margin-top: 2rem;
 color: #555;
 border-bottom: 1px solid #ccc;
 padding-bottom: 0.5rem;
}

.curso-item {
 margin-bottom: 1.5rem;
 padding: 1rem;
 border: 1px solid #e0e0e0;
 border-radius: 8px;
 background-color: #fff;
 box-shadow: 0 2px 6px rgba(0,0,0,0.05);
 cursor: pointer;
 transition: box-shadow 0.3s ease;
}

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

.curso-titulo {
 font-weight: bold;
 font-size: 1.2rem;
 color: #0077cc;
}

.curso-detalle {
 display: none;
 margin-top: 1rem;
}

.curso-detalle img {
 max-width: 100%;
 height: auto;
 max-height: 220px;
 border-radius: 6px;
 margin-bottom: 1rem;
 object-fit: cover;
}

.descripcion-lista {
 padding-left: 1.2rem;
 list-style-type: disc;
 color: #444;
}

.link-contacto {
 color: #0077cc;
 text-decoration: underline;
}

.contacto-info {
 margin-top: 3rem;
 font-size: 1rem;
 text-align: center;
 color: #666;
}
.boton-contacto {
 background-color: #008b8b;/* Color del footer */
 color: #ffffff;
 padding: 0.7rem 1.4rem;
 border: none;
 border-radius: 6px;
 font-size: 1rem;
 cursor: pointer;
 transition: background-color 0.3s ease;
 box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.boton-contacto:hover {
 background-color: #004141; /* Versión más oscura al pasar el mouse */
}


/* --- Bloque de Contacto Destacado (CTA) --- */

/* 🌟 Ajuste del Contenedor del CTA (El Recuadro Grande) */
.contacto-destacado {
    background-color: #e9f7ff; /* Fondo azul/verde muy claro (similar al de la alerta) */
    border: 3px solid #00a1b9; /* Borde turquesa institucional, un poco más vibrante */
    border-radius: 12px; 
    box-shadow: 0 6px 15px rgba(0, 161, 185, 0.3); /* Sombra con el color de acento */
    transition: all 0.3s ease-in-out;
    padding: 30px; /* Aumentar el padding para que se vea más grande y destacado */
}

/* Efecto al pasar el mouse */
.contacto-destacado:hover {
    box-shadow: 0 8px 20px rgba(0, 161, 185, 0.4); 
    transform: translateY(-2px);
}

/* Estilo del texto principal (El lead/párrafo) */
.contacto-destacado p.lead {
    color: #343a40; 
    font-size: 1.25rem; /* Un poco más grande para destacar */
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 25px; /* Más espacio debajo del texto antes del botón */
}

/* 🚀 Estilo del Botón (El elemento clave) */
/* Usa .btn directamente para sobrescribir las clases de Bootstrap, y luego .btn-lg para el tamaño */
.contacto-destacado .btn { 
    background-color: #00a1b9 !important; /* Color del botón principal (Turquesa fuerte) */
    border-color: #00a1b9 !important;
    color: #ffffff !important;
    padding: 15px 40px !important; /* Padding grande para el botón */
    font-weight: bold !important;
    font-size: 1.2rem !important; /* Texto del botón más grande */
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.3s ease !important;
    display: inline-flex !important; /* Para alinear el icono y el texto */
    align-items: center !important;
    justify-content: center !important;
}

.contacto-destacado .btn:hover {
    background-color: #007c8c !important; /* Tono más oscuro al pasar el mouse */
    border-color: #007c8c !important;
}

/* Estilos para el cuadro de alerta superior (en construcción) */
.alert-info {
    background-color: #e9f7ff !important; 
    border-left: 5px solid #00a1b9 !important; 
    color: #004141 !important; 
    border-radius: 8px !important;
}
.alert-info h4 {
    font-weight: bold !important;
    color: #004141 !important;
}
/* --- Fin Bloque de Contacto Destacado --- */


@keyframes movimiento{
 from{
    background-position: bottom left;
  }to{
   background-position: top right;
  }
}

@media (max-width: 768px) {
  .header {
   height: 400px;
  }
  
  .header-title {
    font-size: 2rem;
  }
}

/* 🎬 Animación de entrada */

@keyframes aparecer {
 from {
  opacity: 0;
  transform: translateY(-20px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

/* ============================================
   MEJORAS DE PRESENTACIÓN - SECCIÓN TEXTO
============================================ */

/* Párrafo destacado (parrafo_1) */
.cap-parrafo-destacado {
  font-size: 1.25rem;
  font-weight: 600;
  color: #00323a;
  line-height: 1.7;
  padding: 0 1rem;
}

/* Card de texto informativo */
.cap-card-texto {
  background: #f8fffe;
  border-left: 4px solid #00a6a6;
  border-radius: 0 12px 12px 0;
  padding: 30px 35px;
  box-shadow: 0 4px 16px rgba(0, 100, 116, 0.08);
}

.cap-parrafo {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.85;
  text-align: justify;
  margin-bottom: 0;
}

.cap-divisor {
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, #006474, #00a6a6);
  border-radius: 2px;
  margin: 20px 0;
}

/* Mensaje final */
.cap-mensaje-final {
  background: linear-gradient(135deg, #006474 0%, #00a6a6 100%);
  border-radius: 12px;
  padding: 25px 40px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 6px 20px rgba(0, 100, 116, 0.25);
}

.cap-icono-check {
  font-size: 2rem;
  color: #fff;
  flex-shrink: 0;
}

.cap-mensaje-texto {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 600;
  margin: 0;
  text-align: left;
  line-height: 1.5;
}

/* ============================================
   TARJETAS DE INDICADORES - MEJORAS
============================================ */
.contenedor-a {
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.contenedor-a:hover {
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2) !important;
}

/* ============================================
   CATÁLOGO - ENCABEZADO
============================================ */
.cap-catalogo-titulo {
  font-size: 1.9rem;
  font-weight: 700;
  color: #00323a;
  margin-bottom: 12px;
}

.cap-catalogo-linea {
  width: 80px;
  height: 4px;
  background: linear-gradient(45deg, #006474, #00a6a6);
  border-radius: 2px;
}

/* ============================================
   CATEGORÍAS - NUEVO ESTILO
============================================ */
.cap-categoria-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #006474 0%, #00a6a6 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  margin-top: 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 100, 116, 0.2);
}

.cap-categoria-icono {
  font-size: 1.3rem;
}

.cap-categoria-nombre {
  font-size: 1.1rem;
  font-weight: 600;
  flex: 1;
}

.cap-categoria-count {
  font-size: 0.85rem;
  background: rgba(255,255,255,0.2);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ============================================
   CURSOS - NUEVO ESTILO
============================================ */
.cap-cursos-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cap-curso-item {
  background: #fff;
  border: 1px solid #e0f0f0;
  border-radius: 10px;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.cap-curso-item:hover,
.cap-curso-item.activo {
  border-color: #00a6a6;
  box-shadow: 0 4px 14px rgba(0, 100, 116, 0.12);
  background: #f0fafa;
}

.cap-curso-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cap-curso-arrow {
  color: #00a6a6;
  font-size: 0.9rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.cap-curso-titulo {
  font-weight: 600;
  font-size: 1rem;
  color: #006474;
  letter-spacing: 0.3px;
}

.cap-curso-item.activo .cap-curso-titulo {
  color: #00323a;
}

/* Detalle del curso */
.curso-detalle {
  display: none;
  border-top: 1px solid #e0f0f0;
  margin-top: 12px;
  padding-top: 12px;
}

.cap-curso-img {
  max-height: 200px;
  width: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.cap-descripcion-lista {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.cap-descripcion-lista li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 0.98rem;
  color: #444;
  line-height: 1.6;
  border-bottom: 1px dashed #e9ecef;
}

.cap-descripcion-lista li:last-child {
  border-bottom: none;
}

.cap-descripcion-lista li::before {
  content: '❖';
  position: absolute;
  left: 0;
  color: #00a6a6;
  font-size: 0.75rem;
  top: 7px;
}

/* ============================================
   BOTÓN CTA
============================================ */
.btn-cta {
  background: linear-gradient(135deg, #0d7377 0%, #0a9396 100%) !important;
  border: none !important;
  color: white !important;
  padding: 14px 40px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(13, 115, 119, 0.3) !important;
  text-decoration: none !important;
}

.btn-cta:hover {
  background: linear-gradient(135deg, #095f5f 0%, #0d7377 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(13, 115, 119, 0.5) !important;
  color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
  .cap-mensaje-final {
    flex-direction: column;
    text-align: center;
    padding: 20px 25px;
  }

  .cap-mensaje-texto {
    text-align: center;
  }

  .cap-categoria-header {
    flex-wrap: wrap;
  }

  .cap-catalogo-titulo {
    font-size: 1.4rem;
  }
}


/* ============================================
   MEJORAS ADICIONALES - TÍTULOS Y STPS
============================================ */

/* Título principal parrafo_1 - más grande y con gradiente */
.cap-parrafo-destacado {
  font-size: 2rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #006474 0%, #00a6a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  line-height: 1.6 !important;
  padding: 0 1rem !important;
  display: inline-block;
  width: 100%;
}

/* Mensaje final STPS - más llamativo */
.cap-mensaje-final {
  background: linear-gradient(135deg, #006474 0%, #00a6a6 100%) !important;
  border-radius: 16px !important;
  padding: 28px 45px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  box-shadow: 0 8px 30px rgba(0, 100, 116, 0.35) !important;
  border-left: none !important;
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo en el mensaje STPS */
.cap-mensaje-final::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  pointer-events: none;
}

.cap-icono-check {
  font-size: 2.5rem !important;
  color: #fff !important;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.cap-mensaje-texto {
  font-size: 1.15rem !important;
  color: #fff !important;
  font-weight: 600 !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ============================================
   TÍTULOS DE CURSOS MÁS VISTOSOS
============================================ */
.cap-curso-titulo {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: #006474 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase;
}

.cap-curso-item:hover .cap-curso-titulo,
.cap-curso-item.activo .cap-curso-titulo {
  color: #00323a !important;
}

/* Número de cursos en badge más visible */
.cap-categoria-count {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.25) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.3);
}

/* Categoría con icono más grande */
.cap-categoria-icono {
  font-size: 1.4rem !important;
}

.cap-categoria-nombre {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}

/* ============================================
   LISTA DE DESCRIPCIÓN MÁS VISTOSA
============================================ */
.cap-descripcion-lista li {
  font-size: 1.05rem !important;
  color: #333 !important;
  padding: 8px 0 8px 26px !important;
  border-bottom: 1px dashed #c8eaea !important;
  line-height: 1.65 !important;
}

.cap-descripcion-lista li::before {
  content: '✦' !important;
  color: #00a6a6 !important;
  font-size: 0.8rem !important;
  top: 10px !important;
}

/* Responsive */
@media (max-width: 768px) {
  .cap-parrafo-destacado {
    font-size: 1.2rem !important;
  }
  .cap-mensaje-final {
    padding: 22px 20px !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  .cap-mensaje-texto {
    text-align: center !important;
    font-size: 1rem !important;
  }
  .cap-curso-titulo {
    font-size: 0.95rem !important;
  }
}

/* ============================================
   TÍTULO Y SUBTÍTULO PRINCIPALES
============================================ */
.cap-titulo-principal {
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #006474 0%, #00a6a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.5px;
}

/* Línea decorativa bajo título principal */
.cap-titulo-linea {
  width: 70px;
  height: 4px;
  background: linear-gradient(90deg, #006474, #00a6a6);
  border-radius: 2px;
  display: block;
  margin: 0 auto 1rem auto;
}

/* Degradado fluido en tarjetas de contadores */
.contenedor-a:nth-child(1) .contenedor-a,
div.col-md-4:nth-child(1) .contenedor-a {
  background: linear-gradient(135deg, #38c0c0, #00a1b9) !important;
}

div.col-md-4:nth-child(2) .contenedor-a {
  background: linear-gradient(135deg, #00a1b9, #0d7377) !important;
}

div.col-md-4:nth-child(3) .contenedor-a {
  background: linear-gradient(135deg, #0d7377, #095f5f) !important;
}

.cap-subtitulo-principal {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #444 !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  font-style: italic;
}

@media (max-width: 768px) {
  .cap-titulo-principal {
    font-size: 1.9rem !important;
  }
  .cap-subtitulo-principal {
    font-size: 1.1rem !important;
  }
}