/* Estilos do site New Imperio Projetos.
   Estavam embutidos no index.html (71 KB, 52%% do arquivo). Saíram para ca
   por dois motivos: as paginas por ambiente reaproveitam o MESMO arquivo em
   vez de repetir tudo, e o navegador guarda em cache uma vez so — quem
   navega da home para /cozinha-planejada nao rebaixa nada.
   A regra de seguranca da hospedagem aceita CSS externo do proprio site. */

:root {
            --bg: #15130F;
            --bg-warm: #1B1814;
            --bg-card: #211E18;
            --offwhite: #E4E4E3;
            --offwhite-soft: #CFCDC8;
            --brand: #6E8867;
            --brand-soft: #CAD1C1;
            --brand-deep: #4A5D45;
            --brand-dark: #3A4A36;
            --graphite: #4B4D49;
            --ink: #15130F;
            --gray-900: #585957;
            --gray-600: #707070;
            --gray-400: #8A8B8A;
            --gold: #A8B89C;
            --terra: #6E8867;
            --line: rgba(110, 136, 103, 0.18);
            --line-strong: rgba(110, 136, 103, 0.4);
            --overlay: rgba(0, 0, 0, 0.48);
        }

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

        html,
        body {
            background: var(--bg);
            color: var(--offwhite);
            font-family: 'Sora', sans-serif;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden
        }

        ::selection {
            background: var(--brand);
            color: var(--offwhite)
        }

        /* LOADER */
        #loader {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 28px;
            transition: opacity .8s ease, visibility .8s
        }

        #loader.hidden {
            opacity: 0;
            visibility: hidden
        }

        .loader-logo {
            font-family: 'Sora';
            font-weight: 300;
            font-size: 42px;
            letter-spacing: 0.08em;
            color: var(--offwhite);
            position: relative
        }

        .loader-logo em {
            font-style: normal;
            color: var(--brand);
            font-weight: 600
        }

        .loader-logo::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -12px;
            transform: translateX(-50%);
            width: 0;
            height: 1px;
            background: var(--brand);
            animation: lineGrow 1.8s ease forwards
        }

        @keyframes lineGrow {
            to {
                width: 60px
            }
        }

        .loader-sub {
            font-family: 'Sora';
            font-size: 10px;
            letter-spacing: 0.4em;
            text-transform: uppercase;
            color: var(--gray-400);
            font-weight: 400
        }

        .loader-bar {
            width: 200px;
            height: 1px;
            background: rgba(255, 255, 255, 0.08);
            overflow: hidden;
            position: relative;
            margin-top: 8px
        }

        .loader-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: linear-gradient(90deg, var(--brand-deep), var(--brand));
            width: 0%;
            transition: width .3s ease
        }

        .loader-status {
            font-size: 10px;
            color: var(--gray-400);
            letter-spacing: 0.2em;
            text-transform: uppercase
        }

        /* NAV */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            padding: 24px 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* Era "transition: all", que animava padding e backdrop-filter
               junto e forcava recalculo de layout na barra fixa a cada vez
               que o scroll cruza os 60px. Lista explicita resolve. */
            transition: padding .4s var(--saida), background .4s var(--saida),
                border-color .4s var(--saida);
            /* Era "background: transparent". O fundo da barra e a cena 3D, que
               vai de parede clara a piso escuro conforme a pessoa gira a
               cozinha — sobre a parede clara o menu simplesmente sumia.
               Escurecer a barra inteira mataria o efeito de flutuar sobre a
               cena; o degrade resolve a leitura e mantem o efeito, porque a
               parte de baixo continua transparente. */
            background: linear-gradient(180deg,
                    rgba(21, 19, 15, .82) 0%,
                    rgba(21, 19, 15, .55) 55%,
                    rgba(21, 19, 15, 0) 100%)
        }

        nav.scrolled {
            padding: 16px 48px;
            background: rgba(21, 19, 15, 0.88);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--line)
        }

        /* O logo era desenhado em CSS ("n" + <strong>e</strong> + "w"), o que
           imitava a marca sem ser a marca: a assinatura "Império Projetos" nem
           existia. Agora e o arquivo real do cliente, com transparencia. */
        .logo-new {
            display: inline-block;
            line-height: 0;
            cursor: pointer
        }

        .logo-new img {
            height: 70px;
            width: auto;
            display: block;
            /* O logo e branco com verde e fica sobre a cena 3D. Contra a
               parede clara ele desaparecia junto com o menu. */
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55))
        }

        .loader-logo img {
            height: 96px;
            width: auto;
            display: block;
            margin: 0 auto
        }

        @media (max-width:640px) {
            .logo-new img {
                height: 52px
            }

            .loader-logo img {
                height: 72px
            }
        }

        .logo-new strong {
            font-weight: 600;
            color: var(--brand)
        }

        .logo-new small {
            font-size: 9px;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--gray-400);
            margin-left: 10px;
            font-weight: 400
        }

        .nav-links {
            display: flex;
            gap: 36px;
            list-style: none
        }

        .nav-links li {
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--offwhite-soft);
            cursor: pointer;
            position: relative;
            font-weight: 400;
            transition: color .3s
        }

        .nav-links li::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 0;
            height: 1px;
            background: var(--brand);
            transition: width .4s
        }

        .nav-links li:hover {
            color: var(--brand-soft)
        }

        .nav-links li:hover::after {
            width: 100%
        }

        /* Pulso suave para chamar atencao para o botao principal do topo —
           e o unico CTA que fica visivel o tempo todo, mesmo antes de rolar a
           pagina. Usa box-shadow (brilho), nao scale (tamanho): brilho pulsando
           chama atencao sem fazer o botao "pular" de tamanho, que parece
           barato e desloca o layout ao redor. Para no hover, para nao competir
           com a transicao de cor que ja existe ali. Cai automaticamente na
           regra de prefers-reduced-motion que ja existe mais abaixo. */
        @keyframes pulsarCta {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(110, 136, 103, .55)
            }

            50% {
                box-shadow: 0 0 0 9px rgba(110, 136, 103, 0)
            }
        }

        .nav-cta {
            padding: 12px 24px;
            background: var(--brand);
            color: var(--offwhite);
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all .3s;
            font-family: 'Sora';
            font-weight: 600;
            border: none;
            border-radius: 2px;
            animation: pulsarCta 2.6s ease-out infinite
        }

        .nav-cta:hover {
            animation-play-state: paused
        }

        .nav-cta:hover {
            background: var(--brand-deep);
            transform: translateY(-1px)
        }

        /* HERO */
        #hero {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 740px;
            overflow: hidden;
            background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%)
        }

        #hero-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 10;
            pointer-events: none;
            padding: 0 48px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-top: 120px;
            padding-bottom: 70px
        }

        .hero-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start
        }

        .hero-campaign {
            font-size: 11px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--brand-soft);
            /* Mesmo problema do menu: verde claro sobre a cena, que fica clara
               quando a pessoa gira para a parede. */
            text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 12px;
            pointer-events: auto
        }

        .hero-campaign::before {
            content: '';
            display: inline-block;
            width: 24px;
            height: 1px;
            background: var(--brand-soft)
        }

        .hero-bottom {
            pointer-events: none
        }

        .hero-h1 {
            font-family: 'Fraunces';
            font-weight: 300;
            font-size: clamp(44px, 7.5vw, 108px);
            line-height: 0.96;
            letter-spacing: -0.02em;
            color: var(--offwhite);
            max-width: 900px
        }

        .hero-h1 em {
            font-style: italic;
            font-weight: 400;
            color: var(--brand-soft);
            position: relative
        }

        .hero-h1 em::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0.08em;
            width: 100%;
            height: 1px;
            background: var(--brand);
            transform: scaleX(0);
            transform-origin: left;
            animation: underline 1.4s ease .8s forwards
        }

        @keyframes underline {
            to {
                transform: scaleX(1)
            }
        }

        .hero-sub {
            font-family: 'Sora';
            font-weight: 300;
            font-size: 15px;
            line-height: 1.7;
            color: var(--offwhite-soft);
            max-width: 460px;
            margin-top: 24px;
            opacity: 0;
            animation: fadeUp 1s ease .5s forwards
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(20px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .hero-actions {
            display: flex;
            gap: 16px;
            margin-top: 32px;
            pointer-events: auto;
            opacity: 0;
            animation: fadeUp 1s ease .7s forwards
        }

        /* Os dois botoes da abertura viraram <a>: precisam de display e de
           text-decoration, que <button> trazia de graca. */
        .btn-primary,
        .btn-ghost {
            display: inline-block;
            text-decoration: none
        }

        .btn-primary:focus-visible,
        .btn-ghost:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 4px
        }

        .btn-primary {
            padding: 15px 30px;
            background: var(--brand);
            color: var(--offwhite);
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all .3s;
            font-family: 'Sora';
            position: relative;
            overflow: hidden;
            border-radius: 2px
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--brand-deep);
            transform: translateY(100%);
            transition: transform .4s cubic-bezier(.4, 0, .2, 1)
        }

        .btn-primary:hover::before {
            transform: translateY(0)
        }

        .btn-primary span {
            position: relative;
            z-index: 1
        }

        .btn-ghost {
            padding: 15px 30px;
            background: transparent;
            color: var(--offwhite);
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-weight: 500;
            cursor: pointer;
            border: 1px solid var(--line-strong);
            transition: all .3s;
            font-family: 'Sora';
            border-radius: 2px
        }

        .btn-ghost:hover {
            border-color: var(--brand-soft);
            color: var(--brand-soft);
            background: rgba(110, 136, 103, 0.08)
        }

        /* SCENE CONTROLS */
        .scene-controls {
            position: absolute;
            top: 50%;
            right: 32px;
            transform: translateY(-50%);
            z-index: 20;
            background: rgba(21, 19, 15, 0.78);
            backdrop-filter: blur(16px);
            border: 1px solid var(--line);
            padding: 22px;
            width: 268px;
            pointer-events: auto;
            border-radius: 3px
        }

        .scene-controls-title {
            font-size: 9px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--brand-soft);
            margin-bottom: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .scene-controls-title::before {
            content: '';
            width: 14px;
            height: 1px;
            background: var(--brand)
        }

        .control-group {
            margin-bottom: 20px
        }

        .control-group:last-child {
            margin-bottom: 0
        }

        .control-label {
            font-size: 10px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--gray-400);
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            font-weight: 500
        }

        .control-label span {
            color: var(--brand-soft);
            font-family: 'Fraunces';
            font-style: italic;
            text-transform: none;
            letter-spacing: 0;
            font-size: 12px
        }

        .view-options {
            display: flex;
            gap: 5px
        }

        .view-options button {
            flex: 1;
            padding: 8px 0;
            background: transparent;
            border: 1px solid var(--line);
            color: var(--offwhite-soft);
            font-size: 9px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all .3s;
            font-family: 'Sora';
            border-radius: 2px
        }

        /* Hover e "selecionado" eram a MESMA regra: passar o mouse em "Topo"
           deixava dois botoes com cara de escolhido ao mesmo tempo, e no
           celular o hover ainda grudava depois do toque. Agora o fundo cheio
           e exclusivo do selecionado; o hover so acende a borda. */
        .view-options button:hover:not(.active) {
            border-color: var(--brand-soft);
            color: var(--offwhite)
        }

        .view-options button.active {
            background: var(--brand);
            color: var(--offwhite);
            border-color: var(--brand)
        }

        .view-options button:active {
            transform: scale(.96)
        }

        .color-swatches {
            display: flex;
            gap: 7px;
            flex-wrap: wrap
        }

        .swatch {
            width: 34px;
            height: 34px;
            border: 1px solid var(--line);
            cursor: pointer;
            border-radius: 50%;
            position: relative;
            transition: transform .3s;
            background: var(--c)
        }

        .swatch:hover {
            transform: scale(1.1)
        }

        .swatch.active {
            border-color: var(--brand-soft)
        }

        .swatch.active::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 1px solid var(--brand-soft);
            border-radius: 50%
        }

        .wood-options {
            display: flex;
            gap: 5px
        }

        .wood-options button {
            flex: 1;
            padding: 8px 0;
            background: transparent;
            border: 1px solid var(--line);
            color: var(--offwhite-soft);
            font-size: 9px;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: all .3s;
            font-family: 'Sora';
            border-radius: 2px
        }

        .wood-options button:hover:not(.active) {
            border-color: var(--brand-soft);
            color: var(--offwhite)
        }

        .wood-options button.active {
            background: var(--brand);
            color: var(--offwhite);
            border-color: var(--brand)
        }

        .wood-options button:active {
            transform: scale(.96)
        }

        .toggle-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0
        }

        /* Era ".toggle-row label" e nao casava com NADA: quando os
           interruptores viraram acessiveis, os rotulos passaram a ser <span>
           com id, para o aria-labelledby apontar. O seletor ficou orfao e os
           tres rotulos renderizavam com os 16px herdados do corpo em vez dos
           11px pretendidos — desalinhados do resto do painel. */
        .toggle-row span,
        .toggle-row label {
            font-size: 11px;
            color: var(--offwhite-soft);
            font-weight: 400
        }

        .toggle {
            width: 32px;
            height: 16px;
            background: var(--graphite);
            border-radius: 10px;
            position: relative;
            cursor: pointer;
            border: 1px solid var(--line);
            /* virou <button>: precisa zerar o padding que o navegador poe */
            padding: 0;
            flex: 0 0 auto;
            transition: background .4s var(--saida)
        }

        /* O interruptor tem 16px de altura — bem abaixo do dedo. A area
           clicavel e esticada por um pseudo-elemento invisivel de 44px, sem
           mexer no desenho. Mesmo cuidado que ja existia no .det-ponto. */
        .toggle::before {
            content: '';
            position: absolute;
            inset: -14px -8px
        }

        .toggle.on {
            background: var(--brand)
        }

        .toggle::after {
            content: '';
            position: absolute;
            top: 1px;
            left: 1px;
            width: 12px;
            height: 12px;
            background: var(--offwhite);
            border-radius: 50%;
            transition: transform .3s
        }

        .toggle.on::after {
            transform: translateX(16px)
        }

        /* Era cinza-400 sobre cena escura: a dica existia e ninguem lia.
           Ganhou fundo proprio para descolar da imagem, que muda de cor
           conforme a pessoa gira a cozinha. */
        .scene-hint {
            position: absolute;
            bottom: 28px;
            left: 48px;
            z-index: 15;
            font-size: 10px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--offwhite-soft);
            display: flex;
            align-items: center;
            gap: 10px;
            pointer-events: none;
            padding: 9px 16px;
            background: rgba(21, 19, 15, .55);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(228, 228, 227, .12);
            border-radius: 100px
        }

        .scene-hint strong {
            color: var(--brand-soft);
            font-weight: 600;
            font-size: 12px
        }

        @media (max-width:640px) {
            /* right 96px = botao do WhatsApp (28px + 56px) + folga. Com
               right 20px a dica passava por baixo do botao e o fim da frase
               sumia. */
            .scene-hint {
                left: 20px;
                right: 96px;
                bottom: 20px;
                font-size: 9px;
                justify-content: flex-start
            }
        }

        .scene-hint svg {
            animation: rotateHint 5s ease-in-out infinite
        }

        @keyframes rotateHint {

            0%,
            100% {
                transform: rotate(0)
            }

            50% {
                transform: rotate(180deg)
            }
        }

        /* left/top saíram: a posição agora vem por transform, calculada no
           cena.js. Com left/top o navegador refazia o layout a cada quadro
           enquanto o mouse percorria um móvel. */
        .furn-label {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 25;
            background: rgba(21, 19, 15, 0.92);
            backdrop-filter: blur(12px);
            border: 1px solid var(--line-strong);
            padding: 12px 18px;
            pointer-events: none;
            opacity: 0;
            transition: opacity .22s var(--saida);
            will-change: transform;
            border-radius: 2px
        }

        .furn-label.show {
            opacity: 1
        }

        .furn-label .fl-cat {
            font-size: 8px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--brand-soft);
            margin-bottom: 3px;
            font-weight: 600
        }

        .furn-label .fl-name {
            font-family: 'Fraunces';
            font-size: 18px;
            font-weight: 400;
            font-style: italic;
            color: var(--offwhite)
        }

        .furn-label .fl-spec {
            font-size: 10px;
            color: var(--gray-400);
            margin-top: 4px;
            letter-spacing: 0.05em
        }

        /* SECTIONS */
        section {
            padding: 120px 48px;
            position: relative
        }

        .section-label {
            font-size: 11px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--brand);
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 600
        }

        .section-label::before {
            content: '';
            width: 20px;
            height: 1px;
            background: var(--brand)
        }

        .section-title {
            font-family: 'Fraunces';
            font-weight: 300;
            font-size: clamp(36px, 5vw, 72px);
            line-height: 1.03;
            letter-spacing: -0.02em;
            color: var(--offwhite);
            max-width: 1000px
        }

        .section-title em {
            font-style: italic;
            font-weight: 400;
            color: var(--brand-soft)
        }

        /* CONHEÇA A NEW */
        #conheca {
            background: var(--bg)
        }

        .conheca-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            margin-top: 72px;
            max-width: 1280px
        }

        .conheca-col p {
            font-size: 17px;
            line-height: 1.75;
            color: var(--offwhite-soft);
            font-weight: 300
        }

        .conheca-col p em {
            color: var(--brand-soft);
            font-style: italic;
            font-weight: 400
        }

        .conheca-col p+p {
            margin-top: 20px
        }

        .conheca-cta {
            margin-top: 28px;
            display: flex;
            gap: 16px;
            flex-wrap: wrap
        }

        .link-arrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--brand-soft);
            cursor: pointer;
            transition: gap .3s;
            font-weight: 500
        }

        .link-arrow:hover {
            gap: 16px
        }

        .link-arrow svg {
            transition: transform .3s
        }

        .link-arrow:hover svg {
            transform: translateX(4px)
        }

        .conheca-stats {
            margin-top: 72px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
            max-width: 1280px;
            padding-top: 56px;
            border-top: 1px solid var(--line)
        }

        .stat-num {
            font-family: 'Fraunces';
            font-size: 48px;
            font-weight: 300;
            color: var(--brand-soft);
            line-height: 1
        }

        .stat-num em {
            font-style: italic
        }

        .stat-label {
            font-size: 10px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--gray-400);
            margin-top: 8px;
            font-weight: 500
        }

        /* AMBIENTES */
        #ambientes {
            background: var(--bg-warm);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line)
        }

        .amb-grid {
            margin-top: 64px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .amb-card {
            position: relative;
            aspect-ratio: 4/5;
            overflow: hidden;
            cursor: pointer;
            border-radius: 3px;
            background: var(--bg-card)
        }

        .amb-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1s cubic-bezier(.4, 0, .2, 1), filter .6s;
            filter: brightness(0.78) saturate(0.95)
        }

        .amb-card:hover img {
            transform: scale(1.06);
            filter: brightness(0.95) saturate(1.05)
        }

        .amb-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(21, 19, 15, 0.1) 30%, rgba(21, 19, 15, 0.92) 100%);
            pointer-events: none
        }

        .amb-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 28px;
            z-index: 3
        }

        .amb-num {
            font-family: 'Fraunces';
            font-size: 12px;
            font-style: italic;
            color: var(--brand-soft);
            margin-bottom: 6px
        }

        .amb-name {
            font-family: 'Fraunces';
            font-size: 30px;
            font-weight: 400;
            color: var(--offwhite);
            margin-bottom: 8px;
            line-height: 1.05
        }

        .amb-desc {
            font-size: 13px;
            line-height: 1.55;
            color: var(--offwhite-soft);
            font-weight: 300;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity .4s, max-height .4s
        }

        .amb-card:hover .amb-desc {
            opacity: 1;
            max-height: 80px
        }

        .amb-arrow {
            margin-top: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 10px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--brand-soft);
            font-weight: 600;
            opacity: 0;
            transform: translateX(-10px);
            transition: all .4s
        }

        .amb-card:hover .amb-arrow {
            opacity: 1;
            transform: translateX(0)
        }

        .amb-arrow {
            text-decoration: none
        }

        /* O link nasce com opacity:0 e so aparece no hover do card. Sem esta
           regra, quem navega por Tab colocaria o foco num link invisivel e nao
           faria ideia de onde esta. */
        .amb-arrow:focus-visible {
            opacity: 1;
            transform: translateX(0);
            outline: 2px solid var(--brand-soft);
            outline-offset: 4px
        }

        /* Celular nao tem :hover — sem isto a chamada "Pedir orcamento" fica
           invisivel para sempre justamente em quem mais acessa daqui. */
        @media (hover: none) {

            .amb-arrow,
            .amb-card .amb-desc {
                opacity: 1;
                transform: none
            }
        }

        /* Ambientes que a loja atende mas ainda nao tem foto propria.
           Lista em texto e honesto; card com render de banco nao e. */
        .amb-outros {
            margin-top: 56px;
            padding: 32px;
            border: 1px solid var(--line, rgba(228, 228, 227, .14));
            border-radius: 4px;
            background: var(--bg-card)
        }

        .amb-outros-titulo {
            font-size: 10px;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--brand-soft);
            font-weight: 600;
            margin-bottom: 18px
        }

        .amb-outros-lista {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 10px 12px
        }

        .amb-outros-lista li {
            font-size: 14px
        }

        /* Viraram links: precisam parecer clicaveis e ter alvo de dedo. */
        .amb-outros-lista a {
            display: block;
            color: var(--offwhite-soft);
            text-decoration: none;
            border: 1px solid rgba(228, 228, 227, .16);
            border-radius: 100px;
            padding: 11px 18px;
            min-height: 44px;
            line-height: 22px;
            transition: border-color .3s var(--saida), color .3s var(--saida),
                background .3s var(--saida)
        }

        .amb-outros-lista a:hover {
            color: var(--offwhite);
            border-color: var(--brand-soft);
            background: rgba(110, 136, 103, .1)
        }

        .amb-outros-lista a:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 3px
        }

        .amb-outros-nota {
            margin: 20px 0 0;
            font-size: 14px;
            line-height: 1.6;
            color: var(--offwhite-soft)
        }

        /* COMO FUNCIONA */
        .proc-lista {
            margin: 56px 0 0;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1px;
            background: rgba(228, 228, 227, .12);
            border: 1px solid rgba(228, 228, 227, .12)
        }

        .proc-etapa {
            background: var(--bg);
            padding: 34px 30px
        }

        .proc-num {
            font-family: var(--serif, Fraunces, Georgia, serif);
            font-size: 34px;
            color: var(--brand-soft);
            line-height: 1;
            margin-bottom: 16px
        }

        .proc-titulo {
            font-size: 17px;
            font-weight: 600;
            color: var(--offwhite);
            margin: 0 0 10px
        }

        .proc-texto {
            margin: 0;
            font-size: 14.5px;
            line-height: 1.7;
            color: var(--offwhite-soft)
        }

        /* ── REFINAMENTO DO PAINEL "COMPOR AMBIENTE" ──────────────────
           Curvas proprias em vez de "ease" generico. A diferenca entre um
           painel que parece de configurador caro e um que parece formulario
           esta quase toda aqui: como a coisa chega, nao onde ela chega. */
        :root {
            /* desacelera forte no fim — sensacao de peso, nao de mola */
            --saida: cubic-bezier(.16, 1, .3, 1);
            /* leve passada do ponto e volta — bom para confirmar escolha */
            --volta: cubic-bezier(.34, 1.4, .64, 1)
        }

        .swatch {
            transition: transform .45s var(--volta), border-color .3s var(--saida),
                box-shadow .3s var(--saida)
        }

        .swatch:hover {
            transform: scale(1.12)
        }

        .swatch.active {
            transform: scale(1.14);
            box-shadow: 0 0 0 1px rgba(21, 19, 15, .9), 0 4px 14px rgba(0, 0, 0, .45)
        }

        .swatch:active {
            transform: scale(.94);
            transition-duration: .08s
        }

        /* 34px e alvo de mouse, nao de dedo. No celular sobem para 44px —
           mesmo criterio ja aplicado no .det-ponto e no .scene-controls-btn. */
        @media (max-width:640px) {
            .swatch {
                width: 44px;
                height: 44px
            }
        }

        .swatch:focus-visible,
        .view-options button:focus-visible,
        .wood-options button:focus-visible,
        .toggle:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 3px
        }

        /* Enquanto a camera viaja (ate ~1,6s), o botao mostra que a ordem foi
           recebida. Sem isso o usuario clica de novo achando que falhou. */
        .view-options button.em-transito {
            border-color: var(--brand-soft);
            color: var(--offwhite);
            position: relative;
            overflow: hidden
        }

        .view-options button.em-transito::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            background: var(--brand-soft);
            transform-origin: left;
            animation: percorrer 1.2s var(--saida)
        }

        @keyframes percorrer {
            from {
                transform: scaleX(0)
            }

            to {
                transform: scaleX(1)
            }
        }

        .view-options button,
        .wood-options button {
            transition: background .3s var(--saida), border-color .3s var(--saida),
                color .3s var(--saida)
        }

        /* Quem pediu menos animacao no sistema operacional esta pedindo por um
           motivo — enjoo, sensibilidade vestibular, ou so preferencia. Nao da
           para desligar a cena 3D inteira sem descaracterizar o site, mas tudo
           que e enfeite para de se mexer. */
        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important
            }

            .reveal {
                opacity: 1 !important;
                transform: none !important
            }
        }

        /* ── CONTRASTE: correções medidas, não achismo ────────────────
           Todas as razões abaixo foram calculadas pela fórmula do WCAG a
           partir dos hex reais da paleta, e conferidas duas vezes.

           O verde da marca (#6E8867) com texto claro (#E4E4E3) dá 3,07:1.
           O mínimo legível (AA) é 4,5:1. Isso atingia TODOS os botões
           principais: "Solicite orçamento", "Ver ambientes", o botão do
           orçamento final e os botões de vista e bancada selecionados.
           Trocando o FUNDO para --brand-deep (#4A5D45) a razão vai para
           5,61:1, e no hover --brand-dark (#3A4A36) chega a 7,46:1, que já
           é o nível AAA. O verde da marca continua no site inteiro — só
           deixa de ser fundo de texto pequeno. */
        .btn-primary,
        .nav-cta,
        .cta-btn,
        .view-options button.active,
        .wood-options button.active {
            background: var(--brand-deep)
        }

        .btn-primary:hover,
        .nav-cta:hover,
        .cta-btn:hover {
            background: var(--brand-dark)
        }

        /* 4,16:1 sobre o gradiente do card — o texto mais fraco do site. */
        .col-desc {
            color: var(--offwhite-soft)
        }

        /* A borda das bolinhas de cor era --line: 1,24:1 contra o painel, ou
           seja, invisível. E o acabamento "Carvão" (#2A2826) contra o painel
           escuro dava 1,26:1 — a bolinha sumia por completo.
           Dois aros resolvem os dois casos: o escuro por dentro destaca cor
           clara, o claro por fora destaca cor escura. */
        .swatch {
            border: 1px solid rgba(21, 19, 15, .85);
            box-shadow: 0 0 0 1px rgba(228, 228, 227, .6)
        }

        .swatch.active {
            box-shadow: 0 0 0 1px rgba(228, 228, 227, .6), 0 4px 14px rgba(0, 0, 0, .45)
        }

        /* Interruptor desligado a 2,17:1 — não dava para ver que existia. */
        .toggle:not(.on) {
            background: #6A6D68
        }

        /* Os pontos sobre a foto: o anel branco caía para 2,12:1 sobre as
           partes claras da imagem. O halo escuro garante leitura sobre
           QUALQUER pixel, claro ou escuro. */
        .det-ponto {
            box-shadow: 0 0 0 2px rgba(0, 0, 0, .6)
        }

        .det-ponto:focus-visible {
            box-shadow: 0 0 0 5px rgba(0, 0, 0, .7)
        }

        /* Faltavam estes seis. Sem regra própria o anel fica por conta do
           navegador, e cada um desenha de um jeito. */
        .nav-menu-btn:focus-visible,
        .scene-controls-btn:focus-visible,
        .link-arrow:focus-visible,
        .cta-btn:focus-visible,
        .cta-phone:focus-visible,
        .whatsapp-float:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 4px
        }

        /* A barra do topo é fixa e cobre ~94px. Sem isto, ao navegar por Tab,
           o elemento focado para debaixo dela — a pessoa não vê onde está.
           scroll-margin-top já existia nas seções; faltava para o foco. */
        html {
            scroll-padding-top: 96px
        }

        /* ── NÍVEL AAA: contraste 7:1 ─────────────────────────────────
           --gray-400 (#8A8B8A) dá 5,42:1 sobre o fundo: passa no mínimo
           legível, falha no nível reforçado. É usado em 14 pontos, todos de
           texto pequeno e secundário — rodapé, migalhas, rótulos de número,
           frases do carregamento — que é justamente onde o contraste alto
           mais importa, porque a fonte já é miúda.
           #A0A19F leva para 7,15:1 sem clarear a ponto de competir com o
           texto principal. */
        :root {
            --gray-400: #A0A19F
        }

        /* O verde da marca como TEXTO dá 4,75:1: passa raspando no mínimo e
           falha no reforçado. Nos rótulos de seção ("02 — AMBIENTES") o
           verde-claro dá 11,84:1 e continua sendo a cor da marca. */
        .section-label,
        .cta-label {
            color: var(--brand-soft)
        }

        @media (max-width:640px) {
            html {
                scroll-padding-top: 68px
            }
        }

        .btn-abrir-tudo {
            width: 100%;
            min-height: 44px;
            padding: 12px 14px;
            background: transparent;
            border: 1px solid var(--brand-soft);
            border-radius: 2px;
            color: var(--offwhite);
            font-family: 'Sora';
            font-size: 10px;
            letter-spacing: .16em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background .3s var(--saida), color .3s var(--saida)
        }

        .btn-abrir-tudo:hover,
        .btn-abrir-tudo[aria-pressed="true"] {
            background: var(--brand-deep);
            color: var(--offwhite)
        }

        .btn-abrir-tudo:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 3px
        }

        /* MENU — o estilo morava em ".nav-links li"; o texto agora fica no <a>,
           que e o que recebe foco de teclado. */
        .nav-links a {
            display: inline-block;
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            /* Subiu de --offwhite-soft para --offwhite. Texto pequeno, fino e
               com muito espacamento entre letras e o pior caso de leitura:
               perde contraste muito antes de um texto normal. */
            color: var(--offwhite);
            /* Segunda linha de defesa: se a cena por baixo estiver clara, a
               sombra sustenta o contorno da letra. */
            text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
            text-decoration: none;
            font-weight: 400;
            transition: color .3s
        }

        .nav-links a:hover {
            color: var(--offwhite)
        }

        .nav-links a:focus-visible,
        .nav-cta:focus-visible,
        .logo-new:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 6px
        }

        .nav-cta {
            text-decoration: none;
            display: inline-block
        }

        /* Hamburguer: 44px porque abaixo disso o dedo erra o alvo. */
        .nav-menu-btn {
            display: none;
            width: 44px;
            height: 44px;
            background: none;
            border: 1px solid rgba(228, 228, 227, .22);
            border-radius: 2px;
            cursor: pointer;
            padding: 0;
            place-items: center;
            gap: 5px
        }

        .nav-menu-btn span {
            display: block;
            width: 18px;
            height: 1px;
            background: var(--offwhite);
            transition: transform .3s, opacity .3s
        }

        .nav-menu-btn[aria-expanded="true"] span:nth-child(1) {
            transform: translateY(6px) rotate(45deg)
        }

        .nav-menu-btn[aria-expanded="true"] span:nth-child(2) {
            opacity: 0
        }

        .nav-menu-btn[aria-expanded="true"] span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg)
        }

        /* Botao que traz o "Compor ambiente" de volta no celular. */
        .scene-controls-btn {
            display: none;
            position: absolute;
            right: 20px;
            bottom: 96px;
            z-index: 6;
            padding: 12px 18px;
            min-height: 44px;
            background: rgba(21, 19, 15, .82);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(228, 228, 227, .22);
            border-radius: 2px;
            color: var(--offwhite);
            font-family: 'Sora';
            font-size: 10px;
            letter-spacing: .18em;
            text-transform: uppercase;
            cursor: pointer
        }

        /* DIFERENCIAIS — mesma malha do "como funciona", sem a numeracao,
           porque aqui os itens nao tem ordem: sao seis criterios paralelos. */
        .dif-lista {
            margin: 48px 0 0;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1px;
            background: rgba(228, 228, 227, .12);
            border: 1px solid rgba(228, 228, 227, .12)
        }

        .dif-item {
            background: var(--bg);
            padding: 32px 30px
        }

        .dif-item .proc-titulo {
            margin-bottom: 12px
        }

        /* DÚVIDAS — acordeão */
        .faq-lista {
            margin-top: 48px;
            border-top: 1px solid rgba(228, 228, 227, .14)
        }

        .faq-item {
            border-bottom: 1px solid rgba(228, 228, 227, .14)
        }

        .faq-h {
            margin: 0;
            font-size: inherit;
            font-weight: inherit
        }

        /* <button> de verdade: recebe foco, abre com Enter e com Espaco, e o
           leitor de tela anuncia aberto/fechado pelo aria-expanded. */
        .faq-pergunta {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 22px 0;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            font-family: 'Sora';
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5;
            color: var(--offwhite);
            transition: color .25s
        }

        .faq-pergunta:hover {
            color: #fff
        }

        .faq-pergunta:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: -2px
        }

        .faq-sinal {
            position: relative;
            flex: 0 0 14px;
            width: 14px;
            height: 14px
        }

        .faq-sinal::before,
        .faq-sinal::after {
            content: '';
            position: absolute;
            background: var(--brand-soft);
            transition: transform .3s, opacity .3s
        }

        .faq-sinal::before {
            left: 0;
            top: 6px;
            width: 14px;
            height: 1px
        }

        .faq-sinal::after {
            left: 6px;
            top: 0;
            width: 1px;
            height: 14px
        }

        .faq-pergunta[aria-expanded="true"] .faq-sinal::after {
            transform: rotate(90deg);
            opacity: 0
        }

        .faq-resposta {
            padding: 0 0 24px;
            max-width: 760px
        }

        .faq-resposta p {
            margin: 0;
            font-size: 15px;
            line-height: 1.75;
            color: var(--offwhite-soft)
        }

        /* CONTATO */
        .contato-grid {
            margin-top: 56px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px
        }

        .contato-card {
            background: var(--bg-card);
            border: 1px solid rgba(228, 228, 227, .14);
            border-radius: 4px;
            padding: 30px
        }

        .contato-tag {
            font-size: 10px;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: var(--brand-soft);
            font-weight: 600;
            margin-bottom: 14px
        }

        .contato-valor {
            display: inline-block;
            font-family: var(--serif, Fraunces, Georgia, serif);
            font-size: 26px;
            color: var(--offwhite);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color .25s, color .25s
        }

        .contato-valor:hover,
        .contato-valor:focus-visible {
            color: #fff;
            border-bottom-color: var(--brand-soft)
        }

        .contato-valor:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 4px
        }

        .contato-nota {
            margin: 14px 0 0;
            font-size: 14px;
            line-height: 1.65;
            color: var(--offwhite-soft)
        }

        /* DETALHES — pontos sobre a foto */
        .det-intro {
            max-width: 560px;
            margin: 24px 0 0;
            font-size: 16px;
            line-height: 1.7;
            color: var(--offwhite-soft)
        }

        .det-wrap {
            margin-top: 56px;
            display: grid;
            grid-template-columns: 1.35fr 1fr;
            gap: 40px;
            align-items: start
        }

        .det-foto {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            line-height: 0
        }

        .det-foto img {
            width: 100%;
            height: auto;
            display: block
        }

        .det-ponto {
            position: absolute;
            left: var(--x);
            top: var(--y);
            transform: translate(-50%, -50%);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .75);
            background: rgba(20, 18, 15, .55);
            backdrop-filter: blur(6px);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: grid;
            place-items: center;
            padding: 0;
            transition: background .25s, transform .25s, border-color .25s
        }

        .det-ponto:hover,
        .det-ponto.ativo {
            background: var(--brand, #6E8867);
            border-color: #fff;
            transform: translate(-50%, -50%) scale(1.15)
        }

        /* Anel que respira, so nos pontos AINDA NAO abertos. E o convite para
           clicar: sem ele, seis circulos parados sobre a foto passam por
           enfeite e a secao inteira nunca e descoberta.
           Para quando o ponto e aberto — cumpriu a funcao, para de chamar. */
        .det-ponto::after {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .5);
            opacity: 0;
            animation: respirar 2.8s var(--saida) infinite;
            pointer-events: none
        }

        .det-ponto.ativo::after,
        .det-ponto.visto::after {
            animation: none;
            opacity: 0
        }

        @keyframes respirar {

            0%,
            100% {
                transform: scale(.85);
                opacity: 0
            }

            35% {
                opacity: .55
            }

            70% {
                transform: scale(1.5);
                opacity: 0
            }
        }

        /* Escalona o inicio de cada anel para nao pulsarem os seis juntos,
           que viraria um piscar de arvore de natal. */
        .det-ponto:nth-child(2)::after {
            animation-delay: .35s
        }

        .det-ponto:nth-child(3)::after {
            animation-delay: .7s
        }

        .det-ponto:nth-child(4)::after {
            animation-delay: 1.05s
        }

        .det-ponto:nth-child(5)::after {
            animation-delay: 1.4s
        }

        .det-ponto:nth-child(6)::after {
            animation-delay: 1.75s
        }

        /* Foco visivel: quem navega por teclado precisa enxergar onde esta. */
        .det-ponto:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px
        }

        .det-painel {
            background: var(--bg-card);
            border: 1px solid rgba(228, 228, 227, .14);
            border-radius: 4px;
            padding: 34px;
            min-height: 190px;
            position: relative;
            overflow: hidden
        }

        /* Fio de luz no topo do painel, alinhado com o verde da marca. Detalhe
           pequeno, mas e o que tira a cara de "caixa de texto". */
        .det-painel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 2px;
            width: 100%;
            background: linear-gradient(90deg, var(--brand), transparent 70%)
        }

        /* Contador: mostra que existem seis pontos, nao um. Sem isso o
           visitante clica em um e acha que acabou. */
        .det-contador {
            font-size: 10px;
            letter-spacing: .22em;
            color: var(--brand-soft);
            font-weight: 600;
            margin-bottom: 14px;
            font-variant-numeric: tabular-nums
        }

        .det-titulo {
            font-family: var(--serif, Fraunces, Georgia, serif);
            font-size: 23px;
            color: var(--offwhite);
            margin-bottom: 12px
        }

        .det-texto {
            margin: 0;
            font-size: 15px;
            line-height: 1.8;
            color: var(--offwhite-soft)
        }

        /* O texto trocava instantaneo. Agora entra deslizando de baixo — a
           troca passa a ser percebida como resposta ao clique. */
        .det-conteudo {
            opacity: 1;
            transform: translateY(0);
            transition: opacity .26s var(--saida), transform .32s var(--saida)
        }

        .det-conteudo.trocando {
            opacity: 0;
            transform: translateY(10px)
        }

        @media (max-width:900px) {
            .det-wrap {
                grid-template-columns: 1fr;
                gap: 24px
            }

            /* No celular o dedo e maior que o cursor: alvo menor que 34px
               vira erro de toque. Mantido em 38px de propósito. */
            .det-ponto {
                width: 38px;
                height: 38px
            }
        }

        /* COLEÇÕES */
        #colecoes {
            background: var(--bg)
        }

        .col-grid {
            margin-top: 64px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }

        .col-card {
            position: relative;
            aspect-ratio: 1/1;
            overflow: hidden;
            cursor: pointer;
            border-radius: 3px;
            border: 1px solid var(--line)
        }

        .col-visual {
            position: absolute;
            inset: 0;
            transition: transform .8s cubic-bezier(.4, 0, .2, 1)
        }

        .col-card:hover .col-visual {
            transform: scale(1.06)
        }

        .col-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(21, 19, 15, 0.95) 100%);
            z-index: 2
        }

        .col-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 24px;
            z-index: 3
        }

        .col-tag {
            font-size: 9px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--brand-soft);
            margin-bottom: 6px;
            font-weight: 600
        }

        .col-name {
            font-family: 'Fraunces';
            font-size: 24px;
            font-weight: 400;
            font-style: italic;
            color: var(--offwhite)
        }

        .col-desc {
            font-size: 11px;
            color: var(--gray-400);
            margin-top: 6px;
            opacity: 0;
            transition: opacity .4s
        }

        .col-card:hover .col-desc {
            opacity: 1
        }

        .b3-item {
            flex: 1;
            min-width: 140px
        }

        .b3-num {
            font-family: 'Fraunces';
            font-size: 32px;
            font-weight: 300;
            color: var(--brand-soft)
        }

        .b3-label {
            font-size: 10px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--gray-400);
            margin-top: 6px
        }

        /* LOCALIZADOR */
        #localizador {
            background: var(--bg)
        }

        @keyframes pinPulse {

            0%,
            100% {
                box-shadow: 0 0 0 4px rgba(110, 136, 103, 0.2), 0 0 0 10px rgba(110, 136, 103, 0.08)
            }

            50% {
                box-shadow: 0 0 0 6px rgba(110, 136, 103, 0.3), 0 0 0 16px rgba(110, 136, 103, 0.05)
            }
        }

        /* BLOG */
        #blog {
            background: var(--bg-warm);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line)
        }

        .benefit {
            padding: 20px;
            background: var(--bg-card);
            border: 1px solid var(--line);
            border-radius: 3px;
            transition: all .3s
        }

        .benefit:hover {
            border-color: var(--brand);
            transform: translateY(-3px)
        }

        .benefit-icon {
            width: 32px;
            height: 32px;
            color: var(--brand-soft);
            margin-bottom: 14px
        }

        .benefit h4 {
            font-family: 'Fraunces';
            font-size: 15px;
            font-weight: 500;
            color: var(--offwhite);
            margin-bottom: 6px
        }

        .benefit p {
            font-size: 12px;
            color: var(--gray-400);
            line-height: 1.5;
            font-weight: 300
        }

        /* TESTIMONIAL / CTA */
        #cta-block {
            background: var(--bg-warm);
            text-align: center;
            padding: 140px 48px;
            border-top: 1px solid var(--line)
        }

        .cta-label {
            font-size: 11px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--brand);
            margin-bottom: 20px;
            font-weight: 600
        }

        .cta-title {
            font-family: 'Fraunces';
            font-size: clamp(40px, 6vw, 84px);
            font-weight: 300;
            line-height: 1.02;
            letter-spacing: -0.02em;
            color: var(--offwhite);
            margin-bottom: 32px
        }

        .cta-title em {
            font-style: italic;
            color: var(--brand-soft)
        }

        .cta-phone {
            font-family: 'Fraunces';
            font-size: 28px;
            font-weight: 300;
            color: var(--brand-soft);
            font-style: italic;
            margin-bottom: 36px;
            display: block
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            padding: 18px 36px;
            background: var(--brand);
            color: var(--offwhite);
            border: none;
            cursor: pointer;
            font-size: 11px;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            font-weight: 600;
            transition: all .3s;
            font-family: 'Sora';
            border-radius: 2px
        }

        .cta-btn:hover {
            background: var(--brand-deep);
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(110, 136, 103, 0.3)
        }

        .cta-btn svg {
            transition: transform .3s
        }

        .cta-btn:hover svg {
            transform: translateX(6px)
        }

        /* WHATSAPP FLOATING */
        .whatsapp-float {
            position: fixed;
            bottom: 28px;
            right: 28px;
            z-index: 200;
            width: 56px;
            height: 56px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
            transition: transform .3s;
            animation: waPulse 2.5s ease-in-out infinite
        }

        .whatsapp-float:hover {
            transform: scale(1.1)
        }

        @keyframes waPulse {

            0%,
            100% {
                box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4)
            }

            50% {
                box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6), 0 0 0 8px rgba(37, 211, 102, 0.1)
            }
        }

        .whatsapp-float svg {
            width: 28px;
            height: 28px;
            fill: #fff
        }

        /* FOOTER */
        footer {
            background: var(--ink);
            padding: 100px 48px 40px;
            border-top: 1px solid var(--line);
            position: relative
        }

        /* A borda de baixo daqui somava com a borda de cima do .footer-bottom,
           separadas por 40px — apareciam duas linhas horizontais quase coladas.
           Fica so uma, a de baixo. */
        .footer-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 40px 56px;
            padding-bottom: 56px
        }

        .footer-brand .logo-new {
            margin-bottom: 18px
        }

        .footer-brand p {
            font-size: 13.5px;
            color: var(--gray-400);
            line-height: 1.8;
            max-width: 330px;
            font-weight: 300
        }

        /* No rodape o logo tem espaco de sobra e estava do mesmo tamanho do
           topo, parecendo perdido no canto. */
        .footer-brand .logo-new img {
            height: 64px
        }

        .footer-contact {
            margin-top: 26px;
            display: grid;
            gap: 10px
        }

        .footer-contact strong {
            display: block;
            font-size: 9.5px;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--brand-soft);
            font-weight: 600;
            margin-bottom: 3px
        }

        .footer-contact div {
            font-size: 15px;
            font-weight: 300;
            color: var(--offwhite-soft);
            margin-bottom: 0
        }

        .footer-contact {
            margin-top: 20px
        }

        .footer-contact div {
            font-size: 12px;
            color: var(--offwhite-soft);
            margin-bottom: 8px
        }

        .footer-contact strong {
            color: var(--brand-soft);
            font-weight: 600
        }

        .footer-col h4 {
            font-family: 'Sora';
            font-size: 11px;
            font-weight: 600;
            color: var(--brand-soft);
            margin-bottom: 18px;
            letter-spacing: 0.2em;
            text-transform: uppercase
        }

        .footer-col ul {
            list-style: none
        }

        .footer-col li {
            margin-bottom: 2px;
            font-size: 13px;
            font-weight: 300
        }

        /* BUG CORRIGIDO: os itens do rodape eram texto solto e viraram <a>.
           A regra de cor mirava ".footer-col li", nao o <a> dentro dele —
           entao os links caiam no padrao do navegador: azul, roxo depois de
           visitado, e sublinhado. Num rodape escuro isso e gritante. */
        .footer-col a,
        .footer-contact a {
            color: var(--offwhite-soft);
            text-decoration: none;
            transition: color .3s var(--saida)
        }

        .footer-col a {
            display: inline-block;
            padding: 5px 0;
            position: relative
        }

        /* Sublinhado que cresce a partir da esquerda, em vez do sublinhado
           permanente do navegador. */
        .footer-col a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 2px;
            height: 1px;
            width: 100%;
            background: var(--brand-soft);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s var(--saida)
        }

        .footer-col a:hover,
        .footer-contact a:hover {
            color: var(--offwhite)
        }

        .footer-col a:hover::after {
            transform: scaleX(1)
        }

        .footer-contact a {
            border-bottom: 1px solid transparent
        }

        .footer-contact a:hover {
            border-bottom-color: var(--brand-soft)
        }

        .footer-col a:focus-visible,
        .footer-contact a:focus-visible,
        .footer-socials a:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 4px
        }

        .footer-col li:hover {
            color: var(--brand-soft)
        }

        .footer-bottom {
            margin-top: 40px;
            padding-top: 28px;
            border-top: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            color: var(--gray-400);
            letter-spacing: 0.05em;
            flex-wrap: wrap;
            gap: 16px
        }

        .footer-socials {
            display: flex;
            gap: 16px
        }

        .footer-socials a {
            width: 32px;
            height: 32px;
            border: 1px solid var(--line);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-400);
            transition: all .3s;
            cursor: pointer;
            text-decoration: none
        }

        .footer-socials a:hover {
            border-color: var(--brand);
            color: var(--brand-soft);
            transform: translateY(-2px)
        }

        .footer-socials svg {
            width: 14px;
            height: 14px;
            fill: currentColor
        }

        /* REVEAL */
        .reveal {
            opacity: 0;
            transform: translateY(36px);
            transition: opacity 1s cubic-bezier(.4, 0, .2, 1), transform 1s cubic-bezier(.4, 0, .2, 1)
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0)
        }

        .reveal-d1 {
            transition-delay: .12s
        }

        .reveal-d2 {
            transition-delay: .24s
        }

        .reveal-d3 {
            transition-delay: .36s
        }

        /* BREADCRUMB */
        .breadcrumb {
            font-size: 10px;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--gray-400);
            margin-bottom: 20px
        }

        .breadcrumb span {
            color: var(--brand-soft)
        }

        /* RESPONSIVE */
        @media (max-width:1100px) {
            .scene-controls {
                width: 240px;
                right: 20px
            }

            nav {
                padding: 20px
            }

            /* O menu simplesmente sumia abaixo de 1100px e nada entrava no lugar:
               quem entrava pelo celular nao tinha como chegar em Contato. Agora
               vira painel sob a barra, aberto pelo hamburguer. */
            .nav-menu-btn {
                display: grid
            }

            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                display: none;
                flex-direction: column;
                gap: 0;
                padding: 6px 0;
                background: rgba(21, 19, 15, .97);
                backdrop-filter: blur(20px);
                border-top: 1px solid var(--line);
                border-bottom: 1px solid var(--line)
            }

            .nav-links.aberto {
                display: flex
            }

            .nav-links li {
                width: 100%
            }

            .nav-links a {
                display: block;
                padding: 15px 28px
            }

            section {
                padding: 80px 28px
            }

            .hero-overlay {
                padding: 100px 28px 50px
            }

            .scene-hint {
                left: 28px
            }

            .conheca-grid{
                grid-template-columns: 1fr;
                gap: 40px
            }

            .conheca-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px
            }

            .amb-grid {
                grid-template-columns: 1fr 1fr
            }

            .col-grid {
                grid-template-columns: 1fr 1fr
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 32px
            }

        }

        @media (max-width:640px) {

            /* O painel "Compor ambiente" era escondido e ponto final — quem entra
               pelo celular perdia a parte interativa inteira. Agora ele existe,
               so nao fica aberto por cima da abertura o tempo todo. */
            /* SOBREPOSICAO CORRIGIDA: o botao ficava em bottom:96px com 44px de
               altura (96 a 140px) e os botoes "Ver ambientes"/"Conheca a New
               Imperio" terminam em 104px — disputavam a faixa 104-140px e o
               dedo acertava o errado.
               Subiu para o alto da tela, logo abaixo da barra (que no celular
               tem ~56px), onde nao ha nada disputando. */
            .scene-controls-btn {
                display: block;
                top: 76px;
                right: 20px;
                bottom: auto
            }

            /* O painel abre a partir do proprio botao, de cima para baixo, e
               nao mais por cima dos botoes de acao. 52vh no lugar de 60vh:
               sobra mais cozinha visivel enquanto a pessoa troca a cor, que e
               justamente o que ela quer ver mudando. */
            .scene-controls {
                display: none;
                left: 20px;
                right: 20px;
                width: auto;
                top: 128px;
                bottom: auto;
                max-height: 52vh;
                overflow-y: auto
            }

            .scene-controls.aberto {
                display: block
            }

            .hero-overlay {
                padding: 90px 20px 40px
            }

            .amb-grid,
            .col-grid{
                grid-template-columns: 1fr
            }

            .conheca-stats {
                grid-template-columns: 1fr 1fr
            }

            section {
                padding: 60px 20px
            }

            footer {
                padding: 60px 20px 30px
            }

            .footer-grid {
                grid-template-columns: 1fr
            }

            /* ── BARRA DO TOPO NO CELULAR ──────────────────────────────
               Nao havia NENHUMA regra de nav para 640px: a barra continuava
               com o padding de tablet, o logo em 38px e o botao "SOLICITE
               ORCAMENTO" com o texto inteiro. Em 540px os tres nao cabem —
               o botao empurrava logo e hamburguer para fora e os elementos
               se sobrepunham. */
            nav {
                padding: 12px 16px;
                gap: 10px
            }

            nav.scrolled {
                padding: 10px 16px
            }

            /* Havia duas regras iguais para este seletor no mesmo breakpoint
               (aqui e mais acima no arquivo) — a de baixo sempre vencia por
               ordem de cascata, deixando a de cima como codigo morto.
               Unificadas no mesmo valor para nao haver mais ambiguidade. */
            .logo-new img {
                height: 52px
            }

            /* O botao sai da barra no celular. A acao NAO se perde: existe o
               botao flutuante do WhatsApp na tela inteira, o "Ver ambientes"
               logo abaixo e o bloco de contato no fim da pagina. Manter os
               tres na mesma linha quebrava o topo. */
            .nav-cta {
                display: none
            }

            /* ── ABERTURA NO CELULAR ───────────────────────────────────
               O texto de apoio quebrava em duas linhas e batia no titulo. */
            /* O botao "Compor ambiente" fica no alto, a direita (top 76px,
               ~170px de largura), na mesma faixa deste selo. Sem limite de
               largura o selo passava por baixo do botao; assim ele quebra em
               duas linhas e termina antes dele. */
            .hero-campaign {
                font-size: 9px;
                letter-spacing: .1em;
                line-height: 1.5;
                max-width: calc(100% - 184px)
            }

            .hero-h1 {
                font-size: clamp(40px, 13vw, 62px);
                line-height: 1.02
            }

            .hero-sub {
                font-size: 14px;
                line-height: 1.6
            }

            .hero-actions {
                flex-wrap: wrap;
                gap: 10px
            }

            .btn-primary,
            .btn-ghost {
                padding: 13px 20px;
                font-size: 10px;
                letter-spacing: .14em
            }

            /* Espaco embaixo para a dica e o botao "Compor ambiente" nao
               ficarem por cima dos botoes de acao. */
            .hero-overlay {
                padding: 78px 20px 104px
            }
        }

        /* ── ÂNCORA SOB A BARRA FIXA ───────────────────────────────────
           A barra do topo e fixed e cobre ~90px. Sem scroll-margin nenhum,
           clicar em "Ambientes" rolava a secao para o topo da janela e o
           TITULO ficava escondido atras da barra.

           A PRIMEIRA correcao usou 96px — o suficiente para o TOPO da secao
           nao ficar atras da barra. So que toda secao ja tem 120px de
           padding-top proprio antes do titulo aparecer (regra "section" logo
           abaixo). Somado, a pessoa via 96+120 = 216px de area vazia antes de
           qualquer texto — o "vao gigante" que aparecia ao clicar no menu.

           Como o titulo so aparece 120px (ou 80/60px nas telas menores)
           DEPOIS do topo da secao, nao e preciso manter o topo inteiro
           visivel: basta uma folga pequena para a linha de separacao entre
           secoes nao ficar colada no topo da janela. 24px (16px no celular)
           bastam — o titulo continua bem abaixo da barra em qualquer largura,
           e o vao deixa de ser maior que a propria barra de navegacao. */
        /* Valor calculado por FAIXA DE TELA, e nao um numero so — a secao
           tem padding-top diferente em cada breakpoint (120 / 80 / 60px), mas
           a altura da barra fixa muda pouco entre elas. Usar o mesmo ajuste
           em toda largura faria o conteudo ESCONDER atras da barra na faixa
           641-900px, que tem menos respiro interno que o desktop.
           Conta, por faixa (altura da barra + 20px de folga − respiro da secao):
             desktop  (>900px)   : 78 + 20 − 120 = -22px
             tablet   (641-900px): 78 + 20 −  80 =  18px
             celular  (<=640px)  : 52 + 20 −  60 =  12px
           O valor negativo no desktop e intencional: a secao ja tem respiro de
           sobra (120px), entao a rolagem avanca um pouco ALEM do topo da
           secao — a borda fica encoberta pela barra, sem problema, pois nao ha
           nada visivel ali. */
        section[id],
        footer {
            scroll-margin-top: -22px
        }

        @media (max-width:900px) {

            section[id],
            footer {
                scroll-margin-top: 18px
            }
        }

        @media (max-width:640px) {

            section[id],
            footer {
                scroll-margin-top: 12px
            }
        }

