/* ============================================================
   KHALIGULA — CSS Theme-Aware (Dark + Light)
   ============================================================
   Sobrescribe los estilos hardcodeados del cluster grid para que
   usen variables CSS que se adaptan automáticamente al modo
   oscuro (nativo) o claro.

   El modo oscuro es el modo nativo del sitio. El modo claro es
   una alternativa accesible.

   Variables definidas en inc/theme-switcher.php:
     --khl-bg, --khl-bg-2, --khl-bg-3, --khl-text, --khl-text-muted,
     --khl-gold, --khl-gold-light, --khl-border, --khl-shadow, --khl-card-bg
   ============================================================ */

/* ============================================================
   1) VARIABLES ADICIONALES PARA TARJETAS (no definidas en theme-switcher)
   ============================================================ */
:root,
[data-theme="dark"] {
    --khl-card-bg-solid: #14141f;
    --khl-card-bg-hover: #1a1a25;
    --khl-card-border: rgba(212, 175, 55, 0.15);
    --khl-card-border-hover: rgba(212, 175, 55, 0.4);
    --khl-card-shadow: rgba(0, 0, 0, 0.5);
    --khl-card-shadow-hover: rgba(0, 0, 0, 0.6);
    --khl-card-glow: rgba(212, 175, 55, 0.25);
    --khl-image-bg: #0a0a0f;
    --khl-badge-bg: rgba(10, 10, 15, 0.75);
    --khl-fav-bg: rgba(10, 10, 15, 0.75);
    --khl-tarifa-bg: linear-gradient(135deg, #2a1018 0%, #1a0a10 100%);
    --khl-tarifa-border: rgba(232, 85, 111, 0.35);
    --khl-tarifa-label: rgba(232, 85, 111, 0.85);
    --khl-tarifa-value: #fff5f7;
    --khl-edad-bg: rgba(212, 175, 55, 0.08);
    --khl-edad-border: rgba(212, 175, 55, 0.2);
    --khl-edad-text: #e8e8ed;
    --khl-profesion-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.08));
    --khl-profesion-border: rgba(212, 175, 55, 0.4);
    --khl-profesion-text: #f4e4a6;
    --khl-ubicacion-text: #b8b8c0;
    --khl-pillar-bg: transparent;
    --khl-pillar-text: #c8c8d0;
    --khl-pillar-lead: #e8e8ed;
    --khl-faq-bg: rgba(20, 20, 31, 0.6);
    --khl-faq-border: rgba(212, 175, 55, 0.2);
    --khl-faq-q-bg: rgba(212, 175, 55, 0.08);
    --khl-faq-q-text: #f4e4a6;
    --khl-faq-a-text: #c8c8d0;
    --khl-cluster-header-bg: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
    /* H1 dorado fuerte — brillante sobre fondo oscuro */
    --khl-h1-gold: #FFD700;
    --khl-h1-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

[data-theme="light"] {
    --khl-card-bg-solid: #ffffff;
    --khl-card-bg-hover: #fafafa;
    --khl-card-border: rgba(212, 175, 55, 0.25);
    --khl-card-border-hover: rgba(212, 175, 55, 0.6);
    --khl-card-shadow: rgba(0, 0, 0, 0.08);
    --khl-card-shadow-hover: rgba(0, 0, 0, 0.15);
    --khl-card-glow: rgba(212, 175, 55, 0.2);
    --khl-image-bg: #f0f0f0;
    --khl-badge-bg: rgba(255, 255, 255, 0.85);
    --khl-fav-bg: rgba(255, 255, 255, 0.85);
    --khl-tarifa-bg: linear-gradient(135deg, #fdf2f5 0%, #fbe9ee 100%);
    --khl-tarifa-border: rgba(232, 85, 111, 0.4);
    --khl-tarifa-label: #c44560;
    --khl-tarifa-value: #8b1538;
    --khl-edad-bg: rgba(212, 175, 55, 0.12);
    --khl-edad-border: rgba(212, 175, 55, 0.35);
    --khl-edad-text: #3c434a;
    --khl-profesion-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.12));
    --khl-profesion-border: rgba(212, 175, 55, 0.5);
    --khl-profesion-text: #7a5e0a;
    --khl-ubicacion-text: #50575e;
    --khl-pillar-bg: transparent;
    --khl-pillar-text: #3c434a;
    --khl-pillar-lead: #1a1a25;
    --khl-faq-bg: rgba(255, 255, 255, 0.9);
    --khl-faq-border: rgba(212, 175, 55, 0.25);
    --khl-faq-q-bg: rgba(212, 175, 55, 0.1);
    --khl-faq-q-text: #7a5e0a;
    --khl-faq-a-text: #3c434a;
    --khl-cluster-header-bg: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.03));
    /* H1 dorado fuerte — oscuro sobre fondo claro para máximo contraste */
    --khl-h1-gold: #8B6508;
    --khl-h1-shadow: 0 1px 3px rgba(139, 101, 8, 0.2);
}

