@import url('https://fonts.googleapis.com/css?family=Muli:300,700|Nunito');

 body {
    background: #0b0c10; /* Negro profundo tech */
    color: #c5c6c7;      /* Gris claro para lectura cómoda */
    font-family: 'Nunito', sans-serif;
    overflow-x: hidden;
    padding-top: 70px;
  }


  /*---------------------------------------
     TYPOGRAPHY              
  -----------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Muli', sans-serif;
    font-weight: bold;
    color: #ffffff !important; /* Forzamos blanco */
    line-height: inherit;
  }
  
  h1 {
    font-size: 3em;
    line-height: normal;
  }
  
  h2 {
    font-size: 2em;
    padding-bottom: 10px;
  }
  
  h3, h3 a {
    color: #66fcf1; /* Un verde cian neón para subtítulos o enlaces */
  }

  p {
    color: #c5c6c7; /* Texto de párrafo claro */
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
  }}



  /*---------------------------------------
     GENERAL               
  -----------------------------------------*/

  html{
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: #252525;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    text-decoration: none !important;
  }

  a,
  input, button,
  .form-control {
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  a:hover, a:active, a:focus {
    color: #02c361;
    outline: none;
  }

  ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: #000000;
  }

  .section-title {
    padding-bottom: 40px;
  }

  .section-title h2 {
    margin: 0;
  }

  .section-title small {
    display: block;
  }

  .overlay {
    background: #ffffff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .entry-form {
    background: #0b0c10;
    border-radius: 100%;
    text-align: center;
    padding: 6em;
    width: 450px;
    height: 450px;
  }

  .entry-form h2 {
    color: #ffffff;
    margin: 0;
  }

  .entry-form .form-control {
    background: transparent;
    border: 0;
    border-bottom: 1px solid;
    border-radius: 0;
    box-shadow: none;
    height: 45px;
    margin: 10px 0;
  }

  .entry-form .submit-btn {
    background: #02c361;
    border-radius: 50px;
    border: 0;
    color: #0b0c10;
    width: 50%;
    height: 50px;
    margin: 30px auto;
    margin-bottom: 10px;
  }

  .entry-form .submit-btn:hover {
    background: #ffffff;
    color: #02c361;
  }

  section {
    position: relative;
    padding: 100px 0;
  }

  #google-map iframe {
    border: 0;
    width: 100%;
    height: 390px;
  }



  /*---------------------------------------
     BUTTONS               
  -----------------------------------------*/

  .section-btn {
    background: transparent;
    border-radius: 50px;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: inherit;
    font-weight: normal;
    padding: 15px 30px;
    transition: 0.5s;
  }

  .section-btn:hover {
    background: #ffffff;
    border-color: transparent;
  }



  /*---------------------------------------
       PRE LOADER              
  -----------------------------------------*/

  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background: none repeat scroll 0 0 #ffffff;
  }

  .spinner {
    border: 1px solid transparent;
    border-radius: 3px;
    position: relative;
  }

  .spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 1px solid #575757;
    border-top-color: #ffffff;
    animation: spinner .9s linear infinite;
  }

  @-webkit-@keyframes spinner {
    to {transform: rotate(360deg);}
  }

  @keyframes spinner {
    to {transform: rotate(360deg);}
  }



  /*---------------------------------------
      MENU              
  -----------------------------------------*/

