/* La landing usa la misma elección que el portal, incluidos sus visuales SVG.
   Se carga después del CSS de marketing y de las cuatro paletas. */
html[data-appearance='dark'] {
    --nv-bg-page: #030303;
    --nv-bg-surface: #0a0a0c;
    --nv-bg-elevated: #161618;
    --nv-bg-subtle: #111114;
    --nv-bg-hover: #202024;
    --nv-bg-input: #161618;
    --nv-fg-strong: #fff;
    --nv-fg-default: #ededf0;
    --nv-fg-muted: #a1a1aa;
    --nv-fg-subtle: #a1a1aa;
    --nv-border-default: #27272a;
    --nv-border-strong: #3f3f46;
    --nv-accent-primary: #1fb2ba;
    --nv-accent-primary-hover: #79d4d9;
    --nv-accent-primary-fg: #030303;
    --nv-accent-cta: #007a80;
    --nv-accent-cta-hover: #005f64;
    --nv-success: #a5d8bc;
    --nv-success-bg: #20322a;
    --nv-warning: #f0cb8c;
    --nv-warning-bg: #382f20;
    --nv-danger: #ffb4a7;
    --nv-danger-bg: #392523;
}
html[data-appearance='light'] {
    --nv-fg-subtle: #636567;
    --nv-warning: #974312;
    --nv-success: #246435;
}
html[data-appearance] .marketing-shell {
    --nv-accent: var(--nv-accent-primary);
    --nv-border-subtle: var(--nv-border-default);
    --nv-theme-tint: color-mix(in srgb, var(--nv-accent-primary) 12%, var(--nv-bg-surface));
    --nv-art-panel: var(--nv-bg-subtle);
    --nv-art-halo: color-mix(in srgb, var(--nv-accent-primary) 18%, var(--nv-bg-subtle));
    --nv-art-mid: color-mix(in srgb, var(--nv-accent-primary) 42%, var(--nv-bg-subtle));
    --nv-art-deep: var(--nv-accent-primary);
    --nv-art-stroke: var(--nv-accent-primary);
    --nv-art-ink: var(--nv-fg-strong);
    --nv-art-white: var(--nv-bg-elevated);
    --nv-art-warm: color-mix(in srgb, var(--nv-accent-cta) 42%, var(--nv-bg-elevated));
    --nv-art-warm-soft: color-mix(in srgb, var(--nv-accent-cta) 16%, var(--nv-bg-elevated));
    --nv-art-warm-deep: var(--nv-accent-cta);
    --nv-art-line: var(--nv-border-strong);
    --nv-art-success: var(--nv-success);
    --nv-art-success-bg: var(--nv-success-bg);
    background-color: var(--nv-bg-page) !important;
    background-image: radial-gradient(
        circle at 1px 1px,
        color-mix(in srgb, var(--nv-accent-primary) 10%, transparent) 1px,
        transparent 0
    ) !important;
    background-size: 26px 26px !important;
    color: var(--nv-fg-default);
}
html[data-appearance]
    .marketing-shell
    :is(.nivor-hero, .nivor-section--alt, .nivor-section--dark, .nivor-cta, .nivor-footer-cta, footer.section-dark) {
    background: var(--nv-bg-subtle) !important;
    color: var(--nv-fg-default);
    border-color: var(--nv-border-default);
}
html[data-appearance] .marketing-shell .section-dark {
    background: var(--nv-bg-subtle) !important;
    color: var(--nv-fg-default);
}
html[data-appearance] body.marketing-shell .nivor-hero {
    background: transparent !important;
}
html[data-appearance]
    .marketing-shell
    :is(
        .nivor-section--dark .nivor-section__title,
        .nivor-cta__title,
        .nivor-feature-card__title,
        .bento-card__title,
        .arch-node__title,
        .live-assistant-card__name,
        .demo-phone__name
    ) {
    color: var(--nv-fg-strong);
}
html[data-appearance]
    .marketing-shell
    :is(
        .nivor-section--dark .nivor-section__lede,
        .nivor-cta__lede,
        .nivor-feature-card__body,
        .bento-card__body,
        .arch-node__desc,
        .demo-phone__status,
        .demo-phone__header-icons,
        .demo-msg__meta,
        .demo-voice-meta
    ) {
    color: var(--nv-fg-muted);
}
html[data-appearance] .marketing-shell .nv-eyebrow {
    color: var(--nv-accent-primary) !important;
}
html[data-appearance] .marketing-shell :is(.nivor-hero__title em, .nivor-section__title em, .nivor-cta__title em) {
    color: var(--nv-accent-primary) !important;
    background-image: linear-gradient(
        transparent 60%,
        var(--nv-theme-tint) 60%,
        var(--nv-theme-tint) 94%,
        transparent 94%
    );
}
/* Las vistas secundarias usan roles de lectura, incluso al cambiar de estado.
   La tinta del acento y la tinta sobre el acento son contratos distintos. */
