:root {

    --azul: #000080;
    --azul-claro: #1515a5;
    --azul-escuro: #000052;

    --preto: #000000;
    --branco: #ffffff;

    --cinza: #dcdcdc;
    --cinza-escuro: #9a9a9a;

    --fundo: #080808;
    --fundo-2: #101010;

    --borda: rgba(220,220,220,.15);

    --sombra:
        0 20px 60px rgba(0,0,0,.35);

}

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px;

}

body {

    font-family: "Roboto", sans-serif;

    background: var(--fundo);

    color: var(--branco);

    overflow-x: hidden;

}

h1,
h2,
h3,
.logo {

    font-family: "Montserrat", sans-serif;

}

a {

    text-decoration: none;

    color: inherit;

}

img {

    max-width: 100%;

    display: block;

}

section {

    padding: 110px 8%;

}

.header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 82px;

    z-index: 999;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 0 6%;

    background: rgba(0,0,0,.90);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid var(--borda);

}

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 19px;

    font-weight: 700;

    letter-spacing: 1px;

}

.logo strong {

    display: block;

    color: var(--cinza);

}

.logo-simbolo {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--azul);

    color: white;

    border-radius: 8px;

    font-size: 20px;

}

.nav {

    display: flex;

    align-items: center;

    gap: 28px;

}

.nav a {

    position: relative;

    color: #ccc;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: .5px;

    transition: .3s;

}

.nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: white;

    transition: .3s;

}

.nav a:hover {

    color: white;

}

.nav a:hover::after {

    width: 100%;

}

.btn-header {

    padding: 12px 20px;

    background: var(--azul);

    border-radius: 5px;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    transition: .3s;

}

.btn-header:hover {

    background: white;

    color: var(--azul);

    transform: translateY(-3px);

}

.menu-mobile {

    display: none;

    border: 0;

    background: none;

    color: white;

    font-size: 24px;

    cursor: pointer;

}

.hero {

    min-height: 100vh;

    padding: 160px 8% 100px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.98),
            rgba(0,0,0,.75),
            rgba(0,0,80,.55)
        ),

        radial-gradient(
            circle at 80% 50%,
            #000080,
            #000 55%
        );

}

.hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: 100px;

    border: 1px solid rgba(255,255,255,.12);

    transform: rotate(45deg);

}

.hero::after {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -300px;
    top: 50px;

    border: 1px solid rgba(255,255,255,.06);

    transform: rotate(45deg);

}

.hero-content {

    max-width: 850px;

    position: relative;

    z-index: 2;

}

.hero-tag {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #ccc;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 25px;

}

.hero-tag span {

    width: 35px;

    height: 2px;

    background: white;

}

.hero h1 {

    font-size: clamp(48px, 7vw, 88px);

    line-height: 1.03;

    text-transform: uppercase;

    letter-spacing: -3px;

    margin-bottom: 30px;

}

.hero h1 span {

    display: block;

    color: var(--cinza);

}

.hero p {

    max-width: 680px;

    color: #bbb;

    font-size: 17px;

    line-height: 1.8;

}

.hero p strong {

    color: white;

}

.hero-buttons {

    display: flex;

    gap: 15px;

    margin-top: 40px;

    flex-wrap: wrap;

}

.btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 16px 25px;

    background: var(--azul);

    border: 1px solid var(--azul);

    color: white;

    border-radius: 4px;

    font-weight: 700;

    font-size: 12px;

    text-transform: uppercase;

    transition: .35s;

}

.btn-primary:hover {

    background: white;

    border-color: white;

    color: var(--azul);

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(0,0,128,.4);

}

.btn-outline {

    display: inline-flex;

    align-items: center;

    padding: 16px 25px;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 4px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    transition: .35s;

}

.btn-outline:hover {

    background: white;

    color: black;

    transform: translateY(-5px);

}

.hero-info {

    display: flex;

    gap: 45px;

    margin-top: 70px;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.15);

}

