/*
Theme Name: CYR Capacitaciones Tema
Description: Tema desarrollado a medida con efectos avanzados de transformación y adaptabilidad responsiva.
Version: 2.1 (Matte Glass Apple Style + Floating Header Fix)
*/

/* ==========================================================================
   0. RESET Y CONFIGURACIÓN BASE
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 92px !important; /* Ajuste exacto al tamaño del menú */
  font-family: Arial, sans-serif;
  background-color: #f4f6f9;
  -webkit-font-smoothing: antialiased;
}

.contenido-inicio {
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   1. TOP HEADER (BARRA SUPERIOR OSCURA)
   ========================================================================== */
.top-header {
  background-color: #0d1b2a;
  color: #ffffff;
  padding: 14px 4%;
  font-size: 13px;
  transition: all 0.3s ease;
}

.top-contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.top-redes {
  display: flex;
  gap: 18px;
}

.top-redes a {
  color: #ffffff;
  transition:
    color 0.3s ease,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.top-redes a:hover {
  color: #ffc107;
  transform: scale(1.1);
}

.btn-sigvial {
  background-color: #0056b3;
  color: white;
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-sigvial:hover {
  background-color: #ffc107;
  color: #0d1b2a;
  box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4);
  transform: translateY(-1px);
}

/* ==========================================================================
   2. NAVBAR (ESCRITORIO)
   ========================================================================== */
#header-maestro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

#header-maestro.header-normal .navbar-principal {
  background: #ffffff;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 15px 4%;
  box-sizing: border-box;
}

.navbar-contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  transition: all 0.4s ease;
}

.logo-branding {
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 12px;
}

.logo-img {
  max-height: 58px;
  width: auto;
  transition: max-height 0.4s ease;
}

.logo-texto-grupo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.logo-texto-linea {
  font-family: "EB Garamond", serif;
  color: #1e3a8a;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: all 0.4s ease;
}

.header-acciones {
  display: flex;
  align-items: center;
  gap: 15px;
}

.navegacion-principal div,
.menu-items,
.menu-items li {
  background-color: transparent !important;
}

.menu-items {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 15px;
  align-items: center;
}

.menu-items li {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-items li a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

/* Estado activo (página actual) global */
.menu-items li.current-menu-item > a,
.menu-items li.current-page-ancestor > a {
  color: #1e3a8a;
  background: rgba(30, 58, 138, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(30, 58, 138, 0.15);
  font-weight: 700;
}

.menu-items .menu-item-has-children > a::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  margin-left: 8px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-whatsapp {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #25d366;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 19px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}

.menu-toggle .linea-barra {
  width: 100%;
  height: 3px;
  background-color: #1e3a8a;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.menu-toggle.activo .linea-barra:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle.activo .linea-barra:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}
.menu-toggle.activo .linea-barra:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   SUBMENÚ DESKTOP
   ========================================================================== */
.menu-items .sub-menu {
  position: absolute;
  top: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 12px;
  min-width: 260px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1000;
}

.menu-items .sub-menu li {
  width: 100%;
  display: block;
}

.menu-items .sub-menu li a {
  display: block;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  border-radius: 8px;
  text-align: left;
  white-space: normal;
  border: none;
  transition: all 0.3s ease;
}

/* ==========================================================================
   EFECTOS HOVER (ESCRITORIO: EVITA EL BUG PEGAJOSO EN MÓVILES)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .menu-items li a:hover {
    color: #1e3a8a;
    background: rgba(30, 58, 138, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(30, 58, 138, 0.15);
  }

  .menu-items .menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
  }

  .btn-whatsapp:hover {
    background-color: rgba(37, 211, 102, 0.25);
    color: #1ebe57;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 211, 102, 0.5);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.15);
    transform: translateY(-2px);
  }

  .menu-items li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .menu-items .sub-menu li a:hover {
    background: rgba(30, 58, 138, 0.08);
    color: #1e3a8a;
    transform: translateX(5px);
  }
}

/* ==========================================================================
   EFECTO SCROLL (PASTILLA)
   ========================================================================== */
#header-maestro.header-scrolled .top-header {
  transform: translateY(-100%);
  margin-top: -55px;
  opacity: 0;
}

#header-maestro.header-scrolled .navbar-principal {
  width: 90%;
  max-width: 1250px;
  margin: 20px auto 0 auto;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 50px;
  padding: 15px 35px;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
}

#header-maestro.header-scrolled .logo-img {
  max-height: 44px;
}
#header-maestro.header-scrolled .logo-texto-linea {
  font-size: 14.5px;
}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width: 992px) {
  .menu-items {
    gap: 8px;
  }
  .menu-items li a {
    font-size: 13px;
    padding: 8px 12px;
  }
  .logo-texto-linea {
    font-size: 15px;
  }
}

/* ==========================================================================
   MÓVIL (max-width: 768px) - DEFINITIVO
   ========================================================================== */
@media (max-width: 768px) {
  /* --- TOP HEADER --- */
  #header-maestro.header-scrolled .top-header {
    display: none !important;
  }
  #header-maestro:not(.header-scrolled) .top-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 10px 5%;
  }
  .top-contenedor {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .top-redes {
    gap: 12px;
  }
  .btn-sigvial {
    padding: 6px 14px;
    font-size: 11px;
  }

  /* --- NAVBAR --- */
  #header-maestro .navbar-principal {
    position: relative;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    z-index: 10;
    padding: 10px 15px !important;
  }

  #header-maestro .navbar-principal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: #eeeff099 !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    z-index: -1;
  }

  .navbar-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }

  .logo-img {
    max-height: 40px;
  }
  .logo-texto-linea {
    font-size: 13px;
    letter-spacing: 0.2px;
  }
  .logo-link {
    gap: 6px;
  }

  .header-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .menu-toggle {
    display: flex !important;
    margin-left: 4px;
  }

  .btn-whatsapp {
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    flex-shrink: 0;
  }
  .txt-whatsapp,
  .btn-whatsapp span {
    display: none !important;
  }
  .btn-whatsapp svg,
  .btn-whatsapp i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    margin: 0;
  }

  /* --- MENÚ PRINCIPAL --- */
  .navegacion-principal {
    display: block;
    position: absolute;
    top: calc(100% + 15px);
    left: 5%;
    width: 90%;
    z-index: 20;
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0s linear 0.3s;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    padding: 0;
    pointer-events: none;
  }

  .navegacion-principal a {
    pointer-events: auto !important;
  }

  .navegacion-principal.menu-abierto {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    padding: 20px 0 !important;
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0s linear 0s;
    background: rgba(238, 239, 240, 0.6) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      0 15px 35px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  }

  @supports not (backdrop-filter: blur(1px)) {
    .navegacion-principal.menu-abierto {
      background: rgba(255, 255, 255, 0.95) !important;
    }
  }

  /* --- LISTA DEL MENÚ: ALINEACIÓN Y FEEDBACK TÁCTIL (ACTIVE) --- */
  .menu-items {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: transparent !important;
    width: 100%;
    padding: 0 10px;
    margin: 0;
    text-align: left !important;
    display: flex;
  }

  .menu-items li {
    width: 100%;
    text-align: left !important;
    background: transparent !important;
    flex-direction: column;
    list-style: none;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    overflow: visible !important;
    display: flex;
    align-items: stretch;
  }

  .menu-items li a {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 12px 50px 12px 20px;
    color: #1a1a1a;
    background: transparent;
    border-radius: 12px;
    font-weight: 600;
    box-sizing: border-box;
    border: none !important;
    text-align: left !important;
    line-height: 1.4;
    flex: 1;
    -webkit-tap-highlight-color: transparent !important; /* Quita el cuadro nativo gris */
    outline: none !important;
  }

  /* SOLUCIÓN: EFECTO SUTIL AL TOCAR (Active/Tap) */
  .menu-items li a:active {
    background: rgba(30, 58, 138, 0.1) !important; /* Azul clarito de fondo */
    color: #1e3a8a !important; /* Texto azul */
    transition: all 0.1s ease !important; /* Reacción inmediata y elegante */
  }

  /* Asegurar que la página activa mantenga un fondo limpio y sutil */
  .menu-items li.current-menu-item > a,
  .menu-items li.current-page-ancestor > a {
    color: #1e3a8a !important;
    background: rgba(30, 58, 138, 0.05) !important;
    border: 1px solid transparent !important;
    font-weight: 700;
  }

  /* --- TOGGLE (FLECHA) --- */
  .submenu-toggle {
    position: absolute;
    right: 15px;
    top: 23px;
    transform: translateY(-50%);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(30, 58, 138, 0.08);
    cursor: pointer;
    border: none;
    outline: none;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .submenu-toggle i {
    font-size: 13px;
    color: #1e3a8a;
    transition: transform 0.3s ease;
    pointer-events: none;
  }
  .submenu-toggle.activo i {
    transform: rotate(180deg);
  }
  .submenu-toggle:active {
    background: rgba(30, 58, 138, 0.25);
  }

  /* --- SUBMENÚ MÓVIL --- */
  .menu-items .sub-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    background: transparent !important;
    padding: 5px 0 10px 20px !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: auto !important;
    border-radius: 0 !important;
    text-align: left !important;
    overflow: visible !important;
    flex-direction: column;
    align-items: stretch;
  }

  .menu-items .sub-menu.mostrar-sub {
    display: block !important;
  }

  .menu-items .sub-menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: left !important;
    overflow: visible !important;
    position: relative;
  }

  .menu-items .sub-menu li a {
    font-size: 14px !important;
    padding: 8px 15px !important;
    background: rgba(30, 58, 138, 0.05) !important;
    border-radius: 8px !important;
    color: #333333 !important;
    text-align: left !important;
    margin: 3px 0 !important;
    width: 100% !important;
    border: none !important;
    display: block !important;
    padding-right: 20px !important;
  }

  /* Efecto "Toque" también para los sub-enlaces */
  .menu-items .sub-menu li a:active {
    background: rgba(30, 58, 138, 0.15) !important;
    color: #1e3a8a !important;
    transition: all 0.1s ease !important;
  }

  /* Quitamos la flecha por defecto de WordPress */
  .menu-items .menu-item-has-children > a::after {
    display: none !important;
  }

  /* --- HEADER SCROLL (pastilla móvil) --- */
  #header-maestro.header-scrolled .navbar-principal {
    width: calc(100% - 30px) !important;
    margin: 15px auto !important;
    padding: 10px 20px !important;
    border-radius: 40px !important;
    box-sizing: border-box;
    position: relative;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  }

  #header-maestro.header-scrolled .navbar-principal::before {
    background: #eeeff099 !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
  }

  #header-maestro.header-scrolled .logo-img {
    max-height: 34px;
  }
  #header-maestro.header-scrolled .logo-texto-linea {
    font-size: 11px;
  }
  #header-maestro.header-scrolled .navegacion-principal {
    width: calc(100% - 30px);
    left: 15px;
  }
}
/* ==========================================================================
   5. FOOTER
   ========================================================================== */
.footer-sitio {
  background-color: #1c325b;
  color: #ffffff;
  padding: 60px 4% 20px;
}

.footer-contenedor {
  max-width: 1400px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  align-items: start;
}

/* --- LOGO Y BRANDING FOOTER --- */
.footer-logo-bloque {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  background: transparent;
}

.footer-logo-bloque img {
  width: 75px;
}

.footer-texto-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.cap-text {
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
}

.int-text {
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
}

