/* ========================================
   TEMA CLARO UNIVERSAL - TODOS LOS ELEMENTOS
   ======================================== */

/* UNIVERSAL FORCED ANIMATION - OBLIGAR ANIMACION */
[data-esin-animated] .esin-badge-top,
[data-esin-animated] .hero-badge,
[data-esin-animated] .title_portada_premium,
[data-esin-animated] .title-hero-main,
[data-esin-animated] .legal-hero-line,
[data-esin-animated] .mintra-hero-description,
[data-esin-animated] .desc-hero-main,
[data-esin-animated] .hero-subtitle,
[data-esin-animated] .hero-btns,
[data-esin-animated] .hero-stats,
[data-esin-animated] .hero-text-side > *,
[data-esin-animated] .hero-services-side > *,
[data-esin-animated] .floating-card-mintra,
[data-esin-animated] .floating-card-mintra .card-content,
[data-esin-animated] h1,
[data-esin-animated] p {
  opacity: 1 !important;
  transform: translate(0, 0) rotateZ(0) !important;
  animation: none !important;
  transition: opacity .72s cubic-bezier(.16,.84,.44,1), transform .72s cubic-bezier(.16,.84,.44,1) !important;
  will-change: opacity, transform !important;
}

/* VARIABLES DE COLOR */
:root[data-theme="light"], 
html[data-theme="light"], 
body.light-mode {
  --light-bg: #f0f5f9;
  --light-bg-alt: #e8f0f7;
  --card-bg: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --esin-orange: #1AA8E1;
  --esin-blue: #033F77;
  --hover-blue: #0284c7;
  --border-color: rgba(3, 63, 119, 0.15);
  --border-light: rgba(3, 63, 119, 0.1);
  --shadow-color: rgba(3, 63, 119, 0.1);
  /* Alias y variables usadas por plantillas del blog */
  --light-text-primary: var(--text-primary);
  --light-text-secondary: var(--text-secondary);
  --light-text-muted: var(--text-muted);
  --accent-primary: var(--esin-orange);
  --accent-secondary: var(--esin-blue);
  --accent-light: rgba(26, 168, 225, 0.08);
  --light-bg-secondary: #f8fafc;
}

/* ========================================
   BODY Y ESTRUCTURA GLOBAL
   ======================================== */