html[data-appearance] .marketing-shell :is(.text-ink, .section-title, .metric-value) {
    color: var(--nv-fg-strong);
}
html[data-appearance] .marketing-shell :is(.text-secondary, .text-muted, .section-copy, .metric-label) {
    color: var(--nv-fg-muted);
}
html[data-appearance] .marketing-shell .text-accent {
    color: var(--nv-accent-primary);
}
html[data-appearance] .marketing-shell :is(.chip, .chip-dark, .nivor-feature-card__badge, .marketing-badge) {
    color: var(--nv-accent-primary);
    background: var(--nv-theme-tint);
    border-color: var(--nv-border-strong);
}
html[data-appearance] .marketing-shell .marketing-badge--warning {
    background: var(--nv-warning-bg);
    color: var(--nv-warning);
    border-color: var(--nv-warning);
}
html[data-appearance] .marketing-shell :is(.marketing-accent-badge, .nivor-step__num) {
    background: var(--nv-accent-primary);
    color: var(--nv-accent-primary-fg);
    border-color: var(--nv-accent-primary);
}
html[data-appearance] .marketing-shell .marketing-skip-link:focus {
    background: var(--nv-accent-primary);
    color: var(--nv-accent-primary-fg);
}
html[data-appearance]
    .marketing-shell
    :is(.marketing-status-success, [data-portal-phone-feedback][data-state='success']) {
    color: var(--nv-success) !important;
}
html[data-appearance]
    .marketing-shell
    :is(.marketing-status-warning, [data-portal-phone-feedback][data-state='warning']) {
    color: var(--nv-warning) !important;
}
html[data-appearance]
    .marketing-shell
    :is(.marketing-status-danger, [data-portal-phone-feedback][data-state='danger']) {
    color: var(--nv-danger) !important;
}
html[data-appearance] .marketing-shell .pymes-card--before {
    background: var(--nv-danger-bg);
    border-color: var(--nv-danger);
}
html[data-appearance] .marketing-shell .pymes-card--after {
    background: var(--nv-success-bg);
    border-color: var(--nv-success);
}
html[data-appearance] .marketing-shell :is(.roi-metric-box__value, .roi-metric-box__value--accent) {
    color: var(--nv-accent-primary);
}
html[data-appearance] .marketing-shell .password-strength-fill--weak {
    background: var(--nv-danger);
}
html[data-appearance] .marketing-shell .password-strength-fill--medium {
    background: var(--nv-warning);
}
html[data-appearance] .marketing-shell .password-strength-fill--strong {
    background: var(--nv-success);
}
html[data-appearance]
    .marketing-shell
    :is(
        .bento-card,
        .arch-explorer,
        .arch-node,
        .nv-floating-badge,
        .live-assistant-card,
        .nivor-section--dark .nivor-feature-card,
        .demo-phone
    ) {
    background: var(--nv-bg-surface);
    color: var(--nv-fg-default);
    border-color: var(--nv-border-strong);
    box-shadow: var(--nv-shadow-sm);
}
html[data-appearance]
    .marketing-shell
    :is(.bento-card__visual, .arch-detail-panel, .demo-phone__messages, .live-assistant-card__body) {
    background: var(--nv-bg-page);
    border-color: var(--nv-border-default);
}
html[data-appearance] .marketing-shell .bento-card::before {
    background: radial-gradient(
        400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        var(--nv-theme-tint),
        transparent 65%
    );
}
html[data-appearance] .marketing-shell :is(.nivor-marketing-header, .nivor-mobile-panel) {
    background: color-mix(in srgb, var(--nv-bg-surface) 94%, transparent);
    --nivor-header-border: var(--nv-border-default);
}
html[data-appearance]
    .marketing-shell
    :is(
        .nivor-giro-card__badge,
        .bento-card__tag,
        .bento-card__icon-badge,
        .nv-floating-badge__icon-wrap,
        .demo-giro-tab,
        .live-assistant-card__preview-badge
    ) {
    background: var(--nv-theme-tint);
    color: var(--nv-accent-primary);
    border-color: var(--nv-border-default);
}
html[data-appearance]
    .marketing-shell
    :is(.demo-phone__header, .demo-phone__composer, .live-assistant-card__header, .demo-phone__input, .demo-msg--bot) {
    background: var(--nv-bg-elevated);
    color: var(--nv-fg-default);
}
html[data-appearance] .marketing-shell :is(.demo-msg--user, .demo-voice-bubble) {
    background: var(--nv-theme-tint);
    color: var(--nv-fg-default);
}
html[data-appearance]
    .marketing-shell
    :is(.demo-msg__checks, .demo-phone__status[data-typing='1'], .nivor-mobile-nav-active) {
    color: var(--nv-accent-primary);
}
html[data-appearance] .marketing-shell :is(.demo-msg--typing span, .demo-voice-bar) {
    background: var(--nv-fg-muted);
}
html[data-appearance] .marketing-shell .demo-phone__input::placeholder,
html[data-appearance] .marketing-shell .nivor-mobile-nav-link {
    color: var(--nv-fg-muted);
}
html[data-appearance]
    .marketing-shell
    :is(
        .giro-category-chip--active,
        .nivor-tab--active,
        .pymes-comparator__tab--active,
        .demo-giro-tab--active,
        .nivor-feature-card__icon,
        .nivor-giro-card__icon,
        .live-assistant-card__avatar,
        .demo-phone__avatar
    ) {
    background: var(--nv-accent-primary) !important;
    color: var(--nv-accent-primary-fg) !important;
}
html[data-appearance] .marketing-shell :is(.arch-node--active, .nivor-mobile-nav-active) {
    background: var(--nv-theme-tint) !important;
    border-color: var(--nv-accent-primary) !important;
    box-shadow: none;
}
html[data-appearance] .marketing-shell :is(.nivor-cta, .nivor-section--dark) .nv-btn--secondary {
    background: var(--nv-bg-elevated);
    border-color: var(--nv-border-strong);
    color: var(--nv-fg-strong);
}
html[data-appearance] .marketing-shell :is(.demo-phone__send, .nivor-nav-cta-btn, #scroll-top-btn) {
    background: var(--nv-accent-cta) !important;
    color: var(--nv-accent-cta-fg) !important;
    border-color: var(--nv-border-default) !important;
    box-shadow: var(--nv-shadow-sm) !important;
}
html[data-appearance]
    .marketing-shell
    .nivor-section--dark
    :is(.text-white, .text-white\/70, .text-white\/60, .text-white\/50, .text-white\/40) {
    color: var(--nv-fg-default) !important;
}
html[data-appearance] .marketing-shell footer.section-dark :is(p, span, h2, h3, h4, li, strong) {
    color: var(--nv-fg-default) !important;
}
html[data-appearance] .marketing-shell footer.section-dark a {
    color: var(--nv-accent-primary) !important;
}
/* Selector de las mismas cuatro apariencias, accesible sin entrar al portal. */
.marketing-theme-picker {
    position: relative;
}
html[data-appearance] .marketing-theme-picker summary {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--nv-border-default);
    border-radius: 50%;
    background: var(--nv-bg-elevated);
    color: var(--nv-fg-default);
    cursor: pointer;
    list-style: none;
}
.marketing-theme-picker summary::-webkit-details-marker {
    display: none;
}
.marketing-theme-menu {
    position: absolute;
    z-index: 60;
    right: 0;
    top: calc(100% + 12px);
    width: 272px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    background: var(--nv-bg-elevated);
    color: var(--nv-fg-strong);
    border: 1px solid var(--nv-border-strong);
    border-radius: 16px;
    box-shadow: var(--nv-shadow-lg);
}
.marketing-theme-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 10px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}
.marketing-theme-menu button:is(:hover, [aria-pressed='true']) {
    background: var(--nv-bg-hover);
}
.marketing-theme-menu strong,
.marketing-theme-menu small {
    display: block;
}
.marketing-theme-menu small {
    margin-top: 3px;
    font-size: 11px;
    color: var(--nv-fg-muted);
}
.marketing-theme-swatch {
    width: 28px;
    height: 32px;
    flex: 0 0 28px;
    border-radius: 7px;
    border: 1px solid #8886;
}
.marketing-theme-swatch--dark {
    background: linear-gradient(90deg, #030303 40%, #1fb2ba 40%, #1fb2ba 48%, #161618 48%);
}
.marketing-theme-swatch--light {
    background: linear-gradient(90deg, #edeae5 40%, #00666c 40%, #00666c 48%, #fff 48%);
}
.marketing-theme-swatch--peach {
    background: linear-gradient(90deg, #f8e9df 40%, #97482f 40%, #97482f 48%, #fffdfa 48%);
}
.marketing-theme-swatch--slate {
    background: linear-gradient(90deg, #1e2b3b 40%, #e8bc95 40%, #e8bc95 48%, #29394c 48%);
}
.marketing-theme-check {
    margin-left: auto;
    opacity: 0;
    color: var(--nv-accent-primary);
}
.marketing-theme-menu [aria-pressed='true'] .marketing-theme-check {
    opacity: 1;
}
.marketing-theme-picker :is(summary, button):focus-visible {
    outline: 2px solid var(--nv-accent-primary);
    outline-offset: 2px;
}
@media (max-width: 640px) {
    .marketing-theme-picker {
        position: static;
    }
    .marketing-theme-menu {
        top: 60px;
        right: 12px;
    }
}