.hero-info div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.hero-info strong {

    font-size: 13px;

}

.hero-info span {

    color: #999;

    font-size: 11px;

}

.hero-decoration {

    position: absolute;

    right: 12%;

    top: 45%;

    color: rgba(255,255,255,.08);

    font-size: 260px;

    animation: girar 25s linear infinite;

}

@keyframes girar {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}

.section-title {

    text-align: center;

    max-width: 850px;

    margin: 0 auto 70px;

}

.section-title > span {

    color: #aaa;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

}

.section-title h2 {

    margin-top: 15px;

    font-size: clamp(35px,5vw,55px);

    text-transform: uppercase;

    letter-spacing: -1px;

}

.section-title h2 strong {

    color: var(--cinza);

}

.section-title p {

    max-width: 650px;

    margin: 20px auto 0;

    color: #999;

    line-height: 1.8;

}

.linha-title {

    width: 60px;

    height: 3px;

    background: var(--azul);

    margin: 25px auto 0;

}

.sobre {

    background: var(--cinza);

    color: black;

}

.sobre-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 430px 1fr;

    gap: 80px;

    align-items: center;

}

.sobre-foto {

    position: relative;

}

.sobre-foto img {

    width: 100%;

    height: 580px;

    object-fit: cover;

    filter: grayscale(100%);

    transition: .5s;

}

.sobre-foto:hover img {

    filter: grayscale(0%);

}

.sobre-foto::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    top: 20px;

    left: 20px;

    border: 2px solid var(--azul);

    z-index: 0;

}

.sobre-foto img {

    position: relative;

    z-index: 1;

}

.foto-selo {

    position: absolute;

    bottom: 25px;

    right: -30px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 15px;

    background: black;

    color: white;

    padding: 17px 22px;

    border-left: 4px solid var(--azul);

}

.foto-selo i {

    color: white;

    font-size: 25px;

}

.foto-selo div {

    display: flex;

    flex-direction: column;

}

.foto-selo strong {

    font-size: 12px;

}

.foto-selo span {

    color: #aaa;

    font-size: 10px;

}

.mini-label {

    color: var(--azul);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

}

.sobre-texto h3 {

    margin: 18px 0 25px;

    font-family: "Montserrat";

    font-size: 42px;

    line-height: 1.15;

    text-transform: uppercase;

}

.sobre-texto h3 span {

    color: var(--azul);

}

.sobre-texto p {

    color: #444;

    line-height: 1.9;

    margin-bottom: 18px;

}

.sobre-cards {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 12px;

    margin-top: 35px;

}

.sobre-cards div {

    padding: 18px;

    border: 1px solid #bbb;

    background: rgba(255,255,255,.4);

    display: flex;

    flex-direction: column;

    gap: 7px;

    transition: .3s;

}

.sobre-cards div:hover {

    background: black;

    color: white;

    transform: translateY(-5px);

}

.sobre-cards i {

    color: var(--azul);

    font-size: 22px;

}

.sobre-cards strong {

    font-size: 13px;

}

.sobre-cards span {

    font-size: 10px;

    color: #888;

}

.numeros {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    background: var(--azul);

    padding: 55px 8%;

}

.numero {

    padding: 15px 30px;

    border-right: 1px solid rgba(255,255,255,.2);

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.numero:last-child {

    border-right: 0;

}

.numero i {

    font-size: 28px;

    margin-bottom: 8px;

}

.numero strong {

    font-family: "Montserrat";

    font-size: 15px;

    text-transform: uppercase;

}

.numero span {

    font-size: 11px;

    color: #ccc;

}

.projetos {

    background: #080808;

}

.projetos-intro {

    max-width: 1200px;

    margin: 0 auto 45px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: end;

}

.projetos-intro h3 {

    margin-top: 15px;

    font-size: 30px;

    line-height: 1.25;

}

.projetos-intro h3 span {

    color: var(--cinza);

}

.projetos-intro > p {

    color: #999;

    line-height: 1.8;

}

.projetos-grid {

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 25px;

}

.projeto-card {

    background: #111;

    border: 1px solid rgba(255,255,255,.1);

    transition: .45s;

}

.projeto-card:hover {

    transform: translateY(-10px);

    border-color: var(--azul);

    box-shadow: 0 25px 60px rgba(0,0,0,.6);

}

.projeto-imagem {

    height: 360px;

    position: relative;

    overflow: hidden;

}

.projeto-imagem img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.projeto-card:hover .projeto-imagem img {

    transform: scale(1.08);

}

.projeto-imagem::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        transparent 40%,
        rgba(0,0,0,.8)
    );

}