.footer-desc {
  font-size: 14px;
  color: #cbd5e0;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* --- REDES SOCIALES FOOTER --- */
.footer-redes-iconos {
  display: flex;
  gap: 12px;
}

.footer-redes-iconos a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 50%;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-redes-iconos a:hover {
  background: #ffc107;
  transform: translateY(-3px);
}

/* --- MENÚS Y ENLACES FOOTER --- */
.footer-titulo {
  font-size: 15px;
  margin-bottom: 20px;
  color: #ffffff;
  text-transform: uppercase;
}

.footer-menu-lista {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-menu-lista li {
  list-style: none !important;
  margin-bottom: 12px;
}

.footer-menu-lista li a {
  color: #cbd5e0;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-menu-lista li a:hover {
  color: #ffc107;
}

/* --- LISTA DE CONTACTO --- */
.lista-contacto {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-contacto li {
  display: flex;
  align-items: center; /* Cambiamos de flex-start a center para alinear verticalmente */
  gap: 12px;
  margin-bottom: 8px;
  color: #cbd5e0;
  font-size: 14px;
  line-height: 1.4;
}

.lista-contacto li p {
  margin: 0; /* Esto es clave para que Flexbox centre bien */
}

.lista-contacto li i {
  color: #ffc107;
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* --- FOOTER INFERIOR (COPYRIGHT) --- */
.footer-inferior {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #cbd5e0;
}

.menu-legal-lista {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 20px;
}

.menu-legal-lista li a {
  color: #cbd5e0;
  text-decoration: none;
}

.menu-legal-lista li a:hover {
  color: #ffffff;
}

/* --- RESPONSIVE FOOTER --- */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-inferior {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .menu-legal-lista {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   6. BOTÓN FLOTANTE "SUBIR"
   ========================================================================== */
#btn-subir {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffc107 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: none;
  font-size: 20px !important;
  z-index: 99999 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

#btn-subir:hover {
  background: rgba(255, 193, 7, 0.9) !important;
  color: #1c325b !important;
  transform: translateY(-8px) scale(1.05) !important;
  box-shadow: 0 12px 25px rgba(255, 193, 7, 0.3) !important;
  border-color: transparent !important;
}

/* ==========================================================================
   7. HERO SLIDER PRINCIPAL
   ========================================================================== */
.hero-slider {
  width: 100vw;
  height: 720px; /* Altura ideal unificada */
  position: relative;
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
  margin-top: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100%;
  height: 720px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 10%;
  position: relative; /* Obligatorio para contener la capa overlay */
}

/* OVERLAY (CAPA SUPERPUESTA) PARA SLIDERS */
.swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Tono azul noche oscuro con 40% de opacidad */
  background: rgba(13, 27, 42, 0.4);
  z-index: 1;
}

/* --- TARJETA DE CRISTAL (GLASS CARD) --- */
.glass-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 50px;
  border-radius: 20px;
  max-width: 600px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10; /* Asegura estar por encima del overlay */
}

.etiqueta {
  background: #ffc107;
  padding: 5px 15px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 12px;
}

h1 {
  font-size: 45px;
  color: #1e3a8a;
  margin: 15px 0;
  line-height: 1.1;
}

h1 span {
  color: #3b82f6;
}

/* --- BOTONES DEL SLIDER --- */
.slider-botones {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}

.btn-primary,
.btn-secondary {
  padding: 12px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition:
    background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-secondary {
  background: rgba(255, 193, 7, 0.85) !important; /* Cambiado a amarillo */
  color: #0d1b2a !important; /* Texto oscuro para contraste */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Efecto Hover Liquid Glass para Botón Principal */
.btn-primary:hover {
  background: rgba(59, 130, 246, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  transform: translateY(-3px);
}

/* Efecto Hover Liquid Glass para Botón Secundario */
.btn-secondary:hover {
  background: rgba(255, 193, 7, 1) !important;
  color: #000 !important;
  box-shadow: 0 8px 25px rgba(226, 205, 13, 0.39) !important;
  transform: translateY(-3px) !important;
}

/* --- PAGINACIÓN Y NAVEGACIÓN SWIPER --- */
.swiper-pagination {
  position: absolute !important;
  bottom: 30px !important;
  z-index: 20 !important; /* por encima del overlay (z-index:1) */
  width: 100% !important;
  text-align: center !important;
  display: block !important;
}

.swiper-pagination-bullet {
  width: 16px !important;
  height: 16px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition:
    background 0.2s ease,
    transform 0.2s ease !important; /* más rápida */
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  display: inline-block !important;
  margin: 0 8px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.swiper-pagination-bullet-active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  transform: scale(1.4) !important;
}

.swiper-button-next,
.swiper-button-prev {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  width: 55px !important;
  height: 55px !important;
  color: #1e3a8a !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.swiper-button-next {
  right: 40px !important;
}
.swiper-button-prev {
  left: 40px !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 22px !important;
  font-weight: bold !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  transform: scale(1.1);
}

/* ==========================================================================
   8. ANIMACIÓN CARRETERA Y AUTO
   ========================================================================== */
.divisor-carretera {
  width: 100vw;
  height: 100px;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  margin-left: calc(-50vw + 50%);
  display: flex;
  align-items: center;
}

.linea-asfalto {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 3px dashed #5c5d5f48;
  z-index: 1;
}

.auto-sedan {
  position: absolute;
  top: calc(50% - 16px);
  left: 0;
  font-size: 32px;
  color: #ffc107;
  z-index: 3;
  animation: viaje-recto 20s linear infinite;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1));
}

@keyframes viaje-recto {
  0% {
    transform: translateX(-10vw);
  }
  100% {
    transform: translateX(110vw);
  }
}

@media (max-width: 768px) {
  .auto-sedan {
    animation: viaje-recto 8s linear infinite !important;
  }
}

/* ==========================================================================
   9. SECCIÓN: SOBRE NOSOTROS
   ========================================================================== */
.seccion-nosotros {
  padding: 20px 5% 80px 5%;
  background-color: #ffffff;
}

.contenedor-nosotros {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}

/* --- IMAGEN NOSOTROS --- */
.nosotros-imagen {
  width: 45%;
}

.nosotros-imagen img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  object-fit: cover;
  display: block;
}

/* --- CONTENIDO TEXTO --- */
.nosotros-contenido {
  width: 55%;
}

.nosotros-contenido h2 {
  font-size: 38px;
  color: #1e3a8a;
  line-height: 1.2;
  margin-bottom: 25px;
}

.nosotros-contenido h2 span {
  color: #3b82f6;
}

.nosotros-contenido p {
  font-size: 16px;
  color: #4a5568;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* --- BOTÓN LIQUID GLASS NOSOTROS --- */
.btn-liquid-nosotros {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  padding: 14px 32px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;

  background: rgba(59, 130, 246, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-liquid-nosotros:hover {
  background: rgba(255, 193, 7, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #0d1b2a;
  box-shadow: 0 10px 25px rgba(255, 193, 7, 0.4);
  transform: translateY(-4px);
}

.btn-liquid-nosotros i {
  transition: transform 0.3s ease;
}

.btn-liquid-nosotros:hover i {
  transform: translateX(5px);
}

/* --- RESPONSIVE NOSOTROS --- */
@media (max-width: 992px) {
  .contenedor-nosotros {
    flex-direction: column;
    gap: 40px;
  }
  .nosotros-imagen,
  .nosotros-contenido {
    width: 100%;
    text-align: center;
  }
  .nosotros-contenido h2 {
    font-size: 32px;
  }
}
/* ==========================================================================
   10. SECCIÓN: CURSOS DESTACADOS
   ========================================================================== */
.seccion-cursos {
  padding: 80px 5%;
  background-color: #eef2f6; /* Fondo gris-azulado claro */
}

.contenedor-cursos {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HEADER CURSOS --- */
.cursos-header {
  text-align: center;
  margin-bottom: 50px;
}

.cursos-header h2 {
  font-size: 36px;
  color: #1e3a8a;
  margin-bottom: 15px;
}

.cursos-header p {
  color: #4a5568;
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* --- GRID DE CURSOS --- */
.grid-cursos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* --- TARJETAS DE CURSOS (LIQUID GLASS) --- */
.card-curso {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-curso:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Primera tarjeta grande (ocupa dos espacios) */
.card-large {
  grid-column: span 2;
}

/* --- ELEMENTOS DENTRO DE LA TARJETA --- */
.curso-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Etiquetas (Tags) de los cursos */
.tag-curso {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 20px;
}

.tag-obligatorio {
  background-color: #1e3a8a;
}
.tag-subir {
  background-color: #28a745;
}
.tag-aprendizaje {
  background-color: #17a2b8;
}
.tag-rehabilitacion {
  background-color: #6c757d;
}

/* Íconos */
.curso-icono {
  font-size: 24px;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  padding: 10px;
  border-radius: 50%;
}

.card-curso h3 {
  font-size: 22px;
  color: #1e3a8a;
  margin-bottom: 12px;
  line-height: 1.2;
}

.card-curso p {
  font-size: 14.5px;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1; /* Empuja el footer hacia el fondo de la tarjeta */
}

/* --- FOOTER DE LA TARJETA CURSO (Precio y Botón) --- */
.curso-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 15px;
}

/* Precio (Liquid Glass Azul Sutil) */
.precio-glass {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #1e3a8a;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 12px;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Botón Ver Detalles (Liquid Glass Azul) */
.btn-liquid-curso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: bold;
  text-decoration: none;
  background: rgba(59, 130, 246, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  width: max-content;
  transition: all 0.3s ease;
}

.btn-liquid-curso:hover {
  background: rgba(30, 58, 138, 0.9);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
  transform: translateX(3px);
}

/* --- TARJETA OSCURA (CONSULTAS) --- */
.card-oscura {
  background: linear-gradient(135deg, #0a192f 0%, #112a54 50%, #1c4587 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  justify-content: center;
  box-shadow: 0 12px 35px rgba(10, 25, 47, 0.25);
}

.card-oscura h3 {
  color: #ffffff;
  margin-bottom: 12px;
}

.card-oscura p {
  color: #e2e8f0;
}

/* Botón Teléfono (Liquid Glass Amarillo) */
.curso-footer-telefono {
  margin-top: auto;
  display: flex;
  justify-content: flex-start;
}

.btn-liquid-telefono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  background: rgba(255, 193, 7, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #0d1b2a;
  width: max-content;
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.2);
  transition: all 0.3s ease;
}

.btn-liquid-telefono:hover {
  background: rgba(255, 193, 7, 1);
  transform: scale(1.05);
}

/* --- RESPONSIVE CURSOS --- */
@media (max-width: 992px) {
  .grid-cursos {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-large {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .grid-cursos {
    grid-template-columns: 1fr;
  }
  .card-large {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .curso-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   11. SECCIÓN: VIDEO INSTITUCIONAL
   ========================================================================== */
.seccion-video {
  padding: 100px 5%;
  background: linear-gradient(135deg, #0a192f 0%, #112a54 50%, #1c4587 100%);
  color: #ffffff;
  text-align: center;
}

.contenedor-video-inst {
  max-width: 1000px;
  margin: 0 auto;
}

.video-header {
  margin-bottom: 45px;
}

.video-header h2 {
  font-size: 38px;
  color: #ffffff;
  margin-bottom: 15px;
  line-height: 1.2;
}

.video-header h2 span {
  color: #ffc107;
}

.video-header p {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- CONTENEDOR DEL VIDEO --- */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  background-color: #0d1b2a;
  border-radius: 20px;
}

/* ==========================================================================
   12. SECCIÓN: BLOG (NOTICIAS Y NOVEDADES)
   ========================================================================== */
.seccion-blog {
  padding: 80px 5%;
  background-color: #ffffff;
}

.contenedor-blog {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- HEADER BLOG --- */
.blog-header {
  text-align: center;
  margin-bottom: 50px;
}

.blog-header h2 {
  font-size: 38px;
  color: #1e3a8a;
  line-height: 1.2;
  margin-bottom: 20px;
}

.blog-header h2 span {
  color: #3b82f6;
}

.blog-header p {
  font-size: 16px;
  color: #4a5568;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}

/* --- GRID DEL BLOG --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- TARJETAS BLOG (LIQUID GLASS) --- */
.card-blog {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.card-blog:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Imagen destacada del Blog */
.blog-img {
  width: 100%;
  aspect-ratio: 3 / 3;
  max-height: 310px; /* Opcional: evita que sea demasiado alto en pantallas enormes */
  background-color: #f4f6f9;
  overflow: hidden;
  position: relative;
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Llena el contenedor, puede recortar bordes */
  object-position: center;
  display: block;
}

/* Contenido interno de la tarjeta */
.blog-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.blog-content p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: auto;
  color: #4a5568;
  line-height: 1.6;
  font-size: 14.5px;
}

.blog-content h3 {
  font-size: 19px;
  margin: 10px 0;
  color: #1e3a8a;
}

.tag-indigo {
  background: #1e3a8a;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  width: fit-content;
}

/* Botón Leer Más */
.btn-leer-mas {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 20px;
  background: rgba(255, 193, 7, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 20px;
  color: #0d1b2a;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
  width: fit-content;
}

.btn-leer-mas:hover {
  background: #ffc107;
  transform: scale(1.05);
}

/* --- FOOTER DEL BLOG (BOTÓN VER TODOS) --- */
.blog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.btn-liquid-ver-todos {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: rgba(59, 130, 246, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.btn-liquid-ver-todos:hover {
  background: rgba(255, 193, 7, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #0d1b2a;
  box-shadow: 0 10px 25px rgba(255, 193, 7, 0.4);
  transform: translateY(-4px);
}

@media (max-width: 992px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* --- RESPONSIVE BLOG --- */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr !important; /* Una columna en móvil */
  }

  .seccion-blog {
    padding: 40px 15px !important;
  }

  .contenedor-blog {
    padding: 0;
    max-width: 100%;
  }

  .card-blog {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
  }

  .blog-content h3 {
    font-size: 18px;
  }

  .blog-header h2 {
    font-size: 28px;
  }

  .blog-footer {
    justify-content: center;
  }
}
/* ==========================================================================
   13. SECCIÓN: GALERÍA E INFRAESTRUCTURA
   ========================================================================== */
.seccion-galeria {
  padding: 80px 5%;
  background-color: #f4f6f9; /* Fondo alterno para separar secciones */
}

.contenedor-galeria {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- PÍLDORAS DE FILTRO --- */
.filtros-galeria {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 40px;
}

.btn-filtro {
  padding: 10px 28px;
  border-radius: 40px;
  background: transparent;
  border: 1px solid rgba(30, 58, 138, 0.3); /* Borde azul sutil */
  color: #1e3a8a;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.btn-filtro:hover,
.btn-filtro.activo {
  background: #1e3a8a; /* Fondo oscuro al activar */
  color: #ffffff;
  border-color: #1e3a8a;
  box-shadow: 0 8px 20px rgba(30, 58, 138, 0.25);
}

/* --- GRILLA DE FOTOS --- */
.grid-galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas (hace 2 filas de 8) */
  gap: 25px;
}

/* Tarjeta Cuadrada Liquid Glass */
.item-galeria {
  position: relative;
  aspect-ratio: 1 / 1; /* Fuerza a que sea un cuadrado perfecto siempre */
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
}

.item-galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Centra y recorta la foto para que no se deforme */
  transition: transform 0.5s ease;
}

.item-galeria:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  border-color: #ffffff;
}

.item-galeria:hover img {
  transform: scale(1.08); /* Pequeño zoom al pasar el mouse */
}

/* Clase para ocultar fotos al filtrar */
.ocultar-item {
  display: none !important;
}

/* --- MODAL (LIGHTBOX DE LA GALERÍA) --- */
.modal-oculto {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13, 27, 42, 0.92); /* Fondo oscuro transparente */
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}

.modal-activo {
  display: flex; /* Cambia a flex para centrar contenido */
}

.modal-contenido {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 15px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
  animation: zoomModal 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes zoomModal {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.cerrar-modal {
  position: absolute;
  top: 25px;
  right: 40px;
  color: #ffffff;
  font-size: 45px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.cerrar-modal:hover {
  color: #ffc107; /* Amarillo al pasar el ratón por la X */
  transform: scale(1.1);
}

/* --- RESPONSIVE GALERÍA --- */
@media (max-width: 992px) {
  .grid-galeria {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-galeria {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .cerrar-modal {
    top: 15px;
    right: 25px;
    font-size: 35px;
  }
}

/* ==========================================================================
   14. SECCIÓN: ENCUÉNTRANOS (CONTACTO Y MAPA DE GOOGLE)
   ========================================================================== */
.seccion-contacto {
  padding: 80px 5%;
  background-color: #ffffff; /* Fondo limpio para contrastar */
}

.contenedor-contacto {
  max-width: 1200px;
  margin: 0 auto;
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* El mapa es el doble de ancho que la tarjeta de datos */
  gap: 40px;
  align-items: stretch;
}

/* --- TARJETA DE DATOS (AZUL ÍNDIGO ELÉCTRICO) --- */
.card-degradado-azul {
  background: linear-gradient(135deg, #0a192f 0%, #112a54 50%, #1c4587 100%);
  border-radius: 30px;
  padding: 45px 40px;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(10, 25, 47, 0.25);
}

.header-contacto {
  margin-bottom: 35px;
}

.header-contacto h2 {
  font-size: 36px;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.2;
}

.header-contacto p {
  font-size: 15.5px;
  color: #e2e8f0;
  line-height: 1.6;
}

/* Lista de ítconos e información */
.lista-contacto {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-contacto li {
  display: flex;
  align-items: center;       /* ← alineación vertical centrada */
  gap: 12px;
  margin-bottom: 8px;
  color: #cbd5e0;
  font-size: 14px;
  line-height: 1.4;
}
.lista-contacto li:last-child {
  margin-bottom: 0;
}
.lista-contacto li i {
  color: #ffc107;
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}
/* Íconos con efecto de cristal oscuro */
.icono-contacto {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ffc107; /* Amarillo corporativo para los íconos */
  flex-shrink: 0;
}

.texto-contacto strong {
  display: block;
  font-size: 13px;
  color: #93c5fd; /* Azul claro para los subtítulos de cada dato */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.texto-contacto span {
  font-size: 15.5px;
  color: #ffffff;
  line-height: 1.5;
}

/* --- MAPA CON ESQUINAS REDONDEADAS Y SOMBRA --- */
.wrapper-liquid-glass {
  background: transparent; /* Sin fondo blanco sobrante */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  padding: 0;
  border-radius: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Sombra ligera unificada */
  min-height: 450px;
  overflow: hidden; /* Corta el iframe nativo con las curvas del contenedor */
}

.wrapper-liquid-glass iframe {
  border-radius: 30px;
  background-color: transparent;
}

/* --- RESPONSIVE CONTACTO --- */
@media (max-width: 992px) {
  .contacto-grid {
    grid-template-columns: 1fr; /* Se apilan en tablet y móviles */
  }
  .wrapper-liquid-glass {
    min-height: 400px;
  }
}

/* ==========================================================================
   15. REFINAMIENTOS RESPONSIVE (CORRECCIONES MÓVILES EXACTAS)
   ========================================================================== */
@media (max-width: 768px) {
  /* --- AJUSTES DE DESBORDE EN CONTACTO --- */
  .seccion-contacto {
    padding: 50px 15px;
    overflow: hidden;
  }

  .card-degradado-azul {
    padding: 30px 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .wrapper-liquid-glass {
    width: 100%;
    box-sizing: border-box;
  }

  .texto-contacto span {
    word-break: break-word; /* Protege de desbordes por textos largos */
    font-size: 14px;
  }

  /* --- CONTROL DE BOTONES EN EL BANNER (UNA SOLA LÍNEA) --- */
  .slider-botones {
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .slider-botones .btn-primary,
  .slider-botones .btn-secondary {
    padding: 10px 16px !important;
    font-size: 14px !important;
    text-align: center;
  }

  /* --- CONTROL DE ETIQUETA AMARILLA DEL SLIDER --- */
  .glass-card .etiqueta {
    white-space: nowrap !important;
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
}

/* OBLIGACIÓN GLOBAL DE BOTONES EN UNA SOLA LÍNEA */
.slider-botones .btn-primary,
.slider-botones .btn-secondary {
  white-space: nowrap !important;
}

@media (max-width: 992px) {
  .swiper-button-next,
  .swiper-button-prev {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: none !important;
  }
}

/* ==========================================================================
   16. PÁGINAS INTERNAS: HERO BANNER (NOSOTROS)
   ========================================================================== */
.hero-internos {
  position: relative;
  width: 100vw;
  height: 680px; /* Altura elegante, no tan alta como el home */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(-50vw + 50%); /* Ocupa el 100% de la pantalla */
  margin-top: 0;
}

/* La capa fina azul noche (igual a la del slider de inicio) */
.hero-internos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 42, 0.4); /* 40% de opacidad oscura */
  z-index: 1;
}

/* Tarjeta de cristal Liquid Glass centrada (Ajustada más cuadrada) */
.glass-card-centrado {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);

  /* AJUSTES PARA HACERLA MÁS CUADRADA: */
  padding: 65px 60px; /* Más espacio arriba/abajo, menos a los lados */
  max-width: 700px; /* Reducimos el ancho máximo para obligarla a verse más cuadrada */

  border-radius: 20px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

.glass-card-centrado h1 {
  font-size: 48px;
  color: #1e3a8a;
  margin-bottom: 20px;
  line-height: 1.2;
}

.glass-card-centrado h1 span {
  color: #3b82f6; /* Toque azul claro */
}

.glass-card-centrado p {
  font-size: 18px;
  color: #1a202c; /* Gris muy oscuro para lectura perfecta sobre cristal */
  line-height: 1.7;
  margin: 0 auto;
  font-weight: 500;
}

/* --- RESPONSIVE PARA EL BANNER INTERNO --- */
@media (max-width: 768px) {
  .hero-internos {
    height: 500px; /* Aumentamos la altura para que la tarjeta no quede apretada abajo */
    padding: 60px 20px 0 20px; /* El 60px superior empuja la tarjeta lejos del menú */
    align-items: flex-start; /* Evita el centrado estricto para respetar el padding superior */
  }

  .glass-card-centrado {
    padding: 35px 25px;
    max-width: 100%;
    border-radius: 15px;
    margin-top: 20px; /* Margen extra de seguridad */
  }

  .glass-card-centrado h1 {
    font-size: 34px;
    margin-bottom: 15px;
  }

  .glass-card-centrado p {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* ==========================================================================
   17. PÁGINAS INTERNAS: OBJETIVOS (NOSOTROS)
   ========================================================================== */
.seccion-objetivos {
  padding: 80px 5%;
  background-color: #f4f6f9; /* Un fondo gris muy claro para que resalte el cristal */
}

.contenedor-objetivos {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Cabecera de la sección --- */
.header-objetivos {
  text-align: center;
  margin-bottom: 50px;
}

.header-objetivos h2 {
  font-size: 38px;
  color: #1e3a8a;
  margin-bottom: 20px;
  line-height: 1.2;
}

.header-objetivos h2 span {
  color: #3b82f6;
}

.linea-separadora {
  width: 60px;
  height: 4px;
  background-color: #3b82f6;
  margin: 0 auto;
  border-radius: 2px;
}

/* --- Grid y Tarjetas Liquid Glass --- */
.grid-objetivos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch; /* Iguala las alturas */
}

.card-objetivo {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 40px 35px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-objetivo:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border-color: #ffffff;
}

/* --- Diseño del Ícono --- */
.icono-objetivo {
  width: 70px;
  height: 70px;
  background: rgba(59, 130, 246, 0.1); /* Fondo celeste suave */
  color: #3b82f6;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px; /* Bordes ligeramente curvos como en tu imagen */
  margin-bottom: 25px;
  transition: all 0.4s ease;
}

.card-objetivo:hover .icono-objetivo {
  background: #3b82f6;
  color: #ffffff;
  transform: scale(1.1) rotate(5deg); /* Efecto dinámico al pasar el mouse */
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* --- Textos de la tarjeta --- */
.card-objetivo h3 {
  font-size: 21px;
  color: #1e3a8a;
  margin-bottom: 15px;
}

.card-objetivo p {
  font-size: 15.5px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* --- ADAPTACIÓN MÓVIL --- */
@media (max-width: 992px) {
  .grid-objetivos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-objetivos {
    grid-template-columns: 1fr; /* Una columna para móviles */
  }
  .seccion-objetivos {
    padding: 50px 20px;
  }
  .card-objetivo {
    padding: 30px 25px;
  }
}
/* ==========================================================================
   18. PÁGINAS INTERNAS: MISIÓN Y VISIÓN (NOSOTROS)
   ========================================================================== */
.seccion-mision-vision {
  padding: 80px 5%;
  background-color: #ffffff; /* Fondo blanco para contraste con la sección anterior */
}

.contenedor-mv {
  max-width: 1100px; /* Un ancho ligeramente más cerrado para que la lectura sea cómoda */
  margin: 0 auto;
}

.grid-mv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: stretch;
}

/* --- Tarjetas Liquid Glass --- */
.card-mv {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 50px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra todo el contenido */
}

.card-mv:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(59, 130, 246, 0.4); /* Resplandor azul sutil en el borde */
}

/* --- Cabecera de la tarjeta (Ícono + Título) --- */
.mv-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 25px;
  width: 100%;
}

.icono-mv {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.4s ease;
}

/* Tonos corporativos para íconos */
.icono-azul {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.icono-amarillo {
  background: rgba(255, 193, 7, 0.25);
  color: #d97706; /* Naranja/Amarillo oscuro para asegurar buen contraste */
}

.card-mv:hover .icono-mv {
  transform: scale(1.15) rotate(5deg);
}

.mv-header h3 {
  font-size: 28px;
  color: #1e3a8a;
  margin: 0;
}

.mv-header h3 span {
  color: #3b82f6;
}

/* --- Párrafo --- */
.card-mv p {
  font-size: 15.5px;
  color: #4a5568;
  line-height: 1.7;
  text-align: center;
  margin: 0;
}

/* --- ADAPTACIÓN MÓVIL --- */
@media (max-width: 992px) {
  .grid-mv {
    gap: 25px;
  }
}

@media (max-width: 768px) {
  .grid-mv {
    grid-template-columns: 1fr; /* Apila las tarjetas en una columna */
  }
  .seccion-mision-vision {
    padding: 50px 20px;
  }
  .card-mv {
    padding: 35px 25px;
  }
  .mv-header h3 {
    font-size: 24px;
  }
}

/* ==========================================================================
   19. PÁGINAS INTERNAS: VIDEO HERO (NOSOTROS)
   ========================================================================== */
.seccion-video-hero {
  width: 100%;
  /* 5px arriba y abajo, 5px a los lados (margen fino) */
  padding: 5px;
  background-color: #ffffff;
  /* Esto garantiza que no haya espacios extraños ocultos */
  margin-bottom: 0 !important;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
.seccion-video-hero {
  width: 100%;
  padding: 10px; /* Margen fino de 5px arriba, abajo, izquierda y derecha */
  background-color: #ffffff;
  display: flex;
  justify-content: center;
}
.video-container-wrapper {
  position: relative;
  /* Esto hace que el video ocupe casi todo el ancho, dejando solo los 5px de padding del padre */
  width: 100%;
  height: 70vh;
  border-radius: 20px;
  overflow: hidden;
  margin: 0; /* Eliminamos el auto para que ocupe el espacio disponible */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
#video-infraestructura {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(
    13,
    27,
    42,
    0.6
  ); /* Capa azul oscura para que el texto resalte */
  z-index: 1;
}

.video-contenido {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 2;
  color: #ffffff;
  max-width: 600px;
}

.video-contenido h2 {
  font-size: 42px;
  margin-bottom: 20px;
}

.video-contenido h2 span {
  color: #ffc107;
} /* Amarillo para resaltar */

.video-contenido p {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
/* --- ADAPTACIÓN MÓVIL: SECCIÓN VIDEO HERO --- */
@media (max-width: 768px) {
  .seccion-video-hero {
    height: auto; /* Dejamos que la altura se ajuste al contenido */
    min-height: 400px;
    padding: 40px 20px; /* Damos respiro lateral */
    display: flex;
    align-items: center;
  }

  .video-contenido {
    position: absolute;
    top: 50%;
    left: 50%; /* Centrado absoluto */
    transform: translate(-50%, -50%);
    width: 85%; /* Damos un poco de respiro lateral */
    text-align: center;
    padding: 0;
  }

  .video-contenido h2 {
    font-size: 22px; /* Reducimos más el tamaño para evitar desbordes */
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .video-contenido p {
    font-size: 13px; /* Texto más pequeño y cómodo */
    line-height: 1.4;
    margin: 0 auto;
    max-width: 90%; /* Evita que el texto toque los bordes del video */
  }
}
/* ==========================================================================
   20. PÁGINA INTERNA: CTA FINAL (FULL WIDTH LIMPIO)
   ========================================================================== */
.seccion-cta-final {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: linear-gradient(135deg, #0d1b2a 0%, #1e3a8a 100%);
  padding: 100px 20px;
  text-align: center;
}

/* Contenedor limpio sin bordes ni cristales */
.contenido-cta-limpio {
  max-width: 800px;
  margin: 0 auto;
  color: #ffffff;
}

.subtitulo-cta {
  display: block;
  color: #ffc107;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.contenido-cta-limpio h2 {
  font-size: 44px;
  margin-bottom: 15px;
}

.contenido-cta-limpio p {
  color: #e2e8f0;
  font-size: 18px;
  margin-bottom: 35px;
}

/* El botón se mantiene igual */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #25d366;
  color: #ffffff;
  padding: 12px 15px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  background-color: #128c7e;
  transform: translateY(-3px);
}
/* --- CORRECCIÓN RESPONSIVE: BOTÓN WHATSAPP --- */
@media (max-width: 768px) {
  .btn-whatsapp {
    padding: 12px 25px; /* Botón un poco más compacto */
    font-size: 16px; /* Fuente ligeramente más pequeña */
    gap: 8px; /* Menos espacio entre ícono y texto */
    width: auto; /* Evita que se estire demasiado */
    max-width: 90%; /* Asegura que no se salga de la pantalla */
    justify-content: center;
  }

  .contenido-cta-limpio h2 {
    font-size: 32px; /* Título más ajustado para pantallas pequeñas */
  }

  .seccion-cta-final {
    padding: 60px 20px; /* Reducimos el padding vertical para que no ocupe tanto espacio */
  }
}
/* ==========================================================================
   BANNER HERO INTERNOS (ESTÉTICA LIQUID GLASS + CAPA AZUL)
   ========================================================================== */
.hero-internos {
  position: relative;
  width: 100%;
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1; /* Necesario para que la capa azul funcione bien */
}

/* AQUÍ ESTÁ LA CAPA AZUL SUTIL QUE PEDISTE */
.hero-internos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13, 27, 42, 0.4); /* Azul oscuro con 40% de opacidad */
  z-index: -1; /* Se queda detrás del recuadro liquid glass */
}

.glass-card-centrado {
  background: rgba(255, 255, 255, 0.45); /* Nivel de transparencia de la foto */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 40px 50px;
  max-width: 700px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Colores idénticos a tu imagen de referencia */
.glass-card-centrado h1 {
  font-size: 46px;
  color: #1e3a8a; /* Azul oscuro para "Nuestros" */
  margin-bottom: 15px;
  font-weight: bold;
}

.glass-card-centrado h1 span {
  color: #3b82f6; /* Azul brillante para "Cursos" */
}

.glass-card-centrado p {
  font-size: 18px;
  line-height: 1.6;
  color: #333333; /* Gris muy oscuro para que se lea perfecto */
  margin: 0;
}

/* --- ADAPTACIÓN MÓVIL --- */
@media (max-width: 768px) {
  .glass-card-centrado {
    padding: 30px 20px;
    width: 95%;
  }
  .glass-card-centrado h1 {
    font-size: 32px;
  }
  .glass-card-centrado p {
    font-size: 15px;
  }
}
/* ==========================================================================
   SECCIÓN CURSOS: FUSIÓN GRILLA (ANIMADA Y PREMIUM)
   ========================================================================== */
.seccion-grilla-cursos {
  width: 100%;
  padding: 60px 20px;
  background-color: #f8fafc; /* Gris ultra claro y moderno */
}

.cursos-container-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- BARRA DE FILTROS DEGRADADO AZUL (Ajuste Índigo y Redondeado) --- */
.filtros-bar-gradient {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 15px;
  /* Degradado azul noche profundo basado en tu imagen */
  background: linear-gradient(145deg, #0f172a 0%, #1e3a8a 100%);
  border-radius: 30px;
  box-shadow: 0 12px 30px rgba(13, 22, 39, 0.4);
}

.filtros-group,
.orden-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- COMBO BOX (Diseño Píldora y Flechas controladas) --- */
.glass-select {
  padding: 10px 35px 10px 18px;
  border-radius: 50px;

  /* Efecto Liquid Glass sobre el fondo oscuro */
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Flecha SVG personalizada en color blanco */
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;

  color: #ffffff; /* Texto blanco para resaltar elegantemente */
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.glass-select:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}
/* --- OPCIONES DESPLEGABLES (Fallback elegante) --- */
/* Los navegadores no permiten cristal aquí, así que usamos un color sólido corporativo */
.glass-select option {
  background-color: #172a53; /* Fondo azul oscuro corporativo */
  color: #ffffff; /* Letras blancas */
  font-weight: 500;
}

/* Efecto Liquid Glass General para Tarjetas */
.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* --- GRILLA DE 3 COLUMNAS --- */
.grilla-cursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 40px;
}

/* Animación de entrada suave al filtrar */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

/* --- TARJETA DE CURSO (Animación Suave y Fluida) --- */
.curso-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Esta línea hace el trabajo de suavizar. No necesita !important */
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.curso-card:hover {
  /* Un levantamiento de 8px es el punto dulce para que se vea elegante */
  transform: translateY(-8px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08);
}
.curso-img-wrapper {
  position: relative;
  width: 100%;
  /* Mantiene exactamente la proporción de ancho 780 y alto 380 */
  aspect-ratio: 780 / 480;
  overflow: hidden;
  background-color: #e2e8f0; /* Color de fondo por si la imagen tarda en cargar */
}

.curso-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la foto llene el espacio sin deformarse */
  transition: transform 0.5s ease;
}
.curso-card:hover .curso-img-wrapper img {
  transform: scale(1.05);
}
/* Etiquetas */
.curso-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 2;
}

.tag-grey {
  background: #64748b;
}
.tag-dark {
  background: #1e293b;
}
.tag-teal {
  background: #0d9488;
}

.curso-content {
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.curso-content h3 {
  font-size: 18px;
  color: #1e3a8a;
  margin: 0 0 15px 0;
  font-weight: 700;
  line-height: 1.3;
}

/* Iconos de meta-datos */
.curso-meta-iconos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.curso-meta-iconos span {
  display: flex;
  align-items: center;
  font-size: 13.5px;
  color: #64748b;
}

.curso-meta-iconos svg {
  width: 16px;
  height: 16px;
  fill: #3b82f6; /* Iconos en color azul corporativo */
  margin-right: 8px;
}

.curso-footer {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.precio-col {
  display: flex;
  flex-direction: column;
}

.label-inv {
  font-size: 10px;
  color: #9ca3af;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.precio {
  font-size: 20px;
  font-weight: 800;
  color: #1e3a8a;
}

/* Botón estilo píldora de tu Imagen 1 */
.btn-pill-blue {
  background: #5b92f7;
  color: #ffffff;
  padding: 10px 16px; /* Reducimos el relleno para hacerlo más delgado */
  border-radius: 50px;
  text-decoration: none;
  font-size: 13px; /* Fuente más pequeña y sutil */
  font-weight: 700; /* Reducimos un poco el grosor para que no se vea tosco */
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Menos espacio entre el texto y la flecha */
  box-shadow: 0 4px 10px rgba(91, 146, 247, 0.3);
  transition: all 0.3s ease;
}
.btn-pill-blue svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5; /* Un trazo un poco más fino acorde al tamaño */
}
.btn-pill-blue:hover {
  background: #427ce6;
  transform: translateY(
    -2px
  ); /* En lugar de crecer, solo se levanta un poquito */
  box-shadow: 0 6px 14px rgba(91, 146, 247, 0.4);
  color: #ffffff;
}

/* ==========================================================================
   PAGINACIÓN DINÁMICA (CORREGIDA PARA JS)
   ========================================================================== */
#paginacion-cont {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
  margin-bottom: 40px;
  width: 100%;
}

/* ESTE ES EL SELECTOR QUE ARREGLA LA PAGINACIÓN INVISIBLE */
.page-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e8f0;
  padding: 10px 18px;
  border-radius: 8px;
  color: #4a5568;
  font-weight: bold;
  font-size: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.page-btn:hover,
.page-btn.active {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 992px) {
  .grilla-cursos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .filtros-bar-gradient {
    flex-direction: column;
    align-items: stretch;
    border-radius: 20px;
  } /* Ajuste del borde en móvil para que no se vea deforme */
  .filtros-group,
  .orden-group {
    flex-direction: column;
  }
  .grilla-cursos-grid {
    grid-template-columns: 1fr;
  }
}
/* --- SECCIÓN CTA: DISEÑO DEFINITIVO --- */

.seccion-cta-indigo {
  width: 100%;
  /* Aumentamos drásticamente el padding superior e inferior para darle mucha altura al fondo */
  padding: 120px 20px;
  background: linear-gradient(145deg, #0f172a 0%, #1e3a8a 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cta-glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  /* Reducimos el ancho máximo y aumentamos el padding vertical para hacerla cuadrada */
  padding: 60px 50px;
  max-width: 680px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cta-glass-card h2 {
  font-size: 30px;
  color: #ffd700;
  margin-bottom: 15px;
  font-weight: 800;
  line-height: 1.2;
}
.cta-glass-card p {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 35px; /* Más espacio para separar el botón y estilizar la tarjeta */
  line-height: 1.5;
  opacity: 0.9;
}
/* --- BOTÓN WHATSAPP MEJORADO --- */
.btn-whatsapp-glass {
  background: #25d366;
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
  transition: all 0.3s ease;
  border: none;
}
.btn-whatsapp-glass:hover {
  background: #128c7e;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

/* --- MÓVIL --- */
@media (max-width: 768px) {
  .cta-glass-card {
    padding: 30px;
  }
  .cta-glass-card h2 {
    font-size: 28px;
  }
}

/* --- CONFIGURACIÓN "PRÓXIMAMENTE" (Fácil de activar/desactivar) --- */
.curso-card.curso-proximamente .curso-img-wrapper {
  position: relative;
  /* Filtro para el aspecto desactivado */
  filter: grayscale(80%) brightness(70%);
  transition: all 0.4s ease;
}

.capa-proximamente {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background: rgba(0, 0, 0, 0.2);
}

.capa-proximamente span {
  color: #ef4444; /* Rojo */
  background: rgba(255, 255, 255, 0.95);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transform: rotate(-5deg);
  border: 2px solid #ef4444;
}

/* Impedir el efecto hover de las tarjetas activas */
.curso-card.curso-proximamente:hover {
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Esto fuerza a todos los banners a ocupar el 100% del ancho de la pantalla */
.hero-internos {
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow: hidden;
}
/* ==========================================================================
   BANNER EXCLUSIVO: PÁGINA DE CONTACTO (CLON ESTÉTICO)
   ========================================================================== */
.hero-contacto-indep {
  position: relative;
  width: 100vw;
  height: 680px; /* Altura exacta de tus otros banners */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(
    -50vw + 50%
  ); /* Ocupa el 100% de la pantalla sin línea blanca */
  margin-top: 0;
}

/* La capa fina azul noche */
.hero-contacto-indep::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 42, 0.4); /* 40% de opacidad oscura */
  z-index: 1;
}

/* Tarjeta de cristal Liquid Glass centrada */
.glass-card-contacto {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 65px 60px;
  max-width: 700px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

.glass-card-contacto h1 {
  font-size: 48px;
  color: #1e3a8a;
  margin-bottom: 20px;
  line-height: 1.2;
}

.glass-card-contacto h1 span {
  color: #3b82f6;
}

.glass-card-contacto p {
  font-size: 18px;
  color: #1a202c;
  line-height: 1.7;
  margin: 0 auto;
  font-weight: 500;
}

/* --- RESPONSIVE PARA EL BANNER DE CONTACTO --- */
@media (max-width: 768px) {
  .hero-contacto-indep {
    height: 500px;
    padding: 60px 20px 0 20px;
    align-items: flex-start;
  }

  .glass-card-contacto {
    padding: 35px 25px;
    max-width: 100%;
    border-radius: 15px;
    margin-top: 20px;
  }

  .glass-card-contacto h1 {
    font-size: 34px;
    margin-bottom: 15px;
  }

  .glass-card-contacto p {
    font-size: 15px;
    line-height: 1.5;
  }
}
/* ==========================================================================
   SECCIÓN: INFORMACIÓN Y FORMULARIO DE CONTACTO
   ========================================================================== */
.seccion-info-formulario {
  padding: 80px 5%;
  background-color: #f4f6f9; /* Fondo gris muy claro para contraste */
}

.contenedor-contacto-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr; /* Proporción para darle más espacio al formulario */
  gap: 40px;
  align-items: start;
}

/* --- COLUMNA IZQUIERDA: TARJETAS DE INFORMACIÓN --- */
.columna-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tarjeta-info-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 25px 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease;
}

.tarjeta-info-glass:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.icono-info {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.tarjeta-info-glass:hover .icono-info {
  transform: scale(1.1) rotate(5deg);
}
.icono-azul {
  background: linear-gradient(135deg, #1e3a8a 0%, #112a54 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(30, 58, 138, 0.3);
}
.icono-amarillo {
  background: linear-gradient(135deg, #ffc107 0%, #ffcf33 100%);
  color: #0d1b2a; /* Ícono oscuro para que contraste con el amarillo */
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.35);
}
.icono-electrico {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35);
}
.texto-info h3 {
  font-size: 18px;
  color: #1e3a8a;
  margin: 0 0 5px 0;
  font-weight: 700;
}

.texto-info p {
  margin: 0;
  font-size: 14.5px;
  color: #4b5563;
  line-height: 1.5;
}

.texto-info p span {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 600;
}

/* --- COLUMNA DERECHA: FORMULARIO LIQUID GLASS --- */
.columna-formulario-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
  /* Agregamos la transición para que el movimiento sea fluido */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.columna-formulario-glass:hover {
  transform: translateY(-6px); /* Se levanta sutilmente */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08); /* La sombra se expande dando profundidad */
  border-color: #ffffff; /* El borde brilla un poco más simulando cristal limpio */
}
.columna-formulario-glass h2 {
  font-size: 32px;
  color: #1e3a8a;
  margin-bottom: 30px;
}

/* Estilos inyectados a Contact Form 7 */
.formulario-contenedor input[type="text"],
.formulario-contenedor input[type="email"],
.formulario-contenedor input[type="tel"],
.formulario-contenedor select,
.formulario-contenedor textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 15px 20px;
  font-size: 15px;
  color: #374151;
  margin-bottom: 20px;
  font-family: inherit;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.formulario-contenedor input:focus,
.formulario-contenedor select:focus,
.formulario-contenedor textarea:focus {
  outline: none;
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.formulario-contenedor textarea {
  resize: vertical;
  min-height: 120px;
}

/* Botón de Enviar (Amarillo Corporativo) */
.formulario-contenedor input[type="submit"] {
  background: #ffc107;
  color: #1e3a8a;
  font-weight: bold;
  font-size: 16px;
  padding: 15px 35px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
  margin-left: auto; /* Lo empuja a la derecha como en tu imagen */
  box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3);
}

.formulario-contenedor input[type="submit"]:hover {
  background: #e0a800;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(255, 193, 7, 0.4);
}

/* Estructura de dos columnas dentro del formulario para Nombre y Teléfono */
.form-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .contenedor-contacto-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .columna-formulario-glass {
    padding: 30px 20px;
  }
  .form-fila {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* ==========================================================================
   SECCIÓN: MAPA GOOGLE FULL WIDTH CON SHADOW ELÉCTRICO (ACTUALIZADO)
   ========================================================================== */
.seccion-mapa-full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* Aumentamos la altura considerablemente para mayor impacto */
  height: 600px;
  margin-top: 60px; /* Separación con el formulario superior */

  /* Sombra azul eléctrico ligero en los bordes superior e inferior */
  box-shadow:
    0px -8px 25px rgba(37, 99, 235, 0.2),
    0px 8px 25px rgba(37, 99, 235, 0.2);
  z-index: 5;
}

.mapa-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapa-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Ligero filtro opcional para que los colores del mapa armonicen */
  filter: contrast(105%) opacity(0.95);
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
  .seccion-mapa-full {
    /* También hacemos el mapa más alto en la vista de celular */
    height: 450px;
    margin-top: 40px;
  }
}
/* ==========================================================================
   BANNER BLOG: ESTILO RESTRINGIDO Y ESTRICTO
   ========================================================================== */
/* Banner de Blog: Ajuste de simetría y márgenes */
.banner-post-destacado {
  width: 100%;
  max-width: 1280px;
  margin: 60px auto;
  height: 450px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 5%;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
/* LA CAPA AZUL LIGERA (Capa corporativa) */
.banner-post-destacado::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 27, 42, 0.4); /* Azul corporativo con 40% de opacidad */
  z-index: 0; /* Se coloca sobre la imagen pero debajo del contenido */
  border-radius: 20px;
}
.glass-articulo-destacado {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 35px; /* Padding igualado en todas las direcciones */
  max-width: 450px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  text-align: left;
}
.tag-categoria {
  display: inline-block;
  background: #3b82f6;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 20px; /* Padding horizontal más amplio para forma de píldora */
  border-radius: 50px; /* Borde totalmente redondeado para efecto píldora */
  margin-bottom: 15px;
}
/* Usando la tipografía general del sitio */
.glass-articulo-destacado h1 {
  font-size: 24px;
  color: #1e3a8a;
  margin: 10px 0;
  line-height: 1.3;
  font-weight: 700;
}
.glass-articulo-destacado p {
  font-size: 14px;
  color: #374151; /* Un poco más oscuro para mejor lectura sobre el fondo */
  line-height: 1.5;
  margin-bottom: 20px;
}
.link-leer-mas {
  color: #fbbf24; /* Color amarillo */
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
  background: transparent !important; /* Asegura que no tenga fondo */
  padding: 0 !important; /* Asegura que no tenga relleno de botón */
}

.link-leer-mas:hover {
  color: #f59e0b; /* Amarillo más intenso al pasar el mouse */
}

.banner-post-destacado {
  margin-bottom: 30px; /* Reducimos el margen inferior para que sea simétrico al superior */
}

/* ==========================================================================
   SECCIÓN BLOG: GRILLA PRINCIPAL Y SIDEBAR (1280px)
   ========================================================================== */

.contenedor-blog-grid {
  max-width: 1280px;
  margin: 0 auto 60px auto;
  padding: 0 0;
  display: grid;
  grid-template-columns: 2fr 1fr; /* Proporción 2/3 para artículos, 1/3 para sidebar */
  gap: 40px;
}
.columna-izquierda-blog {
  display: flex;
  flex-direction: column;
  gap: 40px; /* Separa las tarjetas de los números de paginación */
}
/* --- COLUMNA IZQUIERDA: ARTÍCULOS --- */

.blog-articulos {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Grilla simétrica de 2 tarjetas */
  gap: 30px;
  align-content: start;
}

/* Base de la Tarjeta Liquid Glass + Animación */
.card-glass-post {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-glass-post:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-img-top {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Píldora de categoría en la imagen */
.tag-categoria-flotante {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #3b82f6;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 15px;
  border-radius: 20px;
}

/* Contenido de la Tarjeta */
.card-body-glass {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-body-glass h3 {
  font-size: 18px;
  color: #1e3a8a;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.3;
}

.card-body-glass p {
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 20px;
  flex-grow: 1;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 15px;
}

.fecha-post {
  font-size: 12px;
  color: #9ca3af;
}

.link-leer-mas-small {
  font-size: 13px;
  color: #3b82f6;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
  display: inline-block;
}

.link-leer-mas-small:hover {
  color: #1e3a8a;
  transform: translateX(5px);
}

/* --- COLUMNA DERECHA: SIDEBAR (Widgets) --- */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.widget-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.widget-title {
  font-size: 18px;
  color: #1e3a8a;
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 700;
}

/* Buscador */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field {
  width: 100%;
  padding: 12px 15px 12px 40px;
  border: 1px solid rgba(30, 58, 138, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  outline: none;
  color: #4a5568;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.search-field:focus {
  border-color: #3b82f6;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #1e3a8a;
  font-size: 14px;
}

/* Lista de Categorías */
.lista-categorias {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-categorias li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.lista-categorias a {
  color: #4a5568;
  text-decoration: none;
  font-size: 15px;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
  display: inline-block;
}

.lista-categorias a:hover {
  color: #3b82f6;
  transform: translateX(5px);
}

.count-pill {
  background: #3b82f6;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.widget-publicidad {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* --- PAGINACIÓN --- */
.paginacion-blog {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.paginacion-blog .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(30, 58, 138, 0.2);
  color: #1e3a8a;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
}

.paginacion-blog .page-numbers:hover {
  background: #3b82f6;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.paginacion-blog .current {
  background: #1e3a8a;
  color: #ffffff;
  border-color: #1e3a8a;
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE (Tablets horizontales)
   ========================================================================== */
@media (max-width: 900px) {
  /* El sidebar pasa a la parte inferior */
  .contenedor-blog-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ==========================================================================
   ADAPTACIÓN MÓVIL ESTRICTA (Tablets verticales y Celulares - 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Contenedor General */
  .contenedor-blog-grid {
    padding: 0 15px; /* Reducimos el espacio vacío a los lados en el celular */
  }

  /* 2. Banner Principal */
  .banner-post-destacado {
    width: calc(
      100% - 30px
    ); /* ¡El ajuste clave! Resta 15px de cada lado para el margen */
    height: auto;
    min-height: 380px;
    margin: 25px auto; /* Lo centra perfectamente en el espacio restante */
    padding: 20px 15px;
    justify-content: center;
  }
  .glass-articulo-destacado {
    max-width: 100%;
    padding: 20px; /* Reducimos el vidrio esmerilado para ganar espacio */
  }

  .glass-articulo-destacado h1 {
    font-size: 22px; /* Título más compacto */
    margin-bottom: 12px;
  }

  .glass-articulo-destacado p {
    font-size: 14px;
    margin-bottom: 15px;
  }

  /* 3. Grilla de Artículos */
  .blog-articulos {
    grid-template-columns: 1fr; /* Forzamos a 1 sola tarjeta por fila */
    gap: 20px;
  }

  .card-img-top {
    height: 200px; /* Imágenes de tarjetas proporcionadas al celular */
  }

  .card-body-glass {
    padding: 20px;
  }

  /* 4. Sidebar y Widgets */
  .blog-sidebar {
    gap: 20px;
  }

  .widget-glass {
    padding: 20px; /* Widgets más compactos */
  }

  .widget-title {
    font-size: 16px;
    margin-bottom: 15px;
  }

  /* 5. Shortcode Publicitario */
  .widget-publicidad {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ==========================================================================
   PÁGINA DE ARTÍCULO INDIVIDUAL (SINGLE POST)
   ========================================================================== */

/* Fondo suave para no cansar la vista */
.fondo-lectura-suave {
  background-color: #f4f7fb; /* Gris azulado muy claro */
  padding: 60px 0;
  min-height: 100vh;
}

.contenedor-articulo-single {
  max-width: 900px; /* Ancho ideal para lectura cómoda, no muy ancho */
  margin: 0 auto;
  padding: 0 20px;
}

/* Efecto Liquid Glass central */
.glass-articulo-completo {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* --- Cabecera y Metadatos --- */
.cabecera-single {
  text-align: center;
  margin-bottom: 40px;
}

.tag-categoria-single {
  display: inline-block;
  background: #3b82f6;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.titulo-single {
  font-size: 36px;
  color: #1e3a8a;
  line-height: 1.2;
  margin-bottom: 25px;
  font-weight: 800;
}

.meta-single-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  flex-wrap: wrap;
}

.meta-item {
  background: rgba(255, 255, 255, 0.5);
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(30, 58, 138, 0.1);
}

/* --- Imagen Destacada --- */
.imagen-destacada-single img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  margin-bottom: 40px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- Contenido del Artículo (Optimizado para lectura) --- */
.contenido-single {
  font-size: 17px;
  color: #334155;
  line-height: 1.8; /* Interlineado amplio para fácil lectura */
}

.contenido-single h2,
.contenido-single h3 {
  color: #1e3a8a;
  margin-top: 40px;
  margin-bottom: 20px;
}

.contenido-single p {
  margin-bottom: 25px;
}

.contenido-single img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 20px 0;
}

/* --- Etiquetas (Tags) --- */
.etiquetas-single {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid rgba(30, 58, 138, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tag-pildora {
  background: #e2e8f0;
  color: #475569;
  font-size: 13px;
  padding: 5px 15px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.3s;
}

.tag-pildora:hover {
  background: #cbd5e1;
}

/* --- Redes Sociales --- */
.redes-compartir-single {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.redes-compartir-single span {
  font-weight: 700;
  color: #1e3a8a;
}

.iconos-redes {
  display: flex;
  gap: 10px;
}

.btn-red {
  padding: 8px 16px;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.facebook {
  background: #1877f2;
}
.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}
.tiktok {
  background: #000000;
}

/* --- Firma CyR Capacitaciones --- */
.firma-cyr-blog {
  margin-top: 50px;
  background: rgba(30, 58, 138, 0.05);
  border: 1px solid rgba(30, 58, 138, 0.1);
  border-radius: 15px;
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.cyr-logo-mini {
  font-size: 40px;
}

.cyr-info h4 {
  margin: 0 0 5px 0;
  color: #1e3a8a;
  font-size: 18px;
}

.cyr-info p {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

/* --- Adaptación Móvil --- */
@media (max-width: 768px) {
  .glass-articulo-completo {
    padding: 25px 20px;
  }

  .titulo-single {
    font-size: 26px;
  }

  .firma-cyr-blog {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   PÁGINAS LEGALES Y PREGUNTAS FRECUENTES (Liquid Glass)
   ========================================================================== */

.contenedor-paginas-legales {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.glass-caja-legal {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.glass-caja-legal h1 {
  font-size: 32px;
  color: #1e3a8a;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 800;
}

.glass-caja-legal h2 {
  font-size: 22px;
  color: #1e3a8a;
  margin-top: 30px;
  margin-bottom: 15px;
}

.glass-caja-legal p,
.glass-caja-legal ul {
  font-size: 16px;
  color: #4a5568;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Adaptación Móvil */
@media (max-width: 768px) {
  .glass-caja-legal {
    padding: 30px 20px;
  }
  .glass-caja-legal h1 {
    font-size: 26px;
  }
}
/* ==========================================================================
   PÁGINAS LEGALES Y PREGUNTAS FRECUENTES (Liquid Glass)
   ========================================================================== */

.contenedor-paginas-legales {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.glass-caja-legal {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.glass-caja-legal h1 {
  font-size: 32px;
  color: #1e3a8a;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 800;
}

.glass-caja-legal h2 {
  font-size: 22px;
  color: #1e3a8a;
  margin-top: 30px;
  margin-bottom: 15px;
}

.glass-caja-legal p,
.glass-caja-legal ul {
  font-size: 16px;
  color: #4a5568;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Adaptación Móvil */
@media (max-width: 768px) {
  .glass-caja-legal {
    padding: 30px 20px;
  }
  .glass-caja-legal h1 {
    font-size: 26px;
  }
}
/* ==========================================================================
   ACORDEÓN DE PREGUNTAS FRECUENTES (Estilo Liquid Glass Forzado)
   ========================================================================== */

/* Contenedor individual de cada pregunta (Caja separada) */
.faq-acordeon {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(30, 58, 138, 0.2);
  border-radius: 12px;
  margin-bottom: 20px; /* Separación clara entre cada caja */
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.faq-acordeon:hover {
  box-shadow: 0 8px 25px rgba(30, 58, 138, 0.12);
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* La barra de la pregunta en sí */
.faq-pregunta {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a8a;
  padding: 20px 25px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;

  /* Estos dos comandos ocultan la flecha negra fea del navegador */
  list-style: none !important;
}
.faq-pregunta::-webkit-details-marker {
  display: none !important;
}

/* Nuestra propia flecha elegante y personalizada */
.faq-pregunta::after {
  content: "▼";
  font-size: 14px;
  color: #3b82f6;
  transition: transform 0.3s ease;
  margin-left: 15px;
}

/* Animación cuando se abre la caja */
.faq-acordeon[open] .faq-pregunta::after {
  transform: rotate(-180deg);
  color: #1e3a8a;
}

/* El texto de la respuesta */
.faq-respuesta {
  padding: 0 25px 25px 25px;
  color: #4a5568;
  font-size: 15px;
  line-height: 1.7;
  border-top: 1px dashed rgba(30, 58, 138, 0.15); /* Línea divisoria sutil */
  margin-top: 0;
  padding-top: 20px;
  background: transparent;
}
/* ==========================================================================
   BANNERS DE PÁGINAS DE CURSOS (Estilo Liquid Glass)
   ========================================================================== */

.banner-curso-fullwidth {
  width: 100%;
  height: 680px; /* Altura ideal para banners de cabecera */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 40px;
}

/* Capa oscura superpuesta a la imagen para que el vidrio resalte más */
.banner-curso-fullwidth::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.glass-caja-banner {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.65); /* Transparencia Liquid Glass */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 50px 40px;
  text-align: center;
  max-width: 750px; /* Ancho máximo de la caja esmerilada */
  width: 90%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.pildora-azul {
  background-color: #3b82f6; /* El tono de azul de tu captura */
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.titulo-banner-curso {
  color: #1e3a8a; /* Azul marino oscuro para el título */
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.2;
}

.parrafo-banner-curso {
  color: #4a5568;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* --- Adaptación Móvil para los Banners --- */
@media (max-width: 768px) {
  .banner-curso-fullwidth {
    height: auto;
    min-height: 400px;
    padding: 40px 15px;
  }

  .glass-caja-banner {
    padding: 30px 20px;
  }

  .titulo-banner-curso {
    font-size: 28px;
  }

  .parrafo-banner-curso {
    font-size: 16px;
  }
}

/* ==========================================================================
   TIPOGRAFÍA CORPORATIVA (Ajuste de color a dos tonos)
   ========================================================================== */
.texto-celeste {
  color: #3b82f6; /* El tono celeste corporativo */
}

/* ==========================================================================
   ROADMAP: RUTA DE RECATEGORIZACIÓN (Horizontal PC / Vertical Tablet y Móvil)
   ========================================================================== */
.seccion-ruta-horizontal {
  padding: 60px 20px;
  background-color: transparent;
}

.contenedor-ruta-h {
  max-width: 1400px;
  margin: 0 auto;
}

.titulo-ruta-h {
  text-align: center;
  font-size: 36px;
  color: #1e3a8a;
  font-weight: 800;
  margin-bottom: 15px;
}

.parrafo-intro-ruta {
  text-align: center;
  font-size: 17px;
  color: #4a5568;
  max-width: 800px;
  margin: 0 auto 50px auto;
  line-height: 1.6;
}

/* Contenedor principal con Scroll para PC */
.mapa-carretera-h {
  position: relative;
  width: 100%;
  overflow-x: auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

.mapa-carretera-h::-webkit-scrollbar {
  height: 8px;
}

.mapa-carretera-h::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

/* La Carretera Horizontal (PC) */
.pista-central-h {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  min-width: 1200px;
  height: 20px;
  background-color: #374151; /* Asfalto */
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.pista-central-h::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);
  background-size: 30px 100%;
}

/* Grilla Horizontal de los Pasos (PC) */
.contenedor-nodos-h {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-width: 1200px;
  position: relative;
  z-index: 2;
}

.nodo-paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Marcadores (Pines) */
.marcador-pin-h {
  width: 50px;
  height: 50px;
  background-color: #1e3a8a;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 4px solid #ffffff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 25px;
  position: relative;
  z-index: 3;
}

/* Tarjetas Liquid Glass */
.tarjeta-glass-ruta-h {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 30px 20px 25px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  width: 100%;
  transition: transform 0.3s ease;
  overflow: hidden; /* Asegura que el número de fondo no se salga */
}

.tarjeta-glass-ruta-h:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
}

.num-paso-h {
  position: absolute;
  top: 12px;
  left: 15px;
  font-size: 32px;
  font-weight: 900;
  color: #1e3a8a;
  opacity: 0.15;
  line-height: 1;
  z-index: 0;
  margin: 0;
}

.tarjeta-glass-ruta-h h3 {
  color: #1e3a8a;
  font-size: 17px;
  margin-top: 25px;
  margin-bottom: 10px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.tarjeta-glass-ruta-h p {
  color: #4a5568;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ===== ESTADO ACTUAL (¡Te encuentras aquí!) ===== */
.pin-actual {
  background-color: #ffc107;
  color: #1e3a8a;
  transform: scale(1.15);
  border-color: #1e3a8a;
  animation: latido-h 2s infinite;
}

.glass-destacado {
  border: 2px solid #ffc107;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(255, 193, 7, 0.2);
}

.etiqueta-aqui {
  display: block;
  background: #ffc107;
  color: #1e3a8a;
  font-weight: bold;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  margin: 20px auto 10px auto;
  width: fit-content;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

@keyframes latido-h {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* ==========================================================================
   ADAPTACIÓN TABLETS Y MÓVILES PERFECTA (De Horizontal a Vertical)
   ========================================================================== */
@media (max-width: 991px) {
  .mapa-carretera-h {
    overflow-x: visible;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* PISTA VERTICAL (Corrección del recuadro gris gigante) */
  .pista-central-h {
    top: 0;
    bottom: 0;
    left: 17px; /* Centrado perfecto con el pin de 50px */
    width: 16px;
    height: 100%;
    min-width: 0 !important; /* VITAL: Resetea la herencia de los 1200px */
    transform: none;
  }

  .pista-central-h::after {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 4px;
    height: 100%;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom, #ffffff 50%, transparent 50%);
    background-size: 100% 30px;
  }

  .contenedor-nodos-h {
    flex-direction: column;
    min-width: 0; /* Resetea el contenedor */
    gap: 30px;
    align-items: flex-start;
  }

  .nodo-paso {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    z-index: 2;
  }

  .marcador-pin-h {
    margin-bottom: 0;
    flex-shrink: 0; /* Evita que los círculos se ovalen */
  }

  .tarjeta-glass-ruta-h {
    text-align: left;
    width: calc(100% - 70px);
    padding: 20px;
  }

  /* CORRECCIÓN DE NÚMEROS: Movidos a la parte inferior derecha */
  .num-paso-h {
    top: auto;
    left: auto;
    bottom: -5px;
    right: 10px;
    font-size: 65px;
    opacity: 0.08; /* Muy transparente para no chocar con el texto */
  }

  /* Aseguramos que los textos estén encima del número gigante */
  .tarjeta-glass-ruta-h h3,
  .tarjeta-glass-ruta-h p,
  .etiqueta-aqui {
    position: relative;
    z-index: 2;
  }

  .etiqueta-aqui {
    margin: 0 0 10px 0;
  }

  .tarjeta-glass-ruta-h h3 {
    margin-top: 0;
  }
}
/* ==========================================================================
   SECCIÓN: CATEGORÍAS (Grilla, Liquid Glass y Temática Vehicular)
   ========================================================================== */
.seccion-categorias-cofipro {
  padding: 60px 20px;
  background-color: transparent;
}

.contenedor-categorias {
  max-width: 1200px;
  margin: 0 auto;
}

.cabecera-categorias {
  text-align: center;
  margin-bottom: 50px;
}

.grilla-cards-categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/* Estructura Base de la Tarjeta */
.card-glass-cat {
  flex: 1 1 320px;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 45px 25px 35px 25px; /* Más espacio arriba para la decoración */
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.05);
  text-align: center;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.card-glass-cat:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 40px rgba(30, 58, 138, 0.12);
  background: rgba(255, 255, 255, 0.95);
  border-color: #3b82f6;
}

/* ==========================================================================
   TEXTURAS VEHICULARES (Las referencias que enviaste)
   ========================================================================== */
.decoracion-tematica {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18px; /* Grosor de la franja temática */
  z-index: 0;
}

/* 1. AII-a: Taxi (Cuadros amarillos y negros) */
.franja-taxi {
  background: repeating-conic-gradient(#facc15 0% 25%, #111827 0% 50%) 50% /
    20px 20px;
  border-bottom: 2px solid #facc15;
}

/* 2. AII-b: Combi (Franja de reflectores rojos y blancos) */
.franja-combi {
  background: repeating-linear-gradient(
    90deg,
    #dc2626,
    #dc2626 30px,
    #ffffff 30px,
    #ffffff 60px
  );
  border-bottom: 2px solid #111827;
}

/* 3. AIII-a: Bus (Rayas diagonales tipo El Rápido/Etuchisa) */
.franja-bus {
  background: repeating-linear-gradient(
    135deg,
    #0284c7,
    #0284c7 20px,
    #e11d48 20px,
    #e11d48 40px,
    #bae6fd 40px,
    #bae6fd 60px
  );
  height: 25px; /* Un poco más ancha para que se noten los ángulos */
}

/* 4. AIII-b: Camión (Rejillas de Radiador Cromado) */
.franja-camion {
  background: repeating-linear-gradient(
    to bottom,
    #f3f4f6,
    #f3f4f6 3px,
    #4b5563 3px,
    #4b5563 6px
  );
  height: 30px;
  border-bottom: 2px solid #94a3b8;
}

/* ==========================================================================
   ELEMENTOS INTERNOS DE LA TARJETA
   ========================================================================== */
.icono-cat-cabecera {
  width: 70px;
  height: 70px;
  background-color: #e0e7ff;
  color: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 10px auto 20px auto;
  transition: transform 0.4s ease;
  position: relative;
  z-index: 1;
}

.card-glass-cat:hover .icono-cat-cabecera {
  transform: scale(1.1) rotate(5deg);
  background-color: #3b82f6;
  color: #ffffff;
}

.titulo-cat {
  color: #1e3a8a;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 5px 0;
  position: relative;
  z-index: 1;
}

.subtitulo-cat {
  display: block;
  color: #4a5568;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 25px;
  min-height: 42px;
  position: relative;
  z-index: 1;
}

.lista-requisitos-cat {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  border-top: 1px dashed rgba(30, 58, 138, 0.15);
  padding-top: 20px;
  position: relative;
  z-index: 1;
}

.lista-requisitos-cat li {
  color: #4a5568;
  font-size: 14px;
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  line-height: 1.4;
}

.lista-requisitos-cat li i {
  color: #1e3a8a;
  font-size: 16px;
  margin-right: 12px;
  margin-top: 2px;
  min-width: 18px;
}

/* ===== TARJETA DESTACADA (Categoría AIII-c) ===== */
.cat-maxima {
  border: 2px solid rgba(255, 193, 7, 0.5);
  background: rgba(255, 255, 255, 0.85);
}

.cat-maxima:hover {
  border-color: #ffc107;
  box-shadow: 0 20px 40px rgba(255, 193, 7, 0.15);
}

.etiqueta-maxima {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ffc107;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 15px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
}

.cat-maxima .color-oro {
  background-color: #fef3c7;
  color: #d97706;
}

.cat-maxima:hover .color-oro {
  background-color: #ffc107;
  color: #1e3a8a;
}

/* Fondo animado de todos los vehículos para AIII-c */
.watermark-vehiculos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  opacity: 0.04; /* Súper transparente para no afectar la lectura */
  font-size: 65px;
  color: #1e3a8a;
  pointer-events: none; /* Evita que el usuario seleccione los iconos */
}

/* ==========================================================================
   SECCIÓN: DIFERENCIAS DE LICENCIAS (Fondo Blanco + Tabla Liquid Glass)
   ========================================================================== */
.seccion-diferencias-licencias {
  padding: 60px 20px;
  overflow-x: hidden;
}

/* Cambio de fondo a blanco puro para separar secciones */
.fondo-blanco {
  background-color: transparent !important;
}

.contenedor-diferencias {
  max-width: 1000px;
  margin: 0 auto;
}

.tabla-liquid-glass {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Estructura de cada fila */
.fila-licencia {
  display: flex;
  align-items: center;
  background: rgba(
    248,
    250,
    252,
    0.85
  ); /* Un poco más sólido para contrastar */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 15px;
  padding: 15px 25px;

  /* Aquí está la magia: Sombra índigo eléctrico base */
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.18);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.fila-licencia:hover {
  transform: scale(1.02);
  background: #ffffff;

  /* Sombra índigo eléctrico encendida al pasar el ratón */
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.35);
}
.fila-maxima {
  border: 2px solid #ffc107;
  background: rgba(255, 255, 255, 0.95);
}

/* ===== COLUMNA IZQUIERDA (Corrección de 1 línea) ===== */
.col-cat {
  flex: 0 0 130px; /* Ancho ampliado a 130px */
}

.badge-cat {
  background-color: #1e3a8a;
  color: white;
  font-weight: 900;
  font-size: 20px;
  padding: 10px 15px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(30, 58, 138, 0.2);
  white-space: nowrap; /* Impide que el texto baje a la siguiente línea */
}

.badge-oro {
  background-color: #ffc107;
  color: #1e3a8a;
}

.col-servicio {
  flex: 1;
  padding: 0 20px;
  border-left: 2px dashed rgba(30, 58, 138, 0.1);
  border-right: 2px dashed rgba(30, 58, 138, 0.1);
}

.col-servicio h4 {
  color: #1e3a8a;
  margin: 0 0 5px 0;
  font-size: 18px;
}

.col-servicio p {
  color: #4a5568;
  margin: 0;
  font-size: 14px;
}

.col-vehiculos {
  flex: 0 0 300px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding-left: 20px;
}

.vehiculos-desfile {
  flex: 0 0 450px;
  gap: 15px;
}

/* ==========================================================================
   FÍSICAS, ANIMACIONES Y SVGs VECTORIZADOS
   ========================================================================== */
.vehiculo-interactivo {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  align-items: flex-end;
  z-index: 5;
}

.vehiculo-vector {
  width: 85px; /* Tamaño estandarizado para la mayoría */
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.15));
}

/* Efecto Hover: Arrancando el motor */
.vehiculo-interactivo:hover {
  animation: motor-vibrando 0.1s infinite alternate;
  transform: translateX(10px) rotate(-3deg) scale(1.05);
}

/* Rotación de ruedas EXCLUSIVA para SVGs vectorizados */
.vehiculo-interactivo:hover .rueda-gira {
  animation: rotacion-llantas 0.4s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Efecto Clic: Saliendo disparado */
.vehiculo-interactivo.arrancando {
  animation: salir-disparado 1.5s cubic-bezier(0.5, 0, 0.1, 1) forwards;
}

/* Humo del escape */
.humo-escape {
  position: absolute;
  bottom: 0px;
  left: -15px;
  width: 15px;
  height: 15px;
  background-color: #cbd5e1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.vehiculo-interactivo:hover .humo-escape {
  animation: soltar-humo 0.5s infinite;
}

/* --- KEYFRAMES --- */
@keyframes motor-vibrando {
  0% {
    margin-bottom: 0px;
  }
  100% {
    margin-bottom: 2px;
  }
}

@keyframes rotacion-llantas {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes soltar-humo {
  0% {
    transform: scale(0.5) translate(0, 0);
    opacity: 0.8;
  }
  100% {
    transform: scale(2) translate(-15px, -10px);
    opacity: 0;
  }
}

@keyframes salir-disparado {
  0% {
    transform: translateX(0) rotate(-3deg);
    opacity: 1;
  }
  30% {
    transform: translateX(-20px) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: translateX(1500px) rotate(-2deg);
    opacity: 0;
  }
}

/* Adaptación a Móviles */
@media (max-width: 768px) {
  .fila-licencia {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .col-cat {
    flex: auto;
    margin-bottom: 15px;
  }
  .col-servicio {
    border: none;
    border-top: 1px dashed #cbd5e1;
    border-bottom: 1px dashed #cbd5e1;
    padding: 15px 0;
    margin: 15px 0;
  }
  .col-vehiculos,
  .vehiculos-desfile {
    flex: auto;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
  }
}
/* ==========================================================================
   SECCIÓN: DETALLES DEL CURSO (Grid Bento)
   ========================================================================== */
.fondo-bento {
  background-color: transparent; /* El fondo exacto de tu imagen de referencia */
  padding: 80px 20px;
}

.contenedor-bento {
  max-width: 1200px;
  margin: 0 auto;
}

/* La Cuadrícula Mágica (CSS Grid) */
.grid-bento-glass {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
  grid-template-rows: auto auto auto;
  gap: 25px;
}

/* Ubicación de cada tarjeta en la cuadrícula */
.card-contenido {
  grid-column: 1 / 2;
  grid-row: 1 / 3; /* Abarca desde la fila 1 hasta la 3 (Alta) */
}

.card-horario {
  grid-column: 2 / 3;
  grid-row: 1 / 2; /* Solo la primera fila a la derecha */
}

.card-beneficios {
  grid-column: 2 / 3;
  grid-row: 2 / 3; /* Segunda fila a la derecha */
}

.card-inversion {
  grid-column: 1 / 3; /* Abarca ambas columnas (Ancho completo) */
  grid-row: 3 / 4;
}

/* Estilo Base de las Tarjetas (Liquid Glass + Sombra Índigo) */
.card-bento {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15); /* Tu sombra índigo eléctrico */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  display: flex;
  flex-direction: column;
}

.card-bento:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.25);
}

/* Cabeceras de las tarjetas */
.bento-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(30, 58, 138, 0.1);
  padding-bottom: 15px;
}

.icono-bento {
  width: 50px;
  height: 50px;
  background-color: #e0e7ff;
  color: #3b82f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 15px;
}

.icono-bento.color-reloj {
  background-color: #fce7f3;
  color: #db2777;
}
.icono-bento.color-estrella {
  background-color: #fef3c7;
  color: #d97706;
}

.bento-header h3 {
  color: #1e3a8a;
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}

/* Listas internas (Contenido y Beneficios) */
.lista-bento-check,
.lista-bento-beneficios {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-bento-check li {
  font-size: 16px;
  color: #334155;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.lista-bento-check li i {
  color: #3b82f6;
  margin-right: 12px;
  font-size: 18px;
}
/* ==========================================================================
   AJUSTES PARA EL TEMARIO DETALLADO
   ========================================================================== */
.temario-detallado li {
  align-items: flex-start; /* Evita que el icono baje al centro si hay mucho texto */
  margin-bottom: 20px;
}

.temario-detallado li i {
  margin-top: 3px; /* Alinea el check con la primera línea de texto */
  font-size: 20px;
  min-width: 25px; /* Asegura que el texto no aplaste al icono */
}

.detalle-temario {
  font-size: 14.5px;
  color: #4a5568;
  line-height: 1.6;
}

.detalle-temario strong {
  color: #1e3a8a; /* Azul corporativo para los subtítulos */
  display: inline-block;
  margin-bottom: 2px;
  font-size: 15.5px;
}

.lista-bento-beneficios li {
  font-size: 15px;
  color: #4a5568;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.lista-bento-beneficios li i {
  color: #1e3a8a;
  background: #e0e7ff;
  padding: 8px;
  border-radius: 50%;
  margin-right: 12px;
  font-size: 14px;
  min-width: 30px;
  text-align: center;
}

/* Horarios */
.info-horario {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.bloque-hora {
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed #cbd5e1;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dias-hora {
  font-weight: bold;
  color: #1e3a8a;
}

.horas-reloj {
  color: #4a5568;
  background: #f1f5f9;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
}

/* Tarjeta Inversión Especial */
.card-inversion {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 30px 50px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(240, 249, 255, 0.9)
  );
  border: 2px solid #bae6fd;
}

.inversion-info {
  text-align: center;
}

.etiqueta-inversion {
  display: block;
  color: #64748b;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  margin-bottom: 5px;
}

.precio-inversion {
  font-size: 48px;
  font-weight: 900;
  color: #1e3a8a;
  margin: 0;
  text-shadow: 0 4px 10px rgba(30, 58, 138, 0.1);
}

.separador-vertical-bento {
  width: 2px;
  height: 80px;
  background-color: #cbd5e1;
  margin: 0 40px;
}

.inversion-pagos h4 {
  color: #4a5568;
  margin: 0 0 15px 0;
  font-size: 16px;
}

.lista-metodos-pago {
  display: flex;
  gap: 25px;
  align-items: center;
}

.metodo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}

/* ESTILOS PARA TUS IMÁGENES PNG (Pagos) */
.img-pago {
  height: 35px; /* Altura estándar para que todas se vean parejas */
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Adaptación a Móviles */
@media (max-width: 900px) {
  .grid-bento-glass {
    grid-template-columns: 1fr; /* Pasa a 1 sola columna en tablets/celulares */
  }

  .card-contenido,
  .card-horario,
  .card-beneficios,
  .card-inversion {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .card-inversion {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }

  .separador-vertical-bento {
    width: 100%;
    height: 2px;
    margin: 25px 0;
  }

  .lista-metodos-pago {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================================================
   SECCIÓN: CALL TO ACTION FINAL (Liquid Glass)
   ========================================================================== */
.seccion-cta-final {
  padding: 40px 20px 80px 20px;
}

.contenedor-cta {
  max-width: 1000px;
  margin: 0 auto;
}

/* Tarjeta transformada a estilo Liquid Glass */
.tarjeta-cta-glass {
  background: rgba(255, 255, 255, 0.75); /* Base translúcida */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 50px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.18); /* Sombra índigo eléctrico */
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.tarjeta-cta-glass:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 40px rgba(79, 70, 229, 0.28);
}

/* Contenido alineado estrictamente a la izquierda */
.contenido-cta {
  max-width: 580px;
  text-align: left; /* Alineación izquierda */
  position: relative;
  z-index: 2;
}

.contenido-cta h2 {
  color: #1e3a8a; /* Azul marino corporativo */
  font-size: 32px;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 15px;
}

.contenido-cta p {
  color: #4a5568; /* Tono de texto legible y suave */
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.botones-cta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: flex-start; /* Botones hacia la izquierda */
}

.btn-amarillo-cta {
  background-color: #facc15;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
}

.btn-amarillo-cta:hover {
  transform: translateY(-3px);
  background-color: #fde047;
  box-shadow: 0 8px 25px rgba(250, 204, 21, 0.5);
  color: #1e3a8a;
}

.btn-glass-cta {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1e3a8a;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.btn-glass-cta:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
  color: #1e3a8a;
}

.btn-glass-cta i {
  font-size: 18px;
}

/* Adaptación del velocímetro al nuevo fondo claro */
.icono-cta-gigante {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.1));
}

.svg-velocimetro {
  width: 140px;
  height: auto;
  display: block;
}

.aguja-velocimetro {
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
  transition: transform 2.5s cubic-bezier(0.25, 1.25, 0.5, 1);
}
/* Esta clase es la que inyectaremos por JS */
.velocimetro-activo .aguja-velocimetro {
  transform: rotate(90deg) !important;
}
.animar-aguja .aguja-velocimetro {
  transform: rotate(90deg) !important;
}

/* Adaptación a Móviles */
@media (max-width: 768px) {
  .tarjeta-cta-glass {
    flex-direction: column-reverse;
    text-align: center;
    padding: 40px 25px;
    gap: 30px;
  }

  .contenido-cta {
    text-align: center; /* En celular centramos para optimizar espacio */
  }

  .botones-cta {
    justify-content: center;
  }

  .svg-velocimetro {
    width: 110px;
  }

  .contenido-cta h2 {
    font-size: 26px;
  }
}
/* ==========================================================================
   BANNER PRINCIPAL (Estilo Corporativo Liquid Glass)
   ========================================================================== */
.banner-principal-curso {
  width: 100%;
  /* CORRECCIÓN AQUÍ: Altura acordada de 680px */
  height: 680px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-banner {
  width: 100%;
  height: 100%;
  /* Mantenemos el overlay para que el texto resalte sobre la foto */
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-glass-banner {
  /* CORRECCIÓN AQUÍ: Usamos fondo blanco con opacidad para el Liquid Glass */
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  /* Borde sutil para definir la tarjeta */
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 50px; /* Un poco más de padding por la nueva altura */
  max-width: 650px; /* Tarjeta un poco más ancha */
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Sombra más definida */
}

/* CORRECCIÓN AQUÍ: Color exacto de la etiqueta de tu imagen de referencia */
.etiqueta-subir {
  background-color: #3b82f6; /* Un azul vivo y moderno */
  color: white;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 50px;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  display: inline-block;
  text-transform: uppercase;
}

/* CORRECCIÓN AQUÍ: Título en Azul Marino Fuerte */
.card-glass-banner h1 {
  color: #1e3a8a; /* Azul marino corporativo */
  font-size: 42px; /* Título más grande para la nueva altura */
  font-weight: 900;
  margin: 15px 0;
  line-height: 1.2;
}

/* Párrafo en gris oscuro para buena legibilidad */
.card-glass-banner p {
  color: #4a5568;
  font-size: 18px; /* Texto más grande */
  line-height: 1.6;
  margin-top: 15px;
}

/* ==========================================================================
   ROADMAP: RUTA DE RECATEGORIZACIÓN (Horizontal en PC / Vertical en Móviles)
   ========================================================================== */
.seccion-ruta-horizontal {
  padding: 60px 20px;
  background-color: transparent;
}

.contenedor-ruta-h {
  max-width: 1400px;
  margin: 0 auto;
}

.titulo-ruta-h {
  text-align: center;
  font-size: 36px;
  color: #1e3a8a;
  font-weight: 800;
  margin-bottom: 15px;
}

.parrafo-intro-ruta {
  text-align: center;
  font-size: 17px;
  color: #4a5568;
  max-width: 800px;
  margin: 0 auto 50px auto;
  line-height: 1.6;
}

/* Contenedor principal con Scroll para PC */
.mapa-carretera-h {
  position: relative;
  width: 100%;
  overflow-x: auto;
  padding-top: 30px; /* Espacio para que no se corte la sombra amarilla */
  padding-bottom: 30px;
}

.mapa-carretera-h::-webkit-scrollbar {
  height: 8px;
}
.mapa-carretera-h::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

/* La Carretera Horizontal (PC) */
.pista-central-h {
  position: absolute;
  top: 45px; /* Alineado perfectamente al centro de los pines */
  left: 0;
  width: 100%;
  min-width: 1200px;
  height: 20px;
  background-color: #374151; /* Asfalto */
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.pista-central-h::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);
  background-size: 30px 100%; /* Líneas blancas discontinuas */
}

/* Grilla Horizontal de los Pasos (PC) */
.contenedor-nodos-h {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-width: 1200px; /* Ancho mínimo para que las cajas no se aplasten */
  position: relative;
  z-index: 2;
}

.nodo-paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Marcadores (Pines) */
.marcador-pin-h {
  width: 50px;
  height: 50px;
  background-color: #1e3a8a;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 4px solid #ffffff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 25px;
  position: relative;
  z-index: 3;
}

/* Tarjetas Liquid Glass */
.tarjeta-glass-ruta-h {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 30px 20px 25px 20px; /* Más espacio arriba */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  width: 100%;
  transition: transform 0.3s ease;
}

.tarjeta-glass-ruta-h:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
}

.num-paso-h {
  position: absolute;
  top: 12px;
  left: 15px;
  font-size: 32px;
  font-weight: 900;
  color: #1e3a8a;
  opacity: 0.15;
  line-height: 1;
  z-index: 0;
  margin: 0;
}

.tarjeta-glass-ruta-h h3 {
  color: #1e3a8a;
  font-size: 17px;
  margin-top: 25px; /* Empuja el texto hacia abajo dejando el número libre */
  margin-bottom: 10px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.tarjeta-glass-ruta-h p {
  color: #4a5568;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ===== ESTADO ACTUAL (¡Te encuentras aquí!) ===== */
.pin-actual {
  background-color: #ffc107;
  color: #1e3a8a;
  transform: scale(1.15);
  border-color: #1e3a8a;
  animation: latido-h 2s infinite;
}

.glass-destacado {
  border: 2px solid #ffc107;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(255, 193, 7, 0.2);
}

.etiqueta-aqui {
  display: block;
  background: #ffc107;
  color: #1e3a8a;
  font-weight: bold;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  margin: 20px auto 10px auto;
  width: fit-content;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

@keyframes latido-h {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* ==========================================================================
   ADAPTACIÓN MÓVIL ESTRICTA (De Horizontal a Vertical - 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .mapa-carretera-h {
    overflow-x: visible;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .pista-central-h {
    top: 0;
    bottom: 0;
    left: 25px;
    width: 16px;
    height: 100%;
    min-width: auto;
    transform: none;
  }

  .pista-central-h::after {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 4px;
    height: 100%;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom, #ffffff 50%, transparent 50%);
    background-size: 100% 30px;
  }

  .contenedor-nodos-h {
    flex-direction: column;
    min-width: auto;
    gap: 30px;
    align-items: flex-start;
  }

  .nodo-paso {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }

  .marcador-pin-h {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .tarjeta-glass-ruta-h {
    text-align: left;
    width: calc(100% - 70px);
    padding: 20px;
  }

  .etiqueta-aqui {
    margin: 20px 0 12px 0;
  }
}
/* ==========================================================================
   SECCIÓN: DETALLES DEL CURSO (Grid Bento) - PÁGINA AIIB a AIIIC
   ========================================================================== */
.iiic-bento.seccion-detalles-curso {
  background-color: #f4f6f9;
  padding: 80px 20px;
}

.iiic-bento .contenedor-bento {
  max-width: 1200px;
  margin: 0 auto;
}

/* La Cuadrícula Mágica (CSS Grid) */
.iiic-bento .grid-bento-glass {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 25px;
}

/* Ubicación de cada tarjeta en la cuadrícula */
.iiic-bento .card-contenido {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.iiic-bento .card-horario {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.iiic-bento .card-beneficios {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.iiic-bento .card-inversion {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

/* Estilo Base de las Tarjetas (Liquid Glass + Sombra Índigo Eléctrico) */
.iiic-bento .card-bento {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  display: flex;
  flex-direction: column;
}

.iiic-bento .card-bento:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.25);
}

/* Cabeceras de las tarjetas */
.iiic-bento .bento-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(30, 58, 138, 0.1);
  padding-bottom: 15px;
}

.iiic-bento .icono-bento {
  width: 50px;
  height: 50px;
  background-color: #e0e7ff;
  color: #3b82f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 15px;
}

.iiic-bento .icono-bento.color-reloj {
  background-color: #fce7f3;
  color: #db2777;
}
.iiic-bento .icono-bento.color-estrella {
  background-color: #fef3c7;
  color: #d97706;
}

.iiic-bento .bento-header h3 {
  color: #1e3a8a;
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}

/* Listas internas (Contenido y Beneficios) */
.iiic-bento .lista-bento-check,
.iiic-bento .lista-bento-beneficios {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Ajustes para el Temario Detallado de Especialización */
.iiic-bento .temario-detallado li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.iiic-bento .temario-detallado li i {
  color: #3b82f6;
  margin-right: 12px;
  font-size: 20px;
  margin-top: 3px;
  min-width: 25px;
}

.iiic-bento .detalle-temario {
  font-size: 14.5px;
  color: #4a5568;
  line-height: 1.6;
}

.iiic-bento .detalle-temario strong {
  color: #1e3a8a;
  display: inline-block;
  margin-bottom: 2px;
  font-size: 15.5px;
}

.iiic-bento .lista-bento-beneficios li {
  font-size: 15px;
  color: #4a5568;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.iiic-bento .lista-bento-beneficios li i {
  color: #1e3a8a;
  background: #e0e7ff;
  padding: 8px;
  border-radius: 50%;
  margin-right: 12px;
  font-size: 14px;
  min-width: 30px;
  text-align: center;
}

/* Horarios */
.iiic-bento .info-horario {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.iiic-bento .bloque-hora {
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed #cbd5e1;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.iiic-bento .dias-hora {
  font-weight: bold;
  color: #1e3a8a;
}

.iiic-bento .horas-reloj {
  color: #4a5568;
  background: #f1f5f9;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
}

/* Tarjeta Inversión Especial */
.iiic-bento .card-inversion {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 30px 50px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(240, 249, 255, 0.9)
  );
  border: 2px solid #bae6fd;
}

.iiic-bento .inversion-info {
  text-align: center;
}

.iiic-bento .etiqueta-inversion {
  display: block;
  color: #64748b;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  margin-bottom: 5px;
}

.iiic-bento .precio-inversion {
  font-size: 48px;
  font-weight: 900;
  color: #1e3a8a;
  margin: 0;
  text-shadow: 0 4px 10px rgba(30, 58, 138, 0.1);
}

.iiic-bento .separador-vertical-bento {
  width: 2px;
  height: 80px;
  background-color: #cbd5e1;
  margin: 0 40px;
}

.iiic-bento .inversion-pagos h4 {
  color: #4a5568;
  margin: 0 0 15px 0;
  font-size: 16px;
}

.iiic-bento .lista-metodos-pago {
  display: flex;
  gap: 25px;
  align-items: center;
}

.iiic-bento .metodo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}

.iiic-bento .img-pago {
  height: 35px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Adaptación Estricta a Móviles */
@media (max-width: 900px) {
  .iiic-bento .grid-bento-glass {
    grid-template-columns: 1fr;
  }

  .iiic-bento .card-contenido,
  .iiic-bento .card-horario,
  .iiic-bento .card-beneficios,
  .iiic-bento .card-inversion {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .iiic-bento .card-inversion {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }

  .iiic-bento .separador-vertical-bento {
    width: 100%;
    height: 2px;
    margin: 25px 0;
  }

  .iiic-bento .lista-metodos-pago {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================================================
   SECCIÓN: CATEGORÍAS DISPONIBLES (Tarjeta Máxima Horizontal)
   ========================================================================== */
.seccion-categorias-disponibles {
  padding: 80px 20px;
}

/* Tarjeta Principal A-IIIc */
.card-maxima-horizontal {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  background: rgba(255, 255, 255, 0.85); /* Base Liquid Glass */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid #ffc107; /* Borde dorado de Máxima Categoría */
  border-radius: 25px;
  padding: 60px 50px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(255, 193, 7, 0.15); /* Sombra dorada suave */
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.card-maxima-horizontal:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(255, 193, 7, 0.3); /* Brillo dorado al pasar el ratón */
}

/* Etiqueta Superior (Categoría Máxima) */
.badge-corona-maxima {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffc107;
  color: #1e3a8a;
  font-size: 14px;
  font-weight: 900;
  padding: 8px 25px;
  border-radius: 0 0 15px 15px;
  letter-spacing: 1px;
  z-index: 3;
  box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4);
}

/* Contenedor Flex Frontal */
.contenido-maxima-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* --- Columna Izquierda (Título y Marca de Agua) --- */
.columna-izquierda-max {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative; /* Necesario para contener la marca de agua aquí adentro */
  padding: 20px 0;
}

/* Aseguramos que el texto y la estrella queden por encima de los autos */
.columna-izquierda-max > *:not(.vehiculos-watermark) {
  position: relative;
  z-index: 2;
}

/* Marca de Agua (Vehículos agrupados al fondo izquierdo) */
.vehiculos-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap; /* Agrupa los carritos en varias filas */
  gap: 15px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05; /* Textura súper sutil */
}

.svg-watermark {
  width: 75px; /* Vehículos más pequeños para agruparlos mejor */
  color: #1e3a8a;
  transition: transform 0.5s ease;
}

/* Animación sutil de los autos al pasar el ratón por la tarjeta */
.card-maxima-horizontal:hover .svg-watermark {
  transform: translateX(8px) scale(1.05);
}

.circulo-estrella-max {
  width: 90px;
  height: 90px;
  background-color: #fef3c7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.15);
}

.circulo-estrella-max i {
  font-size: 40px;
  color: #d97706;
}

.titulo-cat-max {
  color: #1e3a8a;
  font-size: 38px;
  font-weight: 900;
  margin: 0 0 10px 0;
}

.sub-cat-max {
  color: #4a5568;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 350px;
}

.sub-cat-max strong {
  color: #1e3a8a;
}

/* --- Separador Central --- */
.separador-maxima {
  width: 2px;
  height: 180px;
  background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);
}

/* --- Columna Derecha (Condiciones) --- */
.columna-derecha-max {
  flex: 1.2;
}

.lista-condiciones-max {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.lista-condiciones-max li {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  padding: 15px 25px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

/* Interacción en cada ítem */
.lista-condiciones-max li:hover {
  transform: translateX(10px);
  background: #ffffff;
  box-shadow: 0 5px 15px rgba(30, 58, 138, 0.08);
}

.icono-condicion {
  width: 45px;
  height: 45px;
  background-color: #e0e7ff;
  color: #1e3a8a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 20px;
  flex-shrink: 0;
}

.texto-condicion {
  color: #4a5568;
  font-size: 17px;
  line-height: 1.4;
}

.texto-condicion strong {
  color: #1e3a8a;
  font-weight: 800;
}

.sub-detalle-condicion {
  font-size: 14px;
  color: #64748b;
  font-style: italic;
  display: block;
  margin-top: 4px;
}

/* ==========================================================================
   ADAPTACIÓN A MÓVILES
   ========================================================================== */
@media (max-width: 900px) {
  .card-maxima-horizontal {
    padding: 60px 25px 40px 25px;
  }

  .contenido-maxima-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .separador-maxima {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, #cbd5e1, transparent);
  }

  .titulo-cat-max {
    font-size: 32px;
  }

  .lista-condiciones-max li:hover {
    transform: translateX(5px);
  }

  .vehiculos-watermark {
    opacity: 0.03;
  }
}
/* ==========================================================================
   SECCIÓN: DIFERENCIAS DE LICENCIAS (Fondo Blanco + Tabla Liquid Glass)
   ========================================================================== */
.seccion-diferencias-licencias {
  padding: 60px 20px;
  overflow-x: hidden;
}

/* Cambio de fondo a blanco puro para separar secciones */
.fondo-blanco {
  background-color: transparent !important;
}

.contenedor-diferencias {
  max-width: 1000px;
  margin: 0 auto;
}

.tabla-liquid-glass {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Estructura de cada fila */
.fila-licencia {
  display: flex;
  align-items: center;
  background: rgba(
    248,
    250,
    252,
    0.85
  ); /* Un poco más sólido para contrastar */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 15px;
  padding: 15px 25px;

  /* Sombra índigo eléctrico base */
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.18);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.fila-licencia:hover {
  transform: scale(1.02);
  background: #ffffff;

  /* Sombra índigo eléctrico encendida al pasar el ratón */
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.35);
}
.fila-maxima {
  border: 2px solid #ffc107;
  background: rgba(255, 255, 255, 0.95);
}

/* ===== COLUMNAS ===== */
.col-cat {
  flex: 0 0 130px; /* Ancho ampliado a 130px */
}

.badge-cat {
  background-color: #1e3a8a;
  color: white;
  font-weight: 900;
  font-size: 20px;
  padding: 10px 15px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(30, 58, 138, 0.2);
  white-space: nowrap; /* Impide que el texto baje a la siguiente línea */
}

.badge-oro {
  background-color: #ffc107;
  color: #1e3a8a;
}

.col-servicio {
  flex: 1;
  padding: 0 20px;
  border-left: 2px dashed rgba(30, 58, 138, 0.1);
  border-right: 2px dashed rgba(30, 58, 138, 0.1);
}

.col-servicio h4 {
  color: #1e3a8a;
  margin: 0 0 5px 0;
  font-size: 18px;
}

.col-servicio p {
  color: #4a5568;
  margin: 0;
  font-size: 14px;
}

.col-vehiculos {
  flex: 0 0 300px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding-left: 20px;
}

.vehiculos-desfile {
  flex: 0 0 450px;
  gap: 15px;
}

/* ==========================================================================
   FÍSICAS, ANIMACIONES Y SVGs VECTORIZADOS
   ========================================================================== */
.vehiculo-interactivo {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: flex;
  align-items: flex-end;
  z-index: 5;
}

.vehiculo-vector {
  width: 85px; /* Tamaño estandarizado para la mayoría */
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.15));
}

/* Efecto Hover: Arrancando el motor */
.vehiculo-interactivo:hover {
  animation: motor-vibrando 0.1s infinite alternate;
  transform: translateX(10px) rotate(-3deg) scale(1.05);
}

/* Rotación de ruedas EXCLUSIVA para SVGs vectorizados */
.vehiculo-interactivo:hover .rueda-gira {
  animation: rotacion-llantas 0.4s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Efecto Clic: Saliendo disparado */
.vehiculo-interactivo.arrancando {
  animation: salir-disparado 1.5s cubic-bezier(0.5, 0, 0.1, 1) forwards;
}

/* Humo del escape */
.humo-escape {
  position: absolute;
  bottom: 0px;
  left: -15px;
  width: 15px;
  height: 15px;
  background-color: #cbd5e1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.vehiculo-interactivo:hover .humo-escape {
  animation: soltar-humo 0.5s infinite;
}

/* --- KEYFRAMES --- */
@keyframes motor-vibrando {
  0% {
    margin-bottom: 0px;
  }
  100% {
    margin-bottom: 2px;
  }
}

@keyframes rotacion-llantas {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes soltar-humo {
  0% {
    transform: scale(0.5) translate(0, 0);
    opacity: 0.8;
  }
  100% {
    transform: scale(2) translate(-15px, -10px);
    opacity: 0;
  }
}

@keyframes salir-disparado {
  0% {
    transform: translateX(0) rotate(-3deg);
    opacity: 1;
  }
  30% {
    transform: translateX(-20px) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: translateX(1500px) rotate(-2deg);
    opacity: 0;
  }
}

/* Adaptación a Móviles */
@media (max-width: 768px) {
  .fila-licencia {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .col-cat {
    flex: auto;
    margin-bottom: 15px;
  }
  .col-servicio {
    border: none;
    border-top: 1px dashed #cbd5e1;
    border-bottom: 1px dashed #cbd5e1;
    padding: 15px 0;
    margin: 15px 0;
  }
  .col-vehiculos,
  .vehiculos-desfile {
    flex: auto;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
  }
}

/* ==========================================================================
   SECCIÓN: CALL TO ACTION FINAL (Liquid Glass)
   ========================================================================== */
.seccion-cta-final {
  padding: 80px 20px;
}

/* Fondo oscuro para que la tarjeta de cristal resalte (según tu imagen) */
.fondo-azul-oscuro {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
}

.contenedor-cta {
  max-width: 1000px;
  margin: 0 auto;
}

/* Tarjeta transformada a estilo Liquid Glass */
.tarjeta-cta-glass {
  background: rgba(255, 255, 255, 0.85); /* Base translúcida clara */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 50px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.tarjeta-cta-glass:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Contenido alineado estrictamente a la izquierda */
.contenido-cta {
  max-width: 580px;
  text-align: left;
  position: relative;
  z-index: 2;
}

.contenido-cta h2 {
  color: #1e3a8a;
  font-size: 32px;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 15px;
}

.contenido-cta p {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.botones-cta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-amarillo-cta {
  background-color: #facc15;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
}

.btn-amarillo-cta:hover {
  transform: translateY(-3px);
  background-color: #fde047;
  box-shadow: 0 8px 25px rgba(250, 204, 21, 0.5);
  color: #1e3a8a;
}

.btn-glass-cta {
  background: rgba(255, 255, 255, 0.9);
  color: #1e3a8a;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.btn-glass-cta:hover {
  background: #ffffff;
  transform: translateY(-3px);
  color: #1e3a8a;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.btn-glass-cta i {
  font-size: 18px;
}

/* Velocímetro */
.icono-cta-gigante {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.1));
}

.svg-velocimetro {
  width: 140px;
  height: auto;
  display: block;
}

.aguja-velocimetro {
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
  transition: transform 2.5s cubic-bezier(0.25, 1.25, 0.5, 1);
}

.velocimetro-activo .aguja-velocimetro,
.animar-aguja .aguja-velocimetro {
  transform: rotate(90deg) !important;
}

/* Adaptación a Móviles */
@media (max-width: 768px) {
  .tarjeta-cta-glass {
    flex-direction: column-reverse;
    text-align: center;
    padding: 40px 25px;
    gap: 30px;
  }

  .contenido-cta {
    text-align: center;
  }

  .botones-cta {
    justify-content: center;
  }

  .svg-velocimetro {
    width: 110px;
  }

  .contenido-cta h2 {
    font-size: 26px;
  }
}
/* ==========================================================================
   ADAPTACIÓN A MÓVILES (Banner Principal AIIB a AIIIC)
   ========================================================================== */
@media (max-width: 768px) {
  .banner-principal-curso {
    height: 550px; /* Reducimos un poco la altura total para que no quede tanto espacio vacío en móviles */
  }

  .card-glass-banner {
    width: 90%; /* Le damos un 90% de ancho para que respire y no toque los bordes del celular */
    padding: 30px 20px; /* Reducimos el colchón interno de 50px a 20px */
    border-radius: 15px;
  }

  .card-glass-banner h1 {
    font-size: 28px; /* Reducimos el título drásticamente para que la palabra encaje */
    margin: 10px 0;
    line-height: 1.3;
  }

  .card-glass-banner p {
    font-size: 15px; /* Reducimos el párrafo para mejorar la lectura */
    margin-top: 10px;
  }

  .etiqueta-subir {
    font-size: 11px;
    padding: 6px 15px;
    margin-bottom: 15px;
  }
}

/* ==========================================================================
   BANNER PRINCIPAL (Estilo Corporativo Liquid Glass)
   ========================================================================== */
.banner-principal-curso {
  width: 100%;
  height: 680px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Color secundario para el salto de línea en el título del banner */
.card-glass-banner h1 .texto-celeste-banner {
  color: #3b82f6; /* El azul claro/celeste que hace juego con la etiqueta */
}

.overlay-banner {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-glass-banner {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 50px;
  max-width: 650px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.etiqueta-subir {
  background-color: #3b82f6;
  color: white;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 50px;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  display: inline-block;
  text-transform: uppercase;
}

.card-glass-banner h1 {
  color: #1e3a8a;
  font-size: 42px;
  font-weight: 900;
  margin: 15px 0;
  line-height: 1.2;
}

.card-glass-banner p {
  color: #4a5568;
  font-size: 18px;
  line-height: 1.6;
  margin-top: 15px;
}

/* ==========================================================================
   ADAPTACIÓN A MÓVILES (Banner Principal)
   ========================================================================== */
@media (max-width: 768px) {
  .banner-principal-curso {
    height: 550px; /* Reducimos la altura en celulares */
  }

  .card-glass-banner {
    width: 90%; /* Evita que choque con los bordes de la pantalla */
    padding: 30px 20px;
    border-radius: 15px;
  }

  .card-glass-banner h1 {
    font-size: 28px; /* Reducimos el tamaño de fuente para que encaje bien */
    margin: 10px 0;
    line-height: 1.3;
  }

  .card-glass-banner p {
    font-size: 15px; /* Ajuste del párrafo para mejor legibilidad */
    margin-top: 10px;
  }

  .etiqueta-subir {
    font-size: 11px;
    padding: 6px 15px;
    margin-bottom: 15px;
  }
}

/* ==========================================================================
   ROADMAP: RUTA DE REQUISITOS (Horizontal en PC / Vertical en Móviles)
   ========================================================================== */
.seccion-ruta-horizontal {
  padding: 60px 20px;
  background-color: transparent;
}

.contenedor-ruta-h {
  max-width: 1400px;
  margin: 0 auto;
}

.titulo-ruta-h {
  text-align: center;
  font-size: 36px;
  color: #1e3a8a;
  font-weight: 800;
  margin-bottom: 15px;
}

.parrafo-intro-ruta {
  text-align: center;
  font-size: 17px;
  color: #4a5568;
  max-width: 800px;
  margin: 0 auto 50px auto;
  line-height: 1.6;
}

/* --- Contenedor de la pista y scroll --- */
.mapa-carretera-h {
  position: relative;
  width: 100%;
  overflow-x: auto;
  padding: 30px 0;
}

/* PISTA EN ESCRITORIO (Horizontal) */
.pista-central-h {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  min-width: 1200px; /* <--- Esto es lo que rompía el celular */
  height: 20px;
  background-color: #374151;
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.pista-central-h::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);
  background-size: 30px 100%;
}

/* --- Nodos y tarjetas --- */
.contenedor-nodos-h {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-width: 1200px;
  position: relative;
  z-index: 2;
}

.nodo-paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marcador-pin-h {
  width: 50px;
  height: 50px;
  background-color: #1e3a8a;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 4px solid #ffffff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 25px;
  z-index: 3;
}

.tarjeta-glass-ruta-h {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 30px 20px 25px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: center;
  width: 100%;
  transition: transform 0.3s ease;
}

.num-paso-h {
  position: absolute;
  top: 12px;
  left: 15px;
  font-size: 32px;
  font-weight: 900;
  color: #1e3a8a;
  opacity: 0.15;
  line-height: 1;
}

.tarjeta-glass-ruta-h h3 {
  color: #1e3a8a;
  font-size: 17px;
  margin: 25px 0 10px 0;
  font-weight: 700;
}

.tarjeta-glass-ruta-h p {
  color: #4a5568;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* --- Estado Destacado (Paso Actual) --- */
.pin-actual {
  background-color: #ffc107;
  color: #1e3a8a;
  transform: scale(1.15);
  border-color: #1e3a8a;
  animation: latido-h 2s infinite;
}

.glass-destacado {
  border: 2px solid #ffc107;
  background: rgba(255, 255, 255, 0.95);
}

.etiqueta-aqui {
  display: block;
  background: #ffc107;
  color: #1e3a8a;
  font-weight: bold;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  margin: 20px auto 10px auto;
  width: fit-content;
  text-transform: uppercase;
}

@keyframes latido-h {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* ==========================================================================
   ADAPTACIÓN A MÓVILES PERFECTA (Pasa a Vertical)
   ========================================================================== */
@media (max-width: 768px) {
  .mapa-carretera-h {
    overflow-x: visible;
    padding: 10px 0;
  }

  .pista-central-h {
    top: 0;
    bottom: 0;
    left: 17px;
    width: 16px;
    height: 100%;
    min-width: 0;
  }

  .pista-central-h::after {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 4px;
    height: 100%;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom, #ffffff 50%, transparent 50%);
    background-size: 100% 30px;
  }

  .contenedor-nodos-h {
    flex-direction: column;
    min-width: auto;
    gap: 30px;
  }

  .nodo-paso {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    z-index: 2;
  }

  .marcador-pin-h {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  /* ----------------------------------------------------
       CORRECCIÓN DE LA TARJETA Y EL NÚMERO EN MÓVIL
       ---------------------------------------------------- */
  .tarjeta-glass-ruta-h {
    text-align: left;
    width: calc(100% - 70px);
    padding: 20px;
    position: relative; /* Necesario para posicionar el número */
  }

  /* Movemos el número de la esquina superior izquierda a la esquina inferior derecha */
  .num-paso-h {
    top: auto; /* Quitamos la posición de arriba */
    left: auto; /* Quitamos la posición de la izquierda */
    bottom: 5px; /* Lo pegamos abajo */
    right: 15px; /* Lo pegamos a la derecha */
    font-size: 45px; /* Lo hacemos un poco más grande para que adorne */
    opacity: 0.08; /* Lo hacemos más transparente para que no quite protagonismo */
    z-index: 0; /* Lo mandamos bien al fondo */
  }

  /* Aseguramos que los textos queden por encima del número */
  .tarjeta-glass-ruta-h h3,
  .tarjeta-glass-ruta-h p {
    position: relative;
    z-index: 2;
  }

  .etiqueta-aqui {
    margin: 0 0 12px 0;
    position: relative;
    z-index: 2;
  }

  .tarjeta-glass-ruta-h h3 {
    margin-top: 5px;
  }
}
/* ==========================================================================
   SECCIÓN: CATEGORÍAS DISPONIBLES (Tarjeta Máxima B-IIc)
   ========================================================================== */
.seccion-categorias-disponibles {
  padding: 80px 20px;
  background-color: transparent;
}

.contenedor-estandar {
  max-width: 1200px;
  margin: 0 auto;
}

/* Tarjeta Principal */
.card-maxima-horizontal {
  margin: 0 auto;
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid #ffc107;
  border-radius: 25px;
  padding: 60px 50px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(255, 193, 7, 0.15);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.card-maxima-horizontal:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(255, 193, 7, 0.3);
}

/* Etiqueta Superior */
.badge-corona-maxima {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffc107;
  color: #1e3a8a;
  font-size: 14px;
  font-weight: 900;
  padding: 8px 25px;
  border-radius: 0 0 15px 15px;
  letter-spacing: 1px;
  z-index: 3;
  box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4);
}

/* Contenedor Flex Frontal */
.contenido-maxima-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* --- Columna Izquierda (Título y Marca de Agua) --- */
.columna-izquierda-max {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 20px 0;
}

.columna-izquierda-max > *:not(.vehiculos-watermark) {
  position: relative;
  z-index: 2;
}

/* Marca de Agua (Motos agrupadas al fondo izquierdo) */
.vehiculos-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 20px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06; /* Textura sutil para que no estorbe la lectura */
}

.svg-watermark {
  width: 70px; /* Tamaño ideal para que se reconozcan como motos/triciclos */
  color: #1e3a8a;
  transition: transform 0.5s ease;
}

.card-maxima-horizontal:hover .svg-watermark {
  transform: translateX(5px) scale(1.05);
}

/* Icono Estrella */
.circulo-estrella-max {
  width: 90px;
  height: 90px;
  background-color: #fef3c7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.15);
}

.circulo-estrella-max i {
  font-size: 40px;
  color: #d97706;
}

/* Textos Columna Izquierda */
.titulo-cat-max {
  color: #1e3a8a;
  font-size: 38px;
  font-weight: 900;
  margin: 0 0 10px 0;
}

.sub-cat-max {
  color: #4a5568;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 350px;
}

.sub-cat-max strong {
  color: #1e3a8a;
}

/* --- Separador Central --- */
.separador-maxima {
  width: 2px;
  height: 180px;
  background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);
}

/* --- Columna Derecha (Condiciones) --- */
.columna-derecha-max {
  flex: 1.2;
}

.lista-condiciones-max {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.lista-condiciones-max li {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  padding: 15px 25px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.lista-condiciones-max li:hover {
  transform: translateX(10px);
  background: #ffffff;
  box-shadow: 0 5px 15px rgba(30, 58, 138, 0.08);
}

.icono-condicion {
  width: 45px;
  height: 45px;
  background-color: #e0e7ff;
  color: #1e3a8a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 20px;
  flex-shrink: 0;
}

.texto-condicion {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.4;
}

.texto-condicion strong {
  color: #1e3a8a;
  font-weight: 800;
}

.sub-detalle-condicion {
  font-size: 13.5px;
  color: #64748b;
  font-style: italic;
  display: block;
  margin-top: 4px;
}

/* ==========================================================================
   ADAPTACIÓN A MÓVILES
   ========================================================================== */
@media (max-width: 900px) {
  .card-maxima-horizontal {
    padding: 60px 25px 40px 25px;
  }

  .contenido-maxima-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .separador-maxima {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, #cbd5e1, transparent);
  }

  .titulo-cat-max {
    font-size: 32px;
  }

  .lista-condiciones-max li:hover {
    transform: translateX(5px);
  }

  .vehiculos-watermark {
    opacity: 0.04;
  }
}
/* ==========================================================================
   PARCHE DEFINITIVO: CORRECCIÓN DE DESBORDE Y RESPONSIVE (MÓVIL)
   ========================================================================== */
/* 1. Bloqueo global para evitar que la pantalla se estire horizontalmente */
html,
body {
  overflow-x: hidden;
  width: 100%;
}

/* ==========================================================================
   PARCHE DEFINITIVO CORREGIDO: DESBORDE Y RUTA (MÓVIL)
   ========================================================================== */
/* Bloqueo global para evitar que la pantalla se estire horizontalmente */
html,
body {
  overflow-x: hidden;
  width: 100%;
}

@media (max-width: 768px) {
  /* Arreglo del título largo en el banner */
  .titulo-banner-curso {
    font-size: 26px !important;
    word-wrap: break-word !important;
    line-height: 1.3 !important;
  }

  /* Ajuste de la caja de cristal del banner */
  .glass-caja-banner {
    width: 100% !important;
    max-width: 90% !important;
    padding: 30px 15px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  /* CONTENEDOR DE LA RUTA: Se adapta a la pantalla */
  .contenedor-nodos-h {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* LA CARRETERA: Corrección del error. Vuelve a ser una línea delgada vertical */
  .pista-central-h {
    min-width: 0 !important;
    width: 16px !important; /* <--- Ahora sí, el ancho correcto */
    left: 17px !important; /* Alineada al centro de los pines redondos */
  }

  .mapa-carretera-h {
    overflow-x: visible !important;
  }
}

/* ==========================================================================
   ETIQUETA: OBLIGATORIO (Banner Actualización de Normativa)
   ========================================================================== */
.etiqueta-obligatorio {
  background-color: #1e2a38; /* Azul noche oscuro extraído de la referencia */
  color: white;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 50px;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  display: inline-block;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(30, 42, 56, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15); /* Brillo sutil de cristal */
}

/* Adaptación móvil para la etiqueta */
@media (max-width: 768px) {
  .etiqueta-obligatorio {
    font-size: 11px;
    padding: 6px 15px;
    margin-bottom: 15px;
  }
}
/* ==========================================================================
   SECCIÓN EXCLUSIVA: ACTUALIZACIÓN DE NORMATIVA (Liquid Glass Simétrico)
   ========================================================================== */
.seccion-actualizacion-premium {
  padding: 80px 20px;
  background-color: transparent;
  font-family: Arial, sans-serif;
}

.contenedor-bento-upd {
  max-width: 1200px;
  margin: 0 auto;
}

/* Cabecera */
.cabecera-upd {
  text-align: center;
  margin-bottom: 50px;
}

.titulo-upd {
  font-size: 38px;
  color: #1e3a8a;
  font-weight: 900;
  margin-bottom: 15px;
  line-height: 1.2;
}

.texto-celeste-upd {
  color: #3b82f6;
}

.parrafo-upd {
  font-size: 16.5px;
  color: #4a5568;
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Layout Principal: Alineación Estricta */
.grid-layout-upd {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 30px;
  align-items: stretch; /* Garantiza que ambas columnas midan lo mismo */
}

.col-izq-upd {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------
   BASE DE LAS TARJETAS (Efecto Liquid Glass)
   -------------------------------------------------------- */
.card-glass-upd {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
}

/* Flex-grow hace que la tarjeta izquierda rellene todo el espacio hasta abajo */
.card-temario-upd {
  flex-grow: 1;
  padding: 40px;
}

.card-glass-upd:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 15px 35px rgba(30, 58, 138, 0.12);
}

/* Cabeceras Internas */
.header-card-upd {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.border-bottom-upd {
  border-bottom: 1px solid rgba(30, 58, 138, 0.1);
  padding-bottom: 15px;
}

.icono-box-upd {
  width: 45px;
  height: 45px;
  background-color: #e0e7ff;
  color: #3b82f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 15px;
  transition: transform 0.3s ease;
}

.card-glass-upd:hover .icono-box-upd {
  transform: scale(1.1) rotate(5deg);
}

.icono-box-upd.ico-req {
  background-color: #fef3c7;
  color: #d97706;
}
.icono-box-upd.ico-hor {
  background-color: #fce7f3;
  color: #db2777;
}

.header-card-upd h3 {
  color: #1e3a8a;
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

/* --------------------------------------------------------
   COLUMNA IZQUIERDA (CONTENIDO)
   -------------------------------------------------------- */
.titulo-seccion-upd {
  color: #1e3a8a;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.titulo-seccion-upd i {
  color: #3b82f6;
  font-size: 18px;
}
.margin-top-upd {
  margin-top: 30px;
}
.item-curso-upd {
  margin-bottom: 20px;
}

.item-curso-upd h5 {
  color: #3b82f6;
  font-size: 14px;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 700;
}

.item-curso-upd ul {
  list-style: none;
  padding-left: 0;
}
.item-curso-upd ul li {
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 6px;
  line-height: 1.5;
  position: relative;
  padding-left: 15px;
}

.item-curso-upd ul li::before {
  content: "•";
  color: #1e3a8a;
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 16px;
}

.item-curso-upd p {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* --------------------------------------------------------
   COLUMNA DERECHA (TARJETAS AJUSTADAS)
   -------------------------------------------------------- */
.col-der-upd {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Reducimos el gap de 25px a 20px para que encaje mejor */
}

/* Fichas Mini */
.grid-fichas-mini-upd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.card-mini-upd {
  padding: 15px 20px;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.card-mini-upd i {
  font-size: 22px;
  color: #3b82f6;
  background: #e0e7ff;
  padding: 10px;
  border-radius: 10px;
}

.datos-mini-upd {
  display: flex;
  flex-direction: column;
}
.datos-mini-upd span {
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
}
.datos-mini-upd strong {
  font-size: 14.5px;
  color: #1e3a8a;
  margin-top: 2px;
}

/* Tarjetas Generales Derecha */
.card-ajustada-upd {
  padding: 25px 30px;
}

/* Requisitos */
.lista-check-upd {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-check-upd li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 12px;
  line-height: 1.4;
}
.lista-check-upd li:last-child {
  margin-bottom: 0;
}
.lista-check-upd li i {
  color: #3b82f6;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Horarios */
.lista-horarios-upd {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.item-horario-upd {
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed #cbd5e1;
  padding: 12px 15px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-horario-upd span {
  font-size: 13.5px;
  color: #4a5568;
  font-weight: 600;
}
.item-horario-upd strong {
  font-size: 14px;
  color: #1e3a8a;
  background: #f1f5f9;
  padding: 5px 10px;
  border-radius: 15px;
}

/* Tarjeta Inversión (Ajustada) */
.card-inversion-upd {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(240, 249, 255, 0.9)
  );
  border: 2px solid #bae6fd;
  text-align: center;
  align-items: center;
  padding: 25px 20px; /* Reducimos padding interno */
}

.etiqueta-inv-upd {
  font-size: 13px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}
.precio-upd {
  font-size: 46px;
  font-weight: 900;
  color: #1e3a8a;
  margin: 5px 0 10px 0;
  text-shadow: 0 4px 10px rgba(30, 58, 138, 0.1);
}
.txt-pago-upd {
  font-size: 13px;
  color: #4a5568;
  margin-bottom: 12px;
}

/* Solución para alinear los logos en una sola fila */
.logos-pago-upd {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* Menos espacio entre logos */
  flex-wrap: nowrap; /* Evita que BBVA salte de línea */
  width: 100%;
}

.metodo-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  font-size: 11px;
  font-weight: 700;
  color: #4a5568;
  white-space: nowrap;
}

.metodo-chip img {
  height: 18px; /* Logos ligeramente más pequeños */
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------
   ADAPTACIÓN MÓVIL ESTRICTA
   -------------------------------------------------------- */
@media (max-width: 992px) {
  .grid-layout-upd {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .logos-pago-upd {
    flex-wrap: wrap;
  } /* En celular sí pueden bajar de línea */
}

@media (max-width: 768px) {
  .seccion-actualizacion-premium {
    padding: 50px 15px;
  }
  .titulo-upd {
    font-size: 28px;
  }
  .card-glass-upd {
    padding: 25px 20px;
  }
  .item-horario-upd {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .precio-upd {
    font-size: 40px;
  }
}

/* ==========================================================================
   SECCIÓN: PROCESO DEL CURSO (Liquid Glass & Animaciones)
   ========================================================================== */
.seccion-proceso-upd {
  padding: 80px 20px;
  background-color: transparent;
}

.cabecera-proceso-upd {
  text-align: center;
  margin-bottom: 50px;
}

.grid-proceso-upd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Base de la Tarjeta del Proceso */
.card-paso-upd {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.05);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* Hover de la Tarjeta */
.card-paso-upd:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 45px rgba(30, 58, 138, 0.12);
}

/* Número Gigante de Fondo (Marca de Agua) */
.num-bg-upd {
  position: absolute;
  top: -15px;
  right: 15px;
  font-size: 90px;
  font-weight: 900;
  color: rgba(59, 130, 246, 0.08); /* Celeste casi transparente */
  z-index: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}

.card-paso-upd:hover .num-bg-upd {
  transform: translateY(-10px) scale(1.1);
  color: rgba(59, 130, 246, 0.15); /* Se ilumina sutilmente al pasar el mouse */
}

/* Icono Interactivo */
.icono-paso-upd {
  width: 65px;
  height: 65px;
  background-color: #e0e7ff;
  color: #3b82f6;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-paso-upd:hover .icono-paso-upd {
  transform: scale(1.15) rotate(-5deg);
  background-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Textos de la Tarjeta */
.card-paso-upd h3 {
  font-size: 19px;
  color: #1e3a8a;
  font-weight: 800;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
  line-height: 1.3;
}

.card-paso-upd p {
  font-size: 14.5px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------
   TARJETA 6: CERTIFICADO DESTACADO
   -------------------------------------------------------- */
.card-certificado-upd {
  border: 2px solid #ffc107; /* Borde dorado para resaltar */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85),
    rgba(240, 249, 255, 0.95)
  );
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 30px;
}

.card-certificado-upd:hover {
  box-shadow: 0 20px 45px rgba(255, 193, 7, 0.2);
  border-color: #f59e0b;
}

/* Vector animado del Certificado */
.cert-vector-upd {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  animation: flotar-certificado 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 15px rgba(255, 193, 7, 0.4));
}

@keyframes flotar-certificado {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.info-certificado-upd h4 {
  font-size: 22px;
  color: #1e3a8a;
  font-weight: 900;
  margin-bottom: 15px;
}

/* Etiqueta roja estilo MTC */
.tag-rojo-upd {
  background-color: #ef4444; /* Rojo urgencia/oficial */
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.info-certificado-upd p {
  font-size: 15px;
  color: #1e3a8a;
}

/* --------------------------------------------------------
   ADAPTACIÓN MÓVIL Y TABLET
   -------------------------------------------------------- */
@media (max-width: 992px) {
  .grid-proceso-upd {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-proceso-upd {
    grid-template-columns: 1fr;
  }
  .card-paso-upd {
    padding: 30px 25px;
  }
  .num-bg-upd {
    font-size: 70px;
    right: 10px;
  }
  .icono-paso-upd {
    width: 55px;
    height: 55px;
    font-size: 24px;
    margin-bottom: 20px;
  }
  .card-paso-upd h3 {
    font-size: 18px;
  }
  .cert-vector-upd {
    width: 70px;
    height: 70px;
  }
}

/* ==========================================================================
   SECCIÓN: ADVERTENCIA DE SANCIÓN (Liquid Glass Alert)
   ========================================================================== */
.seccion-advertencia-upd {
  padding: 80px 20px;
  /* Fondo Índigo Degradado Electrizado */
  background: linear-gradient(135deg, #0d1b2a 0%, #1e3a8a 100%);
  position: relative;
  overflow: hidden;
}
/* Efecto opcional de luz sutil para mayor dinamismo */
.seccion-advertencia-upd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle at 70% 30%,
    rgba(59, 130, 246, 0.2) 0%,
    transparent 60%
  );
  pointer-events: none;
}
/* Tarjeta Alerta Liquid Glass */
.card-alerta-glass {
  display: flex;
  align-items: center;
  gap: 30px;
  background: #fee2e2db; /* Rojo/rosado muy sutil y translúcido */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 8px solid #dc2626; /* Borde rojo grueso característico de advertencia */
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(220, 38, 38, 0.1);
  max-width: 1000px;
  margin: 0 auto;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-alerta-glass:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(220, 38, 38, 0.15);
  background: rgba(254, 226, 226, 0.75);
}

/* Envoltura del ícono para centrarlo */
.alerta-icono-wrapper {
  flex-shrink: 0;
}

/* Ícono Rojo Animado (Latido) */
.alerta-icono-pulsante {
  width: 80px;
  height: 80px;
  background-color: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  border: 2px solid rgba(220, 38, 38, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  animation: latido-alerta 2s infinite;
}

@keyframes latido-alerta {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(220, 38, 38, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    transform: scale(1);
  }
}

/* Contenido de Textos */
.alerta-contenido {
  flex-grow: 1;
}

.alerta-titulo {
  color: #991b1b;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px 0;
}

.alerta-texto {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.alerta-texto strong {
  color: #dc2626;
}

/* Contenedor de las Píldoras de Detalle */
.alerta-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* Píldoras Individuales */
.alerta-pill {
  background: #ffffff;
  border: 1px solid #fca5a5;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  color: #7f1d1d;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.05);
}

.alerta-pill i {
  font-size: 16px;
}

.pill-leve i {
  color: #f59e0b;
}
.pill-multa i {
  color: #dc2626;
}

.pill-severa {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
  font-weight: 600;
}
.pill-severa i {
  color: #dc2626;
}

/* --------------------------------------------------------
   ADAPTACIÓN MÓVIL (Responsivo)
   -------------------------------------------------------- */
@media (max-width: 768px) {
  .card-alerta-glass {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
    border-left: none;
    border-top: 8px solid #dc2626; /* El borde grueso pasa arriba en celulares */
  }

  .alerta-pills-container {
    justify-content: center;
    flex-direction: column;
  }

  .alerta-pill {
    justify-content: center;
  }

  .alerta-titulo {
    font-size: 22px;
  }
}

/* ==========================================================================
   SECCIÓN: CONDUCTORES Y CRONOGRAMA (Layout vertical simétrico)
   ========================================================================== */
.seccion-conductores-cronograma {
  padding: 80px 20px;
  background-color: transparent;
}

.seccion-conductores-cronograma .titulo-principal {
  text-align: center;
  margin-bottom: 50px;
}

/* --- TARJETAS DE CONDUCTORES (una fila, 4 columnas) --- */
.grid-tarjetas-conductores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-bottom: 60px;
}

.card-conductor {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px 20px 25px;
  text-align: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08);
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-conductor:nth-child(1) {
  animation-delay: 0.1s;
}
.card-conductor:nth-child(2) {
  animation-delay: 0.2s;
}
.card-conductor:nth-child(3) {
  animation-delay: 0.3s;
}
.card-conductor:nth-child(4) {
  animation-delay: 0.4s;
}

.card-conductor:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 35px rgba(79, 70, 229, 0.15);
}

.icono-conductor {
  width: 60px;
  height: 60px;
  background: #e0e7ff;
  color: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 15px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-conductor:hover .icono-conductor {
  background: #3b82f6;
  color: #ffffff;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.card-conductor h3 {
  font-size: 17px;
  color: #1e3a8a;
  margin: 0 0 10px 0;
  font-weight: 800;
}

.card-conductor p {
  font-size: 13.5px;
  color: #4a5568;
  line-height: 1.5;
  margin: 0;
}

/* --- CRONOGRAMA (ancho completo) --- */
.cronograma-wrapper {
  max-width: 900px;
  margin: 0 auto;
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.3s forwards;
}

.crono-card {
  padding: 35px 30px;
}

.header-crono {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.header-crono i {
  font-size: 28px;
  color: #3b82f6;
  background: #e0e7ff;
  padding: 12px;
  border-radius: 12px;
}

.header-crono h3 {
  font-size: 22px;
  color: #1e3a8a;
  margin: 0;
  font-weight: 800;
}

.sub-crono {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 25px;
  padding-left: 10px;
}

.tabla-cronograma-wrapper {
  overflow-x: auto;
  margin-bottom: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.tabla-cronograma {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 14px;
}

.tabla-cronograma thead th {
  text-align: left;
  padding: 12px 15px;
  background: rgba(30, 58, 138, 0.05);
  color: #1e3a8a;
  font-weight: 700;
  border-radius: 8px 8px 0 0;
}

.tabla-cronograma tbody tr {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.tabla-cronograma tbody tr:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.01);
}

.tabla-cronograma tbody td {
  padding: 12px 15px;
  color: #4a5568;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.tabla-cronograma tbody tr:last-child td {
  border-bottom: none;
}

.badge-vencido {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: #fecaca;
  color: #b91c1c;
  border: 1px solid #f87171;
}

.pie-cronograma {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 58, 138, 0.05);
  border-radius: 12px;
  padding: 15px 20px;
  border: 1px dashed #bae6fd;
}

.texto-obligatorio {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a8a;
}

.badge-obligatorio {
  background: #ffc107;
  color: #1e3a8a;
  font-weight: 800;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 13px;
  letter-spacing: 0.5px;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
  }
}

/* Animación de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .grid-tarjetas-conductores {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .grid-tarjetas-conductores {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .crono-card {
    padding: 25px 20px;
  }

  .header-crono h3 {
    font-size: 20px;
  }

  .tabla-cronograma {
    font-size: 13px;
  }

  .tabla-cronograma tbody td {
    padding: 10px 12px;
  }

  .pie-cronograma {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .grid-tarjetas-conductores {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* ==========================================================================
   SECCIÓN: DETALLES CAMBIEMOS DE ACTITUD (Alineación y Simetría Absoluta)
   ========================================================================== */

/* ---- ANIMACIONES DE ENTRADA ---- */
.hidden-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.visible-anim {
  opacity: 1;
  transform: translateY(0);
}

/* ---- ESTRUCTURA GENERAL ---- */
.seccion-curso-layout {
  padding: 80px 20px;
  background-color: #f4f7f9;
}

.contenedor-principal-curso {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---- CABECERA ---- */
.cabecera-curso {
  text-align: center;
  margin-bottom: 50px;
}

.titulo-curso {
  font-size: 38px;
  color: #1e3a8a;
  font-weight: 900;
  margin-bottom: 15px;
}

.texto-resalte {
  color: #3b82f6;
}

.parrafo-curso {
  max-width: 800px;
  margin: 0 auto;
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
}

/* ---- GRID PRINCIPAL (Las dos columnas de arriba) ---- */
.grid-dos-columnas {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: stretch; /* ESTO ES CLAVE: Obliga a ambas columnas a medir lo mismo */
  width: 100%;
  margin-bottom: 30px; /* Separación con la barra de inversión inferior */
}

/* ---- TARJETA BLANCA BASE ---- */
.tarjeta-blanca {
  background: #ffffff;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-sizing: border-box;
  width: 100%;
}

.tarjeta-blanca:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(30, 58, 138, 0.08);
}

/* ---- CABECERAS DE TARJETAS ---- */
.cabecera-tarjeta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.icono-cuadrado {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #eff6ff;
  color: #2563eb;
  flex-shrink: 0;
}

.icono-cuadrado.amarillo {
  background: #fef3c7;
  color: #d97706;
}
.icono-cuadrado.rosado {
  background: #fce7f3;
  color: #db2777;
}
.icono-cuadrado.verde {
  background: #dcfce7;
  color: #16a34a;
}

.titulo-tarjeta {
  font-size: 22px;
  color: #1e3a8a;
  font-weight: 800;
  margin: 0;
}

/* ---- COLUMNA IZQUIERDA ---- */
.columna-izquierda {
  display: flex;
  flex-direction: column;
  height: 100%; /* Asegura que tome toda la altura del grid */
}

.tarjeta-temario {
  flex-grow: 1; /* ESTO ES CLAVE: Estira la tarjeta blanca hasta rellenar el espacio vacío */
  display: flex;
  flex-direction: column;
  padding: 45px;
}

.subtitulo-azul {
  font-size: 18px;
  color: #1e3a8a;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.texto-descriptivo {
  font-size: 14.5px;
  color: #64748b;
  margin-bottom: 20px;
}

.linea-divisoria {
  border: 0;
  height: 1px;
  background: #e2e8f0;
  margin: 30px 0;
}

/* Listas Columna Izquierda */
.lista-check-azul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-check-azul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: #334155;
  margin-bottom: 12px;
  line-height: 1.6;
}

.lista-check-azul li i {
  color: #3b82f6;
  margin-top: 4px;
  font-size: 14px;
  flex-shrink: 0;
}

/* Módulos de Temario */
.modulo-item {
  margin-bottom: 25px;
}

.titulo-modulo {
  color: #3b82f6;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.modulo-item p {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* Cuadro de Alerta (Pitch de Cierre) */
.cuadro-celeste-alerta {
  background: #eff6ff;
  border-radius: 16px;
  padding: 30px;
  border-left: 5px solid #3b82f6;
  margin-top: auto; /* ESTO ES CLAVE: Empuja el cuadro azul al fondo de la tarjeta */
}

.cuadro-celeste-alerta h4 {
  color: #1e3a8a;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.cuadro-celeste-alerta p {
  color: #4a5568;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---- COLUMNA DERECHA ---- */
.columna-derecha {
  display: flex;
  flex-direction: column;
  gap: 25px; /* Espacio entre las tarjetas de la derecha */
}

/* Mini tarjetas */
.tarjeta-mini {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px 30px;
}

.icono-circular {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.icono-circular.azul {
  background: #eff6ff;
  color: #3b82f6;
}
.icono-circular.celeste {
  background: #e0f2fe;
  color: #0ea5e9;
}

.info-mini {
  display: flex;
  flex-direction: column;
}

.etiqueta-mini {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.valor-mini {
  font-size: 16px;
  color: #1e3a8a;
  font-weight: 800;
}

/* Listas en Columna Derecha */
.lista-check-circulo,
.lista-check-verde {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
}

.lista-check-circulo li,
.lista-check-verde li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 12px;
  font-weight: 500;
}

.lista-check-circulo li i {
  color: #3b82f6;
  margin-top: 2px;
  font-size: 16px;
  flex-shrink: 0;
}
.lista-check-verde li i {
  color: #16a34a;
  margin-top: 2px;
  font-size: 16px;
  flex-shrink: 0;
}

/* Botón MTC */
.btn-azul-oscuro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #1e3a8a;
  color: #ffffff;
  padding: 14px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.2);
  transition: all 0.3s ease;
}

.btn-azul-oscuro:hover {
  background: #172554;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.3);
}

/* Horarios */
.linea-divisoria-horario {
  border: 0;
  height: 1px;
  background: #e2e8f0;
  margin: 0 0 20px 0;
}

.contenedor-horarios {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fila-horario {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

.dia-horario {
  font-size: 14px;
  font-weight: 700;
  color: #4a5568;
}

.hora-pill {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 50px;
}

/* ---- TARJETA INVERSIÓN (HORIZONTAL, FULL WIDTH ABAJO DEL TODO) ---- */
.tarjeta-inversion-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 30px 40px;
  /* Al estar fuera de la cuadrícula, abarca el 100% perfecto */
}

/* Columnas internas de Inversión */
.inv-col-izq,
.inv-col-der {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inv-col-izq {
  align-items: center;
  text-align: center;
}

.etiqueta-inversion {
  font-size: 13px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.precio-destacado {
  font-size: 50px;
  font-weight: 900;
  color: #1e3a8a;
  line-height: 1;
}

/* Separador Central */
.separador-vertical {
  width: 1px;
  background: #e2e8f0;
  height: 70px;
  margin: 0 40px;
}

/* Mitad Derecha */
.inv-col-der {
  align-items: center;
}

.texto-metodos {
  font-size: 14px;
  color: #4a5568;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}

.contenedor-logos-pago {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.logo-pago-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.logo-pago-caja i {
  font-size: 30px;
  color: #16a34a;
}

.logo-pago-caja img {
  height: 30px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* Aumento de tamaño solo para logos de bancos sin texto */
.logo-pago-caja.solo-logo img {
  height: 38px;
}

/* ==========================================================================
   RESPONSIVE (Móviles y Tablets)
   ========================================================================== */
@media (max-width: 992px) {
  .grid-dos-columnas {
    grid-template-columns: 1fr;
  }

  .tarjeta-inversion-horizontal {
    flex-direction: column;
    padding: 40px 20px;
  }

  .separador-vertical {
    width: 100%;
    height: 1px;
    margin: 30px 0;
  }

  .contenedor-logos-pago {
    flex-wrap: wrap;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .seccion-curso-layout {
    padding: 50px 15px;
  }

  .titulo-curso {
    font-size: 30px;
  }

  .columna-izquierda .tarjeta-blanca {
    padding: 25px;
  }

  .precio-destacado {
    font-size: 45px;
  }

  .fila-horario {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

/* ==========================================================================
   SECCIÓN: PROCESO DEL CURSO CAMBIEMOS DE ACTITUD (Liquid Glass + Animado)
   ========================================================================== */

/* ---- ANIMACIONES ---- */
.hidden-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.visible-anim {
  opacity: 1;
  transform: translateY(0);
}

/* ---- CONTENEDOR PRINCIPAL ---- */
.seccion-proceso-sancionados {
  padding: 80px 20px;
  background-color: #f4f7f9;
}

.contenedor-proceso-sancionados {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- CABECERA ---- */
.cabecera-proceso-sancionados {
  text-align: center;
  margin-bottom: 50px;
}

.titulo-proceso-sancionados {
  font-size: 38px;
  color: #1e3a8a;
  font-weight: 900;
  margin-bottom: 15px;
  line-height: 1.2;
}

.texto-resalte {
  color: #3b82f6;
}

.parrafo-proceso-sancionados {
  max-width: 700px;
  margin: 0 auto;
  color: #4a5568;
  font-size: 17px;
  line-height: 1.6;
}

/* ---- TIMELINE (Línea de Tiempo Horizontal) ---- */
.timeline-proceso-sancionados {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  padding: 40px 0 20px 0;
}

/* Línea conectora (solo visible en escritorio) */
.timeline-proceso-sancionados::before {
  content: "";
  position: absolute;
  top: 65px;
  left: 50px;
  right: 50px;
  height: 4px;
  background: linear-gradient(to right, #3b82f6, #1e3a8a);
  border-radius: 4px;
  z-index: 0;
  opacity: 0.3;
}

/* ---- CADA PASO ---- */
.paso-timeline {
  flex: 1;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px 20px 25px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
  animation-delay: var(--delay, 0s);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.paso-timeline:hover {
  transform: translateY(-10px) scale(1.02);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 45px rgba(79, 70, 229, 0.15);
  border-color: #3b82f6;
}

/* Número de paso (grande y decorativo) */
.numero-paso {
  font-size: 42px;
  font-weight: 900;
  color: rgba(59, 130, 246, 0.08);
  line-height: 1;
  position: absolute;
  top: 10px;
  right: 15px;
  pointer-events: none;
}

/* Icono del paso */
.icono-paso {
  width: 65px;
  height: 65px;
  background: #eff6ff;
  color: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 18px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 2;
}

.paso-timeline:hover .icono-paso {
  background: #3b82f6;
  color: #ffffff;
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.paso-timeline h3 {
  font-size: 17px;
  color: #1e3a8a;
  font-weight: 800;
  margin: 0 0 10px 0;
  line-height: 1.3;
  position: relative;
  z-index: 2;
}

.paso-timeline p {
  font-size: 13.5px;
  color: #4a5568;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* ---- TARJETA DESTACADA (Certificado/Sanción) ---- */
.certificado-destacado-sancionados {
  margin-top: 50px;
  background: linear-gradient(
    135deg,
    rgba(30, 58, 138, 0.05),
    rgba(59, 130, 246, 0.05)
  );
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 2px solid #3b82f6;
  border-radius: 20px;
  padding: 35px 40px;
  display: flex;
  align-items: center;
  gap: 30px;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1);
  transition: all 0.4s ease;
  opacity: 0;
  animation: fadeInUp 0.7s ease 0.6s forwards;
}

.certificado-destacado-sancionados:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(59, 130, 246, 0.15);
}

.certificado-icono {
  font-size: 60px;
  color: #16a34a;
  background: #dcfce7;
  padding: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: latido-icono 2s infinite;
}

@keyframes latido-icono {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.certificado-info {
  flex: 1;
}

.certificado-info h3 {
  font-size: 26px;
  color: #1e3a8a;
  font-weight: 900;
  margin: 0 0 8px 0;
}

.certificado-info p {
  font-size: 16px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0 0 15px 0;
}

/* ---- BOTÓN "VERIFÍCALO AQUÍ" (reemplaza al badge) ---- */
.btn-verificar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #3b82f6;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
  cursor: pointer;
}

.btn-verificar:hover {
  transform: translateY(-3px) scale(1.03);
  background: #2563eb;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45);
  color: #ffffff;
}

.btn-verificar i {
  font-size: 16px;
}

/* ---- ANIMACIÓN DE ENTRADA ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
  .timeline-proceso-sancionados {
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
  }

  .timeline-proceso-sancionados::before {
    display: none;
  }

  .paso-timeline {
    flex: 0 0 calc(50% - 25px);
    min-height: 240px;
  }

  .certificado-destacado-sancionados {
    flex-direction: column;
    text-align: center;
    padding: 30px 25px;
  }
}

@media (max-width: 768px) {
  .seccion-proceso-sancionados {
    padding: 50px 15px;
  }

  .titulo-proceso-sancionados {
    font-size: 28px;
  }

  .parrafo-proceso-sancionados {
    font-size: 15px;
  }

  .paso-timeline {
    flex: 0 0 100%;
    min-height: 200px;
    padding: 25px 18px;
  }

  .numero-paso {
    font-size: 32px;
  }

  .icono-paso {
    width: 55px;
    height: 55px;
    font-size: 22px;
  }

  .paso-timeline h3 {
    font-size: 16px;
  }

  .paso-timeline p {
    font-size: 13px;
  }

  .certificado-destacado-sancionados {
    padding: 25px 20px;
    gap: 20px;
  }

  .certificado-icono {
    font-size: 45px;
    padding: 15px;
  }

  .certificado-info h3 {
    font-size: 22px;
  }

  .certificado-info p {
    font-size: 14px;
  }

  .btn-verificar {
    font-size: 12px;
    padding: 6px 16px;
  }
}

/* ==========================================================================
   SECCIÓN: VIDEO DE CONCIENTIZACIÓN (Estilo Profesional Liquid Glass)
   ========================================================================== */

.seccion-video-conciencia {
  padding: 60px 20px 100px 20px;
  background-color: #f4f7f9;
}

/* ---- CABECERA DEL VIDEO ---- */
.cabecera-video-conciencia {
  text-align: center;
  margin-bottom: 40px;
}

.titulo-video-conciencia {
  font-size: 38px;
  color: #1e3a8a;
  font-weight: 900;
  margin-bottom: 15px;
}

.parrafo-video-conciencia {
  max-width: 800px;
  margin: 0 auto;
  color: #4a5568;
  font-size: 16px;
  line-height: 1.7;
}

/* Estadística destacada con diseño formal */
.stat-destacada {
  display: inline-block;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c; /* Rojo de alerta institucional */
  padding: 6px 15px;
  border-radius: 8px;
  font-weight: 800;
  margin-bottom: 15px;
  font-size: 15px;
}

.parrafo-video-conciencia strong {
  color: #1e3a8a;
  font-weight: 800;
}

/* ---- MARCO LIQUID GLASS SERIO Y PROFESIONAL ---- */
.marco-video-liquid-glass {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.45); /* Base translúcida */
  backdrop-filter: blur(15px); /* Efecto Glass */
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 35px rgba(30, 58, 138, 0.1);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.marco-video-liquid-glass:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(30, 58, 138, 0.15);
}

/* Cabecera interna del marco */
.cabecera-marco-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(30, 58, 138, 0.1); /* Línea divisoria muy sutil */
}

.cabecera-marco-glass i {
  color: #b91c1c;
  font-size: 20px;
}

.cabecera-marco-glass span {
  font-size: 14px;
  font-weight: 800;
  color: #1e3a8a;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Contenedor del video */
.contenedor-video-interno {
  border-radius: 12px;
  overflow: hidden; /* Evita que el video se salga de las esquinas redondeadas */
  background-color: #000000;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  position: relative;
}

.video-impacto {
  width: 100%;
  height: auto;
  display: block; /* Elimina márgenes extra abajo del video */
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .seccion-video-conciencia {
    padding: 50px 15px 80px 15px;
  }

  .titulo-video-conciencia {
    font-size: 28px;
  }

  .marco-video-liquid-glass {
    padding: 20px;
    border-radius: 16px;
  }

  .cabecera-marco-glass {
    margin-bottom: 15px;
    padding-bottom: 15px;
  }

  .cabecera-marco-glass span {
    font-size: 12px;
  }

  .stat-destacada {
    font-size: 13px;
    padding: 5px 10px;
  }
}

/* Etiqueta exclusiva para el banner de Cambiemos de Actitud (Tamaño igualado) */
.etiqueta-rehabilitacion {
  background-color: #64748b; /* Tu color específico */
  color: white;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 20px; /* Tamaño exacto de la original */
  border-radius: 50px;
  letter-spacing: 1.5px; /* Espaciado exacto de la original */
  margin-bottom: 20px;
  display: inline-block;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(100, 116, 139, 0.4); /* Sombra adaptada al tono gris/azul */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Borde blanco sutil exacto */
}

/* Píldora de Aprendizaje - Estilo específico */
.etiqueta-aprendizaje {
  display: inline-block;
  background-color: #0d9488; /* El color exacto de la referencia */
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 50px;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(13, 148, 136, 0.4); /* Sombra acorde al color de la píldora */
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   SECCIÓN: DETALLES MANEJO A LA DEFENSIVA (CSS Independiente y Alineado)
   ========================================================================== */

/* ---- ANIMACIONES EXCLUSIVAS ---- */
.hidden-anim-def {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.visible-anim-def {
  opacity: 1;
  transform: translateY(0);
}

/* ---- ESTRUCTURA BASE ---- */
.seccion-defensiva-layout {
  padding: 80px 20px;
  background-color: #f4f7f9;
}

.contenedor-defensiva {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---- CABECERA ---- */
.cabecera-defensiva {
  text-align: center;
  margin-bottom: 50px;
}

.titulo-defensiva {
  font-size: 38px;
  color: #1e3a8a;
  font-weight: 900;
  margin-bottom: 15px;
}

.texto-resalte-def {
  color: #3b82f6;
}

.parrafo-defensiva {
  max-width: 800px;
  margin: 0 auto;
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
}

/* ---- GRID PRINCIPAL ---- */
.grid-defensiva-columnas {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: stretch; /* Obliga a que ambas columnas midan lo mismo */
  width: 100%;
  margin-bottom: 30px;
}

/* ---- TARJETAS BASE ---- */
.tarjeta-defensiva {
  background: #ffffff;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-sizing: border-box;
  width: 100%;
}

.tarjeta-defensiva:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(30, 58, 138, 0.08);
}

.cabecera-tarjeta-def {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

/* Iconos de cabecera */
.icono-cuadrado-def {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.azul-icono {
  background: #eff6ff;
  color: #2563eb;
}
.rosado-icono {
  background: #fce7f3;
  color: #db2777;
}
.verde-icono {
  background: #dcfce7;
  color: #16a34a;
}

.titulo-tarjeta-def {
  font-size: 22px;
  color: #1e3a8a;
  font-weight: 800;
  margin: 0;
}

/* ---- COLUMNA IZQUIERDA ---- */
.col-defensiva-izq {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tarjeta-def-temario {
  flex-grow: 1; /* Rellena el espacio */
  display: flex;
  flex-direction: column;
  padding: 45px;
}

/* Temario */
.modulo-item-def {
  margin-bottom: 25px;
}

.titulo-modulo-def {
  color: #3b82f6;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.modulo-item-def p {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* Cuadro Alerta */
.cuadro-celeste-def {
  background: #eff6ff;
  border-radius: 16px;
  padding: 30px;
  border-left: 5px solid #3b82f6;
  margin-top: auto; /* Empuja al fondo */
}

.cuadro-celeste-def h4 {
  color: #1e3a8a;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.cuadro-celeste-def p {
  color: #4a5568;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---- COLUMNA DERECHA ---- */
.col-defensiva-der {
  display: flex;
  flex-direction: column;
  gap: 25px;
  height: 100%; /* FUNDAMENTAL: Toma todo el alto de la cuadrícula */
}

/* Mini Fichas */
.tarjeta-def-mini {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px 30px;
}

.icono-circular-def {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.circulo-azul {
  background: #eff6ff;
  color: #3b82f6;
}
.circulo-celeste {
  background: #e0f2fe;
  color: #0ea5e9;
}

.info-mini-def {
  display: flex;
  flex-direction: column;
}
.etiqueta-mini-def {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.valor-mini-def {
  font-size: 16px;
  color: #1e3a8a;
  font-weight: 800;
}

/* Listas y Horarios */
.lista-check-verde-def {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-check-verde-def li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 12px;
  font-weight: 500;
}
.lista-check-verde-def li i {
  color: #16a34a;
  margin-top: 2px;
  font-size: 16px;
  flex-shrink: 0;
}

.linea-divisoria-def {
  border: 0;
  height: 1px;
  background: #e2e8f0;
  margin: 0 0 20px 0;
}

.contenedor-horarios-def {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fila-horario-def {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}
.dia-horario-def {
  font-size: 14px;
  font-weight: 700;
  color: #4a5568;
}
.hora-pill-def {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 50px;
}

/* ---- TARJETA INCLUYE (CON FIX PARA ESTIRAR HASTA ABAJO) ---- */
.tarjeta-def-incluye {
  flex-grow: 1; /* ESTO ES CLAVE: Hace que la tarjeta se estire para cerrar el hueco inferior */
  display: flex;
  flex-direction: column;
}

/* ---- INVERSIÓN (HORIZONTAL, 100% WIDTH) ---- */
.tarjeta-inversion-def {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 30px 40px;
}

.inv-col-izq-def,
.inv-col-der-def {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inv-col-izq-def {
  align-items: center;
  text-align: center;
}

.etiqueta-inversion-def {
  font-size: 13px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 5px;
  letter-spacing: 1px;
}
.precio-destacado-def {
  font-size: 50px;
  font-weight: 900;
  color: #1e3a8a;
  line-height: 1;
}

.separador-vertical-def {
  width: 1px;
  background: #e2e8f0;
  height: 70px;
  margin: 0 40px;
}

.inv-col-der-def {
  align-items: center;
}
.texto-metodos-def {
  font-size: 14px;
  color: #4a5568;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}

.contenedor-logos-pago-def {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
}
.logo-pago-caja-def {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.logo-pago-caja-def i {
  font-size: 30px;
  color: #16a34a;
}
.logo-pago-caja-def img {
  height: 30px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}
.logo-pago-caja-def.solo-logo-def img {
  height: 38px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
  .grid-defensiva-columnas {
    grid-template-columns: 1fr;
  }
  .tarjeta-inversion-def {
    flex-direction: column;
    padding: 40px 20px;
  }
  .separador-vertical-def {
    width: 100%;
    height: 1px;
    margin: 30px 0;
  }
  .contenedor-logos-pago-def {
    flex-wrap: wrap;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .seccion-defensiva-layout {
    padding: 50px 15px;
  }
  .titulo-defensiva {
    font-size: 30px;
  }
  .col-defensiva-izq .tarjeta-defensiva {
    padding: 25px;
  }
  .precio-destacado-def {
    font-size: 45px;
  }
  .fila-horario-def {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
/* ==========================================================================
   SECCIÓN: PROCESO DEL CURSO (Línea de tiempo con Iconos y Animaciones)
   ========================================================================== */

/* ---- ANIMACIONES DE ENTRADA AL SCROLL ---- */
.hidden-anim-proceso {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.visible-anim-proceso {
  opacity: 1;
  transform: translateY(0);
}

/* ---- ESTRUCTURA BASE ---- */
.seccion-proceso-def {
  padding: 80px 20px;
  background-color: #f4f7f9;
}

.contenedor-proceso-def {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---- CABECERA ---- */
.cabecera-proceso-def {
  text-align: center;
  margin-bottom: 60px;
}

.titulo-proceso-def {
  font-size: 38px;
  color: #1e3a8a;
  font-weight: 900;
  margin-bottom: 15px;
}

.parrafo-proceso-def {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
}

/* ---- GRID DE PASOS (CON LÍNEA CONECTORA) ---- */
.grid-pasos-def {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  position: relative;
  align-items: stretch;
}

/* Línea horizontal que conecta las tarjetas por detrás */
.grid-pasos-def::before {
  content: "";
  position: absolute;
  top: 60px; /* Alineado justo a la altura del centro de los iconos */
  left: 10%;
  right: 10%;
  height: 2px;
  background-color: #cbd5e1;
  z-index: 0;
}

/* ---- TARJETA DE PASO INDIVIDUAL ---- */
.tarjeta-paso-def {
  background: #ffffff;
  border-radius: 20px;
  padding: 35px 25px;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
  border: 1px solid transparent;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transición suave */
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* ANIMACIÓN HOVER DE LA TARJETA */
.tarjeta-paso-def:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(30, 58, 138, 0.08);
  border: 1px solid #bae6fd; /* Borde sutil al hacer hover */
}

/* Contenedor de la parte superior (Icono y Número) */
.cabecera-paso-visual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
  height: 50px; /* Fija la altura para que el texto baje uniformemente */
}

/* Icono Circular */
.icono-paso-def {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #eff6ff;
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease; /* Transición para el hover */
}

/* ANIMACIÓN HOVER DEL ICONO (Se activa al pasar el mouse por la tarjeta) */
.tarjeta-paso-def:hover .icono-paso-def {
  background-color: #3b82f6;
  color: #ffffff;
  transform: scale(1.1) rotate(-5deg); /* Efecto interactivo muy moderno */
  box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3);
}

/* Número difuminado */
.numero-fondo-def {
  font-size: 55px;
  font-weight: 900;
  color: #f1f5f9; /* Color gris perla muy sutil */
  line-height: 1;
}

/* Título del paso */
.titulo-paso-def {
  font-size: 16px;
  color: #1e3a8a;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.4;
}

/* Párrafo del paso */
.texto-paso-def {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
  .grid-pasos-def {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  .grid-pasos-def::before {
    display: none; /* Se oculta la línea en móviles/tablets */
  }
}

@media (max-width: 600px) {
  .grid-pasos-def {
    grid-template-columns: 1fr;
  }
  .cabecera-proceso-def {
    margin-bottom: 40px;
  }
  .titulo-proceso-def {
    font-size: 30px;
  }
}

/* ==========================================================================
   SECCIÓN: DETALLES MAPTEL I (CSS Independiente y Alineado)
   ========================================================================== */

/* ---- ANIMACIONES ---- */
.hidden-anim-map {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.visible-anim-map {
  opacity: 1;
  transform: translateY(0);
}

/* ---- ESTRUCTURA BASE ---- */
.seccion-maptel-layout {
  padding: 80px 20px;
  background-color: #f4f7f9;
}
.contenedor-maptel {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---- TARJETAS BASE LIQUID GLASS ---- */
.tarjeta-maptel {
  background: #ffffff;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-sizing: border-box;
  width: 100%;
}
.tarjeta-maptel:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(30, 58, 138, 0.08);
}

.cabecera-tarjeta-map {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

/* Iconos Cuadrados */
.icono-cuadrado-map {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.azul-icono {
  background: #eff6ff;
  color: #2563eb;
}
.rosado-icono {
  background: #fce7f3;
  color: #db2777;
}
.verde-icono {
  background: #dcfce7;
  color: #16a34a;
}

.titulo-tarjeta-map {
  font-size: 20px;
  color: #1e3a8a;
  font-weight: 800;
  margin: 0;
}
.texto-descriptivo-map {
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* ---- GRID TRES COLUMNAS (Info Adicional) ---- */
.grid-tres-columnas-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
  margin-bottom: 30px;
}

/* Lista check azul para Público Objetivo */
.lista-check-azul-map {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-check-azul-map li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 12px;
  line-height: 1.5;
  font-weight: 500;
}
.lista-check-azul-map li i {
  color: #3b82f6;
  margin-top: 3px;
  font-size: 14px;
  flex-shrink: 0;
}

/* Alerta especial para Normativa */
.alerta-norma-map {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.alerta-norma-map i {
  color: #e11d48;
  font-size: 24px;
}
.alerta-norma-map span {
  font-size: 13.5px;
  color: #881337;
  line-height: 1.4;
}

/* ---- GRID SECUNDARIO (Temario y Fichas) ---- */
.grid-maptel-columnas {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: stretch; /* Mantiene la simetría vertical */
  width: 100%;
  margin-bottom: 30px;
}

/* ---- COLUMNA IZQUIERDA (Temario) ---- */
.col-maptel-izq {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tarjeta-map-temario {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 45px;
}

.modulo-item-map {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px dashed #e2e8f0;
}
.modulo-item-map:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.titulo-modulo-map {
  color: #3b82f6;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.modulo-item-map p {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* ---- COLUMNA DERECHA (Información Técnica) ---- */
.col-maptel-der {
  display: flex;
  flex-direction: column;
  gap: 30px;
  height: 100%;
}
.tarjeta-map-mini {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px 30px;
}
.icono-circular-map {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.circulo-azul {
  background: #eff6ff;
  color: #3b82f6;
}
.circulo-celeste {
  background: #e0f2fe;
  color: #0ea5e9;
}
.info-mini-map {
  display: flex;
  flex-direction: column;
}
.etiqueta-mini-map {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.valor-mini-map {
  font-size: 16px;
  color: #1e3a8a;
  font-weight: 800;
}

.linea-divisoria-map {
  border: 0;
  height: 1px;
  background: #e2e8f0;
  margin: 0 0 20px 0;
}
.contenedor-horarios-map {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fila-horario-map {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}
.dia-horario-map {
  font-size: 14px;
  font-weight: 700;
  color: #4a5568;
}
.hora-pill-map {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 50px;
}

/* Alineación inferior con flex-grow */
.tarjeta-map-incluye {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.lista-check-verde-map {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-check-verde-map li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 12px;
  font-weight: 500;
}
.lista-check-verde-map li i {
  color: #16a34a;
  margin-top: 2px;
  font-size: 16px;
  flex-shrink: 0;
}

/* ---- INVERSIÓN ---- */
.tarjeta-inversion-map {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 30px 40px;
}
.inv-col-izq-map,
.inv-col-der-map {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inv-col-izq-map {
  align-items: center;
  text-align: center;
}
.etiqueta-inversion-map {
  font-size: 13px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 5px;
  letter-spacing: 1px;
}
.precio-destacado-map {
  font-size: 50px;
  font-weight: 900;
  color: #1e3a8a;
  line-height: 1;
}
.separador-vertical-map {
  width: 1px;
  background: #e2e8f0;
  height: 70px;
  margin: 0 40px;
}
.inv-col-der-map {
  align-items: center;
}
.texto-metodos-map {
  font-size: 14px;
  color: #4a5568;
  font-weight: 700;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
}
.contenedor-logos-pago-map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
}
.logo-pago-caja-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.logo-pago-caja-map i {
  font-size: 30px;
  color: #16a34a;
}
.logo-pago-caja-map img {
  height: 30px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}
.logo-pago-caja-map.solo-logo-map img {
  height: 38px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
  .grid-tres-columnas-map {
    grid-template-columns: 1fr;
  }
  .grid-maptel-columnas {
    grid-template-columns: 1fr;
  }
  .tarjeta-inversion-map {
    flex-direction: column;
    padding: 40px 20px;
  }
  .separador-vertical-map {
    width: 100%;
    height: 1px;
    margin: 30px 0;
  }
  .contenedor-logos-pago-map {
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media (max-width: 600px) {
  .seccion-maptel-layout {
    padding: 50px 15px;
  }
  .col-maptel-izq .tarjeta-maptel {
    padding: 25px;
  }
  .precio-destacado-map {
    font-size: 45px;
  }
  .fila-horario-map {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

/* ==========================================================================
   SECCIÓN: DETALLES MAPTEL II (Diseño Sticky Sidebar)
   ========================================================================== */

/* ---- ANIMACIONES ---- */
.hidden-anim-map2 {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.visible-anim-map2 {
  opacity: 1;
  transform: translateY(0);
}

/* ---- ESTRUCTURA BASE ---- */
.seccion-maptel2-layout {
  padding: 80px 20px;
  background-color: #f4f7f9;
}
.contenedor-maptel2 {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---- TARJETAS BASE LIQUID GLASS ---- */
.tarjeta-maptel2 {
  background: #ffffff;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-sizing: border-box;
  width: 100%;
}
.tarjeta-maptel2:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(30, 58, 138, 0.08);
}

.cabecera-tarjeta-map2 {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

/* Iconos Cuadrados */
.icono-cuadrado-map2 {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.azul-icono {
  background: #eff6ff;
  color: #2563eb;
}
.rosado-icono {
  background: #fce7f3;
  color: #db2777;
}
.verde-icono {
  background: #dcfce7;
  color: #16a34a;
}

.titulo-tarjeta-map2 {
  font-size: 20px;
  color: #1e3a8a;
  font-weight: 800;
  margin: 0;
}
.texto-descriptivo-map2 {
  font-size: 14.5px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* ---- GRID TRES COLUMNAS (Info Adicional) ---- */
.grid-tres-columnas-map2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
  margin-bottom: 30px;
}

/* Lista check azul */
.lista-check-azul-map2 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-check-azul-map2 li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 12px;
  line-height: 1.5;
  font-weight: 500;
}
.lista-check-azul-map2 li i {
  color: #3b82f6;
  margin-top: 3px;
  font-size: 14px;
  flex-shrink: 0;
}

/* Alertas especiales */
.alerta-norma-map2 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.alerta-norma-map2 i {
  color: #e11d48;
  font-size: 24px;
}
.alerta-norma-map2 span {
  font-size: 13.5px;
  color: #881337;
  line-height: 1.4;
}

.alerta-requisito-map2 {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.alerta-requisito-map2 i {
  color: #d97706;
  font-size: 24px;
}
.alerta-requisito-map2 span {
  font-size: 13.5px;
  color: #92400e;
  line-height: 1.4;
}

/* ---- GRID SECUNDARIO (Temario y Fichas) ---- */
.grid-maptel-columnas2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: start; /* CRÍTICO: Permite que las columnas tengan alturas independientes */
  width: 100%;
  margin-bottom: 30px;
}

/* ---- COLUMNA IZQUIERDA (Temario) ---- */
.col-maptel-izq2 {
  display: flex;
  flex-direction: column;
}
.tarjeta-map-temario2 {
  display: flex;
  flex-direction: column;
  padding: 45px;
}

.modulo-item-map2 {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e2e8f0;
}
.modulo-item-map2:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.titulo-modulo-map2 {
  color: #3b82f6;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.modulo-item-map2 p {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.5;
  margin: 0;
}

/* ---- COLUMNA DERECHA (EFECTO STICKY) ---- */
.col-maptel-der2 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: sticky; /* MAGIA VISUAL: Hace que la columna siga el scroll */
  top: 80px; /* Margen superior al hacer scroll */
}

.tarjeta-map-mini2 {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px 30px;
}
.icono-circular-map2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.circulo-azul {
  background: #eff6ff;
  color: #3b82f6;
}
.circulo-celeste {
  background: #e0f2fe;
  color: #0ea5e9;
}
.info-mini-map2 {
  display: flex;
  flex-direction: column;
}
.etiqueta-mini-map2 {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.valor-mini-map2 {
  font-size: 16px;
  color: #1e3a8a;
  font-weight: 800;
}

.linea-divisoria-map2 {
  border: 0;
  height: 1px;
  background: #e2e8f0;
  margin: 0 0 20px 0;
}
.contenedor-horarios-map2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fila-horario-map2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}
.dia-horario-map2 {
  font-size: 14px;
  font-weight: 700;
  color: #4a5568;
}
.hora-pill-map2 {
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 50px;
}

.lista-check-verde-map2 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lista-check-verde-map2 li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 12px;
  font-weight: 500;
}
.lista-check-verde-map2 li i {
  color: #16a34a;
  margin-top: 2px;
  font-size: 16px;
  flex-shrink: 0;
}

/* ---- NUEVA INVERSIÓN (SIN HUECOS) ---- */
.tarjeta-inversion-map2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 35px 25px;
  text-align: center;
}

.inv-col-izq-map2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px dashed #cbd5e1;
}

.etiqueta-inversion-map2 {
  font-size: 12px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 5px;
  letter-spacing: 1px;
}
.precio-destacado-map2 {
  font-size: 45px;
  font-weight: 900;
  color: #1e3a8a;
  line-height: 1;
}

.inv-col-der-map2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.texto-metodos-map2 {
  font-size: 13px;
  color: #4a5568;
  font-weight: 700;
  margin-bottom: 15px;
}
.contenedor-logos-pago-map2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}
.logo-pago-caja-map2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.logo-pago-caja-map2 i {
  font-size: 26px;
  color: #16a34a;
}
.logo-pago-caja-map2 img {
  height: 26px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
}
.logo-pago-caja-map2.solo-logo-map2 img {
  height: 32px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
  .grid-tres-columnas-map2 {
    grid-template-columns: 1fr;
  }
  .grid-maptel-columnas2 {
    grid-template-columns: 1fr;
  }
  .col-maptel-der2 {
    position: static;
  } /* Desactiva el Sticky en móviles */
}
@media (max-width: 600px) {
  .seccion-maptel2-layout {
    padding: 50px 15px;
  }
  .col-maptel-izq2 .tarjeta-maptel2 {
    padding: 25px;
  }
  .precio-destacado-map2 {
    font-size: 40px;
  }
  .fila-horario-map2 {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

/* ==========================================================================
   SECCIÓN: ARCHIVE.PHP
   ========================================================================== */

.seccion-archive-layout { padding: 60px 20px; background-color: #f4f7f9; }
.contenedor-archive { max-width: 1000px; margin: 0 auto; }
.titulo-archive { color: #1e3a8a; font-weight: 900; margin-bottom: 40px; text-align: center; }

.grid-posts-archive { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 30px; 
}

.tarjeta-post-archive { 
    padding: 20px; 
    background: white; 
    border-radius: 20px; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.03); 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.post-thumb img { width: 100%; border-radius: 12px; height: 180px; object-fit: cover; }
.btn-leer-mas { 
    display: inline-block; 
    margin-top: 15px; 
    padding: 10px 20px; 
    background: #3b82f6; 
    color: white; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: 700; 
}

/* ==========================================================================
   SECCIÓN: RESULTADOS DE BÚSQUEDA (Liquid Glass Style)
   ========================================================================== */

.seccion-search-layout { padding: 80px 20px; background-color: #f4f7f9; min-height: 80vh; }
.contenedor-search { max-width: 1000px; margin: 0 auto; }

.cabecera-search { text-align: center; margin-bottom: 50px; }
.titulo-search { font-size: 32px; color: #1e3a8a; font-weight: 900; }

.grid-resultados-search { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 30px; 
}

/* Tarjeta estandarizada */
.tarjeta-resultado-search { 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px;
    transition: transform 0.3s ease;
}

.tarjeta-resultado-search:hover { transform: translateY(-5px); }

.thumb-resultado img { width: 100%; border-radius: 12px; height: 180px; object-fit: cover; }
.titulo-resultado { font-size: 18px; color: #1e3a8a; font-weight: 800; margin: 0; }
.excerpt-resultado { font-size: 14px; color: #4a5568; line-height: 1.5; margin: 0; }

.btn-detalle-search { 
    margin-top: auto;
    align-self: flex-start;
    padding: 8px 20px; 
    background: #3b82f6; 
    color: white; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: 700;
    font-size: 13px;
    transition: background 0.3s ease;
}

.btn-detalle-search:hover { background: #1d4ed8; }

.mensaje-vacio-search { text-align: center; padding: 50px; }