/* ===================================================================
   PREDIO.CSS — Hero da home com a animação do prédio
   -------------------------------------------------------------------
   Base (sem JS, com movimento reduzido ou em tela muito baixa): hero com
   o prédio aberto e parado, os 5 andares nomeados e todos os textos.
   Com JS e movimento liberado, a classe .predio-anim (no <html>)
   transforma o hero numa tela fixa animada pela rolagem (predio.js).

   Coordenadas do desenho: quadro de 560 x 786 (viewBox "20 -6 560 786").
   Cada andar é um <div> com o seu próprio SVG, posicionado em % desse
   quadro, para ser animado sozinho (só transform e opacity).
=================================================================== */


/* ===================================================================
   1. MENU SOBRE O HERO
   Transparente, links claros e mais baixo enquanto o hero está na tela.
   O predio.js põe .fora-do-hero no header quando o hero começa a subir
   (fim da animação); aí volta o comportamento de style.css.
=================================================================== */

.predio-js header {
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
                box-shadow 0.35s ease, height 0.35s ease;
}

.predio-js header:not(.fora-do-hero),
.predio-js header.scrolled:not(.fora-do-hero) {
    height: 4.375rem;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.predio-js .logo {
    transition: width 0.35s ease;
}

.predio-js header:not(.fora-do-hero) .logo {
    width: 3.5rem;
}

.predio-js header:not(.fora-do-hero) .menu-toggle {
    color: var(--cor-primaria);
}

@media (min-width: 769px) {
    .predio-js header:not(.fora-do-hero) .nav-menu li a {
        color: var(--cor-texto-claro);
    }
}

@media (max-width: 768px) {
    .predio-js header:not(.fora-do-hero) .nav-menu {
        top: 4.375rem;
    }
}


/* ===================================================================
   2. HERO — FUNDO E ESTRUTURA (versão parada)
=================================================================== */

.hero {
    position: relative;
    display: block;
    padding: 0 0 9rem;
    text-align: left;
    background-color: var(--cor-secundaria);
}

.hero-palco {
    --gutter: clamp(1.25rem, 4vw, 4rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    padding: 8rem var(--gutter) 3rem;
    background:
        radial-gradient(50% 55% at 70% 48%, rgba(226, 213, 190, 0.09), transparent 70%),
        linear-gradient(180deg, #273b51 0%, var(--cor-secundaria) 80%);
}

/* Grade de planta de arquitetura, bem apagada */
.hero-palco::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(226, 213, 190, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 213, 190, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(226, 213, 190, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 213, 190, 0.035) 1px, transparent 1px);
    background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 85% 80% at 60% 45%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 80% at 60% 45%, #000 35%, transparent 100%);
}

.predio-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.hero-grade {
    max-width: 75rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
        "texto  visual"
        "acoes  visual"
        "frase  visual"
        "final  visual";
    column-gap: clamp(2rem, 4vw, 4rem);
}

.hero-texto  { grid-area: texto; }
.hero-acoes  { grid-area: acoes; }
.hero-frase  { grid-area: frase; }
.hero-final  { grid-area: final; }
.hero-visual { grid-area: visual; position: relative; }

.hero-role {
    display: none;
}


/* ===================================================================
   3. TEXTOS DO HERO
=================================================================== */

.hero-etiqueta {
    color: var(--cor-primaria);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hero-titulo {
    font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cor-texto-claro);
    margin: 0 0 1.25rem;
}

.hero-titulo span {
    color: var(--cor-primaria);
}

.hero-apoio {
    max-width: 30rem;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-acoes {
    margin-top: 2rem;
}

.hero-frase {
    max-width: 28rem;
    margin-top: 3.5rem;
}

.hero-final {
    max-width: 28rem;
    margin-top: 2.5rem;
}

.hero-frase-titulo,
.hero-final-titulo {
    font-size: clamp(1.35rem, 0.6rem + 1.3vw, 1.85rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--cor-texto-claro);
}

.hero-final-titulo {
    font-size: clamp(1.6rem, 0.8rem + 1.6vw, 2.25rem);
    color: var(--cor-primaria);
}

.hero-frase p,
.hero-final p {
    margin-top: 0.75rem;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-final .btn {
    width: auto;
    margin-top: 1.75rem;
}


/* ===================================================================
   4. PRÉDIO (desenho)
=================================================================== */

.predio {
    position: relative;
    width: min(25rem, 56%);
    margin-left: 4%;
}

.predio-desenho {
    position: relative;
    aspect-ratio: 560 / 786;
}

/* "Seu negócio": placa da maquete, acima do telhado.
   Na versão parada (prédio aberto) fica logo acima da caixa do desenho. */
.predio-nome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.75rem);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cor-primaria);
}

.predio-nome::before,
.predio-nome::after {
    content: "";
    width: 2rem;
    height: 1px;
    background-color: currentColor;
    opacity: 0.6;
}

.andar {
    position: absolute;
    left: 0;
    width: 100%;
    top: var(--topo);
    height: var(--altura);
    /* versão parada: prédio aberto */
    transform: translateY(var(--aberto));
}

.andar svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* posição de cada fatia no quadro e quanto ela se afasta com o prédio aberto */
.andar-1 { --topo: 71.501%; --altura: 17.303%; --aberto: 58.824%; }
.andar-2 { --topo: 56.743%; --altura: 18.575%; --aberto: 27.397%; }
.andar-3 { --topo: 41.985%; --altura: 18.575%; --aberto: 0%; }
.andar-4 { --topo: 27.226%; --altura: 18.575%; --aberto: -27.397%; }
.andar-5 { --topo: 10.941%; --altura: 20.102%; --aberto: -50.633%; }

/* Materiais da maquete */
.p-laje       { fill: #e2d5be; }
.p-laje-topo  { fill: #eee6d6; }
.p-laje-lado  { fill: #b5a890; }
.p-base       { fill: #cfc2a9; }
.p-piso       { fill: #34495f; }
.p-fundo      { fill: #2a3d52; }
.p-parede     { fill: #22344a; }
.p-vidro      { fill: #e2d5be; fill-opacity: 0.05; }
.p-vidro-lado { fill: #3e546c; fill-opacity: 0.6; }
.p-pilar      { fill: #e2d5be; }
.p-bege       { fill: #e2d5be; }
.p-claro      { fill: #f4eee2; }
.p-escuro     { fill: #1a2735; }
.p-lampada    { fill: #e2d5be; opacity: 0.45; }

.p-caixilho {
    fill: none;
    stroke: #e2d5be;
    stroke-opacity: 0.32;
    stroke-width: 1;
}

.p-friso {
    fill: none;
    stroke: #213143;
    stroke-opacity: 0.18;
    stroke-width: 1.5;
}

.p-traco {
    fill: none;
    stroke: #e2d5be;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-movel {
    fill: #3a5068;
    stroke: #e2d5be;
    stroke-width: 1.2;
}

/* Segredo do cofre (2º andar): a roda e o disco giram em volta do centro
   do cofre (variáveis animadas pelo predio.js) */
.cofre-roda,
.cofre-disco {
    transform-box: view-box;
    transform-origin: 400px 499px;
}

.cofre-roda  { transform: rotate(calc(var(--giro-roda, 0) * 1deg)); }
.cofre-disco { transform: rotate(calc(var(--giro-disco, 0) * 1deg)); }

/* Balões de conversa (3º andar): crescem a partir da ponta, que aponta
   para a pessoa */
.balao {
    transform: scale(var(--balao, 1));
    transform-box: view-box;
}

.balao-1 { transform-origin: 172px 382px; }
.balao-2 { transform-origin: 342px 382px; }
.balao-3 { transform-origin: 443px 374px; }

.balao-pontos { fill: #213143; }

/* Fundo das gavetas abertas (4º andar) */

.gaveta-dentro {
    fill: #1a2735;
    stroke: #e2d5be;
    stroke-opacity: 0.6;
    stroke-width: 0.8;
}

/* Luz bege do andar e das janelas (a animação só mexe na opacidade) */
.andar-luz    { opacity: 0.4; }
.andar-janela { opacity: 0; }

/* Gráficos do último andar: as barras sobem e a linha é revelada
   por uma "cortina" que encolhe (variáveis animadas pelo predio.js) */
.grafico-barra {
    transform: scaleY(var(--altura-barra, 1));
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.grafico-cortina {
    transform: scaleX(var(--cortina, 0));
    transform-box: fill-box;
    transform-origin: 100% 50%;
}


/* ===================================================================
   5. RÓTULOS DOS ANDARES
   Texto real no HTML. No desktop ficam à direita de cada andar, ligados
   por uma linha fina; no celular viram uma lista abaixo do prédio.
=================================================================== */

/* a lista ocupa a mesma caixa do prédio, para cada rótulo ficar ao lado do seu andar */
.predio-rotulos {
    grid-area: visual;
    align-self: start;
    position: relative;
    width: min(25rem, 56%);
    margin-left: 4%;
    aspect-ratio: 560 / 786;
    list-style: none;
}

.rotulo {
    position: absolute;
    left: 93%;
    top: var(--y);
    display: flex;
    align-items: center;
    transform: translateY(-50%);
}

.rotulo-1 { --y: 88.8%; left: 95%; }
.rotulo-2 { --y: 72%; }
.rotulo-3 { --y: 52.2%; }
.rotulo-4 { --y: 32.3%; }
.rotulo-5 { --y: 12.5%; }

.rotulo-linha {
    position: relative;
    flex: none;
    width: 3.5rem;
    height: 1px;
    margin-right: 0.875rem;
    background-color: var(--cor-primaria);
    transform-origin: 0 50%;
}

.rotulo-linha::before {
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--cor-primaria);
}

.rotulo-texto {
    width: max-content;
    max-width: 15rem;
}

.rotulo-andar {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-primaria);
}

.rotulo-titulo {
    margin: 0.15rem 0 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cor-texto-claro);
}


/* ===================================================================
   6. VERSÃO PARADA NO CELULAR
=================================================================== */

@media (max-width: 768px) {
    .hero {
        padding-bottom: 7rem;
    }

    .hero-palco {
        padding: 6.5rem 1.25rem 3rem;
    }

    .hero-grade {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "texto"
            "acoes"
            "frase"
            "visual"
            "rotulos"
            "final";
    }

    .hero-apoio {
        font-size: 1rem;
    }

    .hero-frase {
        margin-top: 3rem;
    }

    .hero-visual {
        margin-top: 2.5rem;
    }

    .predio {
        width: min(100%, 22rem);
        margin: 0 auto;
    }

    .predio-rotulos {
        grid-area: rotulos;
        position: static;
        display: grid;
        gap: 1rem;
        width: auto;
        margin: 1.75rem 0 0;
        aspect-ratio: auto;
    }

    .rotulo {
        position: static;
        display: block;
        transform: none;
        padding-left: 1rem;
        border-left: 2px solid var(--cor-primaria);
    }

    .rotulo-linha {
        display: none;
    }

    .rotulo-texto {
        width: auto;
        max-width: none;
    }
}


/* ===================================================================
   7. VERSÃO ANIMADA — comum a desktop e celular
   (mesmas condições do gsap.matchMedia em predio.js)
=================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-height: 500px) {
    .predio-anim .hero-palco {
        height: 100vh;
        height: 100svh;
        min-height: 0;
    }

    .predio-anim .hero-grade {
        height: 100%;
    }

    .predio-anim .predio,
    .predio-anim .andar {
        will-change: transform;
    }

    /* começa com o prédio fechado */
    .predio-anim .andar {
        transform: none;
    }

    /* com o prédio fechado, a placa fica logo acima do telhado */
    .predio-anim .predio-nome {
        bottom: 89.5%;
    }

    .predio-anim .andar-luz,
    .predio-anim .andar-janela,
    .predio-anim .hero-frase,
    .predio-anim .rotulo,
    .predio-anim .balao,
    .predio-anim .balao-pontos circle {
        opacity: 0;
    }

    .predio-anim .balao {
        --balao: 0.3;
    }

    .predio-anim .hero-final {
        opacity: 0;
        visibility: hidden;
    }

    .predio-anim .grafico-barra {
        --altura-barra: 0.25;
    }

    .predio-anim .grafico-cortina {
        --cortina: 1;
    }

    .predio-anim .rotulo-linha {
        transform: scaleX(0);
    }

    .predio-anim .hero-role {
        display: block;
        position: absolute;
        left: 50%;
        bottom: 1rem;
        transform: translateX(-50%);
        font-size: 0.8rem;
        letter-spacing: 0.12em;
        color: rgba(226, 213, 190, 0.75);
    }

    .predio-anim .hero-role span {
        display: inline-block;
        animation: hero-role 1.8s ease-in-out infinite;
    }
}

@keyframes hero-role {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}


/* ===================================================================
   8. VERSÃO ANIMADA — desktop
   Texto à esquerda (~45%), prédio fechado à direita (~55%).
=================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-height: 500px) and (min-width: 769px) {
    .predio-anim .hero-palco {
        /* deixa espaço em cima para a placa "Seu negócio" com o prédio aberto */
        --predio-h: min(calc(100svh - 9.5rem), 56rem, calc((55vw - 4rem) * 1.4036));
        --predio-w: calc(var(--predio-h) * 0.7125);
        padding: 4.375rem var(--gutter) 0;
    }

    .predio-anim .hero-grade {
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas:
            ".      visual"
            "texto  visual"
            "acoes  visual"
            ".      visual";
    }

    /* frase e texto final ocupam a coluna da esquerda, um de cada vez */
    .predio-anim .hero-frase,
    .predio-anim .hero-final {
        grid-area: 1 / 1 / 5 / 2;
        align-self: center;
        margin: 0;
    }

    /* com o prédio no centro, a frase cabe no espaço à esquerda dele */
    .predio-anim .hero-frase {
        max-width: min(26rem, calc(50vw - var(--predio-w) * 0.48 - max(var(--gutter), 50vw - 37.5rem) - 2.5rem));
    }

    .predio-anim .hero-visual {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .predio-anim .predio,
    .predio-anim .predio-rotulos {
        width: var(--predio-w);
        margin: 0;
    }

    /* rótulos centralizados na mesma caixa do prédio (movem junto com ele) */
    .predio-anim .predio-rotulos {
        align-self: center;
        justify-self: center;
    }
}


/* ===================================================================
   9. VERSÃO ANIMADA — celular (até 768px)
   Título no alto, prédio no meio e botão embaixo, numa tela só.
=================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-height: 500px) and (max-width: 768px) {
    .predio-anim .hero-palco {
        padding: 5.25rem 1.25rem calc(2.75rem + env(safe-area-inset-bottom, 0px));
    }

    .predio-anim .hero-grade {
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "texto"
            "visual"
            "acoes";
        row-gap: 1.25rem;
    }

    .predio-anim .hero-texto,
    .predio-anim .hero-acoes {
        text-align: center;
    }

    .predio-anim .hero-etiqueta {
        margin-bottom: 0.5rem;
    }

    .predio-anim .hero-titulo {
        font-size: clamp(1.5rem, 1rem + 2.2vw, 2rem);
        margin-bottom: 0.75rem;
    }

    .predio-anim .hero-apoio {
        margin: 0 auto;
        font-size: 0.95rem;
    }

    .predio-anim .hero-acoes {
        margin-top: 0;
    }

    .predio-anim .hero-visual {
        container-type: size;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    /* fechado, o prédio ocupa menos altura: começa um pouco maior */
    .predio-anim .predio {
        width: min(100cqw, 71.25cqh);
        margin: 0;
        transform: scale(1.15);
    }

    /* frase, rótulos e texto final aparecem no pé da tela, embaixo do
       prédio; o predio.js aumenta o prédio até o espaço que sobra acima */
    .predio-anim .hero-frase,
    .predio-anim .hero-final,
    .predio-anim .predio-rotulos {
        position: absolute;
        left: 1.25rem;
        right: 1.25rem;
        bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        margin: 0;
        text-align: center;
    }

    /* rótulos: um por vez, no mesmo lugar, sem as linhas */
    .predio-anim .predio-rotulos {
        display: block;
        height: 0;
        aspect-ratio: auto;
    }

    .predio-anim .rotulo {
        position: absolute;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        padding: 0;
        border: 0;
        transform: none;
    }

    .predio-anim .rotulo-linha {
        display: none;
    }

    .predio-anim .rotulo-titulo {
        font-size: 1.35rem;
    }

    /* menos detalhes internos para a rolagem ficar leve */
    .predio-anim .andar-detalhe {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) and (min-height: 500px) and (max-width: 768px) and (max-height: 700px) {
    .predio-anim .hero-apoio {
        display: none;
    }
}


/* ===================================================================
   10. LIGAÇÃO COM A SEÇÃO DE SERVIÇOS
   O cartão sobe sobre o final do azul, depois que a animação termina.
=================================================================== */

#services {
    position: relative;
    z-index: 1;
    margin-top: -9rem;
}

.service-icon svg {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.9375rem;
    transition: transform 0.25s ease;
}

.service-box:hover .service-icon svg {
    transform: scale(1.08);
}

@media (max-width: 768px) {
    #services {
        margin-top: -7rem;
    }

    #services .service-icon svg {
        width: 5.2rem;
        height: 5.2rem;
    }
}

@media (max-width: 480px) {
    #services .service-icon svg {
        width: 5.6rem;
        height: 5.6rem;
    }
}