.custom-navbar {
    background: #0b0c10; /* Mismo negro del fondo */
    border-top: 5px solid #02c361; /* Línea verde azulada arriba */
    border-bottom: 1px solid #0b0c10; /* Borde sutil abajo */
    -webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
    padding: 12px 0;
    margin-bottom: 0;
    padding: 0;
  }

  .custom-navbar .navbar-brand {
    color: #ffffff; /* Logo en blanco */
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
  }

  .custom-navbar .nav li a {
    line-height: 40px;
    color: #ffffff; /* Enlaces en blanco */
    padding-right: 22px;
    padding-left: 22px;
  }

  .custom-navbar .nav li a:hover {
    background-color: #02c361; /* Verde al pasar el mouse */
    color: #ffffff;
  }

  .custom-navbar .navbar-toggle .icon-bar {
    background: #ffffff; /* Las 3 rayitas del menú móvil en blanco */
    border-color: transparent;
  }



  /*---------------------------------------
      HOME  & SLIDER            
  -----------------------------------------*/

  #home {
    padding: 0;
  }

  #home h1 {
    color: #ffffff;
  }

  #home h3 {
    color: #f9f9f9;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
    padding: 5px 0 40px 0;
  }

  @media (min-width: 768px) {
    .home-slider .col-md-6 {
      padding-left: 0;
    }
  }

  .home-slider .caption {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    background-color: rgba(20,20,20,0.2);
    height: 100%;
    color: #fff;
    cursor: e-resize;
  }

  .home-slider .item {
    background-repeat: no-repeat;
    background-attachment: local;
    background-size: cover;
    height: 650px;
  }
  
  .caption h3 a { color: #FFF; }
  .caption h3 a:hover { color: #FF3; }

  .home-slider .item-first {
    background-image: url(../images/slider-image1.jpg);
	background-position: center;
  }

  .home-slider .item-second {
    background-image: url(../images/slider-image2.jpg);
  }

  .home-slider .item-third {
    background-image: url(../images/slider-image3.jpg);
  }



  /*---------------------------------------
      FEATURE              
  -----------------------------------------*/

  .feature-thumb {
    border: 1px solid #02c361;
    padding: 5em 3em;
  }

  .feature-thumb span {
    background: #02c361;
    border-radius: 50px;
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin-bottom: 5px;
  }

  .feature-thumb h3 {
    margin: 10px 0;
  }



  /*---------------------------------------
      ABOUT              
  -----------------------------------------*/

  #about figure {
    display: inline-block;
    vertical-align: top;
    margin-left: 15px;
  }

  #about figure span {
    float: left;
    margin-left: -15px;
    padding: 15px 20px;
    position: relative;
    top: 20px;
  }

  #about figure span i {
    background: #02c361;
    border-radius: 50px;
    color: #ffffff;
    font-size: 25px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }



  /*---------------------------------------
      COURSES (ESTILO GREEN BOX)
  -----------------------------------------*/

  #courses .section-title {
    text-align: center;
    /* El título general de la sección sigue blanco */
  }

  /* 1. FLECHAS DE NAVEGACIÓN (Blanco sobre Verde) */
  #courses .owl-theme .owl-nav {
    margin-top: 30px;
  }

  #courses .owl-theme .owl-nav [class*=owl-] {
    background: #ffffff;    /* Fondo blanco */
    color: #000000;         /* Flecha negra */
    border-radius: 2px;
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
  }

  #courses .owl-theme .owl-nav [class*=owl-]:hover {
    background: #02c361;    /* Verde al pasar el mouse */
    color: #ffffff;
  }

  /* 2. LA CAJA VERDE (El cuerpo del curso) */
  .courses-thumb {
    /* Pega aquí tu código de verde exacto. 
       He puesto un verde medio para que el texto blanco se lea bien. 
       Si usas verde neón (#00FF00), cambia las letras a NEGRO. */
    background: #02c361;  
    
    border: 2px solid #ffffff; /* Borde blanco grueso "Detalles blancos" */
    position: relative;
    overflow: hidden; /* Para que nada se salga de la caja */
  }

  .courses-top {
    position: relative;
  }

  .courses-image {
    background: linear-gradient(to right, #202020, #101010);
  }

  .courses-image img {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho */
    border-bottom: 2px solid #ffffff; /* Línea blanca debajo de la foto */
  }

  /* Fecha y Hora sobre la foto */
  .courses-date {
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente para leer bien */
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 10px 25px;
  }

  .courses-date span {
    color: #ffffff;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
  }

  /* 3. TEXTOS Y DETALLES (Todo en blanco) */
  .courses-detail {
    padding: 25px 25px 15px 25px;
  }

  .courses-detail h3 {
    margin: 0 0 10px 0; 
  }

  .courses-detail h3 a {
    color: #ffffff !important; /* Título blanco */
    font-weight: 800;          /* Letra gruesa */
    text-decoration: none;
  }

  .courses-detail p {
    color: #ffffff;            /* Descripción blanca */
    opacity: 0.9;              /* Un poco más suave */
  }

  /* Línea divisoria interna */
  .courses-info {
    border-top: 2px solid #ffffff; /* Línea blanca */
    position: relative;
    clear: both;
    padding: 15px 25px;
  }

  .courses-author,
  .courses-author span {
    display: inline-block;
    vertical-align: middle;
    color: #ffffff;            /* Nombre del autor blanco */
    font-weight: bold;
  }

  .courses-author img {
    display: inline-block !important;
    border-radius: 50px;
    border: 2px solid #ffffff; /* Borde blanco en la foto del autor */
    width: 50px !important;
    height: 50px;
    margin-right: 10px;
  }

  /* 4. PRECIO (Botón Blanco con texto Verde) */
  .courses-price {
    float: right;
    margin-top: 10px;
  }

  .courses-price span {
    background: #ffffff;       /* Fondo blanco */
    color: #02c361;            /* Texto verde (el mismo del fondo) */
    border-radius: 2px;
    display: block;
    padding: 5px 15px;
    font-weight: bold;
  }

  .courses-price.free span {
    background: #000000;       /* Si es gratis, fondo negro */
    color: #ffffff;
  }


  /*---------------------------------------
     NEWS              
  -----------------------------------------*/

  .news-thumb {
    clear: both;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
  }

  .news-thumb .news-image {
    float: left;
    width: 40%;
    margin-right: 30px;
  }

  .news-info h3 {
    margin-top: 5px;
    margin-bottom: 10px;
  }

  .news-date span {
    color: #02c361;
    font-weight: bold;
  }


  /*---------------------------------------
      CONTACT             
  -----------------------------------------*/

  #contact {
    background: #0b0c10;
  }

  #contact h2 {
    color: #ffffff;
  }

  #contact .section-title {
    padding-bottom: 20px;
  }

  #contact h2 > small,
  #contact p,
  #contact a {
    color: #f9f9f9;
  }

  #contact-form {
    padding: 1em 0;
  }

  #contact-form .col-md-12,
  #contact-form .col-md-4 {
    padding-left: 0;
  }

  #contact-form .form-control {
    border: 0;
    border-radius: 5px;
    box-shadow: none;
    margin: 10px 0;
  }

  #contact-form input {
    height: 50px;
  }

  #contact-form input[type='submit'] {
    border-radius: 50px;
    border: 1px solid transparent;
  }

  #contact-form input[type='submit']:hover {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
  }
  



