/*
 * Client Theme Overrides
 *
 * Activo solo cuando client_theme.js inyecta data-gx-theme en <html>.
 * Sin ese atributo, estos selectores no aplican → otros clientes no se ven afectados.
 */

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT GLOBAL: solo tipografía; fondo/color no se tocan para que
   el input, botones y footer conserven los colores originales del core.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   LANDING: fondo, nav, hero, secciones, botones
   ═══════════════════════════════════════════════════════════════════ */

html[data-gx-theme] .gx-landing {
    background: var(--gx-theme-bg, #1a1a1a);
}

/* ── Nav ── */
html[data-gx-theme] .gx-landing-nav {
    background: var(--gx-theme-nav-bg, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* Evita que backdrop-filter en el nav ancle position:fixed y estire la barra al abrir el selector de idioma */
#gx-landing .gx-landing-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-gx-theme] .gx-landing-nav-link {
    color: var(--gx-theme-nav-text, #fff);
    text-shadow: none;
}
html[data-gx-theme] .gx-landing-nav-link:hover,
html[data-gx-theme] .gx-landing-nav-link.gx-landing-nav-active {
    color: var(--gx-theme-cta-primary-text, #000);
    background: var(--gx-theme-accent, rgba(250,204,21,0.9));
}
html[data-gx-theme] .gx-landing-cta-nav {
    color: var(--gx-theme-cta-primary-text, #fff);
    background: var(--gx-theme-cta-primary, rgba(37,99,235,0.85));
    border-radius: var(--gx-theme-radius-button, 999px);
}
html[data-gx-theme] .gx-landing-cta-nav:hover {
    opacity: 0.9;
}
/* Talk to Nacho — izquierda del nav, antes de About; misma altura que Live, un poco más ancho */
html[data-gx-theme] .gx-landing-talk-nav {
    flex-shrink: 0;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    margin-right: 4px;
}
html[data-gx-theme] .gx-landing-talk-nav.gx-landing-talk-nav-active {
    box-shadow: 0 0 0 2px var(--gx-theme-accent, rgba(250,204,21,0.9));
}

/* ── Hero overlay — eliminado para tema claro (sin neblina blanca) ── */
html[data-gx-theme] .gx-landing-hero::after {
    background: none;
}
html[data-gx-theme] .gx-landing-hero-overlay h1 {
    color: var(--gx-theme-text, #fff);
    text-shadow: none;
    font-family: var(--gx-theme-heading-font, inherit);
}
html[data-gx-theme] .gx-landing-hero-overlay p {
    color: var(--gx-theme-text-light, rgba(255,255,255,0.9));
    text-shadow: none;
}
html[data-gx-theme] .gx-landing-scroll-hint {
    color: var(--gx-theme-text-light, rgba(255,255,255,0.6));
    text-shadow: none;
}

/* ── Play buttons ── */
html[data-gx-theme] .gx-landing-play-btn {
    color: var(--gx-theme-cta-primary-text, #fff);
    background: var(--gx-theme-cta-primary, rgba(0,0,0,0.3));
    border-color: var(--gx-theme-border, rgba(255,255,255,0.35));
}
html[data-gx-theme] .gx-landing-play-btn:hover {
    background: var(--gx-theme-accent, rgba(255,255,255,0.25));
    color: var(--gx-theme-cta-primary-text, #fff);
}

/* ── Sections — eliminado para tema claro (sin neblina blanca) ── */
html[data-gx-theme] .gx-landing-section::after {
    background: none;
}
html[data-gx-theme] .gx-landing-section-text h2 {
    color: var(--gx-theme-text, #fff);
    text-shadow: none;
    font-family: var(--gx-theme-heading-font, inherit);
}

/* Badge / label (e.g. "FACIAL PROCEDURES") */
html[data-gx-theme] .gx-landing-section-label {
    color: var(--gx-theme-badge-text, rgba(250,204,21,0.9));
    border-color: var(--gx-theme-badge-border, rgba(250,204,21,0.35));
    background: var(--gx-theme-badge-bg, rgba(250,204,21,0.08));
    font-family: var(--gx-theme-badge-font, inherit);
    letter-spacing: var(--gx-theme-badge-letter-spacing, 0.12em);
    text-transform: var(--gx-theme-badge-transform, uppercase);
    border-radius: var(--gx-theme-radius-badge, 4px);
    text-shadow: none;
}

html[data-gx-theme] .gx-landing-section-text p {
    color: var(--gx-theme-text-light, rgba(255,255,255,0.75));
    border-left-color: var(--gx-theme-accent, rgba(250,204,21,0.5));
    text-shadow: none;
}

/* Explore button */
html[data-gx-theme] .gx-landing-section-btn {
    color: var(--gx-theme-cta-primary-text, #fff);
    background: var(--gx-theme-cta-primary, rgba(255,255,255,0.12));
    border-color: var(--gx-theme-border, rgba(255,255,255,0.45));
    border-radius: var(--gx-theme-radius-button, 999px);
}
html[data-gx-theme] .gx-landing-section-btn:hover {
    background: var(--gx-theme-accent, rgba(255,255,255,0.95));
    color: var(--gx-theme-cta-secondary-text, #111);
    border-color: var(--gx-theme-accent, rgba(255,255,255,0.8));
}

/* GlobaiX One (y similares): video arriba, Explorar con aire debajo */
html[data-gx-theme] .gx-landing-section-info:has(.gx-landing-section-explore-extra) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: translateY(-10px);
}
html[data-gx-theme] .gx-landing-section-info:has(.gx-landing-section-explore-extra) .gx-landing-section-explore-extra {
    margin-top: 14px;
}

/* Thumbnail label */
html[data-gx-theme] .gx-landing-thumb-label {
    color: var(--gx-theme-text, #fff);
    background: color-mix(in srgb, var(--gx-theme-surface) 85%, transparent);
    backdrop-filter: blur(10px);
}

/* ── Contact section ── */
html[data-gx-theme] .gx-landing-contact-overlay h2 {
    color: var(--gx-theme-text, #fff);
    text-shadow: none;
    font-family: var(--gx-theme-heading-font, inherit);
}
html[data-gx-theme] .gx-landing-contact-action {
    color: var(--gx-theme-accent, rgba(250,204,21,0.95));
    border-color: var(--gx-theme-border, rgba(250,204,21,0.4));
    background: color-mix(in srgb, var(--gx-theme-accent) 10%, transparent);
}
html[data-gx-theme] .gx-landing-contact-action:hover {
    background: var(--gx-theme-accent, rgba(250,204,21,0.92));
    color: var(--gx-theme-cta-primary-text, #000);
    border-color: var(--gx-theme-accent, rgba(250,204,21,0.8));
}
html[data-gx-theme] .gx-landing-talk.gx-landing-contact-talk {
    background: var(--gx-theme-cta-primary, rgba(255,255,255,0.95));
    color: var(--gx-theme-cta-primary-text, #111);
}
html[data-gx-theme] .gx-landing-talk.gx-landing-contact-talk:hover {
    background: var(--gx-theme-accent, #fff);
}

/* ── Footer CTA — eliminado para tema claro (sin neblina blanca) ── */
html[data-gx-theme] .gx-landing-footer-cta::after {
    background: none;
}
html[data-gx-theme] .gx-landing-footer-cta h2 {
    color: var(--gx-theme-text, #fff);
    text-shadow: none;
    font-family: var(--gx-theme-heading-font, inherit);
}
html[data-gx-theme] .gx-landing-talk {
    color: var(--gx-theme-cta-primary-text, #fff);
    background: color-mix(in srgb, var(--gx-theme-accent) 20%, transparent);
    border-color: var(--gx-theme-border, rgba(255,255,255,0.4));
}
html[data-gx-theme] .gx-landing-talk:hover {
    background: var(--gx-theme-accent, rgba(255,255,255,1));
    color: var(--gx-theme-cta-secondary-text, #111);
    text-shadow: none;
}

/* Social links */
html[data-gx-theme] .gx-landing-social-link {
    color: var(--gx-theme-text-light, #94a3b8);
    border-color: var(--gx-theme-border, rgba(148,163,184,0.2));
}
html[data-gx-theme] .gx-landing-social-link:hover {
    color: var(--gx-theme-text, #e2e8f0);
    border-color: var(--gx-theme-accent-secondary, rgba(226,232,240,0.3));
}

/* ── Subnav (category) ── */
html[data-gx-theme] .gx-category-subnav .gx-landing-nav-link.gx-subnav-active {
    color: var(--gx-theme-cta-primary-text, #fff);
    background: var(--gx-theme-cta-primary, rgba(37,99,235,0.85));
}

/* Depth dots */
html[data-gx-theme] .gx-subnav-dot {
    background: color-mix(in srgb, var(--gx-theme-accent) 45%, transparent);
    border-color: color-mix(in srgb, var(--gx-theme-accent) 25%, transparent);
}
html[data-gx-theme] .gx-subnav-dot-active {
    background: var(--gx-theme-accent, rgba(255,255,255,0.95));
    border-color: var(--gx-theme-accent, rgba(255,255,255,0.95));
}

/* ═══════════════════════════════════════════════════════════════════
   AGENT INPUT / FOOTER — sin overrides, usa colores originales del core
   ═══════════════════════════════════════════════════════════════════ */
