html[data-site-theme="dark"] {
    --site-bg: #0f141b;
    --site-surface: #171e27;
    --site-surface-2: #1d2631;
    --site-text: #edf2f7;
    --site-muted: #9aa7b6;
    --site-border: #2a3543;
    --site-heading: #f8fafc;
    --site-header: rgba(15,20,27,.96);
    --site-shadow: 0 12px 34px rgba(0,0,0,.28);
}

html:not([data-site-theme="dark"]) {
    --site-bg: #ffffff;
    --site-surface: #ffffff;
    --site-surface-2: #f5f7f8;
    --site-text: #17212b;
    --site-muted: #66727d;
    --site-border: #e3e8ec;
    --site-heading: #0d2742;
    --site-header: rgba(255,255,255,.96);
    --site-shadow: 0 8px 28px rgba(13,39,66,.08);
}

body {
    background: var(--site-bg);
    color: var(--site-text);
    transition: background-color .18s ease, color .18s ease;
}

.site-header {
    background: var(--site-header);
    border-bottom-color: var(--site-border);
}

.brand,
.main-nav a,
.hero h1,
.page-hero h1,
.section-heading h2,
.info-card h2,
.info-card h3,
.content-section h3,
.linked-products strong,
.linked-products span,
.contact-list strong,
.form-field label,
.final-cta .cta-block h2 {
    color: var(--site-heading);
}

.hero {
    background: linear-gradient(180deg, var(--site-bg) 0%, var(--site-surface-2) 100%);
}

.section--muted,
.page-hero,
.solution-card-image,
.solution-card-image--placeholder,
.interactive-scene,
.final-cta {
    background: var(--site-surface-2);
}

.info-card,
.placeholder-card,
.content-panel,
.filter-pill,
.feature-list__item,
.spec-table,
.linked-products a,
.contact-list div,
.form-field input,
.form-field textarea {
    background: var(--site-surface);
    border-color: var(--site-border);
    box-shadow: var(--site-shadow);
}

.spec-table__row {
    border-bottom-color: var(--site-border);
}

.spec-table__cell--name,
.linked-products a,
.contact-list div {
    background: var(--site-surface-2);
}

.hero p,
.info-card p,
.content-panel p,
.linked-products small,
.contact-list span,
.page-hero p,
.technical-reference,
.final-cta .cta-block p,
.placeholder-card,
.solution-card-image--placeholder,
.interactive-scene__placeholder {
    color: var(--site-muted);
}

.form-field input,
.form-field textarea {
    color: var(--site-text);
}

.btn-secondary {
    border-color: var(--site-heading);
    color: var(--site-heading);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--site-heading);
    color: var(--site-bg);
}

.site-header__actions {
    position: relative;
    flex-wrap: nowrap;
}

.site-control-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--site-border);
    border-radius: 11px;
    background: var(--site-surface);
    color: var(--site-text);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.site-control-button:hover,
.site-control-button:focus-visible {
    background: var(--site-surface-2);
    border-color: #94a3b8;
    transform: translateY(-1px);
}

.site-control-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-language-picker {
    position: relative;
}

.site-language-picker > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.site-language-picker > summary::-webkit-details-marker {
    display: none;
}

.site-language-picker__flag,
.site-language-option__flag {
    line-height: 1;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
}

.site-language-picker__flag {
    font-size: 1.1rem;
}

.site-language-picker > summary svg {
    width: 11px;
    height: 11px;
}

.site-language-menu {
    position: absolute;
    z-index: 180;
    top: calc(100% + 9px);
    inset-inline-end: 0;
    min-width: 235px;
    padding: 8px;
    border: 1px solid var(--site-border);
    border-radius: 12px;
    background: var(--site-surface);
    box-shadow: var(--site-shadow);
}

.site-language-option {
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--site-text);
}

.site-language-option:hover,
.site-language-option:focus-visible,
.site-language-option.is-active {
    background: color-mix(in srgb, #46a646 12%, var(--site-surface));
}

.site-language-option__flag {
    width: 28px;
    flex: 0 0 28px;
    font-size: 1.35rem;
    text-align: center;
}

.site-language-option__copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 1px;
}

.site-language-option__copy strong {
    color: var(--site-text);
    font-size: .9rem;
}

.site-language-option__copy small {
    color: var(--site-muted);
    font-size: .72rem;
}

.site-language-option__check {
    color: #46a646;
    font-weight: 900;
}

.site-theme-icon--sun {
    display: none;
}

html[data-site-theme="dark"] .site-theme-icon--moon {
    display: none;
}

html[data-site-theme="dark"] .site-theme-icon--sun {
    display: block;
}

html[dir="rtl"] .site-header__inner,
html[dir="rtl"] .main-nav,
html[dir="rtl"] .site-header__actions,
html[dir="rtl"] .hero__actions,
html[dir="rtl"] .cta-block {
    direction: rtl;
}

html[dir="ltr"] .site-header__inner,
html[dir="ltr"] .main-nav,
html[dir="ltr"] .site-header__actions,
html[dir="ltr"] .hero__actions,
html[dir="ltr"] .cta-block {
    direction: ltr;
}

html[dir="rtl"] body {
    text-align: right;
}

html[dir="ltr"] body {
    text-align: left;
}

@media (max-width: 1100px) {
    .site-header__inner {
        gap: 14px;
    }

    .main-nav {
        gap: 13px;
    }

    .main-nav a {
        font-size: .88rem;
    }

    .site-header__whatsapp {
        display: none;
    }
}

@media (max-width: 960px) {
    .site-header__actions {
        margin-inline-start: auto;
    }

    .site-header__quote {
        min-height: 42px;
        padding-inline: 13px;
        font-size: .86rem;
    }
}

@media (max-width: 640px) {
    .site-header__inner {
        min-height: 68px;
        gap: 9px;
    }

    .brand {
        font-size: 1.05rem;
    }

    .site-control-button {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .site-header__quote {
        display: none;
    }

    .site-language-menu {
        position: fixed;
        top: 76px;
        inset-inline: 12px;
        width: auto;
    }
}