/* ============================================================
   2) H1 — DORADO FUERTE (visible en ambos modos)
   ============================================================ */
h1.entry-title,
h1.khl-archive-title,
.entry-header h1,
.page-header h1,
h1 {
    color: var(--khl-h1-gold) !important;
    text-shadow: var(--khl-h1-shadow) !important;
}

/* Asegurar que el H1 de las páginas pilares sea dorado */
.entry-title a,
.entry-title a:link,
.entry-title a:visited {
    color: var(--khl-h1-gold) !important;
}

.entry-title a:hover {
    color: var(--khl-gold) !important;
}

/* ============================================================
   3) TARJETA DE MODELO — adaptativa
   ============================================================ */
.khl-card {
    background: var(--khl-card-bg-solid) !important;
    border: 1px solid var(--khl-card-border) !important;
    box-shadow: 0 2px 8px var(--khl-card-shadow) !important;
}

.khl-card:hover {
    box-shadow:
        0 12px 35px var(--khl-card-shadow-hover),
        0 0 30px var(--khl-card-glow) !important;
    border-color: var(--khl-card-border-hover) !important;
}

.khl-card-image-wrapper {
    background: var(--khl-image-bg) !important;
}

/* ============================================================
   3) BADGES FLOTANTES — adaptativos
   ============================================================ */
.khl-badge-valoracion {
    background: var(--khl-badge-bg) !important;
    border: 1px solid var(--khl-card-border) !important;
    color: var(--khl-gold) !important;
}

.khl-card-fav {
    background: var(--khl-fav-bg) !important;
    border: 1px solid var(--khl-card-border) !important;
    color: var(--khl-text-muted) !important;
}

/* ============================================================
   4) INFORMACIÓN INFERIOR — adaptativa
   ============================================================ */
.khl-card-info {
    background: var(--khl-card-bg-solid) !important;
}

.khl-card-name a {
    color: var(--khl-text) !important;
}

.khl-card-name a:hover {
    color: var(--khl-gold) !important;
}

.khl-card-edad-badge {
    background: var(--khl-edad-bg) !important;
    border: 1px solid var(--khl-edad-border) !important;
    color: var(--khl-edad-text) !important;
}

.khl-card-edad {
    color: var(--khl-gold) !important;
}

.khl-edad-icon {
    color: var(--khl-gold) !important;
}

.khl-card-genero-inline {
    color: var(--khl-text-muted) !important;
}

.khl-card-profesion {
    background: var(--khl-profesion-bg) !important;
    border: 1px solid var(--khl-profesion-border) !important;
    color: var(--khl-profesion-text) !important;
}

.khl-card-profesion-more {
    background: rgba(138, 138, 149, 0.15) !important;
    border-color: rgba(138, 138, 149, 0.35) !important;
    color: var(--khl-text-muted) !important;
}

.khl-card-ubicacion {
    color: var(--khl-ubicacion-text) !important;
}

.khl-card-ubicacion-icon {
    color: var(--khl-gold) !important;
}

/* ============================================================
   5) TARIFA — adaptativa (degradado rose premium)
   ============================================================ */