/*---------------------------------------
      FOOTER (Estilo High Contrast: Verde + Negro)
  -----------------------------------------*/

  #footer {
    background: #02c361; /* Tu verde brillante de fondo */
    border-top: 5px solid #000000; /* Línea separadora negra gruesa */
    padding-top: 80px;
    padding-bottom: 40px;
    color: #000000; /* Fuerza el color negro base para todo */
  }

  /* 1. TÍTULOS (Headquarter, Contact Info, etc.) */
  #footer h2 {
    color: #000000 !important; /* Negro obligado */
    font-weight: 800;          /* Letra extra gruesa */
    padding-bottom: 20px;
  }

  /* 2. TEXTOS DE PÁRRAFO Y DIRECCIONES */
  #footer p, 
  #footer address p,
  #footer span {
    color: #000000;
    font-weight: bold; /* Negrita para que se lea mejor sobre el color */
  }

  /* 3. ENLACES (Emails, Menú rápido) */
  #footer a,
  #footer address p a,
  #footer .footer_menu ul li a {
     color: #000000;
     text-decoration: none;
  }
  
  #footer a:hover {
      text-decoration: underline; /* Subrayar al pasar el mouse */
  }

  /* 4. ICONOS SOCIALES (Círculos) */
  #footer .social-icon li a {
    color: #000000;            /* El icono (la F, el pajarito) en negro */
    border: 2px solid #000000; /* El borde del círculo en negro */
    background: transparent;
  }
  
  #footer .social-icon li a:hover {
    background: #000000;       /* Al tocarlo, fondo negro */
    color: #02c361;            /* Y el icono se vuelve verde */
    border-color: #000000;
  }
  
  /* 5. TEXTO PEQUEÑO DE COPYRIGHT */
  .copyright-text p {
    color: #000000;
    opacity: 0.8; /* Un poquito menos intenso, pero negro */
    font-size: 13px;
  }

  /* 6. FORMULARIO NEWSLETTER (Opcional para que combine) */
  #footer input.form-control {
      border: 2px solid #000000; /* Borde negro en la cajita de email */
      color: #000000;
  }
  
  #footer #form-submit {
      background: #000000;      /* Botón "Send Me" en NEGRO */
      color: #02c361;           /* Letras del botón en VERDE */
      font-weight: bold;
      border: none;
  }
  
  #footer #form-submit:hover {
      background: #ffffff;      /* Efecto al pasar el mouse por el botón */
      color: #000000;
  }

/* =======================================================
   REEMPLAZO FINAL: POSICIÓN IZQUIERDA + ALTO CONTRASTE
   ======================================================= */

/* 1. POSICIÓN DEL CONTENIDO (Izquierda y Arriba) */
.home-slider .caption {
    position: absolute !important;
    top: 12% !important;   /* Lo sube cerca del menú */
    left: 5% !important;   /* Lo pega al margen izquierdo */
    width: 450px !important; /* Ancho compacto para que no cruce toda la foto */
    
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    
    background: transparent !important;
    z-index: 100;
}

/* 2. CONTRASTE REAL (Sin brillos verdes, solo negro sólido) */
#home .caption h1,
#home .caption h3,
#home .caption p {
    color: #ffffff !important;
    text-align: left !important;
    /* La sombra negra "pared" separa la letra blanca del fondo verde brillante */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         4px  4px 6px #000,
         0px  0px 20px #000 !important;
}

/* Ajuste para el párrafo (Nuestro ecosistema...) */
#home .caption p {
    font-weight: 700 !important; /* Letra gruesa para que no se la coma el fondo */
    font-size: 16px !important;
    margin-top: 15px;
}

