/* ===== Reset básico ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ===== Body global ===== */
html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #dbe4fa;   /* fondo institucional claro */
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #002244;              /* texto principal en azul institucional */
}
/* ===== Contenedor principal ===== */
.homePage {
  width: 100%;
  min-height: 100vh;           /* ocupa toda la altura de la pantalla */
  display: flex;
  flex-direction: column;
}
/* ===== Header institucional ===== */
.header {
  background: #ffffff;        /* fondo blanco */
  color: #000000;             /* texto negro */
  width: 100%;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-ctc {
  height: 100px;              /* altura estándar */
  object-fit: contain;        /* evita deformación */
}

/* ============================================
   🔹 Footer institucional
   ============================================ */
.footer {
  background-color: #002244;
  color: #d4e5f5;
  padding: 35px 15px 15px; /* 🔹 menos padding arriba y lados */
  font-size: 13px;         /* 🔹 reducido un punto */
  width: 100%;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* 🔹 columnas más estrechas */
  gap: 12px;                                                   /* 🔹 menos espacio global */
  width: 100%;
  margin: 0 auto;
}

.footer-logo {
  grid-column: span 2;
  text-align: left;
}
.footer-logo img {
  height: 100px;
  margin-bottom: 8px;
  width: 80%;
}
.footer-logo p {
  font-weight: bold;
  line-height: 1.3;
  text-align: left;
  font-size: 13px; /* 🔹 reducido un punto */
}

.footer-section h4 {
  margin-bottom: 6px;
  text-align: left;
  font-size: 14px; /* 🔹 reducido un punto */
  color: #ffffff;
}
.footer-section ul {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.footer-section ul li {
  margin-bottom: 4px;
  font-size: 14px;
}

.footer-section ul li a {
  color: #d4e5f5;
  text-decoration: none;
  font-size: 14px;
}

.footer-section ul li a:hover {
  text-decoration: underline;
  font-size: 14px;
}

.footer-section .social-links {
  display: flex;
  gap: 6px;     /* 🔹 íconos más pegados */
  margin-top: 2px; /* 🔹 menos aire debajo del título */
  justify-content: flex-start;
  font-size: 14px;
}
.footer-section .social-links img {
  height: 22px; /* 🔹 reducido un poco */
  width: 22px;
  transition: transform 0.2s ease;
  font-size: 14px;
}
.footer-section .social-links img:hover {
  transform: scale(1.1);
  font-size: 14px;
}

.footer-bottom {
  text-align: center;
  margin-top: 15px;
  border-top: 1px solid #d4e5f5;
  padding-top: 8px;
  font-size: 13px; /* 🔹 reducido un punto */
  color: #cce0ff;
}

/* ============================================
   🔹 Footer institucional responsive extendido
   ============================================ */

/* Laptops grandes (≥1600px y <1920px) */
@media (min-width: 1600px) and (max-width: 1919px) {
  .footer-container {
    grid-template-columns: 0.9fr 0.7fr 0.7fr 0.7fr 0.7fr 0.7fr; /* 🔹 logo + 5 columnas */
    gap: 6px;                                                  /* 🔹 espacio moderado */
    align-items: start;
  }

  .footer-logo img {
    height: 78px; /* 🔹 logo un poco más grande que en 1920 */
  }

  .footer-section {
    font-size: 13px; /* 🔹 texto ligeramente más grande */
  }

  .footer-section h4 {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .footer-section .social-links img {
    height: 21px;
    width: 21px;
  }
}

/* Monitores ultra anchos (≥1920px) */
@media (min-width: 1920px) {
  .footer-container {
    grid-template-columns: 0.9fr 0.6fr 0.6fr 0.6fr 0.6fr 0.6fr; /* 🔹 columnas muy compactas */
    gap: 2px;                                                  /* 🔹 casi sin espacio */
    align-items: start;
  }

  .footer-logo img {
    height: 75px; /* 🔹 logo reducido para compactar */
  }

  .footer-section {
    font-size: 12px; /* 🔹 texto más discreto */
  }

  .footer-section h4 {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .footer-section .social-links img {
    height: 20px;
    width: 20px;
  }
}

/* PC grandes y laptops (≥1200px) */
@media (min-width: 1200px) {
  .footer-container {
    display: grid;
    grid-template-columns: 0.9fr 0.6fr 0.6fr 0.6fr 0.6fr 0.6fr; /* 🔹 logo + 5 columnas pegadas */
    gap: 1px;                                                  /* 🔹 casi sin espacio */
    align-items: start;                                        /* 🔹 todas alineadas arriba */
  }

  .footer-logo {
    grid-column: span 1;
    text-align: left;
    margin-right: 12px; /* 🔹 separa el logo un poco */
  }

  .footer-logo img {
    height: 75px; /* 🔹 logo reducido */
  }

  .footer-section {
    text-align: left;
    margin: 0;
    font-size: 12px; /* 🔹 letras más discretas */
  }

  .footer-section h4 {
    margin-bottom: 3px;
    font-size: 13px; /* 🔹 títulos más pequeños */
  }

  .footer-section ul li {
    margin-bottom: 3px;
  }

  .footer-section .social-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0; /* 🔹 íconos pegados justo debajo de "Síguenos" */
    gap: 4px;
  }

  .footer-section .social-links img {
    height: 20px;
    width: 20px;
    vertical-align: middle;
  }
}

/* Tablets horizontales (768px–1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 8px; /* 🔹 menos espacio entre columnas */
  }

  .footer-logo {
    grid-column: span 2;
    text-align: center;
  }

  .footer-logo img {
    height: 70px;
    margin: 0 auto 6px;
    display: block;
  }

  .footer-section {
    margin-bottom: 6px;
    font-size: 13px;
  }

  .footer-section h4 {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .footer-section .social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 🔹 pegados al título */
    gap: 5px;
    margin: 0; /* 🔹 sin sangría extra */
  }

  .footer-section .social-links img {
    height: 20px;
    width: 20px;
  }
}

/* Móviles (<768px) */
@media (max-width: 767px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
  }

  .footer-logo img {
    height: 70px;
    margin: 0 auto 6px;
    display: block;
  }

  .footer-logo p {
    text-align: center;
    font-size: 12px;
  }

  .footer-section {
    margin-bottom: 6px;
    font-size: 13px;
  }

  .footer-section h4 {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .footer-section .social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 🔹 pegados al título */
    gap: 5px;
    margin: 0; /* 🔹 sin sangría extra */
  }

  .footer-section .social-links img {
    height: 20px;
    width: 20px;
  }
}

/* ============================================
   🔹 Menú institucional
   ============================================ */
.menu-card {
  background: #002244;               /* azul institucional */
  color: white;
  width: 100%;                       /* ocupa todo el ancho */
  padding: 0 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1200;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;                   /* 🔹 evita deformación en pantallas pequeñas */
}

.menu ul li {
  position: relative;
}