.khl-card-tarifa {
    background: var(--khl-tarifa-bg) !important;
    border: 1px solid var(--khl-tarifa-border) !important;
    box-shadow:
        0 2px 8px var(--khl-card-shadow),
        inset 0 1px 0 rgba(232, 85, 111, 0.15) !important;
}

.khl-card-tarifa-label {
    color: var(--khl-tarifa-label) !important;
}

.khl-card-tarifa-label svg {
    color: var(--khl-tarifa-label) !important;
}

.khl-card-tarifa-value {
    color: var(--khl-tarifa-value) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.khl-card:hover .khl-card-tarifa {
    border-color: var(--khl-tarifa-border) !important;
    box-shadow:
        0 4px 12px rgba(232, 85, 111, 0.2),
        inset 0 1px 0 rgba(232, 85, 111, 0.25) !important;
}

.khl-card:hover .khl-card-tarifa-value {
    color: var(--khl-tarifa-value) !important;
    text-shadow: 0 0 10px rgba(232, 85, 111, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   6) CLUSTER GRID HEADER — adaptativo con alto contraste
   ============================================================
   Colores por nivel que aseguran visibilidad en ambos modos.
   Cada nivel tiene su propio color de acento que se mantiene
   legible sobre fondos claros y oscuros.
   ============================================================ */

/* Variables de colores por nivel (comunes a ambos temas) */
:root,
[data-theme="dark"] {
    --khl-nivel-destacado: #FFD700;
    --khl-nivel-destacado-bg: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.04));
    --khl-nivel-destacado-border: rgba(255,215,0,0.4);
    --khl-nivel-oro: #FFD700;
    --khl-nivel-oro-bg: linear-gradient(135deg, rgba(218,165,32,0.15), rgba(218,165,32,0.04));
    --khl-nivel-oro-border: rgba(218,165,32,0.45);
    --khl-nivel-plata: #C0C0C0;
    --khl-nivel-plata-bg: linear-gradient(135deg, rgba(192,192,192,0.12), rgba(192,192,192,0.03));
    --khl-nivel-plata-border: rgba(192,192,192,0.4);
    --khl-nivel-bronce: #CD7F32;
    --khl-nivel-bronce-bg: linear-gradient(135deg, rgba(205,127,50,0.15), rgba(205,127,50,0.04));
    --khl-nivel-bronce-border: rgba(205,127,50,0.45);
    --khl-nivel-gratis: #b8b8c0;
    --khl-nivel-gratis-bg: linear-gradient(135deg, rgba(138,138,149,0.12), rgba(138,138,149,0.03));
    --khl-nivel-gratis-border: rgba(138,138,149,0.4);
}

[data-theme="light"] {
    --khl-nivel-destacado: #B8860B;
    --khl-nivel-destacado-bg: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,215,0,0.08));
    --khl-nivel-destacado-border: rgba(184,134,11,0.5);
    --khl-nivel-oro: #B8860B;
    --khl-nivel-oro-bg: linear-gradient(135deg, rgba(218,165,32,0.2), rgba(218,165,32,0.06));
    --khl-nivel-oro-border: rgba(184,134,11,0.5);
    --khl-nivel-plata: #6c6c75;
    --khl-nivel-plata-bg: linear-gradient(135deg, rgba(108,108,117,0.15), rgba(108,108,117,0.04));
    --khl-nivel-plata-border: rgba(108,108,117,0.5);
    --khl-nivel-bronce: #8B4513;
    --khl-nivel-bronce-bg: linear-gradient(135deg, rgba(205,127,50,0.2), rgba(205,127,50,0.06));
    --khl-nivel-bronce-border: rgba(139,69,19,0.5);
    --khl-nivel-gratis: #5a5a5a;
    --khl-nivel-gratis-bg: linear-gradient(135deg, rgba(90,90,90,0.12), rgba(90,90,90,0.03));
    --khl-nivel-gratis-border: rgba(90,90,90,0.4);
}

