/*
  NOA Tecnología — Professional Override
  Objetivo: aspecto limpio, institucional y confiable
  Inspirado en: institutodelmilagro.com
  Este archivo se carga ÚLTIMO y pisa el diseño anterior.
*/

/* =============================================
   VARIABLES — Paleta más limpia
   ============================================= */
:root {
  --primary: #10b981;
  --secondary: #e8a84a;
  --accent: #e8a84a;
  --dark:      #1a2535;
  --text:      #1e293b;
  --muted:     #475569;
  --border:    #e5e7eb;
  --bg-light:  #f7f9fc;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.11);
  --radius:    12px;
  --transition: all 0.25s ease;
}

/* =============================================
   NAVBAR — Blanco limpio (estilo institucional)
   ============================================= */
.navbar {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
}

.navbar.scrolled,
.sticky-wrapper.is-sticky .navbar {
  background: #fff !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.09) !important;
  border-bottom: 1px solid var(--border) !important;
}

.navbar:has(.navbar-collapse.show),
.navbar.menu-open {
  background: #fff !important;
}

/* Links del navbar en oscuro sobre fondo blanco */
.navbar .nav-link {
  color: var(--text) !important;
  font-weight: 600;
  font-size: 14px;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--secondary) !important;
}

/* Dropdown sobre fondo blanco */
.navbar .dropdown-menu {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.navbar .dropdown-item:hover {
  background: var(--bg-light);
  color: var(--primary);
}

/* Brand text en navbar */
.navbar-brand {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--primary) !important;
  font-weight: 800;
}

/* Logo: quitar borde y glow neon */
.noa-nav-logo {
  border: 2px solid var(--border) !important;
  box-shadow: none !important;
}

.noa-brand-logo:hover .noa-nav-logo {
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
  border-color: var(--secondary) !important;
}

/* Scroll progress bar: más sutil */
#scroll-progress {
  background: var(--secondary) !important;
  height: 2px !important;
}

/* =============================================
   HERO — Dark sólido, sin ruido visual
   ============================================= */

/* Quitar el mesh animado y el grid overlay */
.hero-section::before,
.hero-section::after {
  display: none !important;
}

/* Quitar partículas */
.hero-particles {
  display: none !important;
}

/* Fondo sólido limpio (sin animaciones) */
.hero-section {
  background: linear-gradient(160deg, #059669 0%, #10b981 60%, #e8a84a 150%) !important;
  min-height: 90vh !important;
}

/* Título del hero: blanco sólido (sin gradiente de texto) */
.hero-gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  background-clip: unset !important;
  color: #fff !important;
  font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
  letter-spacing: -0.5px !important;
}

/* Hero badge: más limpio, sin pulsación */
.hero-badge {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  animation: none !important;
  backdrop-filter: none !important;
}

.hero-badge::before {
  animation: none !important;
  background: rgba(255,255,255,0.7) !important;
}

/* Quitar animaciones del hero */
.hero-anim-1, .hero-anim-2, .hero-anim-3, .hero-anim-4 {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.hero-float-1, .hero-float-2 {
  animation: none !important;
}

/* =============================================
   TÍTULOS — Sólido, sin gradiente de texto
   ============================================= */
.gradient-heading {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--primary) !important;
  font-weight: 800;
}

/* Section label: más limpio */
.section-label {
  background: rgba(5,150,105,0.07) !important;
  border: 1px solid rgba(5,150,105,0.15) !important;
  color: var(--primary) !important;
  letter-spacing: 1.5px;
}

/* =============================================
   CARDS — Limpias, sin glassmorphism
   ============================================= */
.glass-card {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
}

.glass-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(232, 168, 74,0.25) !important;
  transform: translateY(-3px) !important;
}

/* Cards de cursos en cursos.html */
.custom-block {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.custom-block::after { display: none !important; }

.custom-block:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(232, 168, 74,0.3) !important;
}

/* =============================================
   BOTONES — Limpios, sin glow neon
   ============================================= */
.custom-btn {
  background: var(--secondary) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-weight: 700;
  transition: var(--transition) !important;
}