.menu ul li a {
  display: block;
  padding: 12px 16px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  text-align: left;
  line-height: 1.4;
  transition: background 0.3s ease, border-bottom 0.3s ease;
}

/* 🔹 Indicador de submenu */
.menu ul li:has(.submenu) > a::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  vertical-align: middle;
}

/* 🔹 Hover principal */
.menu ul li:hover > a {
  background: #FF0000;               /* rojo bandera */
}

/* 🔹 Submenu */
.menu ul li > .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #002244;         /* azul institucional */
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
}

.submenu li a {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  color: #ffffff;
  font-weight: normal;
  line-height: 1.4;
}

.submenu li a:hover {
  background-color: #FF0000;         /* rojo bandera */
  color: #fff;
}

.menu ul li:hover > .submenu {
  display: block;
}

/* 🔹 Estado activo */
.menu > ul > li:not(:hover) > a {
  border-bottom: 3px solid transparent;
}

.menu > ul > li:hover > a {
   background: none; 
  border-bottom: 3px solid white;
}

/* 🔹 Botón hamburguesa */
.menu-toggle {
  display: none;              /* oculto en PC */
  font-size: 28px;            /* ☰ tres rayas */
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

/* 🔹 Menú responsive base */
.menu-list {
  display: flex;
  gap: 15px;
  list-style: none;
}

/* ============================================
   🔹 Tablets
   ============================================ */
@media (max-width: 1024px) {
  .menu ul {
    gap: 10px;
  }
  .menu ul li a {
    font-size: 15px;
    padding: 10px 14px;
  }
}

/* ============================================
   🔹 Móviles
   ============================================ */
@media (max-width: 767px) {
  .menu {
    flex-direction: column;      
    align-items: flex-start;     
    justify-content: flex-start;
    height: auto;
  }

  .menu-toggle {
    display: block;   /* aparece solo en móviles */
    margin: 10px 0;
  }

  /* Ocultar menú por defecto */
  .menu ul {
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    background-color: #002244;
  }

  /* Mostrar menú cuando se active el estado */
  .menu-list.open {
    display: flex;
  }

  .menu ul li a {
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid #444;
    width: 100%;
  }

  /* Submenús en móviles */
  .menu ul li > .submenu {
    position: static;
    box-shadow: none;
    background-color: #001a33;
    width: 100%;
  }

  .submenu li a {
    padding-left: 24px;
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .submenu {
    display: none;
  }
  .submenu.open {
    display: block;
  }
}

/* Móviles en horizontal (481px–767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .menu {
    flex-direction: row;          /* mantiene horizontal */
    flex-wrap: wrap;              /* permite que los ítems bajen si no caben */
    justify-content: center;      /* centra los ítems */
    height: auto;
  }

  .menu ul {
    gap: 8px;                     /* menos espacio entre ítems */
    flex-wrap: wrap;
  }

  .menu ul li a {
    font-size: 14px;
    padding: 10px 12px;
  }
}

/* Pantallas medianas (entre 1025px y 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
  .menu ul {
    flex-wrap: wrap;          /* permite que los ítems bajen si no caben */
    justify-content: center;  /* centra los ítems */
    gap: 12px;
  }
  .menu ul li a {
    font-size: 15px;
    padding: 10px 14px;
  }
}

/* Móviles horizontales (481px–767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
  }
  .menu ul {
    gap: 8px;
    flex-wrap: wrap;
  }
  .menu ul li a {
    font-size: 14px;
    padding: 10px 12px;
  }
}

/* Pantallas medianas (900px–1024px) */
@media (min-width: 900px) and (max-width: 1024px) {
  .menu {
    flex-wrap: wrap;          /* permite que los ítems bajen */
    justify-content: center;  /* centra los ítems */
    height: auto;
  }

  .menu ul {
    gap: 10px;
    flex-wrap: wrap;
  }

  .menu ul li a {
    font-size: 15px;
    padding: 10px 14px;
  }
}

/* Extra pequeños (XS: móviles portrait) */
@media (max-width: 480px) {
  .menu {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }
  .menu-toggle { display: block; }
  .menu ul { display: none; flex-direction: column; width: 100%; }
  .menu-list.open { display: flex; }
  .menu ul li a { font-size: 14px; padding: 12px; }
}

/* Pequeños (SM: móviles landscape) */
@media (min-width: 481px) and (max-width: 767px) {
  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
  }
  .menu ul { gap: 8px; flex-wrap: wrap; }
  .menu ul li a { font-size: 14px; padding: 10px 12px; }
}

/* Medianos (MD: tablets verticales) */
@media (min-width: 768px) and (max-width: 899px) {
  .menu ul { gap: 10px; }
  .menu ul li a { font-size: 15px; padding: 10px 14px; }
}

/* Medianos grandes (MD+: tablets horizontales y pantallas medianas) */
@media (min-width: 900px) and (max-width: 1024px) {
  .menu { flex-wrap: wrap; justify-content: center; height: auto; }
  .menu ul { gap: 12px; flex-wrap: wrap; }
  .menu ul li a { font-size: 15px; padding: 10px 14px; }
}

/* Grandes (LG: laptops pequeñas) */
@media (min-width: 1025px) and (max-width: 1199px) {
  .menu ul { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .menu ul li a { font-size: 15px; padding: 10px 14px; }
}

/* Extra grandes (XL: laptops y desktops estándar) */
@media (min-width: 1200px) and (max-width: 1599px) {
  .menu ul { gap: 15px; }
  .menu ul li a { font-size: 16px; padding: 12px 16px; }
}

/* Ultra grandes (XXL: ≥1600px y <1920px) */
@media (min-width: 1600px) and (max-width: 1919px) {
  .menu ul { gap: 18px; }
  .menu ul li a { font-size: 16px; padding: 12px 18px; }
}

/* Monitores ultra anchos (≥1920px) */
@media (min-width: 1920px) {
  .menu ul { gap: 20px; }
  .menu ul li a { font-size: 17px; padding: 12px 20px; }
}

/* ============================================
   🔹 Carrusel institucional
   ============================================ */
/* ============================================
   🔹 Carrusel institucional
   ============================================ */
.hero-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000;            /* fondo oscuro para transición */
}

.carousel-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide {
  display: none;
  width: 100%;
  height: 480px;
  position: relative;
}

.carousel-slide.active {
  display: block;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* 🔹 evita deformación */
}

/* 🔹 Texto del carrusel */
.carousel-caption {
  position: absolute;
  bottom: 20%;
  left: 10%;        /* alineado a la izquierda en PC */
  transform: none;
  text-align: left;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 20px;
  border-radius: 8px;
  max-width: 50%;
}

.carousel-caption h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #FF0000;                    /* rojo bandera */
}

.carousel-caption p {
  font-size: 1rem;
  margin-bottom: 15px;
}

.btn-info-carrusel {
  display: inline-block;
  padding: 10px 20px;
  background-color: #002244;         /* azul institucional */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.btn-info-carrusel:hover {
  background-color: #FF0000;         /* rojo bandera */
}

