/*
    NOA Tecnología — Contrast & Hover Text Fix
    Corrige todos los problemas de legibilidad de texto en estados hover/animación
  */

  /* =============================================
     BOTÓN PRIMARIO (custom-btn) — texto siempre blanco
     ============================================= */
  .custom-btn {
    color: white !important;
  }

  /* Asegurar que el texto queda ENCIMA del overlay ::before */
  .custom-btn > *,
  .custom-btn span,
  .custom-btn i,
  .custom-btn strong,
  .custom-btn p {
    position: relative;
    z-index: 2;
  }

  .custom-btn:hover {
    color: white !important;
  }

  .custom-btn:focus,
  .custom-btn:active,
  .custom-btn:visited {
    color: white !important;
  }

  /* =============================================
     BOTÓN BORDE (custom-border-btn) — contraste arreglado
     El --accent (#f0b84a) era muy claro sobre fondo blanco
     ============================================= */
  .custom-border-btn {
    color: var(--secondary, #e8a84a) !important;
  }

  .custom-border-btn:hover {
    /* Fondo oscuro suficiente para que el texto blanco sea legible */
    background: linear-gradient(135deg, var(--secondary, #e8a84a), var(--primary, #10b981)) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(232, 168, 74,0.35) !important;
  }

  .custom-border-btn:hover span,
  .custom-border-btn:hover i {
    position: relative;
    z-index: 2;
    color: white !important;
  }

  /* =============================================
     TARJETAS (custom-block) — texto no tapado por overlay
     ============================================= */
  .custom-block .custom-block-image,
  .custom-block .rounded-pill,
  .custom-block h5,
  .custom-block p,
  .custom-block .badge,
  .custom-block a {
    position: relative;
    z-index: 2;
  }

  .custom-block h5 {
    color: #f5f0e8;
  }

  .custom-block:hover h5 {
    color: var(--primary, #10b981);
  }

  .custom-block:hover p {
    color: #555 !important;
  }

  /* =============================================
     CURSO MINI CARDS — texto legible en hover
     ============================================= */
  .curso-mini-card {
    color: #f5f0e8;
  }

  .curso-mini-card:hover h6 {
    color: var(--primary, #10b981) !important;
  }

  .curso-mini-card:hover p {
    color: #555 !important;
  }

  .curso-mini-card:hover .badge-duracion {
    color: white !important;
  }

  /* =============================================
     WHY CARDS — texto no se pierde en hover
     ============================================= */
  .why-card h5 {
    color: #f5f0e8;
    position: relative;
    z-index: 2;
  }

  .why-card p {
    color: #717275;
    position: relative;
    z-index: 2;
  }

  .why-card:hover h5 {
    color: #10b981;
  }

  .why-card .why-icon {
    position: relative;
    z-index: 2;
  }

  /* =============================================
     GLASS CARD — texto visible en hover
     ============================================= */
  .glass-card h4,
  .glass-card h5,
  .glass-card h6,
  .glass-card p {
    position: relative;
    z-index: 2;
  }

  .glass-card:hover h4,
  .glass-card:hover h5,
  .glass-card:hover h6 {
    color: inherit;
  }

  /* =============================================
     STAT BOX — texto visible en hover
     ============================================= */
  .stat-box h3,
  .stat-box p,
  .stat-box .counter-value {
    position: relative;
    z-index: 2;
  }

  /* =============================================
     AVAL BOX — texto visible en hover
     ============================================= */
  .aval-box i,
  .aval-box p,
  .aval-box--equal i,
  .aval-box--equal p {
    position: relative;
    z-index: 2;
  }

  .aval-box:hover p,
  .aval-box--equal:hover p {
    color: #344767 !important;
  }

  /* =============================================
     NAVBAR — links con contraste garantizado
     ============================================= */
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active {
    color: #e8a84a !important;
    /* Aseguramos que -webkit-text-fill-color no interfiere */
    -webkit-text-fill-color: #e8a84a !important;
    background: rgba(232, 168, 74, 0.08);
  }

  /* Dropdown items */
  .dropdown-item {
    color: #1a2d22 !important;
  }

  .dropdown-item:hover,
  .dropdown-item:focus,
  .dropdown-item.active {
    background: rgba(232, 168, 74, 0.1) !important;
    color: var(--primary-color, #10b981) !important;
    -webkit-text-fill-color: var(--primary-color, #10b981) !important;
  }

  /* =============================================
     TESTIMONIAL CARD — texto legible en hover
     ============================================= */
  .testimonial-card p,
  .testimonial-card strong {
    position: relative;
    z-index: 2;
  }

  .testimonial-card:hover p {
    color: #444 !important;
  }

  /* =============================================
     BLOG CARD — texto legible en hover
     ============================================= */
  .blog-card-body h5 {
    color: #f5f0e8;
  }

  .blog-card:hover .blog-card-body h5 {
    color: #10b981 !important;
  }

  .blog-card:hover .blog-card-body p {
    color: #717275 !important;
  }

  .blog-card:hover .blog-meta {
    color: #717275 !important;
  }

  /* =============================================
     FILTER BUTTONS (cursos.html) — texto legible
     ============================================= */
  .filter-btn {
    color: #1a2d22 !important;
  }

  .filter-btn:hover,
  .filter-btn.active {
    color: white !important;
    -webkit-text-fill-color: white !important;
  }

  /* =============================================
     CATEGORY PILLS (blog.html)
     ============================================= */
  .cat-pill {
    color: #1a2d22 !important;
  }

  .cat-pill:hover,
  .cat-pill.active {
    color: white !important;
    -webkit-text-fill-color: white !important;
  }

  .cat-pill:hover i,
  .cat-pill.active i {
    color: white !important;
  }

  /* =============================================
     MODULO ITEMS (curso pages) — texto en hover
     ============================================= */
  .modulo-item:hover h6 {
    color: #10b981 !important;
  }

  .modulo-item:hover p {
    color: #555 !important;
  }

  /* =============================================
     BENEFICIO BOX — texto legible en hover
     ============================================= */
  .beneficio-box:hover h6 {
    color: #10b981 !important;
  }

  .beneficio-box:hover p {
    color: #717275 !important;
  }

  /* =============================================
     RELATED CARD (blog posts)
     ============================================= */
  .related-card:hover h6 {
    color: #10b981 !important;
  }

  /* =============================================
     SOCIAL ICONS — texto/iconos visibles en hover
     ============================================= */
  .social-icon-link {
    color: #4a6b5e;
  }

  .social-icon-link:hover {
    color: white !important;
    -webkit-text-fill-color: white !important;
  }

  /* =============================================
     FOOTER LINKS — contraste en hover
     ============================================= */
  .site-footer-link {
    color: rgba(255,255,255,0.65) !important;
  }

  .site-footer-link:hover {
    color: #e8a84a !important;
    -webkit-text-fill-color: #e8a84a !important;
  }

  /* =============================================
     GRADIENT TEXT — nunca invisible sobre overlay
     No permitir que gradiente de card tape el texto degradado
     ============================================= */
  .gradient-heading {
    position: relative;
    z-index: 2;
  }

  /* =============================================
     CURSO CARD FULL (cursos.html)
     ============================================= */
  .curso-card-full h3,
  .curso-card-full p,
  .curso-card-full .check-item,
  .curso-card-full .modality-pill,
  .curso-card-full .duracion-badge {
    position: relative;
    z-index: 2;
  }

  .curso-card-full:hover h3 {
    color: #f5f0e8 !important;
  }

  .curso-card-full:hover p {
    color: #717275 !important;
  }

  /* =============================================
     MISION CARD (nosotros.html) — texto en hover
     ============================================= */
  .mision-card.hover h4 {
    color: inherit;
  }

  /* =============================================
     ACCORDION (FAQ) — botón visible en hover
     ============================================= */
  .accordion-button:hover {
    color: var(--primary, #10b981) !important;
    -webkit-text-fill-color: var(--primary, #10b981) !important;
  }

  .accordion-button:not(.collapsed) {
    color: var(--primary, #10b981) !important;
    -webkit-text-fill-color: var(--primary, #10b981) !important;
  }

  /* =============================================
     CONTACT INFO ITEMS
     ============================================= */
  .contact-info-item:hover strong {
    color: #f5f0e8 !important;
  }

  .contact-info-item:hover p {
    color: #717275 !important;
  }

  /* =============================================
     BADGE MODALIDAD — texto al hover
     ============================================= */
  .badge-modalidad {
    color: var(--secondary, #e8a84a) !important;
  }

  .badge-modalidad:hover {
    color: var(--secondary, #e8a84a) !important;
  }

  /* =============================================
     NAV TABS — texto legible en hover y activo
     ============================================= */
  .nav-tabs .nav-link {
    color: #6b7280 !important;
  }

  .nav-tabs .nav-link:hover {
    color: var(--secondary, #e8a84a) !important;
    -webkit-text-fill-color: var(--secondary, #e8a84a) !important;
  }

  .nav-tabs .nav-link.active {
    color: white !important;
    -webkit-text-fill-color: white !important;
  }

  /* =============================================
     HERO BADGE TEXT — siempre legible
     ============================================= */
  .hero-badge span,
  .hero-badge {
    color: var(--accent, #f0b84a) !important;
    -webkit-text-fill-color: var(--accent, #f0b84a) !important;
  }

  /* =============================================
     META PILLS (detail pages) — texto visible
     ============================================= */
  .meta-pill {
    color: #e8a84a !important;
    -webkit-text-fill-color: #e8a84a !important;
  }

  /* =============================================
     DURACION BADGE — siempre blanco
     ============================================= */
  .duracion-badge,
  .badge-duracion {
    color: white !important;
    -webkit-text-fill-color: white !important;
  }

  /* =============================================
     CTA BANNER — textos siempre visibles
     ============================================= */
  .cta-banner h2,
  .cta-banner p {
    position: relative;
    z-index: 2;
  }
  

  /* =============================================
     FIX CRÍTICO: custom-btn overlay cubre texto
     El ::before absolute sin z-index pintaba ENCIMA del texto.
     Solución: deshabilitar overlay y hacer transición via background
     ============================================= */

  /* Desactivar el ::before overlay que causaba texto invisible */
  .custom-btn::before {
    display: none !important;
  }

  /* Hacer la transición directamente en background gradient */
  .custom-btn {
    background: linear-gradient(135deg, var(--secondary, #e8a84a) 0%, var(--primary, #10b981) 100%) !important;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
    color: white !important;
  }

  .custom-btn:hover {
    background: linear-gradient(135deg, var(--accent, #f0b84a) 0%, var(--secondary, #e8a84a) 100%) !important;
    color: white !important;
    box-shadow: 0 6px 24px rgba(232, 168, 74,0.45), 0 2px 8px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px) !important;
  }

  .custom-btn:active {
    transform: translateY(0px) scale(0.98) !important;
  }

  /* El texto (incluso nodos de texto sin span) hereda color:white del button */
  .custom-btn *,
  .custom-btn span,
  .custom-btn i,
  .custom-btn strong {
    color: inherit !important;
  }
  

  /* =============================================
     VALOR CARD (nosotros.html) — texto en hover
     ============================================= */
  .valor-card h5,
  .valor-card p,
  .valor-card i {
    position: relative;
    z-index: 2;
  }

  .valor-card:hover h5 {
    color: #10b981 !important;
  }

  .valor-card:hover p {
    color: #717275 !important;
  }

  /* =============================================
     TEAM CARD (nosotros.html) — texto en hover
     ============================================= */
  .team-card h5,
  .team-card p,
  .team-card .team-badge,
  .team-card strong {
    position: relative;
    z-index: 2;
  }

  .team-card:hover h5 {
    color: #10b981 !important;
  }

  .team-card:hover p {
    color: #717275 !important;
  }

  /* =============================================
     CONTACT INFO ITEM — texto legible en hover
     ============================================= */
  .contact-info-item h6,
  .contact-info-item p,
  .contact-info-item i,
  .contact-info-item strong {
    position: relative;
    z-index: 2;
  }

  .contact-info-item:hover h6 {
    color: #10b981 !important;
  }

  .contact-info-item:hover p {
    color: #717275 !important;
  }

  .contact-info-item:hover i {
    color: #e8a84a !important;
  }

  /* =============================================
     MISION/VISION CARDS (nosotros.html)
     ============================================= */
  .mision-card h4,
  .mision-card p,
  .mision-card li {
    position: relative;
    z-index: 2;
  }

  /* =============================================
     GARANTIA y CHECK ITEMS 
     ============================================= */
  .check-item {
    position: relative;
    z-index: 2;
  }

  .check-item:hover {
    color: #f5f0e8 !important;
  }

  .check-item:hover i {
    color: #e8a84a !important;
  }

  /* =============================================
     BOTONES en inline styles (dentro del HTML)
     Fix para cualquier 'a' link button con hover
     ============================================= */
  a.custom-btn,
  button.custom-btn {
    color: white !important;
  }

  a.custom-btn:hover,
  button.custom-btn:hover {
    color: white !important;
    text-decoration: none !important;
  }

  /* =============================================
     LINK general sobre fondos oscuros
     ============================================= */
  .hero-section a:not(.btn):hover,
  .cta-banner a:not(.btn):hover {
    color: var(--accent, #f0b84a) !important;
    -webkit-text-fill-color: var(--accent, #f0b84a) !important;
  }

  /* Fix hero gradient text — nunca transparent sobre overlay */
  .hero-section .gradient-heading {
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    position: relative;
    z-index: 3;
  }

  /* =============================================
     PAGINACION Y BREADCRUMB 
     ============================================= */
  .page-link:hover {
    color: white !important;
    background-color: var(--secondary, #e8a84a) !important;
    border-color: var(--secondary, #e8a84a) !important;
  }
  
/* =============================================
   FIX TEXTO MISION/VISION CARDS — negro para legibilidad
   Las cards tienen fondos claros con overlay teal, 
   el texto blanco quedaba invisible.
   ============================================= */
.mision-card h4,
.mision-card h5 {
  color: #0e2418 !important;
  -webkit-text-fill-color: #0e2418 !important;
}

.mision-card p,
.mision-card li {
  color: #1a2d22 !important;
  -webkit-text-fill-color: #1a2d22 !important;
  opacity: 1 !important;
}

.mision-card i {
  /* Conservar color ámbar del icono */
}

/* Links dentro de mision-cards */
.mision-card a {
  color: #10b981 !important;
}

/* Bullets / check items dentro de mision-cards */
.mision-card .check-item,
.mision-card .check-item i {
  color: #1a2d22 !important;
  -webkit-text-fill-color: #1a2d22 !important;
}

/* Estado hover — mantener oscuro */
.mision-card:hover h4,
.mision-card:hover h5 {
  color: #062e1c !important;
  -webkit-text-fill-color: #062e1c !important;
}

.mision-card:hover p,
.mision-card:hover li {
  color: #1a2d22 !important;
  -webkit-text-fill-color: #1a2d22 !important;
}