:root {
            --bg: #ffffff;
            --bg2: #f8f9fc;
            --bg3: #f1f4f9;
            --dark: #0a0f1e;
            --dark2: #111827;
            --text: #0f172a;
            --tm: #64748b;
            --td: #94a3b8;
            --orange: #FF6B00;
            --orange2: #E05E00;
            --border: #e2e8f0;
            --border2: #cbd5e1;
            --shadow: 0 2px 20px rgba(0, 0, 0, .06);
            --shadow2: 0 8px 40px rgba(0, 0, 0, .1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden
        }

        section {
            scroll-margin-top: 76px
        }

        /* Reveal */
        .rv {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .65s ease, transform .65s ease
        }

        .rv.rl {
            transform: translateX(-24px)
        }

        .rv.rr {
            transform: translateX(24px)
        }

        .rv.on {
            opacity: 1;
            transform: translate(0)
        }

        .d1 {
            transition-delay: .1s
        }

        .d2 {
            transition-delay: .2s
        }

        .d3 {
            transition-delay: .3s
        }

        .d4 {
            transition-delay: .4s
        }

        /* Header */
        #hdr {
            background: #fff;
            border-bottom: 1px solid transparent;
            transition: border-color .3s, box-shadow .3s;
            box-shadow: none
        }

        #hdr.on {
            border-color: var(--border);
            box-shadow: 0 2px 16px rgba(0, 0, 0, .06)
        }

        .nl {
            position: relative;
            color: var(--tm);
            font-size: 13px;
            font-weight: 600;
            transition: color .25s
        }

        .nl::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--orange);
            transition: width .3s;
            border-radius: 2px
        }

        .nl:hover {
            color: var(--text)
        }

        .nl:hover::after {
            width: 100%
        }

        /* Badge */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            border: 1px solid rgba(255, 107, 0, .25);
            border-radius: 100px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--orange);
            background: rgba(255, 107, 0, .06)
        }

        .badge::before {
            content: '';
            width: 5px;
            height: 5px;
            background: var(--orange);
            border-radius: 50%;
            animation: blink 2s infinite
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .3
            }
        }

        /* Hero Slider */
        .hero-slide {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            z-index: 0;
            opacity: 0;
            transition: opacity 1.2s ease;
        }

        .hero-slide.active {
            opacity: 1;
        }

        .hero-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(10, 15, 30, .88) 0%, rgba(10, 15, 30, .65) 55%, rgba(10, 15, 30, .2) 100%);
            z-index: 1
        }

        .hc {
            position: relative;
            z-index: 2
        }

        .slide-credit {
            position: absolute;
            bottom: 1rem;
            right: 1.5rem;
            font-size: 9px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .4);
            font-weight: 700;
            z-index: 2
        }

        .hero-dots {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            gap: 6px;
        }

        .hero-dot {
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background: rgba(255, 255, 255, .3);
            transition: width .4s, background .4s;
            cursor: pointer;
            border: none;
            padding: 0;
        }

        .hero-dot.active {
            width: 22px;
            background: var(--orange);
        }

        /* Lifestyle */
        .lf-card {
            border-radius: 1.5rem;
            overflow: hidden;
            position: relative;
            cursor: default;
        }

        .lf-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
            display: block;
        }

        .lf-card:hover img {
            transform: scale(1.04);
        }

        .lf-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10, 15, 30, .92) 0%, rgba(10, 15, 30, .1) 60%);
        }

        .lf-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.75rem;
        }

        /* Video Section */
        .video-wrap {
            border-radius: 1.5rem;
            overflow: hidden;
            position: relative;
            aspect-ratio: 16/9;
            background: #000;
        }

        .video-wrap iframe {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* CTA Banner */
        .cta-banner {
            background: linear-gradient(135deg, var(--orange) 0%, #c94e00 100%);
        }

        /* Stars */
        .stars {
            color: #f59e0b;
            font-size: 11px;
            letter-spacing: 1px;
        }

        /* Product Carousel */
        .prod-section {
            background: #fff;
            overflow: hidden;
        }

        .prod-viewport {
            overflow: hidden;
            position: relative;
        }

        .prod-track {
            display: flex;
            gap: 1.25rem;
            transition: transform .5s cubic-bezier(.4, 0, .2, 1);
            will-change: transform;
            padding: 2rem 0 2.5rem;
        }

        .prod-card {
            flex: 0 0 min(88vw, 440px);
            border-radius: 1.75rem;
            overflow: hidden;
            position: relative;
            background: #111827;
            cursor: pointer;
            box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
            transition: box-shadow .3s, transform .3s;
        }

        .prod-card:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, .13);
            transform: translateY(-4px) scale(1.01);
        }

        .prod-card img {
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
            display: block;
            transition: transform .6s ease;
        }

        .prod-card:hover img {
            transform: scale(1.04);
        }

        .prod-card-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10, 15, 30, .88) 0%, rgba(10, 15, 30, .1) 55%, transparent 100%);
            pointer-events: none;
        }

        .prod-card-body {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.5rem 1.25rem 1.25rem;
        }

        .prod-card-cat {
            font-size: 8px;
            font-weight: 800;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: var(--orange);
            margin-bottom: 5px;
        }

        .prod-card-name {
            font-size: .9rem;
            font-weight: 900;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 4px;
        }

        .prod-card-desc {
            font-size: .65rem;
            color: rgba(255, 255, 255, .55);
            line-height: 1.4;
        }

        .prod-nav {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #fff;
            border: 1.5px solid var(--border);
            box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all .25s;
            color: var(--text);
            font-size: .9rem;
            flex-shrink: 0;
        }

        .prod-nav:hover {
            background: var(--orange);
            color: #fff;
            border-color: var(--orange);
            box-shadow: 0 6px 24px rgba(255, 107, 0, .3);
        }

        .prod-nav:disabled {
            opacity: .3;
            cursor: default;
        }

        .prod-nav:disabled:hover {
            background: #fff;
            color: var(--text);
            border-color: var(--border);
            box-shadow: none;
        }

        /* Mobile: cards were being squeezed by the side arrows eating up width.
           Overlay the arrows on top of the card instead so it can use the full row width. */
        @media (max-width: 767px) {
            #produtos .flex.items-center.gap-4 {
                position: relative;
                gap: 0;
            }

            #produtos .prod-nav {
                position: absolute;
                top: 38%;
                transform: translateY(-50%);
                width: 38px;
                height: 38px;
                font-size: .75rem;
                z-index: 5;
                background: rgba(255, 255, 255, .92);
                backdrop-filter: blur(4px);
            }

            #produtos #prod-prev {
                left: 8px;
            }

            #produtos #prod-next {
                right: 8px;
            }

            .prod-card {
                flex-basis: 90vw;
            }

            .prod-card img {
                aspect-ratio: 4/3;
            }
        }

        /* Stat card */
        .stat-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 1.25rem;
            padding: 1.75rem;
            text-align: center;
            box-shadow: var(--shadow);
            transition: box-shadow .3s, transform .3s
        }

        .stat-card:hover {
            box-shadow: var(--shadow2);
            transform: translateY(-3px)
        }

        .stat-n {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 900;
            color: var(--orange);
            line-height: 1
        }

        /* Service card */
        .svc {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            box-shadow: var(--shadow);
            transition: box-shadow .35s, transform .35s, border-color .35s;
            position: relative;
            overflow: hidden
        }

        .svc:hover {
            box-shadow: var(--shadow2);
            transform: translateY(-5px);
            border-color: rgba(255, 107, 0, .3)
        }

        .svc-n {
            font-size: 4.5rem;
            font-weight: 900;
            line-height: 1;
            color: rgba(255, 107, 0, .06);
            letter-spacing: -.04em;
            position: absolute;
            top: 1.25rem;
            right: 1.5rem;
            transition: color .35s;
            user-select: none
        }

        .svc:hover .svc-n {
            color: rgba(255, 107, 0, .12)
        }

        .svc-ico {
            font-size: 1.75rem;
            color: var(--td);
            transition: color .35s
        }

        .svc:hover .svc-ico {
            color: var(--orange)
        }

        /* Pillar */
        .pillar {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 1.25rem;
            padding: 1.75rem;
            box-shadow: var(--shadow);
            transition: box-shadow .3s, transform .3s, border-color .3s
        }

        .pillar:hover {
            box-shadow: var(--shadow2);
            transform: translateY(-3px);
            border-color: rgba(255, 107, 0, .25)
        }

        /* Step */
        .step-dot {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 2px solid var(--orange);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 900;
            color: var(--orange);
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            box-shadow: 0 0 0 6px rgba(255, 107, 0, .06)
        }

        /* Portfolio */
        .proj {
            overflow: hidden;
            border-radius: 1.5rem;
            position: relative;
            background: var(--bg3)
        }

        .proj img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease;
            display: block
        }

        .proj:hover img {
            transform: scale(1.05)
        }

        .proj-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10, 15, 30, .9) 0%, transparent 55%);
            opacity: 0;
            transition: opacity .4s
        }

        .proj:hover .proj-ov {
            opacity: 1
        }

        .proj-cat {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--orange);
            margin-bottom: 4px
        }

        /* Testi */
        .testi {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 1.5rem;
            padding: 2.25rem;
            box-shadow: var(--shadow);
            transition: box-shadow .3s, transform .3s
        }

        .testi:hover {
            box-shadow: var(--shadow2);
            transform: translateY(-3px)
        }

        .testi-q {
            font-size: 3rem;
            font-weight: 900;
            color: var(--orange);
            line-height: 1;
            opacity: .35;
            margin-bottom: .5rem
        }

        /* B2B list */
        .b2b-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: .875rem 0;
            border-bottom: 1px solid var(--border);
            transition: padding-left .25s, color .25s
        }

        .b2b-item:hover {
            padding-left: 6px;
            color: var(--orange)
        }

        .b2b-item:last-child {
            border-bottom: none
        }

        .b2b-dot {
            width: 6px;
            height: 6px;
            background: var(--orange);
            border-radius: 50%;
            flex-shrink: 0
        }

        /* Partner */
        .prt {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 1.25rem;
            padding: 2rem 2.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            box-shadow: var(--shadow);
            transition: box-shadow .3s, transform .3s, border-color .3s;
            cursor: default
        }

        .prt:hover {
            box-shadow: var(--shadow2);
            transform: translateY(-3px);
            border-color: rgba(255, 107, 0, .3)
        }

        .prt-n {
            font-size: 1.3rem;
            font-weight: 900;
            color: var(--td);
            transition: color .3s
        }

        .prt:hover .prt-n {
            color: var(--text)
        }

        .prt-s {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--border2);
            transition: color .3s
        }

        .prt:hover .prt-s {
            color: var(--tm)
        }

        /* Form */
        .ff {
            width: 100%;
            background: var(--bg2);
            border: 1px solid var(--border);
            border-radius: .875rem;
            padding: 14px 18px;
            color: var(--text);
            font-size: 13px;
            font-family: 'Inter', sans-serif;
            outline: none;
            transition: border-color .25s, background .25s
        }

        .ff::placeholder {
            color: var(--td)
        }

        .ff:focus {
            border-color: rgba(255, 107, 0, .4);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(255, 107, 0, .06)
        }

        /* Image frame */
        .img-frame {
            border-radius: 1.5rem;
            overflow: hidden;
            position: relative
        }

        .img-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        /* WA */
        @keyframes wa {
            0% {
                transform: scale(.95);
                box-shadow: 0 0 0 0 rgba(37, 211, 102, .7)
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 14px rgba(37, 211, 102, 0)
            }

            100% {
                transform: scale(.95);
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0)
            }
        }

        .wa-pulse {
            animation: wa 2s infinite
        }

        /* Misc */
        ::-webkit-scrollbar {
            width: 4px
        }

        ::-webkit-scrollbar-track {
            background: #f1f4f9
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--orange)
        }

        .bar {
            display: inline-block;
            width: 2.5rem;
            height: 3px;
            background: var(--orange);
            border-radius: 2px
        }

        .sec-label {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: var(--orange)
        }

        .orange-dot {
            width: 5px;
            height: 5px;
            background: var(--orange);
            border-radius: 50%;
            flex-shrink: 0
        }

        /* ═══════════ SELETOR DE FRENTE (residencial / industrial) ═══════════ */
        .seg {
            display: inline-flex;
            padding: 4px;
            border-radius: 100px;
            background: var(--bg3);
            border: 1px solid var(--border);
            gap: 2px;
        }

        .seg a {
            padding: 8px 20px;
            border-radius: 100px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .02em;
            color: var(--tm);
            transition: background .25s, color .25s;
            white-space: nowrap;
        }

        .seg a:hover {
            color: var(--text)
        }

        .seg a.on {
            background: var(--orange);
            color: #fff;
            box-shadow: 0 4px 14px rgba(255, 107, 0, .3)
        }

        /* Variante sem moldura — usada na home, onde nenhuma das duas está ativa */
        .seg-plain {
            background: transparent;
            border-color: transparent;
            padding: 0;
            gap: 6px;
        }

        .seg-plain a {
            color: var(--tm);
            border: 1px solid transparent;
        }

        .seg-plain a:hover {
            color: var(--orange);
            border-color: rgba(255, 107, 0, .3);
            background: rgba(255, 107, 0, .05);
        }

        /* Variante do seletor sobre fundo escuro */
        .seg-dark {
            background: rgba(255, 255, 255, .06);
            border-color: rgba(255, 255, 255, .12)
        }

        .seg-dark a {
            color: rgba(255, 255, 255, .5)
        }

        .seg-dark a:hover {
            color: #fff
        }

        /* ═══════════ CARDS DE ESCOLHA (home) ═══════════ */
        .choice {
            position: relative;
            display: block;
            border-radius: 1.75rem;
            overflow: hidden;
            background: var(--dark2);
            min-height: 420px;
            box-shadow: var(--shadow);
            transition: box-shadow .4s, transform .4s;
        }

        .choice:hover {
            box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
            transform: translateY(-6px)
        }

        .choice-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transition: transform .8s ease;
        }

        .choice:hover .choice-bg {
            transform: scale(1.06)
        }

        .choice-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10, 15, 30, .95) 8%, rgba(10, 15, 30, .55) 55%, rgba(10, 15, 30, .25) 100%);
        }

        .choice-body {
            position: absolute;
            inset: auto 0 0 0;
            padding: 2.5rem;
        }

        .choice-arrow {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--orange);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
            transition: transform .35s;
        }

        .choice:hover .choice-arrow {
            transform: translateX(6px)
        }

        /* ═══════════ CARD TÉCNICO (industrial, fundo escuro) ═══════════ */
        .tec {
            background: rgba(255, 255, 255, .03);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 1.5rem;
            padding: 2rem;
            transition: background .35s, border-color .35s, transform .35s;
            position: relative;
            overflow: hidden;
        }

        .tec:hover {
            background: rgba(255, 255, 255, .05);
            border-color: rgba(255, 107, 0, .35);
            transform: translateY(-5px)
        }

        .tec-ico {
            font-size: 1.6rem;
            color: var(--orange);
        }

        .tec-n {
            font-size: 4.5rem;
            font-weight: 900;
            line-height: 1;
            color: rgba(255, 255, 255, .04);
            letter-spacing: -.04em;
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            user-select: none;
            transition: color .35s;
        }

        .tec:hover .tec-n {
            color: rgba(255, 107, 0, .12)
        }

        /* ═══════════ TAGS / CHIPS TÉCNICOS ═══════════ */
        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            background: var(--bg3);
            border: 1px solid var(--border);
            color: var(--tm);
            transition: border-color .25s, color .25s;
        }

        .chip:hover {
            border-color: rgba(255, 107, 0, .35);
            color: var(--text)
        }

        .chip-dark {
            background: rgba(255, 255, 255, .04);
            border-color: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .55)
        }

        .chip-dark:hover {
            border-color: rgba(255, 107, 0, .4);
            color: #fff
        }

        /* ═══════════ SEGMENTOS ATENDIDOS ═══════════ */
        .segm {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 1.1rem 1.25rem;
            border-radius: 1rem;
            background: #fff;
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            transition: border-color .3s, transform .3s;
        }

        .segm:hover {
            border-color: rgba(255, 107, 0, .3);
            transform: translateY(-3px)
        }

        .segm i {
            font-size: 1.1rem;
            color: var(--orange);
            width: 24px;
            text-align: center;
            flex-shrink: 0
        }

        /* ═══════════ NORMAS ═══════════ */
        .norma {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
        }

        .norma:last-child {
            border-bottom: none
        }

        .norma-tag {
            font-size: 10px;
            font-weight: 900;
            letter-spacing: .08em;
            color: var(--orange);
            background: rgba(255, 107, 0, .1);
            border: 1px solid rgba(255, 107, 0, .25);
            border-radius: 6px;
            padding: 4px 8px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* Seletor: em telas entre 1024 e 1280 o rótulo longo aperta a barra */
        @media (min-width:1024px) and (max-width:1279px) {
            .seg a {
                padding: 7px 13px;
                font-size: 11px
            }
        }