/* 🔹 Botones de navegación */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: background 0.3s ease;
  z-index: 100;
}

.carousel-btn:hover {
  background: rgba(255,0,0,0.7);     /* rojo bandera */
}

.carousel-btn.prev {
  left: 20px;
}

.carousel-btn.next {
  right: 20px;
}

/* 🔹 Indicadores (círculos) */
.carousel-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.carousel-indicators .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s ease;
  display: inline-block;
}

.carousel-indicators .dot.active {
  background: #FF0000;               /* rojo bandera */
}

/* 🔹 Responsivo */
@media (max-width: 767px) {
  .carousel-slide {
    height: 240px;
  }
  .carousel-caption {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 80%;
  }
  .carousel-caption h2 {
    font-size: 1.2rem;
  }
  .carousel-caption p {
    font-size: 0.85rem;
  }
}


/* ============================================
   🔹 Cinta de cursos Pagina principal
   ============================================ */
.cinta-cursos {
  width: 100%;                       /* ocupa todo el ancho */
  background-color: #FF0000;          /* rojo bandera */
  color: #ffffff;                     /* texto blanco */
  text-align: center;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* sombra ligera */
}

.cinta-cursos p {
  margin: 0;
}


/* ============================================
   🔹 Noticias institucionales
   ============================================ */
.noticias-inicio {
  padding: 60px 20px;
  background-color: #ffffff;         /* fondo blanco */
  color: #002244;                    /* azul institucional */
  text-align: center;
}

.noticias-inicio h2 {
  font-size: 2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 10px;
  font-weight: bold;
}

.noticias-inicio p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
}

/* 🔹 Grid de noticias */
.noticias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  width: 100%;
  margin: 0 auto;
}

/* 🔹 Tarjeta de noticia */
.noticia-card {
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.noticia-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.noticia-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;                 /* 🔹 evita deformación */
}

.noticia-card h3 {
  font-size: 1.2rem;
  margin: 15px;
  color: #002244;
}

.noticia-card p {
  font-size: 0.95rem;
  margin: 0 15px 15px;
  color: #555555;
}

/* 🔹 Botón dentro de noticia */
.btn-noticia {
  display: inline-block;
  margin: 0 15px 15px;
  padding: 8px 16px;
  background-color: #002244;         /* azul institucional */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.btn-noticia:hover {
  background-color: #FF0000;         /* rojo bandera */
}

/* ============================================
   🔹 Tarjeta de impacto institucional
   ============================================ */
.tarjeta-impacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  padding: 60px 20px;
  background-color: #FF0000;         /* fondo claro institucional */
  text-align: center;
}

.impacto-item {
  background: #FF0000;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.impacto-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.impacto-item .icono {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: #FF0000;                    /* rojo bandera */
}

.impacto-item h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
  color: #f9fafb;                    /* azul institucional */
  font-weight: bold;
}

.impacto-item p {
  font-size: 1rem;
  color: #f9fafb;
}

/* ============================================
   🔹 Mapa institucional
   ============================================ */
.mapa-ctc {
  padding: 60px 20px;
  background-color: #ffffff;         /* fondo blanco institucional */
  color: #002244;                    /* azul institucional */
  text-align: center;
  width: 100%;
}

.mapa-ctc h2 {
  font-size: 2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 10px;
  font-weight: bold;
}

.mapa-ctc p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
}

/* 🔹 Contenedor del mapa */
.mapa-container {
  width: 85%;                       /* ocupa todo el ancho */
  margin: 0 auto;
}

.mapa-container iframe {
  width: 100%;
  height: 480px;
  border: none;
  display: block;
  border-radius: 8px;                /* 🔹 esquinas suaves */
  box-shadow: 0 4px 12px rgba(103, 27, 27, 0.1); /* sombra ligera */
}

/* ============================================
   🔹 Botón flotante "Subir"
   ============================================ */
.btn-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #002244;
  color: #ffffff;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 1500;
}


.btn-flotante:hover {
  background-color: #FF0000;
  transform: translateY(-2px);
}





/* ============================================
   Pagina de Cursos
   ============================================ */
.curso-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  text-align: center;
}

.curso-section h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 15px;
  font-weight: bold;
}

.curso-section p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
}

/* 🔹 Filtro de categorías */
.filtro-categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* mantiene centrado */
  gap: 8px;                  /* 🔹 menos espacio entre botones */
  margin-bottom: 18px;       /* 🔹 menos aire debajo */
}

.filtro-btn {
  padding: 5px 8px;
  background-color: #e6f0ff;  /* azul claro */
  color: #002244;             /* azul institucional para el texto */
  border: 1px solid #ccc;     /* borde sutil */
  border-radius: 20px;        /* más ovalado */
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.filtro-btn:hover {
  background-color: #FF0000;         /* rojo bandera */
  color: #ffffff; /* texto blanco */
  transform: scale(1.05);
}

.filtro-btn.active {
  background-color: #FF0000;         /* rojo bandera */
  color: #ffffff; /* texto blanco */
}

/* 🔹 Botón admin */
.btn-admin {
  display: none;        /* oculto por defecto */
  background-color: #007BFF; /* azul institucional */
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin: 10px 0;
  text-align: left;     /* texto alineado a la izquierda */
  margin-left: 0;
  display: inline-block;
}

.btn-admin:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.curso-section .btn-admin {
  display: none;              /* oculto por defecto */
  background-color: #007BFF;
  color: white;
  padding: 4px 8px;           /* 🔹 menos aire interno */
  border-radius: 4px;         /* 🔹 esquinas más compactas */
  text-decoration: none;
  font-size: 0.70rem;         /* 🔹 letra más pequeña */
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* 🔹 sombra más ligera */
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin: 6px 0;              /* 🔹 menos aire externo */
  text-align: left;
  width: fit-content;
  max-width: 120px;           /* 🔹 límite de ancho */
  margin-left: 0;
  margin-right: auto;         /* rompe el centrado del padre */
}


.curso-section .btn-admin.visible {
  display: block;             /* 👈 solo cuando se activa */
}


/* 🔹 Grid de cursos responsivo */
.curso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* columnas flexibles */
  gap: 14px;
  width: 100%;
  margin: 0 auto;
}


/* Pantallas grandes (4K, ≥2560px) */
@media (min-width: 2560px) {
  .curso-grid {
    grid-template-columns: repeat(5, minmax(280px, 1fr)); /* hasta 5 columnas */
  }
}

/* PC estándar / laptops (≥1200px y <2560px) */
@media (min-width: 1200px) and (max-width: 2559px) {
  .curso-grid {
    grid-template-columns: repeat(4, minmax(280px, 1fr)); /* 4 columnas */
  }
}

/* Tablets (≥768px y <1200px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .curso-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr)); /* 2 columnas */
  }
}

/* Móviles (<768px) */
@media (max-width: 767px) {
  .curso-grid {
    grid-template-columns: 1fr; /* 1 columna */
  }
}