.projeto-numero {

    position: absolute;

    top: 20px;

    left: 20px;

    z-index: 2;

    font-family: "Montserrat";

    font-size: 20px;

    font-weight: 800;

}

.projeto-abrir {

    position: absolute;

    right: 20px;

    bottom: 20px;

    z-index: 3;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: white;

    color: black;

    transition: .3s;

}

.projeto-abrir:hover {

    background: var(--azul);

    color: white;

}

.projeto-info {

    padding: 30px;

}

.projeto-info > span {

    color: #777;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}

.projeto-info h3 {

    margin: 12px 0;

    font-size: 25px;

}

.projeto-info p {

    color: #999;

    font-size: 14px;

    line-height: 1.7;

}

.projeto-info a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    color: white;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

}

.projeto-info a:hover {

    color: #aaa;

    gap: 17px;

}

.galeria {

    background: var(--cinza);

    color: black;

}

.galeria .section-title > span {

    color: var(--azul);

}

.galeria .section-title h2 strong {

    color: var(--azul);

}

.galeria-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    grid-auto-rows: 280px;

    gap: 12px;

}

.galeria-item {

    position: relative;

    overflow: hidden;

    background: #111;

}

.galeria-item.grande {

    grid-column: span 2;

    grid-row: span 2;

}

.galeria-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.galeria-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        transparent 35%,
        rgba(0,0,0,.9)
    );

}

.galeria-item:hover img {

    transform: scale(1.1);

}

.galeria-legenda {

    position: absolute;

    z-index: 2;

    left: 25px;

    bottom: 22px;

    color: white;

}

.galeria-legenda span {

    font-size: 9px;

    letter-spacing: 2px;

    color: #bbb;

}

.galeria-legenda h3 {

    margin-top: 5px;

    font-size: 17px;

}


.experiencia {

    background: #dcdcdc;

    color: black;

}

.experiencia .section-title > span {

    color: var(--azul);

}

.experiencia .section-title h2 strong {

    color: var(--azul);

}

.experiencia-grid {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 20px;

}

.experiencia-card {

    padding: 35px;

    background: white;

    border-bottom: 5px solid black;

    transition: .35s;

}

.experiencia-card:hover {

    border-color: var(--azul);

    transform: translateY(-8px);

    box-shadow: 0 20px 50px rgba(0,0,0,.15);

}

.experiencia-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--azul);

    color: white;

    font-size: 23px;

    margin-bottom: 25px;

}

.experiencia-card span {

    color: var(--azul);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}

.experiencia-card h3 {

    margin: 10px 0 15px;

    font-size: 20px;

}

.experiencia-card p {

    color: #666;

    font-size: 13px;

    line-height: 1.8;

}

.contato {

    background: #050505;

}

.contato-grid {

    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}

.contato-texto h2 {

    margin: 18px 0;

    font-size: 45px;

    line-height: 1.1;

}

.contato-texto h2 span {

    color: var(--cinza);

}

.contato-texto > p {

    color: #999;

    line-height: 1.8;

}

.contatos {

    margin-top: 35px;

    display: grid;

    gap: 12px;

}

.contatos a {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px;

    background: #111;

    border: 1px solid #222;

    transition: .3s;

}