.custom-btn::before { display: none !important; }

.custom-btn:hover {
  background: #2bb87a !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-sm) !important;
  color: #fff !important;
}

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

.custom-border-btn {
  background: transparent !important;
  border: 1.5px solid var(--secondary) !important;
  color: var(--secondary) !important;
  box-shadow: none !important;
}

.custom-border-btn:hover {
  background: var(--secondary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* =============================================
   STATS SECTION — Fondo claro, sin glow
   ============================================= */
.section-stats {
  background: var(--bg-light) !important;
}

.section-stats::before { display: none !important; }

.stat-box {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.stat-box::before { display: none !important; }

.stat-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

.stat-box h3,
.counter-value {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--primary) !important;
}

/* =============================================
   AVAL BOXES — Sin cónico giratorio
   ============================================= */
.aval-box::before { display: none !important; }

.aval-box {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.aval-box:hover {
  border-color: var(--secondary) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}

.aval-box i {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--secondary) !important;
}

/* =============================================
   TIMELINE SECTION — Más clara
   ============================================= */
.timeline-section {
  background: linear-gradient(160deg, #059669 0%, #10b981 100%) !important;
}

.timeline-section::before { display: none !important; }

/* =============================================
   SECCIONES OSCURAS — Más limpias
   ============================================= */
section[style*="#f5f0e8"],
section[style*="#059669"],
.section-bg-dark {
  background: #059669 !important;
}

/* =============================================
   FOOTER — Más sólido, sin gradiente ruidoso
   ============================================= */
.site-footer {
  background: #059669 !important;
  border-bottom: 3px solid var(--secondary) !important;
}

.site-footer::before { display: none !important; }

.site-footer .navbar-brand {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}

/* =============================================
   WHATSAPP FLOAT — Sin pulso constante
   ============================================= */
.whatsapp-float {
  animation: none !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35) !important;
  width: 52px !important;
  height: 52px !important;
  font-size: 1.6rem !important;
}

.whatsapp-float:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 24px rgba(37,211,102,0.5) !important;
}

/* =============================================
   SCROLL REVEAL — Más rápido, más sutil
   ============================================= */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}

[data-reveal="up"] { transform: translateY(20px) !important; }
[data-reveal="left"] { transform: translateX(-20px) !important; }
[data-reveal="right"] { transform: translateX(20px) !important; }
[data-reveal="scale"] { transform: scale(0.97) !important; }

[data-reveal].revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* =============================================
   CHECK ITEMS — Más simples
   ============================================= */
.check-item:hover {
  background: var(--bg-light) !important;
  transform: none !important;
}

/* =============================================
   CURSO CARDS (cursos.html) — Header limpio
   ============================================= */
.curso-card-full {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius) !important;
}

.curso-card-full:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(232, 168, 74,0.3) !important;
}

.curso-card-header {
  background: var(--bg-light) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* =============================================
   BENEFICIO BOXES (páginas de detalle)
   ============================================= */
.beneficio-box i {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--secondary) !important;
}

.beneficio-box {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.beneficio-box:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(232, 168, 74,0.3) !important;
  transform: translateY(-3px) !important;
}

/* =============================================
   MÓDULOS — Línea acento sólida izquierda
   ============================================= */