/* Header base — layout y espaciado */
.khl-cluster-grid .khl-cluster-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px 24px !important;
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 2px solid !important;
}

.khl-cluster-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
}

.khl-cluster-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.khl-cluster-title-wrap {
    flex: 1 !important;
}

.khl-cluster-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
    opacity: 0.95 !important;
}

.khl-cluster-title {
    margin: 0 !important;
    font-family: Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
}

.khl-cluster-count {
    font-family: Georgia, serif !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    opacity: 0.9 !important;
    font-weight: 600 !important;
}

/* === DESTACADAS === */
.khl-cluster-header-destacado {
    background: var(--khl-nivel-destacado-bg) !important;
    border-bottom-color: var(--khl-nivel-destacado-border) !important;
}
.khl-cluster-icon-destacado {
    background: var(--khl-nivel-destacado-bg) !important;
    border-color: var(--khl-nivel-destacado-border) !important;
    color: var(--khl-nivel-destacado) !important;
}
.khl-cluster-header-destacado .khl-cluster-label,
.khl-cluster-header-destacado .khl-cluster-count {
    color: var(--khl-nivel-destacado) !important;
}
.khl-cluster-header-destacado .khl-cluster-title {
    color: var(--khl-text) !important;
}

/* === ORO === */
.khl-cluster-header-oro {
    background: var(--khl-nivel-oro-bg) !important;
    border-bottom-color: var(--khl-nivel-oro-border) !important;
}
.khl-cluster-icon-oro {
    background: var(--khl-nivel-oro-bg) !important;
    border-color: var(--khl-nivel-oro-border) !important;
    color: var(--khl-nivel-oro) !important;
}
.khl-cluster-header-oro .khl-cluster-label,
.khl-cluster-header-oro .khl-cluster-count {
    color: var(--khl-nivel-oro) !important;
}
.khl-cluster-header-oro .khl-cluster-title {
    color: var(--khl-text) !important;
}

/* === PLATA === */
.khl-cluster-header-plata {
    background: var(--khl-nivel-plata-bg) !important;
    border-bottom-color: var(--khl-nivel-plata-border) !important;
}
.khl-cluster-icon-plata {
    background: var(--khl-nivel-plata-bg) !important;
    border-color: var(--khl-nivel-plata-border) !important;
    color: var(--khl-nivel-plata) !important;
}
.khl-cluster-header-plata .khl-cluster-label,
.khl-cluster-header-plata .khl-cluster-count {
    color: var(--khl-nivel-plata) !important;
}
.khl-cluster-header-plata .khl-cluster-title {
    color: var(--khl-text) !important;
}

/* === BRONCE === */
.khl-cluster-header-bronce {
    background: var(--khl-nivel-bronce-bg) !important;
    border-bottom-color: var(--khl-nivel-bronce-border) !important;
}
.khl-cluster-icon-bronce {
    background: var(--khl-nivel-bronce-bg) !important;
    border-color: var(--khl-nivel-bronce-border) !important;
    color: var(--khl-nivel-bronce) !important;
}
.khl-cluster-header-bronce .khl-cluster-label,
.khl-cluster-header-bronce .khl-cluster-count {
    color: var(--khl-nivel-bronce) !important;
}
.khl-cluster-header-bronce .khl-cluster-title {
    color: var(--khl-text) !important;
}

/* === MÁS MODELOS (gratis) === */
.khl-cluster-header-gratis {
    background: var(--khl-nivel-gratis-bg) !important;
    border-bottom-color: var(--khl-nivel-gratis-border) !important;
}
.khl-cluster-icon-gratis {
    background: var(--khl-nivel-gratis-bg) !important;
    border-color: var(--khl-nivel-gratis-border) !important;
    color: var(--khl-nivel-gratis) !important;
}
.khl-cluster-header-gratis .khl-cluster-label,
.khl-cluster-header-gratis .khl-cluster-count {
    color: var(--khl-nivel-gratis) !important;
}
.khl-cluster-header-gratis .khl-cluster-title {
    color: var(--khl-text) !important;
}