.contatos a:hover {

    border-color: var(--azul);

    transform: translateX(8px);

}

.contatos > a > i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--azul);

    font-size: 20px;

}

.contatos div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.contatos span {

    color: #777;

    font-size: 9px;

    letter-spacing: 2px;

}

.contatos strong {

    font-size: 13px;

}

.contato-form {

    background: #111;

    border: 1px solid #222;

    padding: 35px;

}

form {

    display: flex;

    flex-direction: column;

    gap: 17px;

}

.campo {

    display: flex;

    flex-direction: column;

    gap: 7px;

}

.campo label {

    color: #aaa;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

}

input,
textarea {

    width: 100%;

    padding: 15px;

    background: #080808;

    border: 1px solid #333;

    color: white;

    outline: none;

    font-family: inherit;

    transition: .3s;

}

input:focus,
textarea:focus {

    border-color: var(--azul);

}

textarea {

    height: 130px;

    resize: none;

}

.orcamento {

    padding: 110px 8%;

    text-align: center;

    background:

        linear-gradient(
            rgba(0,0,128,.92),
            rgba(0,0,60,.96)
        );

}

.orcamento-content {

    max-width: 800px;

    margin: auto;

}

.orcamento-icon {

    width: 75px;

    height: 75px;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.4);

    border-radius: 50%;

    font-size: 28px;

}

.orcamento-content > span {

    font-size: 11px;

    letter-spacing: 4px;

    font-weight: 700;

}

.orcamento h2 {

    margin: 18px 0;

    font-size: 45px;

}

.orcamento h2 strong {

    display: block;

    color: var(--cinza);

}

.orcamento p {

    color: #ccc;

    line-height: 1.8;

    margin-bottom: 30px;

}

.btn-whatsapp {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 17px 28px;

    background: white;

    color: #000;

    font-weight: 800;

    text-transform: uppercase;

    font-size: 11px;

    transition: .35s;

}

.btn-whatsapp i {

    color: #159447;

    font-size: 20px;

}

.btn-whatsapp:hover {

    transform: translateY(-5px) scale(1.03);

    box-shadow: 0 15px 40px rgba(0,0,0,.35);

}

.redes {

    background: #080808;

}

.redes-grid {

    max-width: 850px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}

.rede {

    display: grid;

    grid-template-columns: 55px 1fr 20px;

    gap: 15px;

    align-items: center;

    padding: 25px;

    background: #111;

    border: 1px solid #222;

    transition: .35s;

}

.rede:hover {

    transform: translateY(-8px);

    background: var(--azul);

    border-color: var(--azul);

}

.rede > i:first-child {

    font-size: 30px;

}

.rede div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.rede span {

    color: #777;

    font-size: 9px;

    letter-spacing: 2px;

}

.rede strong {

    font-size: 14px;

}

.rede:hover span {

    color: #ccc;

}

footer {

    padding: 55px 8% 25px;

    background: #000;

    border-top: 1px solid #222;

    display: grid;

    grid-template-columns: 1fr auto auto;

    gap: 60px;

    align-items: center;

}

.footer-logo p {

    color: #666;

    font-size: 11px;

    margin-top: 10px;

}

.footer-links {

    display: flex;

    gap: 20px;

}

.footer-links a {

    color: #888;

    font-size: 11px;

    transition: .3s;

}

.footer-links a:hover {

    color: white;

}

.footer-social {

    display: flex;

    gap: 8px;

}

.footer-social a {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #333;

    transition: .3s;

}

.footer-social a:hover {

    background: var(--azul);

    border-color: var(--azul);

    transform: translateY(-4px);

}

.copyright {

    grid-column: 1/-1;

    padding-top: 20px;

    border-top: 1px solid #222;

    color: #555;

    font-size: 10px;

    text-align: center;

}