html[data-theme="light"],
html[data-theme="light"] body {
  background: linear-gradient(135deg, #f0f5f9 0%, #e3ebf3 100%) !important;
  background-attachment: fixed !important;
  color: #0f172a !important;
}

html[data-theme="light"] body,
body.light-mode {
  background-color: #f0f5f9 !important;
  color: #0f172a !important;
}

/* Todos los textos por defecto */
html[data-theme="light"] *,
html[data-theme="light"] p,
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, 
html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6,
html[data-theme="light"] span, html[data-theme="light"] a, html[data-theme="light"] li,
html[data-theme="light"] label, html[data-theme="light"] button,
html[data-theme="light"] div, html[data-theme="light"] section,
html[data-theme="light"] article, html[data-theme="light"] nav {
  color: #0f172a !important;
}

/* ========================================
   NAVBAR Y NAVEGACIÓN
   ======================================== */
html[data-theme="light"] .rd-navbar-wrap {
  background: #ffffff !important;
}

/* ======== light-mode: NAVBAR — unified header (FORCE) ======== */
/* More aggressive — covers: header-like selectors, cloned/stuck nav, any
   descendant with inline styles that include the problematic blue, and
   pseudo-elements. Still preserves explicit hero/cover exceptions.
   Scope: *header area only* (non-destructive to page body content).
*/

/* Primary header-band (most specific selectors first) */
html[data-theme="light"] header,
html.light-mode header,
html[data-theme="light"] header[role="banner"],
html[data-theme="light"] .site-header,
html[data-theme="light"] .masthead,
html[data-theme="light"] .rd-navbar-wrap,
html[data-theme="light"] .rd-navbar,
html[data-theme="light"] .rd-navbar-main,
html[data-theme="light"] .rd-navbar-main-outer,
html[data-theme="light"] .rd-navbar--is-clone .rd-navbar-main,
html[data-theme="light"] .section.page-header,
html[data-theme="light"] [class*="header"],
html[data-theme="light"] [class*="page-header"] {
  /* force a single readable white band for the whole header area */
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-top: none !important;
  color: #0f1724 !important;
  /* Remove hairlines and make theme swap instant */
  border-color: transparent !important;
  outline: none !important;
  transition: background 0s !important; /* instant */
  transition-property: background, border-color, box-shadow, color !important;
  transition-duration: 0s !important;
  will-change: auto !important;
  /* Ensure icons/SVG don't retain blue fills/strokes */
  fill: currentColor !important;
  stroke: currentColor !important;
  /* locally neutralize theme variables so other rules can't re-inject color */
  --esin-blue: transparent !important;
  --accent-secondary: transparent !important;
}

/* Exceptions: preserve hero/cover intent (images/gradients intentionally kept) */
html[data-theme="light"] .context-dark .rd-navbar-main,
html[data-theme="light"] .esin-hero-force-visible .rd-navbar-main,
html[data-theme="light"] .section.page-header.context-dark,
html[data-theme="light"] .section.page-header.esin-hero-force-visible {
  background: inherit !important;
  background-image: inherit !important;
  box-shadow: inherit !important;
}

/* Strongly neutralize any inline/background declarations inside the header band */
html[data-theme="light"] .rd-navbar *[style*="#033F77"],
html[data-theme="light"] .rd-navbar *[style*="rgb(3,63,119)"],
html[data-theme="light"] .rd-navbar *[style*="background-image"],
html[data-theme="light"] .section.page-header *[style*="#033F77"],
html[data-theme="light"] .section.page-header *[style*="rgb(3,63,119)"],
html[data-theme="light"] .section.page-header *[style*="background-image"] {
  background-image: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* Also override programmatic inline styles applied directly to header elements */
html[data-theme="light"] .rd-navbar[style],
html[data-theme="light"] .rd-navbar-main[style],
/* inline-styled elements should not carry blue when only the contact row
   needs colouring; keep them transparent so they inherit from their parent */
html[data-theme="light"] .rd-navbar-aside-outer[style],
html[data-theme="light"] .section.page-header[style] {
  background-image: none !important;
  background: transparent !important;
}

/* Pseudo-elements: remove any overlay tint from header-like elements */
html[data-theme="light"] .rd-navbar-main::before,
html[data-theme="light"] .rd-navbar-main::after,
html[data-theme="light"] .rd-navbar-main-outer::before,
html[data-theme="light"] .rd-navbar-main-outer::after,
html[data-theme="light"] .section.page-header::before,
html[data-theme="light"] .section.page-header::after,
html[data-theme="light"] header::before,
html[data-theme="light"] header::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* Ensure top-bar and small contact rows fully inherit the white band */
/* Top-bar (ONLY) — confined off-white band; do NOT affect main navbar corners */
html[data-theme="light"] .rd-navbar-aside-outer {
  background: #033F77 !important; /* complete blue bar for entire contact section */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 0 !important;           /* ensure no rounded corners bleed */
  position: relative !important;
  z-index: 40 !important;                /* sit under main navbar so corners remain white */
  overflow: visible !important;
}

/* ensure all text in contact bar is white */
html[data-theme="light"] .rd-navbar-aside .top-bar-right,
html[data-theme="light"] .rd-navbar-aside .top-text-ref,
html[data-theme="light"] .rd-navbar-aside .item-top,
html[data-theme="light"] .rd-navbar-aside .item-top i {
  color: #ffffff !important;
}

/* colour only the row that contains the phone/email links */
html[data-theme="light"] .top-bar-right {
  background: transparent !important; /* inherit blue from parent container */
}



/* Keep other top-bar descendants styled, but avoid broad selectors that touch main navbar */
html[data-theme="light"] .rd-navbar-aside,
html[data-theme="light"] .top-bar-left,
html[data-theme="light"] .section.page-header .top-bar-left {
  background: transparent !important;   /* children inherit from confined aside */
  color: inherit !important;
}

/* Ensure main navbar remains visually above the top-bar (preserve corners) */
html[data-theme="light"] .rd-navbar-main-outer {
  background: #ffffff !important;
  position: relative !important;
  z-index: 50 !important;                /* above the top-bar to preserve its corners */
  border-radius: inherit !important;     /* preserve original rounding if present */
  box-shadow: none !important;
  border-bottom: 1px solid rgba(15,23,36,0.06) !important;
}

/* Keep link typography/contrast, allow the cyan accent only on hover */
html[data-theme="light"] .rd-navbar-nav .nav-link,
html[data-theme="light"] .rd-navbar-nav .nav-link-ref,
html[data-theme="light"] .top-text-ref,
html[data-theme="light"] .section.page-header .nav-link-ref {
  color: #0f1724 !important;
}

/* Make header contact text slightly darker and bolder for better legibility.
   On light mode the fixed‑image screenshot shows white text over the blue
   top bar, so force white here. */
html[data-theme="light"] .top-text-ref,
html[data-theme="light"] .top-bar-left .top-text-ref,
html[data-theme="light"] .top-bar-right .top-text-ref,
html[data-theme="light"] .section.page-header .top-text-ref {
  color: #ffffff !important; /* match screenshot in light mode */
  font-weight: 600 !important;
  opacity: 0.98 !important;
  letter-spacing: 0.01em !important;
}
html[data-theme="light"] .rd-navbar-nav .nav-link-ref:hover,
html[data-theme="light"] .section.page-header .nav-link-ref:hover {
  color: #1AA8E1 !important;
}

/* Final defensive catch-all for header descendants that carry gradients/vars */
html[data-theme="light"] .rd-navbar-wrap [style*="#033F77"],
html[data-theme="light"] .rd-navbar-wrap [style*="rgb(3,63,119)"],
html[data-theme="light"] .section.page-header [style*="#033F77"],
html[data-theme="light"] .section.page-header [style*="rgb(3,63,119)"] {
  background-image: none !important;
  background: transparent !important;
}

/* Remove subtle 1px hairlines and any box-shadow that appears as a line */
html[data-theme="light"] .rd-navbar *,
html[data-theme="light"] .section.page-header *,
html[data-theme="light"] header * {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important; /* instant, avoid flicker */
}

/* Ensure SVG/icons inside the header inherit the correct dark color */
html[data-theme="light"] .rd-navbar svg,
html[data-theme="light"] .section.page-header svg {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: #0f1724 !important;
}

/* Light mode toggle - clean default, circle only on interaction */
html[data-theme="light"] .btn-mode-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  border-radius: 50%;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
html[data-theme="light"] .btn-mode-toggle .mode-icon {
  color: inherit !important;
  font-size: 18px;
}
html[data-theme="light"] .btn-mode-toggle:hover {
  background: var(--color-primary) !important;
  box-shadow: 0 0 20px rgba(26, 168, 225, 0.2);
}
html[data-theme="light"] .btn-mode-toggle:hover .mode-icon {
  color: #fff !important;
}

/* For the rest of icon resets, keep as before */
html[data-theme="light"] .rd-navbar-sidebar .rd-navbar-nav-wrap .rd-navbar-nav li a i,
html[data-theme="light"] .rd-navbar-nav .nav-link i,
html[data-theme="light"] .nav-link-ref .icon-arrow,
html[data-theme="light"] .mobile-menu-content .mobile-nav a i,
html[data-theme="light"] .mobile-menu-content .dropdown-link-mobile i,
html[data-theme="light"] .mobile-menu-content .dropdown-menu-mobile a i,
html[data-theme="light"] .mobile-menu-close,
html[data-theme="light"] .dropdown-toggle-btn i {
  color: #000 !important;
  background: transparent !important;
  -webkit-text-stroke: 0 !important;
}

/* ========================================
   SECCIONES HERO / INTRO
   ======================================== */
html[data-theme="light"] .section-intro,
html[data-theme="light"] .section-intro2 {
  background: transparent !important;
}

html[data-theme="light"] .section-intro .intro-bg,
html[data-theme="light"] .section-intro2 .intro-bg {
  opacity: 1 !important;
  display: block !important;
}

html[data-theme="light"] .section-intro h1,
html[data-theme="light"] .section-intro2 h1 {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .section-intro h2,
html[data-theme="light"] .section-intro2 h2 {
  color: #0f172a !important;
}

html[data-theme="light"] .section-intro p,
html[data-theme="light"] .section-intro2 p,
html[data-theme="light"] .intro-description {
  color: #334155 !important;
}

/* --- HERO ENTRANCE ANIMATION (GLOBAL) --- */
/* Prepare common hero elements for a smooth staggered diagonal entrance when the page loads or after AJAX swaps */
.section-intro .title-hero-main,
.section-intro h1,
.section-intro .hero-title,
.section-intro .hero-badge,
.section-intro .legal-hero-line,
.section-intro .desc-hero-main,
.section-intro .hero-subtitle,
.section-intro .hero-btns,
.section-intro .floating-card-mintra,
.section-intro .hero-services-side > *,
.section-intro .title_portada_premium,
.section-intro .esin-badge-top,
.section-intro .mintra-hero-description,
.section-intro .floating-card-mintra .card-content,
.hero-blog .hero-content > *,
.cert-hero-refined .title-hero-main,
.aula-hero .title-hero-main,
.consultoria-hero .hero-content > *,
.monitoreo-hero .hero-text-col > *,
.nosotros-hero .hero-badge,
.legal-hero .legal-badge,
.legal-hero .legal-main-title,
.legal-hero .legal-hero-line,
.legal-hero .legal-hero-date {
  /* Initial safe state for smooth diagonal entrance */
  opacity: 0;
  transform: translate(-32px, 24px) rotateZ(-2deg);
  transform-origin: center center;
  transition: opacity .72s cubic-bezier(.16,.84,.44,1), transform .72s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased; /* reduce text jump */
  text-rendering: optimizeLegibility;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  animation: none !important; /* prevent conflicting keyframe animations */
}

/* When JS marks the page as ready, reveal the hero pieces in order with small delays */
body.hero-ready .section-intro .esin-badge-top,
body.hero-ready .section-intro .hero-badge,
body.hero-ready .section-intro .legal-hero-line,
body.hero-ready .legal-hero .legal-badge {
  opacity: 1;
  transform: translate(0, 0) rotateZ(0);
  transition-delay: .08s;
}
body.hero-ready .section-intro .title_portada_premium,
body.hero-ready .section-intro h1,
body.hero-ready .section-intro .title-hero-main,
body.hero-ready .hero-blog .hero-title,
body.hero-ready .legal-hero .legal-main-title {
  opacity: 1;
  transform: translate(0, 0) rotateZ(0);
  transition-delay: .16s;
}
body.hero-ready .section-intro .mintra-hero-description,
body.hero-ready .section-intro .desc-hero-main,
body.hero-ready .section-intro .hero-subtitle,
body.hero-ready .cert-hero-refined .desc-hero-main,
body.hero-ready .legal-hero .legal-hero-date {
  opacity: 1;
  transform: translate(0, 0) rotateZ(0);
  transition-delay: .24s;
}

/* Defensive: jeśli librerías como WOW mantienen `visibility:hidden` o clases `wow` en elementos del hero,
   asegurar que `body.hero-ready` permita que los hijos midan y reciban la animación */
body.hero-ready .capac-hero-refined .wow,
body.hero-ready .nosotros-hero .wow,
body.hero-ready .legal-hero .wow {
  visibility: visible !important;
  opacity: 0 !important; /* mantenemos oculto hasta que JS los revele */
  display: block !important;
}

body.hero-ready .section-intro .floating-card-mintra .card-content,
body.hero-ready .section-intro .hero-btns,
body.hero-ready .section-intro .hero-stats {
  opacity: 1;
  transform: translate(0, 0) rotateZ(0);
  transition-delay: .32s;
}

/* Small responsive tweak: reduce translation on small screens for subtler motion */
@media (max-width: 576px){
  .section-intro .title-hero-main,
  .section-intro h1,
  .section-intro .hero-title {
    transform: translate(-16px, 12px) rotateZ(-1deg);
  }
}

/* Prevent per-letter / per-span animations inside hero headings: ensure entire heading behaves as a single block */
.section-intro h1,
.section-intro .title-hero-main {
  display: block; /* enforce block layout */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.section-intro h1 span,
.section-intro h1 strong,
.section-intro h1 em,
.section-intro .title-hero-main span,
.section-intro .title-hero-main strong,
.section-intro .title-hero-main em {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  display: inline !important;
  backface-visibility: hidden;
}

/* =================================================== */
/* FORCE: Defensive CSS to ensure hero is fully visible */
/* =================================================== */
body.hero-ready .section-intro .title_portada_premium,
body.hero-ready .section-intro h1,
body.hero-ready .section-intro .title-hero-main,
body.hero-ready .section-intro .desc-hero-main,
body.hero-ready .section-intro .mintra-hero-description,
body.hero-ready .section-intro .esin-badge-top,
body.hero-ready .section-intro .floating-card-mintra .card-content,
body.hero-ready .section-intro .hero-btns,
body.hero-ready .section-intro .hero-stats {
  opacity: 1 !important;
  transform: translate(0, 0) rotateZ(0) !important;
  transition: opacity .72s cubic-bezier(.16,.84,.44,1), transform .72s cubic-bezier(.16,.84,.44,1) !important;
  animation: none !important;
  will-change: opacity, transform !important;
}

/* Ensure any inline spans inside the headings can't hide or animate letters */
body.hero-ready .section-intro h1 span,
body.hero-ready .section-intro .title-hero-main span {
  opacity: 1 !important;
  transform: translate(0, 0) rotateZ(0) !important;
  transition: opacity .72s cubic-bezier(.16,.84,.44,1), transform .72s cubic-bezier(.16,.84,.44,1) !important;
  animation: none !important;
  display: inline !important;
}

/* Small extra safety: strip possible text-transform/letter spacing overrides during reveal */
body.hero-ready .section-intro h1,
body.hero-ready .section-intro .title-hero-main,
body.hero-ready .section-intro .desc-hero-main {
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* AGGRESSIVE FORCE: Ensure ALL hero elements animate */
body.hero-ready .section-intro .hero-badge,
body.hero-ready .section-intro .legal-hero-line,
body.hero-ready .section-intro .hero-text-side > *,
body.hero-ready .section-intro .hero-services-side > * {
  opacity: 1 !important;
  transform: translate(0, 0) rotateZ(0) !important;
  transition: opacity .72s cubic-bezier(.16,.84,.44,1), transform .72s cubic-bezier(.16,.84,.44,1) !important;
  animation: none !important;
}

/* Improve text rendering and GPU layering for smoother hero animation */
.section-intro .title-hero-main,
.section-intro h1,
.section-intro .desc-hero-main,
.section-intro .hero-badge,
.section-intro .floating-card-mintra {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
   Problem: hero pieces start with opacity:0 for animation which hides
   focus outlines — keyboard users couldn't see the focused element.
   Fix: when a hero element receives keyboard focus, force it visible and
   show a strong, high-contrast focus ring. Also ensure .wow elements
   (third-party) become visible when focused. Respects reduced-motion. */

@media (prefers-reduced-motion: reduce) {
  body.hero-ready .section-intro .title-hero-main:focus,
  body.hero-ready .section-intro h1:focus,
  body.hero-ready .section-intro .hero-btns a:focus,
  body.hero-ready .section-intro .hero-btns button:focus,
  body.hero-ready .section-intro .hero-badge:focus,
  body.hero-ready .section-intro .floating-card-mintra:focus,
  body.hero-ready .section-intro .wow:focus {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    outline: 3px solid rgba(3,63,119,0.9) !important;
    box-shadow: 0 0 0 4px rgba(26,168,225,0.12) !important;
  }
}

body.hero-ready .section-intro .title-hero-main:focus,
body.hero-ready .section-intro h1:focus,
body.hero-ready .section-intro .hero-btns a:focus,
body.hero-ready .section-intro .hero-btns button:focus,
body.hero-ready .section-intro .hero-badge:focus,
body.hero-ready .section-intro .floating-card-mintra:focus,
body.hero-ready .section-intro .wow:focus {
  /* make focused hero pieces visible immediately and highly noticeable */
  opacity: 1 !important;
  transform: translate(0,0) rotateZ(0) !important;
  visibility: visible !important;
  z-index: 5 !important;
  outline: 3px solid rgba(3,63,119,0.95) !important;
  box-shadow: 0 0 0 6px rgba(26,168,225,0.12) !important;
}

/* If an element inside the hero receives focus, make its visible container
   also visible so screen-magnifier / contrast users can find it */
body.hero-ready .section-intro :focus {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Also ensure elements that were force-hidden by .wow become keyboard-focusable */
/

/* Also ensure elements that were force-hidden by .wow become keyboard-focusable */
/* NOT* NOTE: tabindex cannot be set via CSS — handled in JS (see animateHeroes) */
body.hero-ready .section-intro .wow[tabiabixndex=" -1"] {
  visibility: visible !important; /* keep measurable until JS fixes tabindex/aria */
}


/* ========================================
   CARDS Y CONTENEDORES
   ======================================== */
html[data-theme="light"] .card,
html[data-theme="light"] .card-body {
  background: #ffffff !important;
  border: 1px solid rgba(3, 63, 119, 0.1) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .benefit-card-new,
html[data-theme="light"] .card-service {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(3, 63, 119, 0.1) !important;
  box-shadow: 0 4px 15px rgba(3, 63, 119, 0.05) !important;
}

html[data-theme="light"] .benefit-card-new:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%) !important;
  border-color: rgba(26, 168, 225, 0.3) !important;
  box-shadow: 0 8px 25px rgba(26, 168, 225, 0.1) !important;
}

html[data-theme="light"] .benefit-card-new h4 {
  color: #033F77 !important;
}

html[data-theme="light"] .benefit-card-new p {
  color: #334155 !important;
}

html[data-theme="light"] .box-icon-orange {
  background: rgba(26, 168, 225, 0.1) !important;
  border: 1px solid rgba(26, 168, 225, 0.2) !important;
}

/* ========================================
   BOTONES
   ======================================== */
html[data-theme="light"] .btn,
html[data-theme="light"] .button,
html[data-theme="light"] button {
  color: #0f172a !important;
}

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .button-primary,
html[data-theme="light"] .btn-submit-orange,
html[data-theme="light"] .boton_hero_premium,
html[data-theme="light"] .btn-programas-white {
  background: #1AA8E1 !important;
  border-color: #1AA8E1 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .button-primary:hover,
html[data-theme="light"] .btn-submit-orange:hover,
html[data-theme="light"] .boton_hero_premium:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
}

html[data-theme="light"] .btn-secondary {
  background: #f0f5f9 !important;
  border-color: rgba(3, 63, 119, 0.2) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .btn-secondary:hover {
  background: #e3ebf3 !important;
}

html[data-theme="light"] .btn-outline-primary {
  border-color: #1AA8E1 !important;
  color: #1AA8E1 !important;
}

html[data-theme="light"] .btn-outline-primary:hover {
  background: #1AA8E1 !important;
  color: #ffffff !important;
}

/* ========================================
   INPUTS Y FORMULARIOS
   ======================================== */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .form-control,
html[data-theme="light"] .esin-input {
  background-color: #ffffff !important;
  border: 1px solid rgba(3, 63, 119, 0.15) !important;
  color: #0f172a !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .esin-input:focus {
  background-color: #ffffff !important;
  border-color: #1AA8E1 !important;
  box-shadow: 0 0 0 3px rgba(26, 168, 225, 0.1) !important;
  color: #0f172a !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #64748b !important;
}

/* ========================================
   FOOTER
   ======================================== */
html[data-theme="light"] footer,
html[data-theme="light"] .footer-classic,
html[data-theme="light"] .footer-default {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
}

html[data-theme="light"] footer a,
html[data-theme="light"] .footer-classic a {
  color: #1AA8E1 !important;
}

html[data-theme="light"] footer a:hover,
html[data-theme="light"] .footer-classic a:hover {
  color: #0284c7 !important;
}

html[data-theme="light"] footer h3,
html[data-theme="light"] footer h4,
html[data-theme="light"] footer h5 {
  color: #ffffff !important;
}

html[data-theme="light"] .footer-text,
html[data-theme="light"] footer p {
  color: #bcc5d0 !important;
}

/* ========================================
   TABLAS
   ======================================== */
html[data-theme="light"] table,
html[data-theme="light"] .table {
  background: #ffffff !important;
  border-color: rgba(3, 63, 119, 0.1) !important;
}

html[data-theme="light"] table thead,
html[data-theme="light"] .table thead {
  background: #f0f5f9 !important;
  color: #0f172a !important;
}

html[data-theme="light"] table th,
html[data-theme="light"] .table th {
  color: #0f172a !important;
  border-color: rgba(3, 63, 119, 0.15) !important;
}

html[data-theme="light"] table td,
html[data-theme="light"] .table td {
  color: #0f172a !important;
  border-color: rgba(3, 63, 119, 0.1) !important;
}

html[data-theme="light"] table tbody tr:hover,
html[data-theme="light"] .table tbody tr:hover {
  background: #f8fbff !important;
}

/* ========================================
   LISTAS Y ELEMENTOS
   ======================================== */
html[data-theme="light"] ul,
html[data-theme="light"] ol {
  color: #0f172a !important;
}

html[data-theme="light"] li {
  color: #0f172a !important;
}

html[data-theme="light"] .list-item {
  color: #0f172a !important;
  border-color: rgba(3, 63, 119, 0.1) !important;
}

/* ========================================
   BADGES Y ETIQUETAS
   ======================================== */
html[data-theme="light"] .badge,
html[data-theme="light"] .label {
  background: rgba(26, 168, 225, 0.12) !important;
  color: #0369a1 !important;
}

html[data-theme="light"] .badge-primary {
  background: #1AA8E1 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .subtitle-badge {
  background: rgba(26, 168, 225, 0.12) !important;
  border: 1px solid rgba(26, 168, 225, 0.25) !important;
  color: #0369a1 !important;
}

/* ========================================
   CAROUSELES Y SLIDERS
   ======================================== */
html[data-theme="light"] .slick-slider,
html[data-theme="light"] .owl-carousel,
html[data-theme="light"] .carousel {
  background: transparent !important;
}

html[data-theme="light"] .slick-slide,
html[data-theme="light"] .owl-item {
  color: #0f172a !important;
}

html[data-theme="light"] .slick-dots li button:before,
html[data-theme="light"] .slick-dots li.slick-active button:before {
  color: #1AA8E1 !important;
}

html[data-theme="light"] .owl-dots .owl-dot span {
  background: rgba(3, 63, 119, 0.2) !important;
}

html[data-theme="light"] .owl-dots .owl-dot.active span,
html[data-theme="light"] .owl-dots .owl-dot:hover span {
  background: #1AA8E1 !important;
}

html[data-theme="light"] .owl-nav button {
  background: #ffffff !important;
  border: 1px solid rgba(3, 63, 119, 0.15) !important;
  color: #1AA8E1 !important;
}

html[data-theme="light"] .owl-nav button:hover {
  background: #1AA8E1 !important;
  color: #ffffff !important;
}

/* ========================================
   MODALES Y POPUPS
   ======================================== */
html[data-theme="light"] .modal-content {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .modal-header {
  background: #f0f5f9 !important;
  border-color: rgba(3, 63, 119, 0.1) !important;
}

html[data-theme="light"] .modal-header .btn-close,
html[data-theme="light"] .modal-header button.close {
  color: #0f172a !important;
}

html[data-theme="light"] .modal-body {
  color: #0f172a !important;
}

html[data-theme="light"] .modal-footer {
  border-color: rgba(3, 63, 119, 0.1) !important;
}

/* ========================================
   ALERTAS Y NOTIFICACIONES
   ======================================== */
html[data-theme="light"] .alert {
  border: 1px solid rgba(3, 63, 119, 0.1) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .alert-info {
  background: #dbeafe !important;
  border-color: #1AA8E1 !important;
  color: #033F77 !important;
}

html[data-theme="light"] .alert-warning {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

html[data-theme="light"] .alert-success {
  background: #d1fae5 !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
}

html[data-theme="light"] .alert-danger {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}

/* ========================================
   DIVIDERS Y BORDES
   ======================================== */
html[data-theme="light"] hr,
html[data-theme="light"] .divider,
html[data-theme="light"] .linea {
  border-color: rgba(3, 63, 119, 0.15) !important;
}

html[data-theme="light"] .line {
  background: rgba(3, 63, 119, 0.1) !important;
}

/* ========================================
   MISCELLANEOUS
   ======================================== */
html[data-theme="light"] .bg-light {
  background-color: #f0f5f9 !important;
}

html[data-theme="light"] .bg-white {
  background-color: #ffffff !important;
}

html[data-theme="light"] .text-dark {
  color: #0f172a !important;
}

html[data-theme="light"] .text-light {
  color: #334155 !important;
}

html[data-theme="light"] .text-muted {
  color: #64748b !important;
}

html[data-theme="light"] .shadow,
html[data-theme="light"] .box-shadow {
  box-shadow: 0 2px 8px rgba(3, 63, 119, 0.08) !important;
}

html[data-theme="light"] .shadow-lg {
  box-shadow: 0 8px 25px rgba(3, 63, 119, 0.12) !important;
}

html[data-theme="light"] .shadow-sm {
  box-shadow: 0 1px 4px rgba(3, 63, 119, 0.06) !important;
}

/* ========================================
   ESPECIALES
   ======================================== */
html[data-theme="light"] .titulos_premium {
  color: #0f172a !important;
}

html[data-theme="light"] .desc_premium {
  color: #334155 !important;
}

html[data-theme="light"] .desc_premium span {
  color: #1AA8E1 !important;
}

html[data-theme="light"] .ie-panel {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Asegurar que el fondo se vea en todas partes */
html[data-theme="light"] section {
  background-color: transparent !important;
}

html[data-theme="light"] .container,
html[data-theme="light"] .container-fluid {
  color: #0f172a !important;
}

/* === RESPONSIVIDAD MEJORADA PARA HEADER === */
@media (max-width: 991px) {
  html[data-theme="light"] .top-bar-right {
    padding: 8px 15px;
  }
  html[data-theme="light"] .top-text-ref {
    font-size: 12px;
  }
  html[data-theme="light"] .item-top i {
    font-size: 14px;
  }

}

/* icons in the blue header row should be white, not the default grey */
html[data-theme="light"] .top-bar-right .item-top i {
  color: #ffffff !important;
}

@media (max-width: 768px) {
  html[data-theme="light"] .rd-navbar-aside-outer {
    display: none; /* Ocultar top-bar en tablets y móviles para espacio */
  }
  html[data-theme="light"] .rd-navbar-main {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  html[data-theme="light"] .rd-navbar-nav .nav-link {
    font-size: 14px;
    padding: 10px 15px;
  }
}

@media (max-width: 576px) {
  html[data-theme="light"] .rd-navbar-brand img {
    width: 80px;
  }
  html[data-theme="light"] .rd-navbar-nav .nav-link {
    font-size: 12px;
    padding: 8px 10px;
  }
  html[data-theme="light"] .btn-mode-toggle {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}

/* Forzar texto oscuro en detalle de blog en modo claro */
html[data-theme="light"] .post-container,
html[data-theme="light"] .post-container *:not(button):not(input):not(textarea):not(.comment-submit):not(.share-btn),
html[data-theme="light"] .post-main,
html[data-theme="light"] .post-main *:not(button):not(input):not(textarea):not(.comment-submit):not(.share-btn),
html[data-theme="light"] .article-block,
html[data-theme="light"] .article-block *:not(button):not(input):not(textarea):not(.comment-submit):not(.share-btn),
html[data-theme="light"] .content-text,
html[data-theme="light"] .content-text *:not(button):not(input):not(textarea):not(.comment-submit):not(.share-btn),
html[data-theme="light"] .sidebar-title,
html[data-theme="light"] .sidebar-title *,
html[data-theme="light"] .post-category,
html[data-theme="light"] .post-category *,
html[data-theme="light"] .post-title,
html[data-theme="light"] .post-title *,
html[data-theme="light"] .comments-wrapper,
html[data-theme="light"] .comments-wrapper *,
html[data-theme="light"] .comment,
html[data-theme="light"] .comment *,
html[data-theme="light"] .share-btn,
html[data-theme="light"] .share-btn *,
html[data-theme="light"] .text-white,
html[data-theme="light"] .fa-inverse,
html[data-theme="light"] [style*="color:white"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color:#ffffff"],
html[data-theme="light"] [style*="color: #ffffff"] {
  color: #0f172a !important;
  background: transparent !important;
  border-color: rgba(3, 63, 119, 0.12) !important;
}

/* Más especificidad para elementos dentro de content/article/comment */
html[data-theme="light"] .content-text h1,
html[data-theme="light"] .content-text h2,
html[data-theme="light"] .content-text h3,
html[data-theme="light"] .content-text h4,
html[data-theme="light"] .content-text h5,
html[data-theme="light"] .content-text h6,
html[data-theme="light"] .content-text p,
html[data-theme="light"] .content-text li,
html[data-theme="light"] .content-text span,
html[data-theme="light"] .content-text strong,
html[data-theme="light"] .content-text em,
html[data-theme="light"] .content-text blockquote,
html[data-theme="light"] .content-text pre,
html[data-theme="light"] .content-text code {
  color: #0f172a !important;
}

html[data-theme="light"] .article-block h1,
html[data-theme="light"] .article-block h2,
html[data-theme="light"] .article-block h3,
html[data-theme="light"] .article-block h4,
html[data-theme="light"] .article-block h5,
html[data-theme="light"] .article-block h6,
html[data-theme="light"] .article-block p,
html[data-theme="light"] .article-block li,
html[data-theme="light"] .article-block span,
html[data-theme="light"] .article-block strong,
html[data-theme="light"] .article-block em,
html[data-theme="light"] .article-block blockquote,
html[data-theme="light"] .article-block pre,
html[data-theme="light"] .article-block code {
  color: #0f172a !important;
}

html[data-theme="light"] .comment-form,
html[data-theme="light"] .comment-form * {
  color: var(--light-text-primary) !important;
}

/* Placeholders y labels en comment-form */
html[data-theme="light"] .comment-form ::placeholder {
  color: #64748b !important;
}
html[data-theme="light"] .comment-label {
  color: var(--light-text-muted) !important;
}

/* Forzar override de estilos inline con color blanco dentro de estos contenedores */
html[data-theme="light"] .article-block [style*="color:white"],
html[data-theme="light"] .article-block [style*="color: #fff"],
html[data-theme="light"] .content-text [style*="color:white"],
html[data-theme="light"] .content-text [style*="color:#fff"],
html[data-theme="light"] .comment-form [style*="color:white"],
html[data-theme="light"] .comment-form [style*="color:#fff"] {
  color: #0f172a !important;
}

/* Links inside blog detail should have visible color in light mode */
html[data-theme="light"] .content-text a,
html[data-theme="light"] .post-main a,
html[data-theme="light"] .article-block a {
  color: #033F77 !important;
}

/* Protejer botones y botones de compartir para mantener sus estilos */
html[data-theme="light"] .comment-submit,
html[data-theme="light"] .share-btn {
  color: inherit !important;
}

/* Forzar texto oscuro específicamente dentro del sidebar (modo claro) */
html[data-theme="light"] .post-sidebar,
html[data-theme="light"] .post-sidebar *,
html[data-theme="light"] .sidebar-content,
html[data-theme="light"] .sidebar-content * {
  color: var(--light-text-primary) !important;
  background: transparent !important;
  border-color: rgba(3, 63, 119, 0.08) !important;
}

html[data-theme="light"] .sidebar-summary {
  color: var(--light-text-secondary) !important;
}

html[data-theme="light"] .sidebar-title {
  color: var(--light-text-primary) !important;
}

/* Forzar negro en .sidebar-summary cuando está dentro de detalle-curso */
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary,
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: transparent !important;
  text-shadow: none !important;
}


html[data-theme="light"] .post-category {
  color: var(--esin-blue) !important;
  background: rgba(26, 168, 225, 0.08) !important;
  border-color: rgba(26, 168, 225, 0.2) !important;
}

/* Iconos dentro del sidebar */
html[data-theme="light"] .post-sidebar i,
html[data-theme="light"] .post-sidebar .fa {
  color: #0f172a !important;
}

/* Máximo override: Forzar TODO el texto a oscuro en modo claro */
html[data-theme="light"] body,
html[data-theme="light"] body *,
html[data-theme="light"] body *::before,
html[data-theme="light"] body *::after {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important; /* para webkit inputs y controles */
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  border-color: rgba(3, 63, 119, 0.08) !important;
  fill: #0f172a !important;
  stroke: #0f172a !important;
}

/* Excepciones y restauraciones controladas */
html[data-theme="light"] a { color: #033F77 !important; }
html[data-theme="light"] button,
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-primary { color: #ffffff !important; }
html[data-theme="light"] .share-btn { color: #1AA8E1 !important; }
html[data-theme="light"] .fa-inverse { color: #0f172a !important; }
html[data-theme="light"] svg, html[data-theme="light"] svg * { fill: #0f172a !important; stroke: #0f172a !important; color: #0f172a !important; }

/* Override inline color styles comunes e rgba whites */
html[data-theme="light"] [style*="color:white"],
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color:#ffffff"],
html[data-theme="light"] [style*="color: #ffffff"],
html[data-theme="light"] [style*="color: white"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255"],
html[data-theme="light"] [style*="color: rgba(255,255,255"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0."] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Specific forced rules for blog detail elements */
html[data-theme="light"] .post-container .content-text,
html[data-theme="light"] .post-container .content-text *,
html[data-theme="light"] .post-container .article-block,
html[data-theme="light"] .post-container .article-block *,
html[data-theme="light"] .post-container .comment-form,
html[data-theme="light"] .post-container .comment-form *,
html[data-theme="light"] .post-container .post-sidebar,
html[data-theme="light"] .post-container .post-sidebar * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Inputs and textareas inside comment-form */
html[data-theme="light"] .post-container .comment-form input,
html[data-theme="light"] .post-container .comment-form textarea {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: #ffffff !important;
  border-color: rgba(3,63,119,0.12) !important;
}

html[data-theme="light"] .post-container .comment-form ::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* Ensure labels, summary and titles are black */
html[data-theme="light"] .post-container .sidebar-summary,
html[data-theme="light"] .post-container .sidebar-title,
html[data-theme="light"] .post-container .sidebar-date,
html[data-theme="light"] .post-container .sidebar-summary *,
html[data-theme="light"] .post-container .sidebar-title * {
  color: #0f172a !important;
}

/* Links inside post keep accent */
html[data-theme="light"] .post-container a { color: #033F77 !important; }

/* Mantener botones y elementos interactivos visibles */
html[data-theme="light"] .comment-submit,
html[data-theme="light"] .share-btn,
html[data-theme="light"] button,
html[data-theme="light"] .btn { color: inherit !important; }

/* Mantener placeholders legibles global */
html[data-theme="light"] ::placeholder { color: #64748b !important; opacity: 1 !important; }

/* Forzar legibilidad COMPLETA en la vista detalle-blog (modo claro) */
/* Aplicar a TODO el contenedor y sus pseudo-elementos; proteger formularios y controles con reglas específicas */
html[data-theme="light"] .post-container.detalle-blog,
html[data-theme="light"] .post-container.detalle-blog *,
html[data-theme="light"] .post-container.detalle-blog *::before,
html[data-theme="light"] .post-container.detalle-blog *::after {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(3, 63, 119, 0.08) !important;
  fill: #0f172a !important;
  stroke: #0f172a !important;
}

/* Formularios y controles: hacerlos legibles con fondo claro y texto oscuro */
html[data-theme="light"] .post-container.detalle-blog input,
html[data-theme="light"] .post-container.detalle-blog textarea,
html[data-theme="light"] .post-container.detalle-blog select,
html[data-theme="light"] .post-container.detalle-blog button,
html[data-theme="light"] .post-container.detalle-blog .btn {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(3,63,119,0.12) !important;
}

/* Pseudo-elementos y placeholders dentro de detalle-blog */
html[data-theme="light"] .post-container.detalle-blog ::placeholder { color: #64748b !important; opacity: 1 !important; }

/* Forzar legibilidad de SVG y sus elementos */
html[data-theme="light"] .post-container.detalle-blog svg,
html[data-theme="light"] .post-container.detalle-blog svg * {
  fill: #0f172a !important;
  stroke: #0f172a !important;
  color: #0f172a !important;
}

/* Override inline styles que contengan valores de color blanco o propiedades problemáticas dentro de detalle-blog */
html[data-theme="light"] .post-container.detalle-blog [style],
html[data-theme="light"] .post-container.detalle-blog [style*="color"],
html[data-theme="light"] .post-container.detalle-blog [style*="-webkit-text-fill-color"],
html[data-theme="light"] .post-container.detalle-blog [style*="opacity"],
html[data-theme="light"] .post-container.detalle-blog [style*="text-shadow"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* Restaurar colores originales de componentes dentro de detalle-blog (modo claro) */
html[data-theme="light"] .post-container.detalle-blog a { color: #033F77 !important; }
/* Forzar 'Curso' en sidebar a negro en modo claro */
html[data-theme="light"] .post-container.detalle-blog .post-category { color: #0f172a !important; background: rgba(26, 168, 225, 0.1) !important; border-color: rgba(26, 168, 225, 0.3) !important; }
html[data-theme="light"] .post-container.detalle-blog .btn,
html[data-theme="light"] .post-container.detalle-blog .btn-primary { color: #ffffff !important; }
html[data-theme="light"] .post-container.detalle-blog .share-btn { color: #1AA8E1 !important; }
html[data-theme="light"] .post-container.detalle-blog .sidebar-title { color: var(--light-text-primary) !important; }
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary { color: var(--light-text-secondary) !important; background: linear-gradient(135deg, rgba(26, 168, 225, 0.05), rgba(3, 63, 119, 0.03)) !important; border-left: 4px solid #1AA8E1 !important; box-shadow: 0 2px 8px rgba(26, 168, 225, 0.08) !important; }
html[data-theme="light"] .post-container.detalle-blog i, html[data-theme="light"] .post-container.detalle-blog .fa { color: #0f172a !important; }
html[data-theme="light"] .post-container.detalle-blog svg, html[data-theme="light"] .post-container.detalle-blog svg * { fill: inherit !important; stroke: inherit !important; }

/* Títulos grandes (subtítulos) que aparecen en detalle-curso: usar color IPERC */
html[data-theme="light"] .post-container.detalle-blog .article-title,
html[data-theme="light"] .post-container.detalle-blog .article-block h2,
html[data-theme="light"] .post-container.detalle-blog .article-block h3 {
  color: #033F77 !important;
  -webkit-text-fill-color: #033F77 !important;
}


/* Override inline whites dentro de detalle-blog */
html[data-theme="light"] .post-container.detalle-blog [style*="color:white"],
html[data-theme="light"] .post-container.detalle-blog [style*="color: #fff"],
html[data-theme="light"] .post-container.detalle-blog [style*="color:#fff"],
html[data-theme="light"] .post-container.detalle-blog [style*="color:#ffffff"],
html[data-theme="light"] .post-container.detalle-blog [style*="color: #ffffff"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Mantener enlaces con acento */
html[data-theme="light"] .post-container.detalle-blog a { color: #033F77 !important; }

/* Forzar color negro para .content-text solo en detalle-blog (modo claro) */
/* Alta especificidad y override para estilos inline/propiedades problemáticas */
html[data-theme="light"] .post-container.detalle-blog .content-text,
html[data-theme="light"] .post-container.detalle-blog .content-text *,
html[data-theme="light"] .post-container.detalle-blog .content-text h1,
html[data-theme="light"] .post-container.detalle-blog .content-text h2,
html[data-theme="light"] .post-container.detalle-blog .content-text h3,
html[data-theme="light"] .post-container.detalle-blog .content-text h4,
html[data-theme="light"] .post-container.detalle-blog .content-text h5,
html[data-theme="light"] .post-container.detalle-blog .content-text h6 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

/* Overrides para elementos con atributo style (inline) dentro de content-text */
html[data-theme="light"] .post-container.detalle-blog .content-text [style],
html[data-theme="light"] .post-container.detalle-blog .content-text [style*="color"],
html[data-theme="light"] .post-container.detalle-blog .content-text [style*="opacity"],
html[data-theme="light"] .post-container.detalle-blog .content-text [style*="-webkit-text-fill-color"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* Clase auxiliar que utilizaremos desde el JS si es necesario */
html[data-theme="light"] .post-container.detalle-blog .detalle-blog-ensure-readable,
html[data-theme="light"] .post-container.detalle-blog .detalle-blog-ensure-readable * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* AGREGADO: bordes para contenedores de contenido dentro de detalle-blog y para la imagen principal */
html[data-theme="light"] .post-container.detalle-blog .content-text > p,
html[data-theme="light"] .post-container.detalle-blog .content-text .wp-block,
html[data-theme="light"] .post-container.detalle-blog .content-text .wp-block-group,
html[data-theme="light"] .post-container.detalle-blog .content-text .wp-block-cover {
  border: 2px solid rgba(3,63,119,0.12) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(3,63,119,0.04) !important;
}

/* Imagen principal / primera imagen dentro del contenido */
html[data-theme="light"] .post-container.detalle-blog .featured-img-wrapper img,
html[data-theme="light"] .post-container.detalle-blog .content-text img:first-of-type {
  border: 3px solid rgba(3,63,119,0.14) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(3,63,119,0.06) !important;
}

/* Asegurar estilo del wrapper de la imagen principal */
html[data-theme="light"] .post-container.detalle-blog .featured-img-wrapper {
  border: 2px solid rgba(3,63,119,0.12) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(3,63,119,0.06) !important;
  overflow: hidden !important;
}

html[data-theme="light"] .post-container.detalle-blog .featured-img-wrapper img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}

/* Forzar y sanear específicamente los .sidebar-summary dentro de detalle-blog (modo claro) */
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary,
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary *,
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary [style],
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary [style*="color"],
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary [style*="-webkit-text-fill-color"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* -------------------------------------------------- */
/* REPARACIÓN: Restaurar estilos destacados para la   */
/* sección Conversación (detalle-blog) en modo claro.  */
/* Esto anula reglas globales que limpiaron los fondos. */
/* -------------------------------------------------- */
html[data-theme="light"] .post-container.detalle-blog .comment {
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 2px solid rgba(26, 168, 225, 0.15) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 16px rgba(26,168,225,0.10) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #1AA8E1, #033F77) !important;
  border-radius: 16px 16px 0 0 !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-avatar {
  background: linear-gradient(135deg, rgba(26,168,225,1) 0%, rgba(3,63,119,1) 100%) !important;
  color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important; /* esconder cualquier contenido cuadrado dentro */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  background-origin: border-box !important;
  -webkit-mask-image: radial-gradient(circle,#000 100%) !important; /* forzar máscara circular */
  mask-image: radial-gradient(circle,#000 100%) !important; /* forzar máscara circular */
}

/* Asegurar que imágenes o elementos internos no muestren fondo cuadrado */
html[data-theme="light"] .post-container.detalle-blog .comment-avatar img,
html[data-theme="light"] .post-container.detalle-blog .comment-avatar * {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 50% !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Si hay pseudo-elementos, hacerlos transparentes */
html[data-theme="light"] .post-container.detalle-blog .comment-avatar::before,
html[data-theme="light"] .post-container.detalle-blog .comment-avatar::after {
  background: transparent !important;
  content: none !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-author-name {
  color: var(--light-text-primary) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-text {
  color: var(--light-text-secondary) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-date {
  color: var(--light-text-muted) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-submit {
  background: linear-gradient(135deg, rgba(26,168,225,1), rgba(3,63,119,1)) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(26,168,225,0.22) !important;
}

/* Asegurar que inputs dentro del bloque mantengan fondo claro y borde visible */
html[data-theme="light"] .post-container.detalle-blog .comment-input,
html[data-theme="light"] .post-container.detalle-blog .comment-textarea {
  background: var(--light-bg-secondary) !important;
  border: 1px solid var(--light-border) !important;
  color: var(--light-text-primary) !important;
}

/* ------------------------- */
/* FORZAR NEGRO EN DETALLE-CURSO */
/* ------------------------- */
/* Alta especificidad para anular estilos en línea o reglas locales que aún fijan color blanco */
html[data-theme="light"] .post-container.detalle-blog .article-title,
html[data-theme="light"] .post-container.detalle-blog .article-content,
html[data-theme="light"] .post-container.detalle-blog .article-block,
html[data-theme="light"] .post-container.detalle-blog .article-block *,
html[data-theme="light"] .post-container.detalle-blog .article-content *,
html[data-theme="light"] .post-container.detalle-blog .post-main *,
html[data-theme="light"] .post-container.detalle-blog .content-area * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Forzar h5/h6 dentro de filas de info (precio, duración, etc.) */
html[data-theme="light"] .post-container.detalle-blog .article-block .row h5,
html[data-theme="light"] .post-container.detalle-blog .article-block .row h6,
html[data-theme="light"] .post-container.detalle-blog .article-block .row .col h5,
html[data-theme="light"] .post-container.detalle-blog .article-block .row .col h6 {
  color: #0f172a !important;
}

/* Forzar elementos con estilos inline de color blanco a negro */
html[data-theme="light"] .post-container.detalle-blog [style*="color:white"],
html[data-theme="light"] .post-container.detalle-blog [style*="color: #fff"],
html[data-theme="light"] .post-container.detalle-blog [style*="color:#fff"],
html[data-theme="light"] .post-container.detalle-blog [style*="color:#ffffff"],
html[data-theme="light"] .post-container.detalle-blog [style*="color: #ffffff"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Forzar que botones y bloques como #btn_comprar y #clock muestren texto oscuro (si es necesario, mantener fondo) */
html[data-theme="light"] .post-container.detalle-blog #btn_comprar,
html[data-theme="light"] .post-container.detalle-blog #btn_comprar *,
html[data-theme="light"] .post-container.detalle-blog #clock,
html[data-theme="light"] .post-container.detalle-blog #clock * {
  color: #0f172a !important;
}

/* Nota: Si usas inline styles con !important (ej. style="color:white !important") avísame para limpiarlos desde la plantilla */


/* Forzar color oscuro en títulos y textos de 'Información del Curso' (modo claro) */
html[data-theme="light"] .post-container.detalle-blog .article-block h1,
html[data-theme="light"] .post-container.detalle-blog .article-block h2,
html[data-theme="light"] .post-container.detalle-blog .article-block h3,
html[data-theme="light"] .post-container.detalle-blog .article-block h4,
html[data-theme="light"] .post-container.detalle-blog .article-block h5,
html[data-theme="light"] .post-container.detalle-blog .article-block h6,
html[data-theme="light"] .post-container.detalle-blog .article-block p,
html[data-theme="light"] .post-container.detalle-blog .article-block .row h5,
html[data-theme="light"] .post-container.detalle-blog .article-block .row h6,
html[data-theme="light"] .post-container.detalle-blog .article-block .row .col h5,
html[data-theme="light"] .post-container.detalle-blog .article-block .row .col h6 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}


/* Mantener contenedores que usan gradientes/cover visibles */
html[data-theme="light"] .post-container.detalle-blog .wp-block-cover,
html[data-theme="light"] .post-container.detalle-blog .cover-image,
html[data-theme="light"] .post-container.detalle-blog .hero {
  /* background-image was being removed in light mode which hides hero/cover images — preserve image and only adjust color/overlay */
  background-color: transparent !important;
} 

/* -------------------------------------------------- */
/* ADICION: Aplicar tonos cian suaves a TODOS los      */
/* contenedores/tarjetas/inputs dentro de Conversación */
/* para modo claro (modo claro+).                     */
/* -------------------------------------------------- */
html[data-theme="light"] .post-container.detalle-blog .comments-wrapper {
  padding: 28px !important;
  background: transparent !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-form {
  background: linear-gradient(180deg, rgba(26,168,225,0.03), rgba(3,63,119,0.01)) !important;
  border: 1px solid rgba(26,168,225,0.10) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 6px 18px rgba(26,168,225,0.06) !important;
}

/* -------------------------------------------------- */
/* REPARACIÓN: Restaurar fondos y efectos translúcidos */
/* en detalle-curso (modo claro).                     */
/* -------------------------------------------------- */
html[data-theme="light"] .post-container.detalle-blog .article-block,
html[data-theme="light"] .post-container.detalle-blog .post-main,
html[data-theme="light"] .post-container.detalle-blog .post-sidebar,
html[data-theme="light"] .post-container.detalle-blog .content-area {
  /* fondo cian muy suave y translúcido */
  background: linear-gradient(135deg, rgba(26,168,225,0.04) 0%, rgba(255,255,255,0.60) 100%) !important;
  border: 1px solid rgba(3,63,119,0.06) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  box-shadow: 0 8px 24px rgba(26,168,225,0.06) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Restaurar fondos de componentes inline como #clock y #btn_comprar con cian bajito */
html[data-theme="light"] .post-container.detalle-blog #clock,
html[data-theme="light"] .post-container.detalle-blog #btn_comprar > div,
html[data-theme="light"] .post-container.detalle-blog #btn_comprar div {
  background: linear-gradient(135deg, rgba(26,168,225,0.90) 0%, rgba(26,168,225,0.70) 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(26,168,225,0.10) !important;
  padding: 8px !important;
}

/* Asegurar contraste de texto interno */
html[data-theme="light"] .post-container.detalle-blog #clock span,
html[data-theme="light"] .post-container.detalle-blog #clock small {
  color: #ffffff !important;
}


/* Asegurar texto blanco en botones y contador */
html[data-theme="light"] .post-container.detalle-blog #btn_comprar a,
html[data-theme="light"] .post-container.detalle-blog #btn_comprar h5,
html[data-theme="light"] .post-container.detalle-blog #clock h5 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Nota: reglas globales forzaban 'background: transparent !important' en elementos con style inline.
   Para elementos genéricos con fondo inline recomendamos migrarlos a clases CSS. Si necesitas, puedo
   reemplazar los inline styles de los bloques #clock y #btn_comprar por clases en la plantilla PHP.
*/

html[data-theme="light"] .post-container.detalle-blog .comment-input-group {
  margin-bottom: 14px !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-input,
html[data-theme="light"] .post-container.detalle-blog .comment-textarea {
  background: rgba(26,168,225,0.04) !important; /* sutil cian */
  border: 1px solid rgba(26,168,225,0.14) !important;
  color: var(--light-text-primary) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-input:focus,
html[data-theme="light"] .post-container.detalle-blog .comment-textarea:focus {
  outline: none !important;
  border-color: rgba(26,168,225,0.28) !important;
  box-shadow: 0 0 0 6px rgba(26,168,225,0.06) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-submit {
  background: linear-gradient(135deg, rgba(26,168,225,1), rgba(3,63,119,1)) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 22px rgba(26,168,225,0.18) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-submit:hover {
  transform: translateY(-2px) !important;
}

/* -------------------------------------------------- */
/* SEPARADOR: Alinear visualmente la sección siguiente */
/* en modo claro para que se note la separación igual */
/* que en modo oscuro (fondo cian bajito/translúcido). */
/* -------------------------------------------------- */
html[data-theme="light"] .post-container.detalle-blog + section[data-theme-section],
html[data-theme="light"] .post-container.detalle-blog ~ section[data-theme-section],
html[data-theme="light"] section.section-md.bg-gray-lighten[data-theme-section] {
  background: linear-gradient(180deg, rgba(26,168,225,0.04) 0%, rgba(255,255,255,0.98) 100%) !important;
  border-top: 1px solid rgba(26,168,225,0.08) !important;
  box-shadow: inset 0 8px 24px rgba(26,168,225,0.02) !important;
  color: #0f172a !important;
}

/* Ajuste de padding si el inline style lo fuerza */
html[data-theme="light"] section.section-md.bg-gray-lighten[data-theme-section] {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Estilo de cada comentario (tarjeta) con sutil cian */
html[data-theme="light"] .post-container.detalle-blog .comments-list .comment {
  background: linear-gradient(165deg, #ffffff 0%, #f6fdff 100%) !important;
  border: 1px solid rgba(26,168,225,0.10) !important;
  box-shadow: 0 6px 18px rgba(26,168,225,0.05) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comments-list .comment::before {
  background: linear-gradient(90deg, rgba(26,168,225,1), rgba(3,63,119,1)) !important;
}

/* Avatar y metadatos */
html[data-theme="light"] .post-container.detalle-blog .comment-avatar {
  background: linear-gradient(135deg, rgba(26,168,225,1), rgba(3,63,119,1)) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-author-name {
  color: var(--light-text-primary) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-text {
  color: var(--light-text-secondary) !important;
}

html[data-theme="light"] .post-container.detalle-blog .comment-date {
  color: var(--light-text-muted) !important;
}

/* Detalles: mantener enlaces con acento cyan */
html[data-theme="light"] .post-container.detalle-blog .comment a { color: #033F77 !important; }

/* -------------------------------------------------- */
/* FORZAR MODO CLARO+ (ID #conversacion)              */
/* Reglas con mayor especificidad para asegurar que   */
/* todos los contenedores/tarjetas/inputs luzcan cian  */
/* suaves aun si hay otras reglas que intenten limpiar */
/* -------------------------------------------------- */
html[data-theme="light"] #conversacion {
  background: transparent !important;
  padding: 20px !important;
}

/* Subtítulos dentro de la sección Conversación */
html[data-theme="light"] #conversacion .comments-title {
  color: #033F77 !important;
}

/* Forzar color de `.sidebar-title` dentro de la sección Conversación */
html[data-theme="light"] #conversacion .sidebar-title {
  color: #033F77 !important;
}


html[data-theme="light"] #conversacion .comments-wrapper,
html[data-theme="light"] #conversacion .comments-list,
html[data-theme="light"] #conversacion .comment-form {
  background: linear-gradient(180deg, rgba(26,168,225,0.04) 0%, rgba(255,255,255,0.00) 100%) !important;
  border: 1px solid rgba(26,168,225,0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(26,168,225,0.06) !important;
}

html[data-theme="light"] #conversacion .comment {
  background: linear-gradient(165deg, #ffffff 0%, #f3fcff 100%) !important;
  border: 1px solid rgba(26,168,225,0.12) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 6px 18px rgba(26,168,225,0.04) !important;
  position: relative !important;
}

html[data-theme="light"] #conversacion .comment::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, rgba(26,168,225,1), rgba(3,63,119,1)) !important;
  border-radius: 14px 14px 0 0 !important;
}

/* Quitar línea superior en sección Conversación (modo claro) */
html[data-theme="light"] #conversacion .comment::before,
html[data-theme="light"] #conversacion .comment-form::before,
html[data-theme="light"] #conversacion .comments-wrapper::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  background: none !important;
}


html[data-theme="light"] #conversacion .comment-avatar {
  background: linear-gradient(135deg, rgba(26,168,225,1), rgba(3,63,119,1)) !important;
  color: #fff !important;
  border: 2px solid rgba(26,168,225,0.12) !important;
}

html[data-theme="light"] #conversacion .comment-input,
html[data-theme="light"] #conversacion .comment-textarea {
  background: rgba(26,168,225,0.04) !important;
  border: 1px solid rgba(26,168,225,0.18) !important;
  color: var(--light-text-primary) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}

html[data-theme="light"] #conversacion .comment-input::placeholder,
html[data-theme="light"] #conversacion .comment-textarea::placeholder {
  color: #6b7b87 !important;
}

html[data-theme="light"] #conversacion .comment-input:focus,
html[data-theme="light"] #conversacion .comment-textarea:focus {
  outline: none !important;
  border-color: rgba(26,168,225,0.32) !important;
  box-shadow: 0 0 0 8px rgba(26,168,225,0.06) !important;
}

html[data-theme="light"] #conversacion .comment-submit {
  background: linear-gradient(135deg, rgba(26,168,225,1), rgba(3,63,119,1)) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(26,168,225,0.18) !important;
}

/* Activar visibilidad incluso si hay estilos inline que oculten el fondo */
html[data-theme="light"] #conversacion [style*="background"],
html[data-theme="light"] #conversacion [style*="background-image"],
html[data-theme="light"] #conversacion [style*="background-color"] {
  /* preserve inline/background-image; only neutralize intrusive colors */
  background-color: transparent !important;
} 

/* CORRECTIVO: eliminar artefactos en esquinas dentro de la caja de comentario */
html[data-theme="light"] #conversacion .comment-form,
html[data-theme="light"] #conversacion .comment,
html[data-theme="light"] #conversacion .comment-input,
html[data-theme="light"] #conversacion .comment-textarea {
  overflow: hidden !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Evitar pseudo-elementos en la esquina que generen cuadrados */
html[data-theme="light"] #conversacion .comment-form::before,
html[data-theme="light"] #conversacion .comment-form::after,
html[data-theme="light"] #conversacion .comment::before,
html[data-theme="light"] #conversacion .comment::after,
html[data-theme="light"] #conversacion .comment-input::before,
html[data-theme="light"] #conversacion .comment-input::after,
html[data-theme="light"] #conversacion .comment-textarea::before,
html[data-theme="light"] #conversacion .comment-textarea::after {
  content: none !important;
  display: none !important;
}

/* Forzar esquina redondeada limpia y clip para inputs y textarea */
html[data-theme="light"] #conversacion .comment-input,
html[data-theme="light"] #conversacion .comment-textarea {
  border-radius: 10px !important;
}

/* Eliminar control de redimensionamiento y el 'grip' diagonal en la esquina */
html[data-theme="light"] #conversacion .comment-textarea {
  resize: none !important; /* evita el control en browsers */
}
html[data-theme="light"] #conversacion .comment-textarea::-webkit-resizer {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html[data-theme="light"] #conversacion .comment-textarea::-moz-resizer {
  display: none !important;
}



/* -------------------------------------------------- */
/* ADICION: Overrides adicionales para atrapar elementos   */
/* que aún mantengan fondos/colores blancos o filtros    */
/* dentro de `detalle-blog` (incluye inline styles y    */
/* pseudo-elementos). Mantiene acentos y botones.      */
/* -------------------------------------------------- */
html[data-theme="light"] .post-container.detalle-blog,
html[data-theme="light"] .post-container.detalle-blog *,
html[data-theme="light"] .post-container.detalle-blog *::before,
html[data-theme="light"] .post-container.detalle-blog *::after {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: transparent !important;
  background-color: transparent !important;
  /* important: preserve background-image for covers/heroes — specific problematic removals were causing images to disappear */
  border-color: rgba(3,63,119,0.08) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  fill: #0f172a !important;
  stroke: #0f172a !important;
} 

/* Forzar eliminación de gradientes/imágenes de fondo inline */
html[data-theme="light"] .post-container.detalle-blog [style*="background"],
html[data-theme="light"] .post-container.detalle-blog [style*="background-image"],
html[data-theme="light"] .post-container.detalle-blog [style*="background-color"] {
  /* preserve inline/background-image in detalle-blog (was removing hero/cover images); only neutralize intrusive colors */
  background-color: transparent !important;
}

/* Mantener acentos y botones visibles (no sobreescribir) */
html[data-theme="light"] .post-container.detalle-blog a,
html[data-theme="light"] .post-container.detalle-blog .post-category,
html[data-theme="light"] .post-container.detalle-blog .btn,
html[data-theme="light"] .post-container.detalle-blog .btn-primary,
html[data-theme="light"] .post-container.detalle-blog .share-btn {
  color: inherit !important;
  background: inherit !important;
}

/* Asegurar visibles en MODO CLARO: forzar negro en elementos específicos sin afectar MODO OSCURO */
html[data-theme="light"], html[data-theme="light"].light-mode {
  /* Campos de info (Inicio, Duración, Inversión, Precio) */
  --detalle-info-color: #0f172a !important;
}

html[data-theme="light"] .post-container.detalle-blog .post-category,
html[data-theme="light"] .post-container.detalle-blog .sidebar-summary,
html[data-theme="light"] .post-container.detalle-blog .sidebar-date span,
html[data-theme="light"] .post-container.detalle-blog .article-block .row h5,
html[data-theme="light"] .post-container.detalle-blog .article-block .row h6,
html[data-theme="light"] .post-container.detalle-blog .article-block .row .col h5,
html[data-theme="light"] .post-container.detalle-blog #clock,
html[data-theme="light"] .post-container.detalle-blog #clock *,
html[data-theme="light"] .post-container.detalle-blog .post-main .article-block .row h5,
html[data-theme="light"] .post-container.detalle-blog .post-main .article-block .row h6 {
  color: #0f172a !important; /* negro en modo claro */
  -webkit-text-fill-color: #0f172a !important;
}

/* Excepción: mantener el botón Comprar con su color de texto blanco sobre fondo cyan */
html[data-theme="light"] .post-container.detalle-blog #btn_comprar, html[data-theme="light"] .post-container.detalle-blog #btn_comprar * {
  color: inherit !important;
}

/* Si algún elemento trae inline style color:white, nuestra regla lo anula (si no tiene !important inline) */
html[data-theme="light"] .post-container.detalle-blog [style*="color:white"],
html[data-theme="light"] .post-container.detalle-blog [style*="color: #fff"],
html[data-theme="light"] .post-container.detalle-blog [style*="color:#fff"] {
  color: #0f172a !important;
}


/* Atrapando componentes comunes (Gutenberg / Page builders) */
html[data-theme="light"] .post-container.detalle-blog .wp-block-cover,
html[data-theme="light"] .post-container.detalle-blog .wp-block-media-text,
html[data-theme="light"] .post-container.detalle-blog .cover-image,
html[data-theme="light"] .post-container.detalle-blog .hero,
html[data-theme="light"] .post-container.detalle-blog .fancybox-viewport {
  /* preserve background-image for page-builder covers and hero blocks */
  background-color: transparent !important;
} 

/* Inputs/textarea específicos dentro de detalle-blog */
html[data-theme="light"] .post-container.detalle-blog input,
html[data-theme="light"] .post-container.detalle-blog textarea,
html[data-theme="light"] .post-container.detalle-blog select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(3,63,119,0.12) !important;
}

/* CORRECTIVO ADICIONAL: eliminar cualquier línea superior (pseudo-elemento) */
/* que quede en los comentarios dentro de detalle-blog en modo claro. */
html[data-theme="light"] .post-container.detalle-blog .comment::before,
html[data-theme="light"] .post-container.detalle-blog .comments-list .comment::before,
html[data-theme="light"] .post-container.detalle-blog .comment-form::before,
html[data-theme="light"] .post-container.detalle-blog .comments-wrapper::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  background: none !important;
}

/* ========================================
   FIN DEL TEMA CLARO UNIVERSAL
   ======================================== */

/* OVERRIDE GLOBAL: ocultar pseudo-elementos ::before en comentarios (modo claro)
  Esto asegura que no quede la línea superior en ningún .comment en light mode. */
html[data-theme="light"] .comment::before,
html[data-theme="light"] .comment-form::before,
html[data-theme="light"] .comments-wrapper::before,
html[data-theme="light"] .comments-list::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  background: none !important;
}

/* ELIMINAR BORDE SUPERIOR/GRADIENTE EN EL CONTENEDOR DE CONVERSACIÓN */
html[data-theme="light"] #conversacion,
html[data-theme="light"] #conversacion .comments-wrapper,
html[data-theme="light"] #conversacion .comments-list,
html[data-theme="light"] #conversacion .comment-form,
html[data-theme="light"] #conversacion .comments-list .comment {
  background: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border: 1px solid rgba(3,63,119,0.06) !important; /* borde delgado por defecto */
  box-shadow: none !important;
}

/* Asegurar bordes delgados (delgados = 1px) y sutiles en conversaciones y comentarios */
html[data-theme="light"] section#conversacion,
html[data-theme="light"] #conversacion,
html[data-theme="light"] #conversacion .comments-wrapper,
html[data-theme="light"] #conversacion .comments-list,
html[data-theme="light"] #conversacion .comment-form,
html[data-theme="light"] #conversacion .comments-list .comment,
html[data-theme="light"] .post-container.detalle-blog .comment {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(3,63,119,0.06) !important; /* tono sutil */
  box-shadow: 0 2px 6px rgba(3,63,119,0.03) !important; /* sombra muy sutil */
  background: #ffffff !important;
}

/* Reducir cualquier regla previa que use 2px ó 4px */
html[data-theme="light"] .post-container.detalle-blog .comment[style],
html[data-theme="light"] .post-container.detalle-blog .comment {
  border: 1px solid rgba(3,63,119,0.06) !important;
}

/* Target explicit section element and any descendant pseudo-elements */
html[data-theme="light"] section#conversacion.comments-wrapper,
html[data-theme="light"] section#conversacion.comments-wrapper::before,
html[data-theme="light"] section#conversacion.comments-wrapper ::before,
html[data-theme="light"] section#conversacion.comments-wrapper::after,
html[data-theme="light"] section#conversacion.comments-wrapper *::before,
html[data-theme="light"] section#conversacion.comments-wrapper *::after {
  background: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border: none !important;
  box-shadow: none !important;
  display: none !important;
  content: none !important;
  height: 0 !important;
}

/* BORDE VISIBLE EN EL WRAPPER Y EN CADA COMENTARIO (delgado y sutil) */
html[data-theme="light"] section#conversacion.comments-wrapper,
html[data-theme="light"] #conversacion .comments-wrapper {
  border: 2px solid rgba(3,63,119,0.08) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  background: #ffffff !important;
}

html[data-theme="light"] #conversacion .comments-list .comment,
html[data-theme="light"] .post-container.detalle-blog .comments-list .comment {
  border: 2px solid rgba(3,63,119,0.10) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(3,63,119,0.04) !important;
}

/* BLOQUE FINAL: máxima especificidad para ocultar líneas superiores y forzar bordes visibles */
html[data-theme="light"] [id="conversacion"],
html[data-theme="light"] [id='conversacion'],
html[data-theme="light"] #conversacion,
html[data-theme="light"] section[id="conversacion"],
html[data-theme="light"] section#conversacion,
html[data-theme="light"] .comments-wrapper,
html[data-theme="light"] .comments-list {
  border: 2px solid rgba(3,63,119,0.12) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 8px rgba(3,63,119,0.05) !important;
}

html[data-theme="light"] [id="conversacion"]::before,
html[data-theme="light"] [id='conversacion']::before,
html[data-theme="light"] section#conversacion::before,
html[data-theme="light"] section#conversacion.comments-wrapper::before,
html[data-theme="light"] #conversacion::before,
html[data-theme="light"] .comments-wrapper::before,
html[data-theme="light"] .comments-list::before,
html[data-theme="light"] .comment::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  background: none !important;
  border: none !important;
}

/* Forzar borde en cada comentario individual */
html[data-theme="light"] .comments-list .comment,
html[data-theme="light"] #conversacion .comments-list .comment {
  border: 2px solid rgba(3,63,119,0.12) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(3,63,119,0.04) !important;
}

/* -------------------------------------------------- */
/* ANIMACIÓN: Transición elegante 3D para menú lateral */
/* Se aplica sólo cuando aparece (no se modifica nada más)
   - Móvil: .mobile-menu-overlay.active .mobile-menu-content
   - Escritorio: .rd-navbar-sidebar .rd-navbar-nav-wrap.active */
/* -------------------------------------------------- */

/* Overlay base: suavizar fondo y blur */
.mobile-menu-overlay {
  transition: background 360ms ease, opacity 360ms ease;
  backdrop-filter: blur(3px);
}

.mobile-menu-overlay .mobile-menu-content {
  transform: perspective(800px) translateX(18px) rotateY(-8deg) scale(0.995);
  opacity: 0;
  transform-origin: left center;
  transition: transform 480ms cubic-bezier(.2,.9,.25,1), opacity 360ms ease, box-shadow 480ms ease;
  will-change: transform, opacity;
  box-shadow: 0 10px 30px rgba(3,63,119,0.06);
  border-radius: 12px;
}

/* Estado activo: elemento aparece con efecto 3D y sombra más marcada */
.mobile-menu-overlay.active {
  background: rgba(6,11,19,0.6);
}

.mobile-menu-overlay.active .mobile-menu-content {
  transform: perspective(800px) translateX(0) rotateY(0) scale(1);
  opacity: 1;
  box-shadow: 0 30px 90px rgba(3,63,119,0.18);
}

/* Sidebar (escritorio): aparición lateral con profundidad */
.rd-navbar-sidebar .rd-navbar-nav-wrap {
  transform: perspective(1000px) translateX(-18px) rotateY(6deg) scale(0.995) !important;
  opacity: 0 !important;
  transition: transform 520ms cubic-bezier(.2,.9,.25,1) !important, opacity 360ms ease !important, box-shadow 520ms ease !important;
  will-change: transform, opacity;
}

/* Forzar aplicación incluso si clones o reglas posteriores existen */
.rd-navbar--is-clone .rd-navbar-nav-wrap,
.rd-navbar--is-clone .rd-navbar-nav-wrap.active,
.rd-navbar-sidebar .rd-navbar-nav-wrap,
.rd-navbar-sidebar .rd-navbar-nav-wrap.active {
  transform-origin: left center !important;
}

.rd-navbar-sidebar .rd-navbar-nav-wrap.active {
  transform: perspective(1000px) translateX(0) rotateY(0) scale(1) !important;
  opacity: 1 !important;
  box-shadow: 0 30px 90px rgba(3,63,119,0.12) !important;
}

/* Asegurar transiciones de sub-items (deslizamiento elegante, HORIZONTAL) */
.rd-navbar-sidebar .rd-navbar-dropdown,
.rd-navbar-sidebar .rd-navbar-megamenu {
  transition: transform 360ms cubic-bezier(.2,.9,.25,1) !important, opacity 260ms ease !important;
  transform-origin: top left !important;
  opacity: 0 !important;
  transform: translateX(-12px) !important;
  pointer-events: none !important;
}

.rd-navbar-sidebar .rd-navbar-submenu.opened > .rd-navbar-dropdown,
.rd-navbar-sidebar .rd-navbar-submenu:hover > .rd-navbar-dropdown {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Animar los items internos del dropdown horizontalmente y escalonarlos */
.rd-navbar-sidebar .rd-navbar-dropdown li {
  transform: translateX(-10px) !important;
  opacity: 0 !important;
  transition: transform 320ms cubic-bezier(.2,.9,.25,1), opacity 260ms ease !important;
}
.rd-navbar-sidebar .rd-navbar-submenu.opened > .rd-navbar-dropdown li,
.rd-navbar-sidebar .rd-navbar-submenu:hover > .rd-navbar-dropdown li {
  transform: translateX(0) !important;
  opacity: 1 !important;
}
/* Staggered delays for dropdown items */
.rd-navbar-sidebar .rd-navbar-submenu.opened > .rd-navbar-dropdown li:nth-child(1) { transition-delay: 40ms; }
.rd-navbar-sidebar .rd-navbar-submenu.opened > .rd-navbar-dropdown li:nth-child(2) { transition-delay: 80ms; }
.rd-navbar-sidebar .rd-navbar-submenu.opened > .rd-navbar-dropdown li:nth-child(3) { transition-delay: 120ms; }
.rd-navbar-sidebar .rd-navbar-submenu.opened > .rd-navbar-dropdown li:nth-child(4) { transition-delay: 160ms; }
.rd-navbar-sidebar .rd-navbar-submenu.opened > .rd-navbar-dropdown li:nth-child(5) { transition-delay: 200ms; }

/* -------------------------------------------------- */
/* STAGGER: animaciones escalonadas para items del sidebar
   (aparece en orden cuando el sidebar se activa) */
/* -------------------------------------------------- */
.rd-navbar-sidebar .rd-navbar-nav-wrap .rd-nav-item {
  transform: translateX(-6px);
  opacity: 0;
  transition: transform 360ms cubic-bezier(.2,.9,.25,1), opacity 260ms ease;
}

.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item {
  transform: translateX(0);
  opacity: 1;
}

/* Staggered delays */
.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(1) { transition-delay: 40ms; }
.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(2) { transition-delay: 80ms; }
.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(3) { transition-delay: 120ms; }
.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(4) { transition-delay: 160ms; }
.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(5) { transition-delay: 200ms; }
.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(6) { transition-delay: 240ms; }
.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(7) { transition-delay: 280ms; }
.rd-navbar-sidebar .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(8) { transition-delay: 320ms; }

/* Also apply to cloned nav (rd-navbar--is-clone) for consistency */
.rd-navbar--is-clone .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(1) { transition-delay: 40ms; }
.rd-navbar--is-clone .rd-navbar-nav-wrap.active .rd-nav-item:nth-child(2) { transition-delay: 80ms; }

/* Pequeño ajuste: mejorar suavidad en icono del toggle cuando abre */
.rd-navbar-toggle.active span,
.rd-navbar-toggle.active span:before,
.rd-navbar-toggle.active span:after {
  transition: background 280ms ease, transform 280ms cubic-bezier(.2,.9,.25,1);
}