/* 3. BOTÓN (Limpio y visible) */
#home .caption .section-btn {
    margin: 30px 0 0 0 !important;
    box-shadow: 0px 0px 15px #000 !important;
    border: 2px solid #02c361 !important;
    background: rgba(0,0,0,0.4) !important; /* Fondo oscuro sutil para el botón */
}

/* 4. PARCHE DE CURSOS (Para que no se rompa el carrusel) */
#courses .owl-carousel .col-md-4 {
    width: 100% !important;
    padding-left: 5px;
    padding-right: 5px;
}

/* 5. BOTONES FLOTANTES (WhatsApp y Telegram) */
.whatsapp-float, .telegram-float {
    position: fixed; right: 40px; border-radius: 50px; 
    text-align: center; color: #FFF; z-index: 1000;
    display: flex; justify-content: center; align-items: center;
    width: 60px; height: 60px; font-size: 30px;
}
.whatsapp-float { bottom: 40px; background-color: #25d366; }
.telegram-float { bottom: 115px; background-color: #0088cc; }

/* =======================================================
   ESTILO DE FEATURES (ICONOS TECH)
   ======================================================= */

/* Contenedor de cada bloque para alinearlos bien */
.feature-block {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

/* EL ICONO: Aquí está la magia del diseño */
.feature-icon {
    flex-shrink: 0; /* Que no se aplaste */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Centra el icono verticalmente */
    text-align: center;
    
    /* ESTÉTICA NEÓN */
    background: transparent; /* Fondo transparente */
    border: 2px solid #02c361; /* Borde verde neón */
    border-radius: 50%; /* Círculo perfecto */
    color: #02c361; /* Icono verde */
    font-size: 28px;
    
    /* BRILLO */
    box-shadow: 0 0 10px rgba(2, 195, 97, 0.3);
    margin-right: 20px;
    transition: all 0.4s ease;
}

/* Efecto al pasar el mouse por encima del bloque */
.feature-block:hover .feature-icon {
    background: #02c361; /* Se llena de verde */
    color: #000;         /* El icono se vuelve negro */
    box-shadow: 0 0 20px #02c361; /* Brilla más fuerte */
    transform: rotate(360deg); /* Pequeño giro tech */
}

/* TÍTULOS DE LAS FEATURES */
.feature-content h3 {
    color: #ffffff;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* TEXTOS DE LAS FEATURES */
.feature-content p {
    color: #c5c6c7; /* Gris claro tecnológico */
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

/* =======================================================
   ESTILO WIDGET CHAT (TARJETA TIPO WHATSAPP)
   ======================================================= */

.whatsapp-card {
    background: #1e1e1e; /* Fondo oscuro tarjeta */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra 3D */
    overflow: hidden;
    border: 1px solid #333;
    margin-top: 20px; /* Separación si hace falta */
}

/* CABECERA VERDE */
.wa-header {
    background: #075e54; /* Verde oscuro oficial WhatsApp */
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #064e46;
}

.wa-profile-pic {
    font-size: 40px;
    color: #fff;
    margin-right: 15px;
}

.wa-user-info h4 {
    color: #fff !important;
    font-size: 16px;
    margin: 0; 
    font-weight: bold;
}

.wa-user-info p {
    color: #e0e0e0;
    font-size: 12px;
    margin: 0;
}

/* PUNTO VERDE "EN LÍNEA" */
.dot {
    height: 8px; width: 8px;
    background-color: #25d366;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
    box-shadow: 0 0 5px #25d366;
}

/* CUERPO MENSAJES */
.wa-body {
    padding: 20px;
    background: #0d0d0d; /* Fondo negro profundo */
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Mensajes abajo */
}

/* BURBUJAS DE TEXTO */
.wa-message {
    padding: 10px 15px;
    border-radius: 0 15px 15px 15px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    background: #202c33; /* Gris chat */
    border-left: 3px solid #02c361; /* Detalle neón */
    position: relative;
}

/* BOTÓN FINAL */
.wa-footer {
    padding: 15px;
    background: #1e1e1e;
    text-align: center;
}

.wa-btn-start {
    display: block;
    background: #25d366; /* Verde Botón */
    color: #fff !important;
    padding: 12px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

.wa-btn-start:hover {
    background: #128c7e; /* Verde más oscuro al pasar mouse */
    transform: scale(1.02);
}

/* =======================================================
   REDISEÑO SECCIÓN FEATURES (TARJETAS DE PODER)
   ======================================================= */

.feature-thumb {
    /* Fondo oscuro semitransparente (Glass Effect) */
    background: rgba(20, 20, 20, 0.6);
    padding: 40px 30px;
    border-radius: 10px;
    
    /* Borde sutil gris para definir la tarjeta */
    border: 1px solid #333;
    
    /* Posición para efectos */
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    height: 100%; /* Para que todas tengan la misma altura visual */
}

/* EL ICONO (Círculo brillante) */
.feature-icon-box {
    width: 70px;
    height: 70px;
    margin-bottom: 25px;
    background: #000; /* Fondo negro profundo */
    border: 2px solid #02c361; /* Borde neón */
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 28px;
    color: #02c361;
    box-shadow: 0 0 15px rgba(2, 195, 97, 0.2); /* Resplandor suave inicial */
    transition: all 0.4s ease;
}

/* TEXTOS */
.feature-thumb h3 {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.feature-thumb p {
    color: #aaa; /* Gris plata para lectura cómoda */
    font-size: 15px;
    line-height: 1.6;
}

/* --- EFECTO HOVER (AL PASAR EL MOUSE) --- */

/* 1. La tarjeta se ilumina */
.feature-thumb:hover {
    background: #000; /* Se oscurece el fondo para contraste */
    border-color: #02c361; /* El borde se vuelve verde */
    transform: translateY(-5px); /* Flota un poco hacia arriba */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); /* Sombra profunda */
}

/* 2. El icono se llena de energía */
.feature-thumb:hover .feature-icon-box {
    background: #02c361; /* Fondo verde */
    color: #000;         /* Icono negro */
    box-shadow: 0 0 30px #02c361; /* Explosión de luz */
    transform: scale(1.1); /* Crece un poco */
}

/* =======================================================
   POSICIÓN FINAL: BIEN ARRIBA Y ALINEADO A LA IZQUIERDA
   ======================================================= */

.home-slider .caption {
    position: absolute !important;
    
    /* ESTO ES LO QUE LO SUBE: */
    top: 85px !important;   /* Lo pone justo debajo de la barra de menú */
    
    left: 5% !important;    /* Lo pega al borde izquierdo */
    width: 500px !important; /* Ancho máximo para que no se estire */
    
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    background: transparent !important;
    z-index: 100;
}

/* TÍTULO GIGANTE Y LEGIBLE */
#home .caption h1 {
    font-size: 3.5em !important; /* Letra muy grande */
    line-height: 1 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase;
    font-weight: 800;
    color: #ffffff !important;
    
    /* Sombra negra sólida para que se lea sobre cualquier fondo */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         4px  4px 0 #000 !important;
}

/* SUBTÍTULO Y PÁRRAFO */
#home .caption h3, 
#home .caption p {
    color: #ffffff !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    
    /* Sombra negra para lectura */
    text-shadow: 
        -1px -1px 0 #000, 1px -1px 0 #000,
        -1px 1px 0 #000, 1px 1px 0 #000,
        3px 3px 0 #000 !important;
}

/* BOTÓN */
#home .caption .section-btn {
    margin: 20px 0 0 0 !important;
    box-shadow: 0px 0px 10px #000 !important; /* Sombra negra al botón */
    background: rgba(0,0,0,0.6) !important; /* Fondo oscuro dentro del botón */
    border: 2px solid #02c361 !important;
}

/* =======================================================
   REDISEÑO SECCIÓN CURSOS (DARK TECH)
   ======================================================= */

/* 1. LA TARJETA (Caja contenedora) */
.courses-thumb {
    background: #0f0f0f !important; /* Fondo casi negro */
    border: 1px solid #333;          /* Borde sutil gris */
    border-radius: 10px;             /* Bordes redondeados */
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
    margin-bottom: 30px;
    
    /* Borde inferior verde neón grueso para dar estilo */
    border-bottom: 4px solid #02c361; 
}

/* Efecto al pasar el mouse por la tarjeta */
.courses-thumb:hover {
    transform: translateY(-5px); /* Sube un poquito */
    box-shadow: 0 10px 30px rgba(2, 195, 97, 0.15); /* Resplandor verde suave */
    border-color: #02c361; /* Todo el borde se pone verde */
}

/* 2. IMAGEN */
.courses-image img {
    width: 100%;
    transition: all 0.5s ease;
    opacity: 0.8; /* Un poco oscura por defecto */
}

.courses-thumb:hover .courses-image img {
    opacity: 1; /* Brilla al 100% al pasar el mouse */
    transform: scale(1.05); /* Zoom sutil */
}

/* 3. TÍTULOS Y TEXTOS */
.courses-detail {
    padding: 25px;
    padding-bottom: 10px;
}

.courses-detail h3 a {
    color: #ffffff !important;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s;
}

.courses-detail h3 a:hover {
    color: #02c361 !important; /* Título se pone verde al tocarlo */
}

.course-desc {
    color: #a0a0a0 !important; /* Gris claro para leer bien */
    font-size: 15px;
    line-height: 1.6;
    margin-top: 10px;
}

/* 4. BOTÓN PERSONALIZADO DEL CURSO */
.courses-info {
    padding: 20px 25px;
    border-top: 1px solid #222; /* Línea separadora muy sutil */
    background: #151515;
}

.course-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    background: transparent;
    border: 2px solid #02c361;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.course-btn:hover {
    background: #02c361;
    color: #000;
    box-shadow: 0 0 15px #02c361; /* Brillo neón */
    text-decoration: none;
}

/* =======================================================
   NUEVA SECCIÓN CONTACTO (CENTRO DE CONEXIÓN)
   ======================================================= */

#contact {
    background: #0b0c10; /* Fondo negro sólido para toda la sección */
    padding: 80px 0;
    border-top: 1px solid #333; /* Una línea sutil arriba para separar */
}

/* ESTILO BASE DE LAS TARJETAS */
.contact-card {
    background: #151515;     /* Fondo de la tarjeta */
    padding: 50px 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #333;   /* Borde gris sutil */
    transition: all 0.4s ease;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

/* TÍTULOS Y TEXTO */
.contact-card h3 {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    text-transform: uppercase;
}

.contact-card p {
    color: #a0a0a0; /* Gris claro */
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* ICONO GIGANTE */
.hub-icon {
    font-size: 60px;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

/* BOTÓN DE ACCIÓN (Base) */
.hub-btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    letter-spacing: 1px;
}

/* --- ESTILO ESPECÍFICO WHATSAPP (VERDE) --- */
.whatsapp-hub {
    border-bottom: 5px solid #25d366; /* Línea verde abajo */
}
.whatsapp-hub .hub-icon { color: #25d366; } /* Icono verde */
.whatsapp-hub .btn-wa {
    background: transparent;
    border: 2px solid #25d366;
    color: #fff;
}
/* Efecto Hover WhatsApp */
.whatsapp-hub:hover {
    box-shadow: 0 0 30px rgba(37, 211, 102, 0.2);
    transform: translateY(-5px);
}
.whatsapp-hub:hover .btn-wa {
    background: #25d366;
    color: #000;
}

/* --- ESTILO ESPECÍFICO EMPRESAS (VIOLETA TECH) --- */
.business-hub {
    border-bottom: 5px solid #9d4edd; /* Línea violeta abajo */
}
.business-hub .hub-icon { color: #9d4edd; } /* Icono violeta */
.business-hub .btn-biz {
    background: transparent;
    border: 2px solid #9d4edd;
    color: #fff;
}
/* Efecto Hover Empresas */
.business-hub:hover {
    box-shadow: 0 0 30px rgba(157, 78, 221, 0.25);
    transform: translateY(-5px);
}
.business-hub:hover .btn-biz {
    background: #9d4edd;
    color: #fff;
}

/* =======================================================
   FOOTER DARK TECH (REDISEÑO FINAL)
   ======================================================= */

#footer {
    background: #050505 !important; /* Negro puro, adios verde */
    padding: 60px 0;
    border-top: 1px solid #222; /* Línea sutil arriba para separar */
    color: #fff;
}

#footer h2 {
    color: #ffffff !important;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid #02c361; /* Subrayado neón minimalista */
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

#footer p, #footer address p {
    color: #a0a0a0 !important; /* Texto gris plata legible */
    font-size: 14px;
}

#footer a {
    color: #ccc;
    transition: 0.3s;
}

#footer a:hover {
    color: #02c361; /* Al pasar el mouse se pone verde neón */
    text-decoration: none;
}

/* --- ESTILO INSTAGRAM --- */
.social-icon {
    padding: 0;
    margin: 20px 0;
}

.social-icon li {
    display: inline-block;
    list-style: none;
}

.social-icon li a {
    font-size: 24px;
    color: #fff;
    background: #151515; /* Botón oscuro */
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%; /* Círculo perfecto */
    border: 1px solid #333;
    transition: all 0.4s ease;
}

/* Efecto al pasar el mouse por Instagram */
.social-icon li a:hover {
    /* Gradiente oficial de Instagram */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-color: transparent;
    transform: scale(1.1); /* Crece un poco */
    box-shadow: 0 0 15px rgba(214, 36, 159, 0.4); /* Brillo rosa */
}

/* --- FORMULARIO NEWSLETTER --- */
.newsletter-form .form-control {
    background: #111 !important; /* Input oscuro */
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 30px;
    margin-bottom: 10px;
}

.newsletter-form .form-control:focus {
    border-color: #02c361 !important; /* Borde verde al escribir */
    box-shadow: 0 0 10px rgba(2, 195, 97, 0.2);
}

#form-submit {
    background: #02c361 !important; /* Botón verde */
    color: #000 !important;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
    cursor: pointer;
    transition: 0.3s;
}