/* ============================================================
   7) CONTENIDO PILLAR (páginas pilares) — adaptativo
   ============================================================ */
.khl-pillar-content {
    color: var(--khl-pillar-text) !important;
    background: var(--khl-pillar-bg) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    font-family: Georgia, serif !important;
    line-height: 1.8 !important;
}

.khl-pillar-content .khl-pillar-lead {
    color: var(--khl-pillar-lead) !important;
    font-size: 18px !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

.khl-pillar-content h2,
.khl-pillar-content h3 {
    color: var(--khl-gold) !important;
}

.khl-pillar-content h2 {
    font-size: 28px !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
}

.khl-pillar-content h3 {
    font-size: 22px !important;
    margin-top: 28px !important;
    margin-bottom: 12px !important;
}

.khl-pillar-content p {
    font-size: 16px !important;
    margin-bottom: 16px !important;
    color: var(--khl-pillar-text) !important;
}

.khl-pillar-content ul {
    margin-bottom: 16px !important;
}

.khl-pillar-content li {
    margin-bottom: 6px !important;
    color: var(--khl-pillar-text) !important;
}

.khl-pillar-content a {
    color: var(--khl-gold) !important;
}

.khl-pillar-content a:hover {
    color: var(--khl-gold-light) !important;
}

/* ============================================================
   8) FAQ (Preguntas Frecuentes) — adaptativo
   ============================================================ */
.khl-faq-section {
    background: var(--khl-faq-bg);
    border: 1px solid var(--khl-faq-border);
    border-radius: 12px;
    padding: 30px;
    margin: 50px auto !important;
    max-width: 900px;
}

.khl-faq-title {
    font-family: Georgia, serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--khl-gold) !important;
    margin: 0 0 20px !important;
    text-align: center;
    letter-spacing: 0.02em;
}

.khl-faq-item {
    margin-bottom: 16px;
    border: 1px solid var(--khl-faq-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--khl-bg-2);
}

.khl-faq-item:last-child {
    margin-bottom: 0;
}

.khl-faq-question {
    display: block;
    background: var(--khl-faq-q-bg);
    padding: 14px 18px;
    font-family: Georgia, serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--khl-faq-q-text) !important;
    cursor: pointer;
    transition: background 0.2s ease;
    border: none;
    width: 100%;
    text-align: left;
}

.khl-faq-question:hover {
    background: rgba(212, 175, 55, 0.15);
}

.khl-faq-answer {
    padding: 14px 18px;
    font-family: Georgia, serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--khl-faq-a-text) !important;
}

/* ============================================================
   10) GRIDS CONTAINER — adaptativo
   ============================================================ */
.khl-grids-container.khl-page-grids {
    background: transparent;
    padding: 30px 20px;
}

/* El grid principal va entre la intro y el cuerpo */
.khl-main-grids {
    margin: 30px auto 50px !important;
    padding: 0 20px !important;
    max-width: 1400px;
}

/* ============================================================
   11) GENERATEPRESS PAGE CONTAINER — adaptativo
   ============================================================ */
[data-theme="dark"] .inside-article,
[data-theme="dark"] .entry-content,
[data-theme="dark"] .page-content {
    background: var(--khl-bg) !important;
    color: var(--khl-text) !important;
}

[data-theme="light"] .inside-article,
[data-theme="light"] .entry-content,
[data-theme="light"] .page-content {
    background: var(--khl-bg-2) !important;
    color: var(--khl-text) !important;
}

/* Párrafos y listas en páginas */
.entry-content p,
.entry-content li,
.page-content p,
.page-content li {
    color: var(--khl-text) !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
    color: var(--khl-gold) !important;
}

/* Blockquotes */
.entry-content blockquote,
.page-content blockquote {
    border-left: 4px solid var(--khl-gold) !important;
    background: var(--khl-bg-2) !important;
    color: var(--khl-text) !important;
}

/* Tablas */
.entry-content table,
.page-content table {
    background: var(--khl-bg-2) !important;
    color: var(--khl-text) !important;
}