.modulo-item {
  border-left: 3px solid rgba(232, 168, 74,0.3) !important;
  border-top: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

.modulo-item:hover {
  border-left-color: var(--secondary) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateX(2px) !important;
}

/* =============================================
   BLOG CARDS
   ============================================= */
.blog-card,
.blog-thumb,
.topic-listing-hero-section {
  /* Clean up blog section */
}

/* =============================================
   SECCIONES ALTERNAS — Fondo suave
   ============================================= */
.section-bg,
.section-padding.section-bg {
  background: var(--bg-light) !important;
}

/* =============================================
   FAQ ACCORDION
   ============================================= */
.faq-section .accordion-item {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.faq-section .accordion-item:hover {
  border-color: rgba(232, 168, 74,0.3) !important;
  box-shadow: var(--shadow-sm) !important;
}

.faq-section .accordion-button:not(.collapsed) {
  background: rgba(5,150,105,0.04) !important;
  color: var(--primary) !important;
}

/* =============================================
   META PILLS (páginas de detalle)
   ============================================= */
.meta-pill {
  border-radius: 8px !important;
  font-size: 12px !important;
}

/* =============================================
   TYPEWRITER CURSOR — quitar
   ============================================= */
.typewriter-cursor { display: none !important; }

/* =============================================
   ICONOS con gradiente → color sólido
   ============================================= */
.beneficio-box i,
.aval-box i {
  background: none !important;
  -webkit-text-fill-color: var(--secondary) !important;
}

/* =============================================
   RESPONSIVE — Navbar mobile
   ============================================= */
@media (max-width: 991px) {
  .navbar .navbar-collapse {
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 12px 0;
  }

  .navbar .nav-link {
    color: var(--text) !important;
    padding: 10px 20px !important;
  }

  .hero-section {
    min-height: 70vh !important;
  }
}


/* =============================================
   CURSO DETAIL PAGES — Fixes adicionales
   ============================================= */

/* Hero de páginas de detalle — limpio */
.hero-section.detail-hero {
  background: linear-gradient(150deg, #059669 0%, #10b981 100%) !important;
  min-height: auto !important;
}

.hero-section.detail-hero::before,
.hero-section.detail-hero::after {
  display: none !important;
}

/* Mecatrónica — trimestre header */
.trimestre-header {
  background: rgba(5,150,105,0.05) !important;
  border-left: 3px solid #10b981 !important;
}

/* Modulo num — inline override ya limpiado, pero por si acaso */
.modulo-num {
  background: #10b981 !important;
  -webkit-text-fill-color: white !important;
}

/* Beneficio box icon — sin gradient clip */
.beneficio-box i {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #e8a84a !important;
  background-clip: unset !important;
  color: #e8a84a !important;
}

/* Filter buttons en cursos.html */
.ftab:hover, .ftab.active {
  background: #10b981 !important;
  color: #fff !important;
  border-color: #10b981 !important;
}

/* Sticky CTA sidebar */
.sticky-cta .glass-card {
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}

/* Breadcrumb links en hero */
.breadcrumb-item a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px;
}
.breadcrumb-item.active {
  color: #e8a84a !important;
}

/* Section-bg en páginas de detalle */
.section-padding.section-bg {
  background: #f7f9fc !important;
}

/* Accordion FAQ */
.accordion-button:focus {
  box-shadow: none !important;
  border-color: rgba(5,150,105,0.3) !important;
}

/* Dropdowns en navbar blanco */
.navbar .dropdown-menu {
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
  margin-top: 8px !important;
}

.navbar .dropdown-header {
  color: #6b7280 !important;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 8px 16px 4px;
}

.navbar .dropdown-item {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  color: #374151 !important;
}

.navbar .dropdown-item:hover {
  background: #f7f9fc !important;
  color: #10b981 !important;
}

/* Navbar brand text visible en blanco */
.navbar .navbar-brand span {
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
}

/* Hamburger visible sobre fondo blanco */
.noa-hamburger .noa-ham-bar {
  background: #10b981 !important;
}

/* Footer — keep dark styling */
.site-footer,
.site-footer * {
  /* footer stays dark, no override needed */
}

/* =============================================
   TIPOGRAFÍA GLOBAL — Mayor visibilidad y legibilidad
   ============================================= */

/* Fuente base: Inter para máxima legibilidad */
body {
  font-family: 'Inter', 'Open Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 450 !important;
  line-height: 1.75 !important;
  color: #1e293b !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* Párrafos con peso y espaciado mejorado */
p {
  font-family: 'Inter', 'Open Sans', sans-serif !important;
  font-weight: 450 !important;
  color: #1e293b;
  line-height: 1.8 !important;
  letter-spacing: 0.01em !important;
}

/* Cards coloreadas — todo el texto va en blanco */
.noa-cat-card p,
.noa-cat-card span:not(.noa-cat-num),
.blog-featured p,
.noa-cta p { color: #fff !important; }

/* Nombres de cursos — más prominentes */
.noa-cat-name { font-size: 23px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
.curso-photo-card h3 { font-size: 1.15rem !important; font-weight: 800 !important; }
.cp-hero h1 { text-shadow: 0 2px 12px rgba(0,0,0,.25) !important; }
.cp-mod-title { font-weight: 700 !important; font-size: 15px !important; color: #0f172a !important; }

/* Texto muted / secundario — más visible */
.text-muted,
.blog-meta,
small,
.small {
  color: #475569 !important;
  font-weight: 500 !important;
}

/* Texto sobre fondos claros */
.section-padding p,
.section-padding li,
[style*="background:#fff"] p,
[style*="background:#f8fbff"] p,
[style*="background:white"] p {
  color: #1e293b !important;
  font-weight: 450 !important;
}

/* Texto sobre fondos oscuros/verdes — blanco pero bien pesado */
.hero-section p,
.blog-featured p,
[style*="background:#10b"] p,
[style*="background: #10b"] p {
  color: #fff !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Headings — más definidos y con mejor contraste */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

/* Headings — solo afectan fondos claros */
h1 { font-weight: 800 !important; color: #0f172a; }
h2 { font-weight: 700 !important; color: #0f172a; }
h3 { font-weight: 700 !important; color: #1e293b; }
h4 { font-weight: 600 !important; color: #1e293b; }
h5 { font-weight: 600 !important; color: #334155; }
h6 { font-weight: 600 !important; color: #334155; }

/* Hero — siempre blanco, sin excepciones */
.noa-hero h1,
.noa-hero h2,
.noa-hero p,
.noa-hero .hero-inner h1,
.noa-hero .hero-inner p { color: #fff !important; }

/* Secciones sobre fondos oscuros/coloreados */
.blog-featured h2,
.blog-featured p,
.noa-cta h2,
.noa-cta p,
.site-footer h5,
.site-footer h6,
.site-footer p { color: #fff !important; }

/* Cards del blog */
.blog-card-body h5,
.blog-card h5 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}

/* Tags / badges — legibles */
.blog-tag,
.blog-category,
span[class*="tag-"] {
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-size: 11px !important;
}

/* Links de texto */
a:not(.btn):not(.nav-link):not(.navbar-brand) {
  font-weight: 500 !important;
}

/* Listas en contenido */
ul li, ol li {
  font-weight: 450 !important;
  line-height: 1.8 !important;
  color: #1e293b !important;
}


/* =============================================
   PÁGINAS DE CURSO — Color, contraste y fuerza visual
   ============================================= */

/* Layout principal — fondo degradado suave */
.cp-layout {
  background: linear-gradient(180deg, #f8fffe 0%, #fff 30%) !important;
}

/* Contraste fuerte en texto informativo */
.cp-mod-title,
.cp-benefit strong,
.cp-modal-card h5,
.cp-sidebar-card h5,
.cp-row strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.cp-mod-desc,
.cp-benefit p,
.cp-modal-card p,
.cp-row span {
  color: #334155 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

/* Tagline más visible */
.cp-tagline {
  background: linear-gradient(135deg, rgba(16,185,129,0.07) 0%, rgba(232,168,74,0.06) 100%) !important;
  border-left: 4px solid #e8a84a !important;
  color: #0f172a !important;
  font-size: 1.08rem !important;
  font-weight: 600 !important;
}

/* Sección titles — oscuros y contrastados, no verde */
.cp-section-title {
  color: #0f172a !important;
  font-size: 1.4rem !important;
}

/* BENEFITS — fondo tintado, animación al hover */
.cp-benefit {
  background: linear-gradient(135deg, rgba(232,168,74,0.05) 0%, #fff 60%) !important;
  border: 1px solid rgba(232,168,74,0.2) !important;
  border-radius: 12px !important;
  transition: all .25s !important;
}
.cp-benefit:hover {
  background: linear-gradient(135deg, rgba(232,168,74,0.1) 0%, rgba(255,255,255,0.9) 60%) !important;
  border-color: rgba(232,168,74,0.45) !important;
  box-shadow: 0 6px 20px rgba(232,168,74,0.12) !important;
  transform: translateY(-3px) !important;
}
.cp-benefit i { color: #e8a84a !important; font-size: 1.7rem !important; }

/* MÓDULOS — más color, numeración más visible */
.cp-module {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 0 12px 12px 0 !important;
  transition: all .2s !important;
}
.cp-module:hover {
  background: rgba(16,185,129,0.03) !important;
  border-left-color: #e8a84a !important;
  box-shadow: 0 4px 16px rgba(16,185,129,0.1) !important;
  transform: translateX(3px) !important;
}
.cp-mod-num {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3) !important;
}

/* MODALIDAD CARDS — tintadas */
.cp-modal-card {
  background: linear-gradient(135deg, rgba(16,185,129,0.05) 0%, #f7f9fc 100%) !important;
  border: 1px solid rgba(16,185,129,0.15) !important;
  border-radius: 14px !important;
  transition: all .25s !important;
}
.cp-modal-card:hover {
  border-color: rgba(16,185,129,0.3) !important;
  box-shadow: 0 6px 20px rgba(16,185,129,0.08) !important;
  transform: translateY(-3px) !important;
}
.cp-modal-card i { color: #10b981 !important; }
.cp-modal-card h5 { font-size: 17px !important; }

/* SIDEBAR — más prominente */
.cp-sidebar-card {
  border: 1px solid rgba(16,185,129,0.15) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
}
.cp-rows {
  background: linear-gradient(135deg, rgba(16,185,129,0.04) 0%, #f7f9fc 100%) !important;
  border-radius: 10px !important;
}
.cp-row {
  padding: 8px 0 !important;
  font-size: 14px !important;
}
.cp-row strong { font-size: 14px !important; font-weight: 700 !important; }

/* WhatsApp CTA — más llamativo */
.cp-wa-btn {
  font-size: 15px !important;
  padding: 14px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(37,211,102,0.3) !important;
  letter-spacing: 0.2px !important;
}
.cp-wa-btn:hover { box-shadow: 0 6px 20px rgba(37,211,102,0.4) !important; transform: translateY(-1px) !important; }

/* Hero CTA button */
.cp-hero-btn {
  background: #e8a84a !important;
  font-size: 15px !important;
  padding: 14px 32px !important;
  box-shadow: 0 4px 14px rgba(232,168,74,0.35) !important;
}
.cp-hero-btn:hover { background: #d4943a !important; box-shadow: 0 6px 20px rgba(232,168,74,0.45) !important; transform: translateY(-2px) !important; }

/* Breadcrumb más legible */
.cp-breadcrumb a { color: rgba(255,255,255,.92) !important; font-weight: 500 !important; }
.cp-breadcrumb span { color: rgba(255,255,255,.65) !important; }

/* Hero párrafo */
.cp-hero p { color: rgba(255,255,255,.95) !important; font-size: 16px !important; font-weight: 450 !important; }

/* WHY CARDS (index) — más coloridas */
.why-card {
  background: linear-gradient(160deg, rgba(16,185,129,0.04) 0%, #fff 50%) !important;
  border: 1px solid rgba(16,185,129,0.12) !important;
  transition: all .28s !important;
}
.why-card:hover {
  background: linear-gradient(160deg, rgba(16,185,129,0.08) 0%, rgba(232,168,74,0.04) 100%) !important;
  border-color: rgba(232,168,74,0.3) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.09) !important;
  transform: translateY(-5px) !important;
}
.why-card h5 { font-size: 16px !important; font-weight: 800 !important; color: #0f172a !important; }
.why-card p { color: #334155 !important; font-size: 14px !important; line-height: 1.7 !important; }
.why-icon { 
  width: 52px !important; height: 52px !important;
  background: rgba(232,168,74,0.1) !important;
  border-radius: 12px !important;
  font-size: 1.5rem !important;
}