#form-submit:hover {
    background: #fff !important; /* Se pone blanco al tocarlo */
    box-shadow: 0 0 15px #fff;
}

.newsletter-form span {
    font-size: 12px;
    color: #666;
}

/* =======================================================
   FIX URGENTE: TEXTOS FOOTER VISIBLES
   ======================================================= */

/* 1. Forzar color blanco a TODOS los títulos del footer */
#footer h2, 
#footer h3, 
#footer .section-title h2 {
    color: #ffffff !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Sombra para resaltar */
}

/* 2. Forzar gris claro a TODOS los párrafos y direcciones */
#footer p, 
#footer span, 
#footer address, 
#footer li, 
#footer a {
    color: #cfcfcf !important; /* Gris muy claro, casi blanco */
}

/* 3. Excepción para el hover de los enlaces (Verde al pasar mouse) */
#footer a:hover {
    color: #02c361 !important;
}

/* 4. Arreglar el input del formulario (que no escriba negro sobre negro) */
.newsletter-form .form-control {
    background-color: #222 !important; /* Fondo gris oscuro */
    color: #ffffff !important;         /* Letra blanca al escribir */
    border: 1px solid #444 !important;
}

/* Placeholder (el texto de "Tu mejor email...") */
.newsletter-form .form-control::placeholder {
    color: #888 !important;
}