.animar {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.animar.mostrar {

    opacity: 1;

    transform: translateY(0);

}

@media(max-width:1000px) {

    .nav {

        gap: 15px;

    }

    .nav a {

        font-size: 10px;

    }

    .btn-header {

        display: none;

    }

    .sobre-grid {

        grid-template-columns: 1fr;

        max-width: 700px;

    }

    .sobre-foto {

        max-width: 430px;

        margin: auto;

    }

    .numeros {

        grid-template-columns: 1fr 1fr;

    }

    .numero:nth-child(2) {

        border-right: 0;

    }

    .projetos-grid {

        grid-template-columns: 1fr;

        max-width: 700px;

    }

    .experiencia-grid {

        grid-template-columns: 1fr;

        max-width: 700px;

    }

    .contato-grid {

        grid-template-columns: 1fr;

        max-width: 700px;

    }

    footer {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .footer-links,
    .footer-social {

        justify-content: center;

    }

}

@media(max-width:760px) {

    section {

        padding: 80px 6%;

    }

    .header {

        height: 70px;

    }

    .menu-mobile {

        display: block;

    }

    .nav {

        position: absolute;

        top: 70px;

        left: 0;

        width: 100%;

        padding: 25px;

        background: rgba(0,0,0,.98);

        display: none;

        flex-direction: column;

        align-items: center;

    }

    .nav.ativo {

        display: flex;

    }

    .hero {

        padding: 140px 6% 80px;

    }

    .hero h1 {

        font-size: 48px;

        letter-spacing: -2px;

    }

    .hero-decoration {

        display: none;

    }

    .hero-info {

        flex-direction: column;

        gap: 20px;

    }

    .sobre-texto h3 {

        font-size: 32px;

    }

    .sobre-foto img {

        height: 450px;

    }

    .foto-selo {

        right: 0;

    }

    .sobre-cards {

        grid-template-columns: 1fr;

    }

    .numeros {

        grid-template-columns: 1fr;

        padding: 30px 6%;

    }

    .numero {

        border-right: 0;

        border-bottom: 1px solid rgba(255,255,255,.2);

        padding: 25px 10px;

    }

    .numero:last-child {

        border-bottom: 0;

    }

    .projetos-intro {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .projeto-imagem {

        height: 280px;

    }

    .galeria-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 260px;

    }

    .galeria-item.grande {

        grid-column: span 1;

        grid-row: span 1;

    }

    .redes-grid {

        grid-template-columns: 1fr;

    }

    .contato-texto h2 {

        font-size: 35px;

    }

    .orcamento h2 {

        font-size: 35px;

    }

    .btn-whatsapp {

        width: 100%;

    }

    .footer-links {

        flex-wrap: wrap;

    }

}

.casa-construcao {
    position: absolute;
    z-index: 3;
    right: 3%;
    top: 51%;
    width: min(48vw, 650px);
    height: min(45vw, 520px);
    transform: translateY(-43%);
    pointer-events: none;
    filter: drop-shadow(0 25px 45px rgba(0,0,0,.45));
}

.casa-glow {
    position: absolute;
    left: 50%;
    bottom: 3%;
    width: 90%;
    height: 42%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(30,55,255,.35), transparent 68%);
    filter: blur(22px);
    animation: brilhoCasa 4s ease-in-out infinite;
}

.casa-chao {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 5%;
    height: 6px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    box-shadow: 0 0 30px rgba(70,100,255,.55);
    opacity: 0;
    animation: aparecerChao .7s ease forwards 2.5s;
}

.peca {
    position: absolute;
    opacity: 0;
    transform-origin: center;
}

.peca-fundacao {
    left: 10%;
    bottom: 11%;
    width: 80%;
    height: 24px;
    background: linear-gradient(90deg, #171d31, #76839e, #171d31);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 15px 25px rgba(0,0,0,.45);
    animation: cairFundacao 1s cubic-bezier(.18,.8,.25,1) forwards .35s;
}

.peca-parede {
    background: linear-gradient(135deg, #e6ebf4, #8e9ab3 52%, #414b68);
    border: 1px solid rgba(255,255,255,.38);
    box-shadow: inset 8px 0 22px rgba(255,255,255,.1), 0 15px 30px rgba(0,0,0,.35);
}

.peca-parede-esq {
    left: 11%;
    bottom: 15%;
    width: 37%;
    height: 43%;
    animation: cairParedeEsq 1.1s cubic-bezier(.18,.8,.25,1) forwards .8s;
}

.peca-parede-dir {
    right: 11%;
    bottom: 15%;
    width: 37%;
    height: 43%;
    animation: cairParedeDir 1.1s cubic-bezier(.18,.8,.25,1) forwards 1.05s;
}

.peca-parede-topo {
    left: 11%;
    bottom: 56%;
    width: 78%;
    height: 7%;
    background: linear-gradient(90deg, #4d5873, #d5dce9, #4d5873);
    animation: cairTopo 1s cubic-bezier(.18,.8,.25,1) forwards 1.3s;
}

.peca-janela {
    bottom: 31%;
    width: 16%;
    height: 19%;
    background: linear-gradient(145deg, rgba(35,67,125,.95), rgba(9,25,65,.95));
    border: 5px solid #252c42;
    box-shadow: inset 0 0 25px rgba(100,160,255,.35), 0 0 18px rgba(70,120,255,.25);
}

.peca-janela::before,
.peca-janela::after {
    content: "";
    position: absolute;
    background: rgba(225,235,255,.72);
}

.peca-janela::before {
    width: 4px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.peca-janela::after {
    height: 4px;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.peca-janela-esq {
    left: 20%;
    animation: cairJanela 1s cubic-bezier(.18,.8,.25,1) forwards 1.65s;
}

.peca-janela-dir {
    right: 20%;
    animation: cairJanela 1s cubic-bezier(.18,.8,.25,1) forwards 1.85s;
}

.peca-porta {
    left: 41%;
    bottom: 15%;
    width: 18%;
    height: 43%;
    background: linear-gradient(90deg, #1c2235, #4b5877);
    border: 5px solid #20263a;
    box-shadow: inset 0 0 20px rgba(255,255,255,.1), 0 15px 25px rgba(0,0,0,.4);
    animation: cairPorta 1s cubic-bezier(.18,.8,.25,1) forwards 2.05s;
}

.maca {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
    right: 12px;
    top: 52%;
    box-shadow: 0 0 10px rgba(255,255,255,.7);
}

.peca-telha {
    bottom: 58%;
    height: 12%;
    background: linear-gradient(135deg, #343e5b, #aab4c7, #303950);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 14px 25px rgba(0,0,0,.35);
}

.peca-telha-1 {
    left: 5%;
    width: 34%;
    transform: skewX(28deg) rotate(-28deg);
    animation: cairTelha1 1.1s cubic-bezier(.18,.8,.25,1) forwards 1.4s;
}

.peca-telha-2 {
    left: 31%;
    width: 38%;
    transform: rotate(-28deg);
    animation: cairTelha2 1.1s cubic-bezier(.18,.8,.25,1) forwards 1.6s;
}

.peca-telha-3 {
    right: 5%;
    width: 34%;
    transform: skewX(-28deg) rotate(28deg);
    animation: cairTelha3 1.1s cubic-bezier(.18,.8,.25,1) forwards 1.8s;
}

.peca-chamine {
    right: 22%;
    bottom: 66%;
    width: 10%;
    height: 25%;
    background: linear-gradient(90deg, #30384f, #919db3, #30384f);
    border: 1px solid rgba(255,255,255,.25);
    animation: cairChamine 1s cubic-bezier(.18,.8,.25,1) forwards 2s;
}

.particula {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    opacity: 0;
    box-shadow: 0 0 12px rgba(100,140,255,.9);
    animation: particulaSubir 2.5s ease-out infinite;
}

.part-1 { left: 18%; bottom: 18%; animation-delay: 2.7s; }
.part-2 { left: 32%; bottom: 22%; animation-delay: 3s; }
.part-3 { left: 48%; bottom: 16%; animation-delay: 2.8s; }
.part-4 { right: 28%; bottom: 21%; animation-delay: 3.2s; }
.part-5 { right: 17%; bottom: 17%; animation-delay: 2.9s; }
.part-6 { left: 63%; bottom: 25%; animation-delay: 3.4s; }

@keyframes cairFundacao {
    0% { opacity: 0; transform: translateY(-550px) rotate(-8deg) scale(.7); }
    70% { opacity: 1; transform: translateY(12px) rotate(2deg) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes cairParedeEsq {
    0% { opacity: 0; transform: translate(-180px,-650px) rotate(-38deg); }
    75% { opacity: 1; transform: translate(8px,8px) rotate(3deg); }
    100% { opacity: 1; transform: translate(0) rotate(0); }
}

@keyframes cairParedeDir {
    0% { opacity: 0; transform: translate(210px,-680px) rotate(40deg); }
    75% { opacity: 1; transform: translate(-8px,8px) rotate(-3deg); }
    100% { opacity: 1; transform: translate(0) rotate(0); }
}

@keyframes cairTopo {
    0% { opacity: 0; transform: translateY(-680px) rotate(15deg); }
    75% { opacity: 1; transform: translateY(7px) rotate(-2deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes cairJanela {
    0% { opacity: 0; transform: translateY(-540px) rotate(35deg) scale(.6); }
    75% { opacity: 1; transform: translateY(7px) rotate(-2deg) scale(1.04); }
    100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes cairPorta {
    0% { opacity: 0; transform: translateY(-730px) rotate(-25deg) scale(.7); }
    75% { opacity: 1; transform: translateY(8px) rotate(2deg) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes cairTelha1 {
    0% { opacity: 0; transform: translate(-140px,-680px) rotate(-70deg); }
    75% { opacity: 1; transform: translate(6px,5px) skewX(28deg) rotate(-28deg); }
    100% { opacity: 1; transform: skewX(28deg) rotate(-28deg); }
}

@keyframes cairTelha2 {
    0% { opacity: 0; transform: translateY(-730px) rotate(30deg); }
    75% { opacity: 1; transform: translateY(5px) rotate(-30deg); }
    100% { opacity: 1; transform: rotate(-28deg); }
}

@keyframes cairTelha3 {
    0% { opacity: 0; transform: translate(140px,-680px) rotate(70deg); }
    75% { opacity: 1; transform: translate(-6px,5px) skewX(-28deg) rotate(28deg); }
    100% { opacity: 1; transform: skewX(-28deg) rotate(28deg); }
}

@keyframes cairChamine {
    0% { opacity: 0; transform: translate(110px,-730px) rotate(40deg); }
    75% { opacity: 1; transform: translate(-5px,7px) rotate(-2deg); }
    100% { opacity: 1; transform: translate(0) rotate(0); }
}

@keyframes particulaSubir {
    0% { opacity: 0; transform: translate(0,10px) scale(.5); }
    15% { opacity: .8; }
    100% { opacity: 0; transform: translate(20px,-100px) scale(1.5); }
}

@keyframes brilhoCasa {
    0%,100% { opacity: .45; transform: translateX(-50%) scale(.9); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

@keyframes aparecerChao {
    from { opacity: 0; transform: scaleX(.2); }
    to { opacity: 1; transform: scaleX(1); }
}

@media(max-width:1000px) {
    .casa-construcao {
        right: -6%;
        width: min(58vw,520px);
        opacity: .72;
    }
}

@media(max-width:760px) {
    .casa-construcao {
        width: 420px;
        height: 360px;
        right: -115px;
        top: 72%;
        opacity: .42;
        transform: translateY(-50%) scale(.82);
    }

    .hero-decoration {
        display: none;
    }
}

@media(prefers-reduced-motion: reduce) {
    .casa-construcao * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}