.entry-content th,
.page-content th {
    background: var(--khl-bg-3) !important;
    color: var(--khl-gold) !important;
    border-color: var(--khl-border) !important;
}

.entry-content td,
.page-content td {
    border-color: var(--khl-border) !important;
    color: var(--khl-text) !important;
}

/* ============================================================
   12) RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .khl-faq-section {
        padding: 20px;
        margin: 30px auto !important;
    }
    .khl-faq-title {
        font-size: 22px !important;
    }
    .khl-main-grids {
        padding: 0 10px !important;
    }
}

/* ============================================================
   13) SECCIONES SIEMPRE MODO OSCURO (no afectadas por el switcher)
   ============================================================
   Estas secciones son nativas de color oscuro y NO cambian
   cuando el usuario activa el modo claro:
     - Cabecera (header / mega menú)
     - Filtro dinámico
     - CTA previo al Footer
     - Footer

   IMPORTANTE: Solo se fuerza el BACKGROUND del contenedor
   principal. Los colores de texto, enlaces y botones se mantienen
   con sus estilos originales (definidos en mega-menu-header.php).
   ============================================================ */

/* === CABECERA (HEADER / MEGA MENÚ) — siempre oscuro === */
.khl-header,
[data-theme="light"] .khl-header {
    background-color: rgba(10, 10, 15, 0.98) !important;
}

.khl-header .khl-nav-menu > li > a,
.khl-header .khl-nav-menu > li > a:link,
.khl-header .khl-nav-menu > li > a:visited,
[data-theme="light"] .khl-header .khl-nav-menu > li > a,
[data-theme="light"] .khl-header .khl-nav-menu > li > a:link,
[data-theme="light"] .khl-header .khl-nav-menu > li > a:visited {
    color: #c8c8d0 !important;
}

.khl-header .khl-nav-menu > li > a:hover,
[data-theme="light"] .khl-header .khl-nav-menu > li > a:hover {
    color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.1) !important;
}

.khl-megamenu,
[data-theme="light"] .khl-megamenu {
    background: rgba(10, 10, 15, 0.98) !important;
}

.khl-megamenu-professions a,
.khl-megamenu-professions a:link,
.khl-megamenu-professions a:visited,
[data-theme="light"] .khl-megamenu-professions a,
[data-theme="light"] .khl-megamenu-professions a:link,
[data-theme="light"] .khl-megamenu-professions a:visited {
    color: #c8c8d0 !important;
}

.khl-megamenu-professions a:hover,
[data-theme="light"] .khl-megamenu-professions a:hover {
    color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.08) !important;
}

.khl-megamenu-country-header a,
[data-theme="light"] .khl-megamenu-country-header a {
    color: #d4af37 !important;
}

#khl-lang-btn,
[data-theme="light"] #khl-lang-btn {
    background: #111118 !important;
    color: #d4af37 !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