/* =======================================================
   CORRECCIÓN PARA CELULARES (RESPONSIVE)
   ======================================================= */

@media only screen and (max-width: 767px) {
    
    /* 1. ARREGLAR EL ANCHO: Cambiamos el fijo de 450px por un porcentaje */
    .home-slider .caption {
        width: 90% !important; /* Ocupa el 90% de la pantalla del celular */
        left: 5% !important;   /* Centrado con márgenes seguros */
        top: 20% !important;   /* Un poco más abajo para no chocar con el menú */
    }

    /* 2. ACHICAR EL TÍTULO GIGANTE */
    #home .caption h1 {
        font-size: 28px !important;     /* Tamaño mucho más chico y legible */
        line-height: 1.2 !important;    /* Renglones más pegados */
        letter-spacing: 0px !important; /* Quitamos espacio extra entre letras */
        margin-bottom: 10px !important;
    }

    /* 3. AJUSTAR EL SUBTÍTULO */
    #home .caption h3,
    #home .caption p {
        font-size: 14px !important; /* Letra de lectura cómoda */
        line-height: 1.5 !important;
        display: block !important;  /* Aseguramos que se muestre */
    }
    
    /* 4. BOTÓN MÁS CHICO */
    #home .caption .section-btn {
        margin-top: 15px !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* =======================================================
   ESTILO PÁGINA INTERNA DE CURSOS (UNIDADES Y FICHA)
   ======================================================= */