/*🔹 Tarjeta de curso */
.curso-card {
  width: 100%;   
  max-width: 500px; 
  height: 540px;         
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 1px solid #d8d7d7;
  border-left: 6px solid transparent;
  box-sizing: border-box;
}


.curso-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Imagen */
.curso-card img {
  width: calc(100% - 20px);
  height: 120px;               
  object-fit: cover;
  margin: 10px;                /* espacio externo respecto al borde del card */
  border-radius: 6px;
}

/* Título */
.curso-card h2 {
  font-size: 16px;                /* tamaño más equilibrado */
  line-height: 1.2;
  margin: 6px 10px 12px;          /* pegado a la imagen arriba, aire abajo hacia descripción */
  text-align: center;
  color: #002244;
  font-weight: bold;
  height: 44px;                   /* bloque reservado fijo */
  display: -webkit-box;           /* permite controlar líneas */
  display: box;                   /* estándar */
  -webkit-line-clamp: 2;          /* máximo 2 líneas */
  line-clamp: 2;                  /* estándar */
  -webkit-box-orient: vertical;
  box-orient: vertical;           /* estándar */
  overflow: hidden;               /* oculta lo que se salga */
  text-overflow: ellipsis;        /* añade “…” si se pasa */
  word-break: break-word;         /* permite que baje a segunda línea automáticamente */
}

/* Descripción */
.curso-card p {
  font-size: 13px;       /* 🔹 más pequeño, fijo en px */
  line-height: 1.2;      /* 🔹 menos espacio entre líneas */
  margin: 0 18px 0;      /* 🔹 un poco más compacto en los lados */
  padding: 2px 0 10px;   /* 🔹 menos aire abajo */
  color: #555;
  text-align: justify;
  height: 90px;          /* 🔹 reduce el bloque reservado */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-clamp: 4; /* versión estándar */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}


/* Contenedor verde */
.curso-card ul {
  height: 200px;               /* bloque reservado fijo */
  margin: 0 15px 20px;         /* 🔹 espacio externo arriba respecto a descripción, abajo respecto al botón */
  padding: 6px 6px;          /* 🔹 aire interno para los ítems */
  list-style: none;
  background-color: #e9fff2;
  border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ítems siempre arriba dentro del bloque */
  overflow: hidden;
}


.curso-card ul li {
  margin-bottom: 6px;   /* 🔹 menos espacio entre ítems */
  font-size: 13px;
  line-height: 1.55;     /* 🔹 reduce espacio vertical */
  display: flex;
  align-items: center;
  color: black;
}


.curso-card ul li::before {
  display: inline-block;
  width: 20px;       /* 🔹 ancho fijo reservado para el icono */
  text-align: center;/* 🔹 centra el símbolo dentro de ese espacio */
  margin-right: 4px; /* 🔹 separación uniforme entre icono y texto */
}

.curso-card ul li:nth-child(1)::before { content: "🕓"; }
.curso-card ul li:nth-child(2)::before { content: "📅"; }
.curso-card ul li:nth-child(3)::before { content: "⏳"; }
.curso-card ul li:nth-child(4)::before { content: "🎓"; }
.curso-card ul li:nth-child(5)::before { content: "📘"; }
.curso-card ul li:nth-child(6)::before { content: "🏢"; }
.curso-card ul li:nth-child(7)::before { content: "👨‍🏫"; }

.curso-card ul li strong {
  margin-right: 6px;   /* 🔹 espacio entre categoría y valor */
  font-weight: bold;   /* 🔹 mantiene el resaltado */
}