/* ─────────────────────────────────────────────────────────────────
   PÁGINAS POR AMBIENTE  (cozinha-planejada, dormitorio-planejado, …)

   Estas páginas não têm a cena 3D: a barra do topo deixa de flutuar
   sobre um canvas e passa a ficar sobre fundo sólido. Sem isto o
   degradê da home apareceria sobre nada, e o conteúdo começaria
   embaixo da barra fixa.
   ───────────────────────────────────────────────────────────────── */
.pagina-interna {
    background: var(--bg)
}

.pagina-interna nav {
    background: rgba(21, 19, 15, .96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line)
}

.amb-topo {
    padding: 150px 48px 60px;
    max-width: 1000px
}

.amb-topo .breadcrumb {
    margin-bottom: 22px
}

.amb-topo .breadcrumb a {
    color: var(--gray-400);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--saida), border-color .3s var(--saida)
}

.amb-topo .breadcrumb a:hover {
    color: var(--offwhite-soft);
    border-bottom-color: var(--brand-soft)
}

.amb-topo .det-intro {
    margin-top: 26px;
    max-width: 620px
}

.amb-topo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px
}

/* auto-fit para a cozinha (5 fotos) e os ambientes de foto única
   usarem a MESMA regra sem exceção no HTML */
.amb-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    padding: 0 48px 60px
}