/* 1. SECCIÓN DE UNIDADES (Tarjeta del lado izquierdo) */
.tech-card {
    background: #1f2833; /* Gris tech profundo */
    padding: 40px;
    border-radius: 10px;
    border-left: 5px solid #02c361; /* Detalle verde neón lateral */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 30px;
}

/* Título de la unidad */
.unit-box {
    display: flex;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Separador sutil */
}

.unit-num {
    font-size: 32px;
    font-weight: 800;
    color: #02c361; /* Verde brillante */
    margin-right: 25px;
    min-width: 45px;
}

.unit-text h4 {
    color: #fff !important;
    font-size: 19px;
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.unit-text p {
    color: #c5c6c7;
    font-size: 15px;
    line-height: 1.6;
}

/* 2. FICHA TÉCNICA (Tarjeta del lado derecho) */
.sidebar-tech-card {
    background: #000; /* Negro puro para resaltar */
    padding: 35px;
    border: 2px solid #02c361; /* Borde neón */
    border-radius: 15px;
    position: sticky; /* Se queda quieta al scrolear en PC */
    top: 100px;
}

.tech-info-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.tech-info-list li {
    color: #fff;
    margin-bottom: 18px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.tech-info-list i {
    color: #02c361;
    margin-right: 15px;
    font-size: 20px;
    width: 25px;
}

.tech-info-list span {
    font-weight: 800;
    color: #66fcf1; /* Color cian para los nombres de los datos */
    margin-right: 10px;
}

/* 3. BOTÓN DE WHATSAPP DEL CURSO */
.wa-btn-course {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #25d366;
    color: #fff !important;
    padding: 18px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s;
    text-transform: uppercase;
}

.wa-btn-course:hover {
    background: #128c7e;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

/* Ajuste para que el Header del curso no se vea plano */
#course-header-page {
    border-bottom: 3px solid #02c361;
}

/* RESPONSIVE: Ajuste para celulares */
@media only screen and (max-width: 767px) {
    .unit-box {
        flex-direction: column; /* El número arriba y el texto abajo */
    }
    .unit-num {
        margin-bottom: 10px;
    }
    .course-title-main {
        font-size: 2.8em !important; /* Achicamos título en móvil */
    }
    .sidebar-tech-card {
        margin-top: 40px;
        position: relative; /* En móvil no flota */
        top: 0;
    }
}

/* =======================================================
   ESTILO PARA CARRERAS LARGAS (POR CUATRIMESTRE)
   ======================================================= */

.cuatri-card {
    background: #1f2833;
    border-radius: 10px;
    margin-bottom: 25px;
    padding: 30px;
    border: 1px solid #333;
    transition: 0.3s;
}

.cuatri-card.highlight {
    border-left: 4px solid #66fcf1; /* Color cian para destacar el paso a IA */
}

.cuatri-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.cuatri-label {
    background: #02c361;
    color: #000;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
}

.cuatri-header h3 {
    margin: 0;
    font-size: 20px;
    color: #fff !important;
    flex-grow: 1;
    padding-left: 15px;
}

.cuatri-body ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.cuatri-body ul li {
    color: #c5c6c7;
    margin-bottom: 8px;
    font-size: 15px;
}

.cuatri-body ul li strong {
    color: #02c361;
}

/* Botón PDF pequeño para cada cuatrimestre */
.btn-download-mini {
    background: transparent;
    border: 1px solid #66fcf1;
    color: #66fcf1 !important;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

.btn-download-mini:hover {
    background: #66fcf1;
    color: #000 !important;
}
/* =======================================================
   REDISEÑO RESPONSIVE PARA PÁGINAS DE CURSOS Y CARRERAS
   ======================================================= */

@media only screen and (max-width: 767px) {
    
    /* 1. AJUSTE DE HEADERS (Títulos de página) */
    #course-header-page {
        padding: 80px 0 40px 0 !important;
        text-align: center;
    }

    #course-header-page h1 {
        font-size: 2.5em !important; /* Título más acorde al móvil */
        line-height: 1.1;
    }

    #course-header-page .course-subtitle {
        font-size: 1.1em !important;
        margin-top: 10px;
    }

    /* 2. AJUSTE DE TARJETAS (Unidades y Cuatrimestres) */
    .tech-card, .cuatri-card {
        padding: 20px !important;
        margin-bottom: 20px;
    }

    .unit-box, .cuatri-header {
        flex-direction: column !important; /* Apilamos contenido */
        align-items: flex-start !important;
    }

    .unit-num {
        margin-bottom: 10px;
        font-size: 24px;
    }

    .cuatri-header h3 {
        padding-left: 0 !important;
        margin: 10px 0 !important;
        font-size: 18px;
    }

    .btn-download-mini {
        width: 100%; /* Botón de PDF ocupa todo el ancho en móvil */
        text-align: center;
        margin-top: 10px;
    }

    /* 3. FICHA TÉCNICA (Sidebar) */
    .sidebar-tech-card {
        margin-top: 30px;
        position: relative !important; /* Deja de flotar */
        top: 0 !important;
        padding: 20px !important;
    }

    .tech-info-list li {
        font-size: 14px;
    }

    /* 4. BOTONES Y ESPACIADOS GENERALES */
    .section-btn {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }

    /* Aseguramos que el contenedor de los botones flotantes no moleste */
    .whatsapp-float, .telegram-float {
        width: 50px;
        height: 50px;
        right: 15px;
    }
}

/* =======================================================
   ALINEACIÓN DE TARJETAS DE CURSOS (INDEX)
   ======================================================= */

/* Forzamos que el contenedor de la imagen tenga una altura fija */
.courses-image {
    width: 100%;
    height: 250px; /* Ajusta esta altura a tu gusto */
    overflow: hidden;
    background-color: #000; /* Fondo negro por si la imagen tarda en cargar */
}

/* Forzamos que la imagen ocupe todo el contenedor sin deformarse */
.courses-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Recorta los bordes sobrantes para rellenar el espacio */
    object-position: center; /* Centra la parte importante de la imagen */
    transition: transform 0.5s ease;
}

/* Efecto opcional: zoom suave al pasar el mouse */
.courses-thumb:hover .courses-image img {
    transform: scale(1.1);
}

/* Alineación de las tarjetas completas */
.courses-thumb {
    display: flex;
    flex-direction: column;
    height: 100%; /* Hace que todas las tarjetas midan lo mismo en la misma fila */
    background: #1a1a1a; /* Un color de fondo sutil para la tarjeta */
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
}

/* Hacemos que la sección de detalles crezca para empujar los botones hacia abajo */
.courses-detail {
    padding: 20px;
    flex-grow: 1; 
}