/* Botón verde */
.btn-inscribirse {
  margin-top: auto;
  margin-bottom: 12px;
  padding: 7px 12px;
  font-size: 0.85rem;
  line-height: 1.2;            /* 🔹 asegura altura uniforme */
  border-radius: 6px;
  border: none;                /* 🔹 elimina cualquier borde */
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background-color: #27ae60;
  color: white;
  transition: background-color 0.3s ease;
}
.btn-inscribirse:hover { background-color: #1e8449; }

/* Botón azul */
.btn-proximamente {
  margin-top: auto;
  margin-bottom: 12px;
  padding: 7px 12px;
  font-size: 0.85rem;
  line-height: 1.2;            /* 🔹 igual que el verde */
  border-radius: 6px;
  border: none;
  text-decoration: none;       /* 🔹 igual que el verde */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background-color: #007BFF;
  color: white;
  cursor: not-allowed;
  opacity: 1;                  /* 🔹 igual que el verde */
}

/* Botón rojo */
.btn-finalizado {
  margin-top: auto;
  margin-bottom: 12px;
  padding: 7px 12px;
  font-size: 0.85rem;
  line-height: 1.2;            /* 🔹 igual que los otros */
  border-radius: 6px;
  border: none;
  text-decoration: none;       /* 🔹 igual que los otros */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  background-color: #FF0000;
  color: white;
  cursor: not-allowed;
  opacity: 1;                  /* 🔹 igual que los otros */
}


/*🔹 Colores por categoría*/
.curso-card.redes { border-left-color: #1f77b4; }
.curso-card.ciberseguridad { border-left-color: #d62728; }
.curso-card.programacion { border-left-color: #2ca02c; }
.curso-card.soporte { border-left-color: #ff7f0e; }
.curso-card.linux { border-left-color: #7f7f7f; }
.curso-card.iot { border-left-color: #9467bd; }
.curso-card.packet { border-left-color: #17becf; }
.curso-card.ti { border-left-color: #bcbd22; }
.curso-card.alfabetizacion { border-left-color: #e377c2; }
.curso-card.ia { border-left-color: #8c564b; }
.curso-card.competencias { border-left-color: #ff1493; }
.curso-card.sostenibilidad { border-left-color: #228b22; }
.curso-card.cloud { border-left-color: #00bfff; }
.curso-card.bases { border-left-color: #8b0000; }
.curso-card.web { border-left-color: #ff8c00; }
.curso-card.ofimatica { border-left-color: #4682b4; }
.curso-card.multimedia { border-left-color: #32cd32; }
.curso-card.emprendimiento { border-left-color: #800080; }
.curso-card.otros { border-left-color: #000000; }


/* 🔹 Resumen de cursos */
.resumen-cursos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* izquierda */
  gap: 12px;
  margin-bottom: 10px;         /* menos aire debajo */
}


.curso-card .btn-curso {
  display: inline-block;
  margin: 0 15px 15px;
  padding: 8px 16px;
  background-color: #002244;         /* azul institucional */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}

.curso-card .btn-curso:hover {
  background-color: #FF0000;         /* rojo bandera */
}

/* Categorías más ovaladas */
.filtro-categorias .filtro-btn {
  border-radius: 20px; /* más ovalado */
}

.resumen-cursos .filtro-btn {
  background: none;
  border: none;
  color: #000;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.2s ease;
}

/* Colores al pasar el cursor o estar activo */
#btn-disponibles:hover,
#btn-disponibles.active {
  color: #28a745; /* verde */
  text-shadow: 0 0 1px #28a745; /* 🔹 leve brillo */
}

#btn-proximamente:hover,
#btn-proximamente.active {
  color: #007bff; /* azul */
  text-shadow: 0 0 1px #007bff;
}

#btn-agregar:hover,
#btn-agregar.active {
  color: #dc3545; /* rojo */
  text-shadow: 0 0 1px #dc3545;
}

/* ============================================
   🔹 Cursos Vacíos
   ============================================ */
/* Contenedor principal SOLO cuando está vacío */
#cursos-container.no-cursos-active {
  display: flex;              /* activa flexbox */
  justify-content: center;    /* centra horizontal */
  align-items: center;        /* centra vertical */
  min-height: 80vh;          /* ocupa toda la altura de la ventana */
  box-sizing: border-box;
}

/* Bloque del mensaje */
.no-cursos {
  display: flex;
  flex-direction: column;     /* imagen arriba, texto debajo */
  align-items: center;        /* centra horizontal */
  text-align: center;         /* centra texto */
  padding: 10px;
}

/* Imagen */
.no-cursos-img {
  max-width: 400px;           /* tamaño controlado */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;   /* centrada con espacio inferior */
}

/* Texto */
.no-cursos h2,
.no-cursos p {
  margin: 10px 0;
  word-wrap: break-word;
  text-align: center;
}

@media (min-width: 2560px) {
  .curso-grid {
    grid-template-columns: repeat(5, minmax(280px, 1fr));
  }
}
@media (min-width: 1200px) and (max-width: 2559px) {
  .curso-grid {
    grid-template-columns: repeat(4, minmax(280px, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .curso-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}
@media (max-width: 767px) {
  .curso-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .no-cursos {
    padding: 8px;   /* menos aire en pantallas pequeñas */
  }
  .no-cursos-img {
    max-width: 300px; /* imagen más compacta */
  }
}























































/* ============================================
   🔹 Sección de contacto institucional
   ============================================ */
.contacto-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  text-align: center;
}

.contacto-section h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 15px;
  font-weight: bold;
}

.contacto-section p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
}

/* 🔹 Formulario de contacto */
.contacto-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contacto-form input,
.contacto-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: Arial, sans-serif;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contacto-form input:focus,
.contacto-form textarea:focus {
  border-color: #002244;             /* azul institucional */
  box-shadow: 0 0 6px rgba(0,34,68,0.3);
  outline: none;
}

.contacto-form button {
  padding: 12px;
  background-color: #002244;         /* azul institucional */
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.contacto-form button:hover {
  background-color: #FF0000;         /* rojo bandera */
  transform: scale(1.05);
}

/* ============================================
   🔹 Mapa de ubicación
   ============================================ */
.mapa-section {
  padding: 60px 20px;
  background-color: #f4f7fb;         /* fondo claro institucional */
  color: #002244;
  text-align: center;
}

.mapa-section h2 {
  font-size: 2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 10px;
  font-weight: bold;
}

.mapa-section p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
}

.mapa-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.mapa-container iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}



/* ============================================
   🔹 Página de Alfabetización Digital
   ============================================ */
.alfabetizacion-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
}

.alfabetizacion-section {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.alfabetizacion-section h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.alfabetizacion-section p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #333333;
  line-height: 1.6;
}

.alfabetizacion-section ul {
  list-style: disc inside;
  margin-bottom: 20px;
  padding-left: 0;
}

.alfabetizacion-section ul li {
  font-size: 1rem;
  color: #002244;
  margin-bottom: 10px;
  line-height: 1.5;
}


/* ============================================
   🔹 Página de Política de Calidad
   ============================================ */
.calidad-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
}

.calidad-section {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.calidad-section h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.calidad-section p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #333333;
  line-height: 1.6;
}

.calidad-section ul {
  list-style: disc inside;
  margin-bottom: 20px;
  padding-left: 0;
}

.calidad-section ul li {
  font-size: 1rem;
  color: #002244;
  margin-bottom: 10px;
  line-height: 1.5;
}


/* ============================================
   🔹 Página de Capacitación
   ============================================ */
.contenido-servicio {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.contenido-servicio h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.contenido-servicio p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #333333;
  line-height: 1.6;
}

/* 🔹 Sección de información */
.servicio-info,
.servicio-beneficios {
  margin-bottom: 40px;
}

.servicio-info h2,
.servicio-beneficios h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 15px;
  font-weight: bold;
}

.servicio-info ul,
.servicio-beneficios ul {
  list-style: disc inside;
  margin-bottom: 20px;
  padding-left: 0;
}

.servicio-info ul li,
.servicio-beneficios ul li {
  font-size: 1rem;
  color: #002244;
  margin-bottom: 10px;
  line-height: 1.5;
}




/* ============================================
   🔹 Página de Capacitaciones Certificadas
   ============================================ */
.capacitaciones-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
}

.capacitaciones-section {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.capacitaciones-section h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.capacitaciones-section p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #333333;
  line-height: 1.6;
}

.capacitaciones-section ul {
  list-style: disc inside;
  margin-bottom: 20px;
  padding-left: 0;
}

.capacitaciones-section ul li {
  font-size: 1rem;
  color: #002244;
  margin-bottom: 10px;
  line-height: 1.5;
}


/* ============================================
   🔹 Página de Ciberseguridad
   ============================================ */
.ciberseguridad-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
}

.ciberseguridad-section {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.ciberseguridad-section h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.ciberseguridad-section p {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #333333;
  line-height: 1.6;
}

.ciberseguridad-section ul {
  list-style: disc inside;
  margin-bottom: 20px;
  padding-left: 0;
}

.ciberseguridad-section ul li {
  font-size: 1rem;
  color: #002244;
  margin-bottom: 10px;
  line-height: 1.5;
}


/* ============================================
   🔹 Página de Convocatorias
   ============================================ */
.contenido-servicio {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

.contenido-servicio h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.contenido-servicio p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
  line-height: 1.6;
}

/* 🔹 Tarjeta de convocatoria */
.convocatoria-card {
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 40px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.convocatoria-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.convocatoria-content {
  display: flex;
  flex-wrap: wrap;                   /* 🔹 evita deformación */
}

.convocatoria-img {
  flex: 1 1 300px;
}

.convocatoria-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* 🔹 evita deformación */
}

.convocatoria-text {
  flex: 2 1 400px;
  padding: 20px;
}

.convocatoria-text h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 15px;
  font-weight: bold;
}

.convocatoria-text ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.convocatoria-text ul li {
  font-size: 1rem;
  color: #333333;
  margin-bottom: 10px;
  line-height: 1.5;
}

.convocatoria-text ul li strong {
  color: #002244;
}

/* 🔹 Botón aplicar */
.btn-aplicar {
  display: inline-block;
  padding: 10px 20px;
  background-color: #002244;         /* azul institucional */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-aplicar:hover {
  background-color: #FF0000;         /* rojo bandera */
  transform: scale(1.05);
}

/* ============================================
   🔹 Página de Equipo
   ============================================ */
.equipo-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  text-align: center;
}

.equipo-section h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 15px;
  font-weight: bold;
}

.equipo-section p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
}

/* 🔹 Grid de equipo */
.equipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  width: 100%;
  margin: 0 auto;
}

/* 🔹 Tarjeta de miembro */
.equipo-card {
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.equipo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.equipo-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;                 /* 🔹 evita deformación */
  border-radius: 8px;
  margin-bottom: 15px;
}

.equipo-card h2 {
  font-size: 1.4rem;
  color: #002244;
  margin-bottom: 8px;
  font-weight: bold;
}

.equipo-card p {
  font-size: 0.95rem;
  color: #555555;
  margin-bottom: 8px;
}

.equipo-card p strong {
  color: #FF0000;                    /* rojo bandera */
}

/* ============================================
   🔹 Página de Eventos
   ============================================ */
.contenido-servicio {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

.contenido-servicio h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.contenido-servicio p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
  line-height: 1.6;
}

/* 🔹 Tarjeta de evento */
.evento-card {
  display: flex;
  flex-wrap: wrap;                   /* 🔹 evita deformación */
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* 🔹 Fecha destacada */
.evento-fecha {
  flex: 0 0 120px;
  background-color: #FF0000;         /* rojo bandera */
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 🔹 Información del evento */
.evento-info {
  flex: 1 1 400px;
  padding: 20px;
}

.evento-info h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 15px;
  font-weight: bold;
}

.evento-info p {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #555555;
  line-height: 1.5;
}

.evento-info ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.evento-info ul li {
  font-size: 1rem;
  color: #333333;
  margin-bottom: 10px;
}

.evento-info ul li strong {
  color: #002244;
}

/* 🔹 Botón evento */
.btn-evento {
  display: inline-block;
  padding: 10px 20px;
  background-color: #002244;         /* azul institucional */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-evento:hover {
  background-color: #FF0000;         /* rojo bandera */
  transform: scale(1.05);
}

/* ============================================
   🔹 Página de Preguntas Frecuentes (FAQ)
   ============================================ */
.faq-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.faq-section h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 15px;
  font-weight: bold;
  text-align: center;
}

.faq-section p {
  font-size: 1rem;
  margin-bottom: 30px;
  color: #333333;
  text-align: center;
}

/* 🔹 Contenedor FAQ */
.faq-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 🔹 Pregunta FAQ */
.faq-question {
  width: 100%;
  padding: 15px 20px;
  background-color: #002244;         /* azul institucional */
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background-color: #FF0000;         /* rojo bandera */
}

.faq-question.open {
  background-color: #FF0000;         /* rojo bandera activo */
}

/* 🔹 Respuesta FAQ */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #f9f9f9;
  border-radius: 6px;
  padding: 0 20px;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-answer.active {
  max-height: 500px;                 /* suficiente para mostrar contenido */
  padding: 20px;
}

.faq-answer p {
  font-size: 0.95rem;
  color: #333333;
  line-height: 1.6;
}

.faq-answer h2 {
  font-size: 1.2rem;
  color: #002244;
  margin-bottom: 10px;
  font-weight: bold;
}

/* 🔹 Mensaje destacado dentro de respuesta */
.mensaje-cursos h2 {
  color: #FF0000;                    /* rojo bandera */
  font-size: 1.3rem;
  margin-bottom: 10px;
}


/* ============================================
   🔹 Sección Historia con línea centrada
   ============================================ */
.historia-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1000px;
  margin: 0 auto;
}

.historia-section h1 {
  font-size: 2.4rem;
  color: #FF0000;
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.historia-section p {
  font-size: 1.05rem;
  margin-bottom: 30px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;               /* 🔹 párrafos más elegantes */
}

/* 🔹 Timeline centrada */
.timeline {
  position: relative;
  margin: 40px 0;
}

.timeline::after {
  content: "";
  position: absolute;
  width: 4px;
  background-color: #002244;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
}

/* 🔹 Items alternados */
.timeline-item {
  padding: 20px 40px;
  position: relative;
  width: 50%;
}

.timeline-item:nth-child(odd) {
  left: 0;
}

.timeline-item:nth-child(even) {
  left: 50%;
}

/* 🔹 Punto interactivo */
.timeline-item::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #FF0000;
  border: 3px solid #ffffff;
  border-radius: 50%;
  top: 20px;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:hover::before {
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(255,0,0,0.6);
}

/* 🔹 Contenido */
.timeline-content {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.timeline-content h2 {
  font-size: 1.4rem;
  color: #002244;
  margin-bottom: 10px;
  font-weight: bold;
}

.timeline-content p {
  font-size: 0.95rem;
  color: #555555;
  line-height: 1.6;
  text-align: justify;
}

/* 🔹 Último párrafo elegante */
.historia-section > p:last-of-type {
  font-size: 1.1rem;
  font-style: italic;
  color: #002244;
  text-align: center;
  margin-top: 40px;
}


/* ============================================
   🔹 Página de Acceso a Internet
   ============================================ */
.contenido-servicio {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.contenido-servicio h1 {
  font-size: 2.2rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.contenido-servicio p {
  font-size: 1rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.6;
}

/* 🔹 Secciones */
.servicio-info,
.servicio-beneficios {
  margin-bottom: 40px;
}

.servicio-info h2,
.servicio-beneficios h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 15px;
  font-weight: bold;
}

.servicio-info ul,
.servicio-beneficios ul {
  list-style: disc inside;
  margin-bottom: 20px;
  padding-left: 0;
}

.servicio-info ul li,
.servicio-beneficios ul li {
  font-size: 1rem;
  color: #002244;
  margin-bottom: 10px;
  line-height: 1.5;
}


/* ============================================
   🔹 Página de Misión
   ============================================ */
.mision-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;                    /* azul institucional */
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.mision-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
}

.mision-section p {
  font-size: 1.05rem;
  margin-bottom: 30px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Tarjeta de misión */
.mision-card {
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 30px 20px;
  margin-top: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mision-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.mision-card img {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.mision-card h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 15px;
  font-weight: bold;
}

.mision-card p {
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  text-align: justify;
}


/* ============================================
   🔹 Noticias y Convocatorias (mosaico alternado)
   ============================================ */
.noticias-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1200px;
  margin: 0 auto;
}

.noticias-section h1 {
  font-size: 2.4rem;
  color: #FF0000;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.noticias-section p {
  font-size: 1.05rem;
  margin-bottom: 40px;
  color: #333333;
  text-align: center;
}

/* 🔹 Contenedor */
.noticias-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 🔹 Tarjeta alternada */
.noticia-card {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.noticia-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* 🔹 Imagen */
.noticia-card img {
  width: 45%;
  height: 100%;
  object-fit: cover;
}

/* 🔹 Texto */
.noticia-card div {
  flex: 1;
  padding: 25px;
}

.noticia-card h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 10px;
  font-weight: bold;
}

.noticia-card p {
  font-size: 1rem;
  color: #555555;
  margin-bottom: 15px;
  line-height: 1.6;
}

.noticia-card .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #FF0000;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.2s ease;
}

.noticia-card .btn:hover {
  background-color: #002244;
  transform: scale(1.05);
}

/* 🔹 Alternar lados */
.noticia-card:nth-child(even) {
  flex-direction: row-reverse;
}


/* ============================================
   🔹 Página de Oferta Académica
   ============================================ */
.oferta-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.oferta-section h1 {
  font-size: 2.4rem;
  color: #FF0000;
  margin-bottom: 20px;
  font-weight: bold;
}

.oferta-section p {
  font-size: 1.05rem;
  margin-bottom: 40px;
  color: #333333;
  line-height: 1.6;
}

/* 🔹 Grid dinámico */
.oferta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

/* 🔹 Tarjeta académica */
.oferta-card {
  background: linear-gradient(135deg, #f9f9f9 60%, #e6e6e6);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.oferta-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* 🔹 Ícono */
.oferta-card img {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.oferta-card:hover img {
  transform: rotate(-5deg) scale(1.1);
}

/* 🔹 Título */
.oferta-card h2 {
  font-size: 1.4rem;
  color: #002244;
  margin-bottom: 10px;
  font-weight: bold;
}

/* 🔹 Texto */
.oferta-card p {
  font-size: 0.95rem;
  color: #555555;
  line-height: 1.5;
}


/* ============================================
   🔹 Página de Orientación Comunitaria
   ============================================ */
.orientacion-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
}

.orientacion-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

.orientacion-section p {
  font-size: 1.05rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Lista en bloques */
.orientacion-section ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

.orientacion-section ul li {
  background: #f9f9f9;
  border-left: 6px solid #002244;    /* azul institucional */
  border-radius: 6px;
  padding: 20px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.orientacion-section ul li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* 🔹 Último párrafo elegante */
.orientacion-section > p:last-of-type {
  font-size: 1.1rem;
  font-style: italic;
  color: #002244;
  text-align: center;
  margin-top: 40px;
}


/* ============================================
   🔹 Página de Política de Privacidad
   ============================================ */
.privacidad-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
}

.privacidad-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.privacidad-section p {
  font-size: 1.05rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Lista de principios */
.privacidad-section ul {
  margin: 40px 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.privacidad-section ul li {
  background: #f9f9f9;
  border-left: 6px solid #FF0000;    /* rojo bandera */
  border-radius: 6px;
  padding: 20px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.privacidad-section ul li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* 🔹 Último párrafo elegante */
.privacidad-section > p:last-of-type {
  font-size: 1.1rem;
  font-style: italic;
  color: #002244;
  text-align: center;
  margin-top: 40px;
}


/* ============================================
   🔹 Página de Programación
   ============================================ */
.programacion-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
}

.programacion-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.programacion-section p {
  font-size: 1.05rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Lista estilo código */
.programacion-section ul {
  background: #1e1e1e;               /* fondo tipo editor */
  color: #00ff9d;                    /* verde neón */
  font-family: "Courier New", monospace;
  padding: 20px;
  border-radius: 8px;
  margin: 30px 0;
  list-style: none;
}

.programacion-section ul li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 25px;
}

.programacion-section ul li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #FF0000;                    /* rojo bandera */
  font-weight: bold;
}

/* 🔹 Último párrafo elegante */
.programacion-section > p:last-of-type {
  font-size: 1.1rem;
  font-style: italic;
  color: #002244;
  text-align: center;
  margin-top: 40px;
}


/* ============================================
   🔹 Página ¿Quiénes Somos?
   ============================================ */
.nosotros-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1200px;
  margin: 0 auto;
}

.nosotros-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 30px;
  font-weight: bold;
  text-align: center;
}

/* 🔹 Grid dinámico */
.nosotros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* 🔹 Tarjetas */
.nosotros-card {
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nosotros-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

.nosotros-card h2 {
  font-size: 1.5rem;
  color: #002244;
  margin-bottom: 15px;
  font-weight: bold;
}

.nosotros-card p {
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  text-align: justify;
}

/* 🔹 Tarjeta principal */
.quienes-somos {
  grid-column: span 2;               /* ocupa más espacio */
  background: linear-gradient(135deg, #ffffff 60%, #f1f1f1);
  border-left: 6px solid #FF0000;
}

/* 🔹 Lista institucional */
.nosotros-card ul {
  list-style: none;
  padding: 0;
}

.nosotros-card ul li {
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
  font-size: 1rem;
  color: #333333;
}

.nosotros-card ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #FF0000;                    /* rojo bandera */
  font-weight: bold;
}


/* ============================================
   🔹 Página de Redes y Telecomunicaciones
   ============================================ */
.redes-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
}

.redes-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.redes-section p {
  font-size: 1.05rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Lista estilo bloques tecnológicos */
.redes-section ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

.redes-section ul li {
  background: #f9f9f9;
  border-left: 6px solid #002244;    /* azul institucional */
  border-radius: 8px;
  padding: 20px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.redes-section ul li::before {
  content: "🌐";                     /* ícono de red */
  position: absolute;
  left: -35px;
  top: 15px;
  font-size: 1.2rem;
  color: #FF0000;                    /* rojo bandera */
}

.redes-section ul li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* 🔹 Último párrafo elegante */
.redes-section > p:last-of-type {
  font-size: 1.1rem;
  font-style: italic;
  color: #002244;
  text-align: center;
  margin-top: 40px;
}


/* ============================================
   🔹 Página de Servicios Comunitarios
   ============================================ */
.servicios-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1200px;
  margin: 0 auto;
}

.servicios-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 30px;
  font-weight: bold;
  text-align: center;
}

/* 🔹 Grid dinámico */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

/* 🔹 Tarjeta de servicio */
.servicio-card {
  background: linear-gradient(135deg, #f9f9f9 60%, #e6e6e6);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.servicio-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* 🔹 Ícono */
.servicio-card img {
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.servicio-card:hover img {
  transform: rotate(-5deg) scale(1.1);
}

/* 🔹 Título */
.servicio-card h2 {
  font-size: 1.4rem;
  color: #002244;
  margin-bottom: 10px;
  font-weight: bold;
}

/* 🔹 Texto */
.servicio-card p {
  font-size: 0.95rem;
  color: #555555;
  line-height: 1.5;
}


/* ============================================
   🔹 Página de Soporte Técnico en TI
   ============================================ */
.soporte-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
}

.soporte-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.soporte-section p {
  font-size: 1.05rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Lista estilo tarjetas técnicas */
.soporte-section ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

.soporte-section ul li {
  background: #f9f9f9;
  border-left: 6px solid #002244;    /* azul institucional */
  border-radius: 8px;
  padding: 20px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.soporte-section ul li::before {
  content: "🛠️";                     /* ícono de soporte técnico */
  position: absolute;
  left: -35px;
  top: 15px;
  font-size: 1.2rem;
  color: #FF0000;                    /* rojo bandera */
}

.soporte-section ul li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* 🔹 Último párrafo elegante */
.soporte-section > p:last-of-type {
  font-size: 1.1rem;
  font-style: italic;
  color: #002244;
  text-align: center;
  margin-top: 40px;
}


/* ============================================
   🔹 Página de Servicio de Soporte Técnico
   ============================================ */
.contenido-servicio {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
}

.contenido-servicio h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.contenido-servicio p {
  font-size: 1.05rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Secciones */
.servicio-info,
.servicio-beneficios {
  margin-bottom: 40px;
}

.servicio-info h2,
.servicio-beneficios h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

/* 🔹 Grid de tarjetas */
.servicio-info ul,
.servicio-beneficios ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
}

.servicio-info ul li,
.servicio-beneficios ul li {
  background: #f9f9f9;
  border-left: 6px solid #002244;    /* azul institucional */
  border-radius: 8px;
  padding: 20px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.servicio-info ul li::before,
.servicio-beneficios ul li::before {
  content: "🛠️";                     /* ícono de soporte */
  position: absolute;
  left: -35px;
  top: 15px;
  font-size: 1.2rem;
  color: #FF0000;                    /* rojo bandera */
}

.servicio-info ul li:hover,
.servicio-beneficios ul li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}


/* ============================================
   🔹 Página de Términos de Uso
   ============================================ */
.terminos-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
}

.terminos-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.terminos-section p {
  font-size: 1.05rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Lista de principios */
.terminos-section ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

.terminos-section ul li {
  background: #f9f9f9;
  border-left: 6px solid #002244;    /* azul institucional */
  border-radius: 8px;
  padding: 20px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.terminos-section ul li::before {
  content: "⚖️";                     /* ícono de justicia */
  position: absolute;
  left: -35px;
  top: 15px;
  font-size: 1.2rem;
  color: #FF0000;                    /* rojo bandera */
}

.terminos-section ul li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* 🔹 Último párrafo elegante */
.terminos-section > p:last-of-type {
  font-size: 1.1rem;
  font-style: italic;
  color: #002244;
  text-align: center;
  margin-top: 40px;
}


/* ============================================
   🔹 Página de Cursos Trust
   ============================================ */
.trust-page {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
}

.trust-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.trust-section p {
  font-size: 1.05rem;
  margin-bottom: 25px;
  color: #333333;
  line-height: 1.8;
  text-align: justify;
}

/* 🔹 Lista estilo certificación */
.trust-section ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 40px 0;
  padding: 0;
  list-style: none;
}

.trust-section ul li {
  background: linear-gradient(135deg, #f9f9f9 60%, #e6e6e6);
  border-left: 6px solid #FF0000;    /* rojo bandera */
  border-radius: 10px;
  padding: 25px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.trust-section ul li::before {
  content: "🎓";                     /* ícono académico */
  position: absolute;
  left: -35px;
  top: 15px;
  font-size: 1.2rem;
  color: #002244;                    /* azul institucional */
}

.trust-section ul li:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

/* 🔹 Último párrafo elegante */
.trust-section > p:last-of-type {
  font-size: 1.1rem;
  font-style: italic;
  color: #002244;
  text-align: center;
  margin-top: 40px;
}


/* ============================================
   🔹 Página de Vacantes Disponibles
   ============================================ */
.contenido-servicio {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1200px;
  margin: 0 auto;
}

.contenido-servicio h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 25px;
  font-weight: bold;
  text-align: center;
}

.contenido-servicio p {
  font-size: 1.05rem;
  margin-bottom: 40px;
  color: #333333;
  line-height: 1.8;
  text-align: center;
}

/* 🔹 Tarjeta de vacante */
.vacante-card {
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  margin-bottom: 40px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vacante-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

/* 🔹 Contenido interno */
.vacante-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.vacante-img {
  flex: 1;
}

.vacante-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vacante-text {
  flex: 2;
  padding: 25px;
}

.vacante-text h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 15px;
  font-weight: bold;
}

.vacante-text ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.vacante-text ul li {
  margin-bottom: 12px;
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
}

/* 🔹 Botón aplicar */
.btn-aplicar {
  display: inline-block;
  padding: 10px 20px;
  background-color: #FF0000;         /* rojo bandera */
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: bold;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-aplicar:hover {
  background-color: #002244;         /* azul institucional */
  transform: scale(1.05);
}


/* ============================================
   🔹 Página de Valores
   ============================================ */
.valores-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.valores-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
}

.valores-section p {
  font-size: 1.05rem;
  margin-bottom: 40px;
  color: #333333;
  line-height: 1.6;
}

/* 🔹 Grid dinámico */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

/* 🔹 Tarjeta de valor */
.valor-card {
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.valor-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* 🔹 Ícono */
.valor-card img {
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.valor-card:hover img {
  transform: rotate(-5deg) scale(1.1);
}

/* 🔹 Título */
.valor-card h2 {
  font-size: 1.4rem;
  color: #002244;
  margin-bottom: 10px;
  font-weight: bold;
}

/* 🔹 Texto */
.valor-card p {
  font-size: 0.95rem;
  color: #555555;
  line-height: 1.5;
}


/* ============================================
   🔹 Página de Visión
   ============================================ */
.vision-section {
  padding: 60px 20px;
  background-color: #ffffff;
  color: #002244;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.vision-section h1 {
  font-size: 2.4rem;
  color: #FF0000;                    /* rojo bandera */
  margin-bottom: 20px;
  font-weight: bold;
}

.vision-section p {
  font-size: 1.05rem;
  margin-bottom: 40px;
  color: #333333;
  line-height: 1.8;
}

/* 🔹 Tarjeta principal */
.vision-card {
  background: linear-gradient(135deg, #f9f9f9 60%, #e6e6e6);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  padding: 40px 30px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  max-width: 700px;
  margin: 0 auto;
}

.vision-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* 🔹 Ícono */
.vision-card img {
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.vision-card:hover img {
  transform: rotate(-5deg) scale(1.1);
}

/* 🔹 Subtítulo */
.vision-card h2 {
  font-size: 1.6rem;
  color: #002244;
  margin-bottom: 15px;
  font-weight: bold;
}

/* 🔹 Texto */
.vision-card p {
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
}












/* Página de prueba */
.contenido-prueba {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #f0f4ff, #e6e9f0);
  border-radius: 12px;
  margin: 40px auto;
  max-width: 800px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.imagen-prueba {
  max-width: 400px;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.titulo-prueba {
  font-size: 42px;
  font-weight: bold;
  color: #002244; /* azul institucional */
  margin-bottom: 15px;
}

.mensaje-prueba {
  font-size: 18px;
  margin: 10px 0;
  color: #333;
}

.btn-curso {
  display: inline-block;
  padding: 8px 16px;
  background: #FF0000; /* rojo bandera */
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s ease;
  font-size: 14px;
}

.btn-curso:hover {
  background: #cc0000;
}