.amb-foto {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-card);
    line-height: 0
}

.amb-foto img {
    width: 100%;
    height: 100%;
    max-height: 620px;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--saida)
}

.amb-foto:hover img {
    transform: scale(1.03)
}

.amb-saiba {
    padding: 40px 48px 80px;
    border-top: 1px solid var(--line)
}

.amb-saiba .section-title {
    margin-top: 10px
}

.amb-cta {
    padding: 80px 48px 100px;
    border-top: 1px solid var(--line);
    background: var(--bg-warm);
    text-align: center
}

.amb-cta .det-intro {
    margin: 22px auto 0;
    max-width: 520px
}

.amb-cta .amb-topo-acoes {
    justify-content: center
}

@media (max-width:640px) {
    .amb-topo {
        padding: 110px 20px 44px
    }

    .amb-fotos {
        padding: 0 20px 44px;
        grid-template-columns: 1fr
    }

    .amb-saiba {
        padding: 32px 20px 60px
    }

    .amb-cta {
        padding: 60px 20px 72px
    }
}

        /* ── AVISO DE COOKIES ─────────────────────────────────────────
           Canto esquerdo no desktop porque o botao do WhatsApp ocupa o
           direito (28px + 56px). No celular nao cabe lado a lado: sobe para
           cima do botao (28 + 56 + folga = 96px) em vez de cobri-lo — o
           WhatsApp e o objetivo do site e nao pode ficar escondido. */
        .aviso-cookies {
            position: fixed;
            left: 28px;
            bottom: 28px;
            z-index: 300;
            max-width: 440px;
            padding: 20px 22px;
            background: var(--bg-card);
            border: 1px solid var(--line-strong);
            border-radius: 4px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
            color: var(--offwhite-soft);
            font-size: 13px;
            line-height: 1.55
        }

        .aviso-cookies p {
            margin: 0 0 16px
        }

        .aviso-cookies-acoes {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            flex-wrap: wrap
        }

        .aviso-cookies-acoes button {
            padding: 11px 22px
        }

        .link-cookies {
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            color: inherit;
            text-decoration: underline;
            cursor: pointer
        }

        .link-cookies:hover {
            color: var(--offwhite)
        }

        .link-cookies:focus-visible {
            outline: 2px solid var(--brand-soft);
            outline-offset: 3px
        }

        @media (max-width: 640px) {
            .aviso-cookies {
                left: 12px;
                right: 12px;
                bottom: 96px;
                max-width: none
            }
        }