.khl-lang-dropdown,
[data-theme="light"] .khl-lang-dropdown {
    background: #111118 !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

.khl-lang-option,
[data-theme="light"] .khl-lang-option {
    color: #c8c8d0 !important;
}

.khl-lang-option:hover,
[data-theme="light"] .khl-lang-option:hover {
    background: rgba(212, 175, 55, 0.08) !important;
    color: #d4af37 !important;
}

/* === FILTRO DINÁMICO — siempre oscuro === */
.khl-filtro-dinamico,
[data-theme="light"] .khl-filtro-dinamico {
    background: rgba(10, 10, 15, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none !important;
}

.khl-filtro-dinamico label,
.khl-filtro-dinamico .khl-filtro-label,
[data-theme="light"] .khl-filtro-dinamico label,
[data-theme="light"] .khl-filtro-dinamico .khl-filtro-label {
    color: #c8c8d0 !important;
}

.khl-filtro-dinamico select,
.khl-filtro-dinamico input,
[data-theme="light"] .khl-filtro-dinamico select,
[data-theme="light"] .khl-filtro-dinamico input {
    background: #14141f !important;
    color: #e8e8ed !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

.khl-filtro-dinamico select option,
[data-theme="light"] .khl-filtro-dinamico select option {
    background: #14141f !important;
    color: #e8e8ed !important;
}

/* === CTA SECTION — siempre oscuro (solo background, NO botones) === */
.khl-cta-section,
[data-theme="light"] .khl-cta-section {
    background-color: #0a0a0f !important;
}

/* Texto del CTA — siempre colores oscuros */
.khl-cta-section .khl-cta-eyebrow,
.khl-cta-section .khl-cta-subtitle,
.khl-cta-section .khl-cta-benefit span,
.khl-cta-section .khl-cta-trust-item,
[data-theme="light"] .khl-cta-section .khl-cta-eyebrow,
[data-theme="light"] .khl-cta-section .khl-cta-subtitle,
[data-theme="light"] .khl-cta-section .khl-cta-benefit span,
[data-theme="light"] .khl-cta-section .khl-cta-trust-item {
    color: #c8c8d0 !important;
}

.khl-cta-section .khl-cta-title,
.khl-cta-section .khl-cta-benefit-icon,
[data-theme="light"] .khl-cta-section .khl-cta-title,
[data-theme="light"] .khl-cta-section .khl-cta-benefit-icon {
    color: #d4af37 !important;
}

/* Los botones del CTA conservan sus estilos originales (gradient dorado) */
/* NO forzar background de los botones — se rompe el diseño */

/* === FOOTER — siempre oscuro (solo background del contenedor) === */
.khl-footer,
.site-footer,
.footer-widgets,
[data-theme="light"] .khl-footer,
[data-theme="light"] .site-footer,
[data-theme="light"] .footer-widgets {
    background-color: #0a0a0f !important;
}

/* Forzar todos los elementos del footer a usar colores oscuros */
/* Esto override las reglas del theme-switcher que cambian h1-h6 y textos */
/* EXCEPTO los elementos del CTA (que tienen sus propios estilos) */
.khl-footer,
.khl-footer *,
.site-footer,
.site-footer *,
[data-theme="light"] .khl-footer,
[data-theme="light"] .khl-footer *,
[data-theme="light"] .site-footer,
[data-theme="light"] .site-footer * {
    color: #c8c8d0 !important;
}

/* Restaurar colores del CTA — NO afectados por el override del footer */
.khl-cta-section *,
.khl-cta-section .khl-cta-btn-primary,
.khl-cta-section .khl-cta-btn-primary *,
.khl-cta-section .khl-cta-btn-secondary,
.khl-cta-section .khl-cta-btn-secondary *,
.khl-cta-section svg,
.khl-cta-section .khl-cta-benefit-icon {
    color: revert !important;
    -webkit-text-fill-color: revert !important;
}

/* Re-aplicar los colores correctos del CTA */
.khl-cta-section .khl-cta-title,
.khl-cta-section .khl-cta-benefit-icon {
    color: #d4af37 !important;
}
.khl-cta-section .khl-cta-eyebrow,
.khl-cta-section .khl-cta-subtitle,
.khl-cta-section .khl-cta-benefit span,
.khl-cta-section .khl-cta-trust-item {
    color: #c8c8d0 !important;
}
.khl-cta-section .khl-cta-btn-primary,
.khl-cta-section .khl-cta-btn-primary *,
.khl-cta-section .khl-cta-btn-primary svg {
    color: #0a0a0f !important;
    -webkit-text-fill-color: #0a0a0f !important;
    fill: #0a0a0f !important;
}
.khl-cta-section .khl-cta-btn-secondary,
.khl-cta-section .khl-cta-btn-secondary *,
.khl-cta-section .khl-cta-btn-secondary svg {
    color: #d4af37 !important;
    fill: #d4af37 !important;
}

/* Restaurar colores específicos del footer */
.khl-footer .khl-footer-title,
.khl-footer .khl-footer-email a,
.khl-footer .khl-footer-links a:hover,
.site-footer a:hover,
[data-theme="light"] .khl-footer .khl-footer-title,
[data-theme="light"] .khl-footer .khl-footer-email a,
[data-theme="light"] .khl-footer .khl-footer-links a:hover,
[data-theme="light"] .site-footer a:hover {
    color: #d4af37 !important;
}

.khl-footer .khl-footer-links a,
.khl-footer .khl-footer-links a:link,
.khl-footer .khl-footer-links a:visited,
.site-footer a,
.site-footer a:link,
.site-footer a:visited,
[data-theme="light"] .khl-footer .khl-footer-links a,
[data-theme="light"] .khl-footer .khl-footer-links a:link,
[data-theme="light"] .khl-footer .khl-footer-links a:visited,
[data-theme="light"] .site-footer a,
[data-theme="light"] .site-footer a:link,
[data-theme="light"] .site-footer a:visited {
    color: rgba(232, 232, 237, 0.6) !important;
}

.khl-footer .khl-footer-desc,
[data-theme="light"] .khl-footer .khl-footer-desc {
    color: rgba(232, 232, 237, 0.6) !important;
}

.khl-footer .khl-footer-logo-sub,
[data-theme="light"] .khl-footer .khl-footer-logo-sub {
    color: rgba(212, 175, 55, 0.6) !important;
}

.khl-footer .khl-footer-copyright,
.khl-footer .khl-footer-bottom,
[data-theme="light"] .khl-footer .khl-footer-copyright,
[data-theme="light"] .khl-footer .khl-footer-bottom {
    color: #6a6a75 !important;
}

/* Footer copyright / info bar — siempre oscuro */
.site-info,
[data-theme="light"] .site-info {
    background-color: #050508 !important;
}

.site-info,
.site-info *,
[data-theme="light"] .site-info,
[data-theme="light"] .site-info * {
    color: #6a6a75 !important;
}

.site-info a,
[data-theme="light"] .site-info a {
    color: #d4af37 !important;
}

/* === HERO (siempre oscuro — es nativo oscuro) === */
.khl-hero,
[data-theme="light"] .khl-hero {
    background: #0a0a0f !important;
}

/* === AGE GATE (siempre oscuro) === */
#khl-age-gate,
.khl-age-gate-overlay,
.khl-age-gate-modal,
[data-theme="light"] #khl-age-gate,
[data-theme="light"] .khl-age-gate-overlay,
[data-theme="light"] .khl-age-gate-modal {
    background: rgba(10, 10, 15, 0.98) !important;
    color: #e8e8ed !important;
}

.khl-age-gate-modal h2,
[data-theme="light"] .khl-age-gate-modal h2 {
    color: #d4af37 !important;
}

/* === HISTORIAS VIEWER (siempre oscuro) === */
.khl-historia-viewer-bg,
[data-theme="light"] .khl-historia-viewer-bg {
    background: rgba(0, 0, 0, 0.95) !important;
}

.khl-historia-viewer-content,
[data-theme="light"] .khl-historia-viewer-content {
    background: #111118 !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

.khl-historia-viewer-header,
.khl-historia-viewer-footer,
[data-theme="light"] .khl-historia-viewer-header,
[data-theme="light"] .khl-historia-viewer-footer {
    background: #0a0a0f !important;
}

#khl-historia-viewer-name,
[data-theme="light"] #khl-historia-viewer-name {
    color: #d4af37 !important;
}

.khl-historia-close,
[data-theme="light"] .khl-historia-close {
    color: #8a8a95 !important;
}

.khl-vol-btn,
[data-theme="light"] .khl-vol-btn {
    color: #d4af37 !important;
}

.khl-historia-viewer-profile,
[data-theme="light"] .khl-historia-viewer-profile {
    background: #d4af37 !important;
    color: #0a0a0f !important;
}

/* === BOTÓN FLOTANTE "PUBLICAR" (siempre oscuro) === */
.khl-sticky-publish,
.khl-floating-publish,
[data-theme="light"] .khl-sticky-publish,
[data-theme="light"] .khl-floating-publish {
    background: linear-gradient(135deg, #e8556f, #c44560) !important;
    color: #ffffff !important;
}