/* ======================================================
   PÁGINAS DE SERVIÇO (hidráulica e as próximas)
   Carregado depois do style.css e do mobile.css.
   ====================================================== */

/* ======================================================
   1. VITRINE: CAIXA PRINCIPAL COM FUNDO DE METAL
   Mesmo fundo da seção "Áreas de Atendimento" da home
   ====================================================== */
.vitrine {
    padding: 30px 20px 30px;
    background-color: #b0b0b0;
    background-image:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,0.8) 0%, transparent 70%),
        linear-gradient(to right, rgba(0,0,0,0.1) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.1) 100%);
}

/* Palco onde as duas áreas se sobrepõem */
.vitrine-palco {
    position: relative;
    max-width: 1100px;
    height: 550px;
    margin: 0 auto;
}

/* Área 2: painel da apresentação (fica atrás) */
.vitrine-area2 {
    position: absolute;
    top: 167px;
    left: 0;         /* Alinhado com a logo do topo e com o bloco de texto de baixo */
    width: 63.6%;
    height: 380px;
    background-color: #162e48;
    border-radius: 14px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

/* Área 1: foto (fica na frente) */
.vitrine-area1 {
    position: absolute;
    top: 0;
    left: 40%;
    width: 60%;      /* left + width = 100%: alinhado com o "Contato" do topo */
    height: 380px;
    border-radius: 14px;
    overflow: hidden;
    background-color: #26303b;
    box-shadow: 0 35px 70px rgba(0,0,0,0.35);
}

/* Texto na parte da área 2 que a foto não cobre */
.vitrine-texto {
    position: absolute;
    top: 44px;
    left: 40px;
    width: calc(62.9% - 80px); /* Parte do painel que a foto não cobre */
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vitrine-texto h1 {
    color: #ffffff;
    font-size: 2.1rem;
    line-height: 1.12;
    font-weight: 800;
}

.vitrine-linha {
    width: 56px;
    height: 4px;
    border-radius: 50px;
    background-color: #f39c12;
}

.vitrine-texto p {
    color: #dfe6ee;
    font-size: 1.125rem; /* 18px no PC */
    line-height: 1.6;
}

/* Botão "Fale conosco" (abre o WhatsApp, sem cara de WhatsApp).
   Mesmo formato do botão "Ver todos os serviços", em branco */
.btn-fale-conosco {
    align-self: flex-start;
    background-color: #ffffff;
    color: #162e48;
    border: 2px solid #ffffff;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-fale-conosco:hover {
    background-color: #f39c12;
    border-color: #f39c12;
}

/* Orçamento grátis: sozinho no canto livre da área 2, ao lado da foto */
.vitrine-orcamento {
    position: absolute;
    bottom: 40px;
    left: 62.9%;     /* Começa alinhado com a borda esquerda da foto */
    right: 20px;
    color: #f39c12;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.5;
    text-transform: uppercase;
}

.vitrine-area1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%; /* SOBE/DESCE o enquadramento da foto (0% = topo, 100% = base) */
    display: block;
}

/* Entrada da vitrine (uma vez, quando a página abre):
   1º o painel azul sobe, 2º a foto desce por cima, 3º surgem os textos */
.vitrine-area2 { animation: vitrineSobe 0.8s ease-out both; }
.vitrine-area1 { animation: vitrineDesce 0.8s ease-out 0.3s both; }
.vitrine-texto,
.vitrine-orcamento { animation: vitrineSurge 0.6s ease-out 1s both; }

@keyframes vitrineSobe {
    from { opacity: 0; transform: translateY(30px); }  /* AUMENTA/DIMINUI a distância da subida */
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes vitrineDesce {
    from { opacity: 0; transform: translateY(-30px); } /* AUMENTA/DIMINUI a distância da descida */
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes vitrineSurge {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Quem pede para reduzir movimento no aparelho vê a vitrine parada */
@media (prefers-reduced-motion: reduce) {
    .vitrine-area1,
    .vitrine-area2,
    .vitrine-texto,
    .vitrine-orcamento { animation: none; }
}

/* Botão do WhatsApp das páginas de serviço */
.btn-servico-whats {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background-color: #136b33;
    color: #ffffff;
    padding: 14px 24px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.btn-servico-whats:hover { background-color: #0e662e; }

/* Botão que só aparece no celular deitado (onde o flutuante fica escondido) */
.btn-so-deitado { display: none; }

/* ======================================================
   2. TEXTO DO SERVIÇO
   ====================================================== */
.servico-conteudo {
    width: calc(100% - 40px); /* Nunca encosta nas bordas da tela */
    max-width: 1100px;
    margin: 60px auto;
    padding: 56px 64px;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(22,46,72,0.12);
}

.servico-conteudo h2 {
    color: #162e48;
    font-size: 1.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.servico-linha {
    width: 60px;
    height: 4px;
    border-radius: 50px;
    background-color: #f39c12;
    margin: 12px 0 28px;
}

.servico-colunas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.servico-colunas p {
    color: #444;
    font-size: 1.06rem;
    line-height: 1.7;
}

/* Fechamento: pergunta + botões */
.servico-chamada {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #e1e8ed;
}

.servico-chamada > p {
    color: #162e48;
    font-size: 1.25rem;
    font-weight: 700;
}

.servico-acoes {
    display: flex;
    align-items: center;
    gap: 28px;
}

.link-voltar {
    display: inline-block;
    white-space: nowrap;
    background-color: #162e48;
    color: #ffffff;
    border: 2px solid #f39c12;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.link-voltar:hover {
    background-color: #f39c12;
    color: #162e48;
}

/* Computadores com tela menor (933px a 1199px): textos da vitrine um pouco menores
   para caber no painel, que fica mais estreito */
@media (min-width: 933px) and (max-width: 1199px) {
    .vitrine-texto h1 { font-size: 1.9rem; }
    .vitrine-texto p { font-size: 1rem; }
    .vitrine-orcamento { font-size: 14px; }
}

/* ======================================================
   3. TABLET DEITADO E NOTEBOOK (481px a 1366px, deitado)
   O cabeçalho sobe com a página, então a vitrine desce
   ====================================================== */
@media (min-width: 481px) and (max-width: 1366px) and (orientation: landscape) {
    .vitrine { padding-top: 200px; }
}

/* ======================================================
   4. CELULAR E TABLET EM PÉ
   Foto em cima, apresentação embaixo, ainda sobrepostas
   ====================================================== */
@media (max-width: 1024px) and (orientation: portrait) {
    .vitrine { padding: 110px 15px 40px; }

    .vitrine-palco {
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .vitrine-area1 {
        position: relative;
        top: auto;
        left: auto;
        order: 1;
        width: 92%;
        height: 240px;
        margin-left: auto;
        z-index: 2;
    }

    .vitrine-area2 {
        position: relative;
        top: auto;
        left: auto;
        order: 2;
        width: 92%;
        height: auto;
        margin-top: -40px;
        padding: 70px 24px 28px;
    }

    .vitrine-texto {
        position: static;
        width: auto;
        align-items: center;
        text-align: center;
    }

    .vitrine-texto h1 { font-size: 1.7rem; }
    .vitrine-texto p { font-size: 1rem; }
    .vitrine-orcamento { font-size: 13px; }

    .btn-servico-whats { align-self: center; }
    .btn-fale-conosco { align-self: center; }

    .vitrine-orcamento {
        position: static;
        width: auto;
        margin-top: 22px;
        text-align: center;
    }

    .servico-conteudo {
        width: auto;
        margin: 40px 15px 110px; /* Espaço para o botão flutuante */
        padding: 36px 24px;
    }

    .servico-conteudo h2 { font-size: 1.35rem; }
    .servico-colunas { grid-template-columns: 1fr; gap: 18px; }

    .servico-chamada {
        flex-direction: column;
        text-align: center;
    }

    .servico-acoes {
        flex-direction: column-reverse;
        gap: 18px;
    }
}

/* Celulares pequenos: botão um pouco menor para caber numa linha */
@media (max-width: 380px) {
    .btn-servico-whats { padding: 12px 18px; font-size: 0.8rem; }
    .vitrine-area2 { padding-left: 18px; padding-right: 18px; }
}

/* Tablet em pé: foto maior */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .vitrine-area1 { height: 380px; }
    .vitrine-area2 { padding: 80px 60px 36px; }
}

/* ======================================================
   5. CELULAR DEITADO
   Mesma sobreposição do PC, em tamanho reduzido
   ====================================================== */
@media (max-width: 932px) and (orientation: landscape) {
    .vitrine { padding: 130px 20px 30px; }

    /* Palco = onde o painel azul termina (70px + 260px) */
    .vitrine-palco { height: 330px; }

    /* Painel azul com a mesma altura da foto (260px).
       O texto e o orçamento ficam empilhados na coluna da esquerda */
    .vitrine-area2 {
        top: 70px;
        left: 0;
        width: 62%;
        height: 260px;
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
    }

    .vitrine-texto {
        position: static;
        width: calc(71% - 14px); /* Parte do painel que a foto não cobre */
        gap: 10px;
        margin-bottom: 10px;
    }

    .vitrine-texto h1 { font-size: 1.4rem; }
    .vitrine-texto p { font-size: 0.82rem; line-height: 1.45; }
    .btn-servico-whats { padding: 11px 18px; font-size: 0.8rem; }
    .btn-fale-conosco { padding: 8px 20px; font-size: 0.78rem; }

    .vitrine-orcamento {
        position: static;
        width: calc(71% - 14px);
        margin-top: auto; /* Fica sempre no pé do painel */
        font-size: 11px;
        letter-spacing: 1px;
    }

    .btn-so-deitado { display: inline-flex; }

    .vitrine-area1 {
        left: 44%;
        width: 56%;
        height: 260px;
    }

    .servico-conteudo {
        margin: 30px 20px;
        padding: 30px 36px;
    }

    .servico-colunas p { font-size: 0.95rem; }

    /* Fechamento: pergunta numa linha, botões de mesma largura embaixo, centralizados */
    .servico-chamada {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .servico-chamada > p {
        font-size: 1.05rem;
        text-align: center;
    }

    .servico-acoes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        width: 100%;
        max-width: 560px;
    }

    .servico-acoes .link-voltar,
    .servico-acoes .btn-servico-whats {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Celular deitado com tela menor (até 780px): vitrine um pouco mais compacta */
@media (max-width: 780px) and (orientation: landscape) {
    .vitrine-texto h1 { font-size: 1.2rem; }
    .vitrine-texto p { font-size: 0.76rem; }
    .btn-fale-conosco { padding: 7px 18px; font-size: 0.74rem; }
}

@media (max-width: 600px) and (orientation: landscape) {
    .vitrine-texto h1 { font-size: 1.1rem; }
    .vitrine-texto p { font-size: 0.72rem; }
}

/* Celular deitado pequeno (até 480px de largura): cabeçalho não fica sobreposto */
@media (max-width: 480px) and (orientation: landscape) {
    .vitrine { padding-top: 30px; }
}

/* ======================================================
   6. VARIAÇÕES DA VITRINE (uma composição por página)
   O esqueleto é o mesmo; muda só a arrumação dos dois cartões.
   Cada página escolhe a sua pela classe no <main class="vitrine ...">:
   - (sem classe extra)   hidráulica: painel à esquerda, foto à direita, em degrau
   - vitrine--dividida    elétrica: cartão azul grande, foto saindo dele até a borda da tela
   - vitrine--laranja     pintura: igual à hidráulica, com o painel laranja
   - vitrine--capa        telhados: foto grande, painel sobre o canto esquerdo
   - vitrine--capa-direita drywall: foto grande, painel sobre o canto direito
   - vitrine--invertida   ar-condicionado: painel em cima, foto descendo por baixo
   ====================================================== */

/* Painel de metal escovado no lugar da foto (enquanto a foto não é escolhida) */
.vitrine-foto-metal {
    width: 100%;
    height: 100%;
    background-color: #9fa4a9;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, rgba(0,0,0,0.04) 1px 3px),
        linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.18) 100%);
}

/* --- Pintura: painel laranja (vale em todas as telas) --- */
.vitrine--laranja .vitrine-area2 { background-color: #f39c12; }
.vitrine--laranja .vitrine-texto h1 { color: #162e48; }
.vitrine--laranja .vitrine-texto p { color: #1a1a1a; }
.vitrine--laranja .vitrine-linha { background-color: #162e48; }
.vitrine--laranja .vitrine-orcamento { color: #162e48; }
/* Sombra da foto mais curta e mais clara, para não escurecer o painel laranja (PC e celular) */
.vitrine--laranja .vitrine-area1 { box-shadow: 0 14px 28px rgba(0,0,0,0.25); } /* AUMENTA/DIMINUI a sombra da foto */
.vitrine--laranja .btn-fale-conosco:hover {
    background-color: #162e48;
    border-color: #162e48;
    color: #ffffff;
}

/* --- Telhados: quando a foto precisa de corte, ele sai de baixo, preservando as mãos na calha --- */
.vitrine--capa .vitrine-area1 img { object-position: center 25%; }

/* --- Ar-condicionado: as peças entram ao contrário (painel desce, foto sobe) --- */
.vitrine--invertida .vitrine-area2 { animation-name: vitrineDesce; }
.vitrine--invertida .vitrine-area1 { animation-name: vitrineSobe; }

/* ---------- PC, notebook e tablet deitado ---------- */
@media (orientation: landscape) and (min-width: 933px), (min-width: 1025px) {

    /* Pintura: foto mais alta, descendo até perto do "Orçamento grátis" */
    .vitrine--laranja .vitrine-area1 { height: 440px; } /* AUMENTA/DIMINUI a altura da foto */

    /* Pintura: textos do painel mais para cima e título um pouco menor,
       para o "Fale conosco" não encostar no pé do painel (o título é mais comprido) */
    .vitrine--laranja .vitrine-texto { top: 32px; gap: 14px; } /* top: SOBE/DESCE o bloco de texto */
    .vitrine--laranja .vitrine-texto h1 { font-size: 1.85rem; }

    /* Telhados e drywall: foto grande, painel encaixado num canto */
    .vitrine--capa .vitrine-palco,
    .vitrine--capa-direita .vitrine-palco { height: 560px; }

    .vitrine--capa .vitrine-area1,
    .vitrine--capa-direita .vitrine-area1 {
        left: 0;
        width: 100%;
        height: 470px;
        z-index: 1;
    }

    .vitrine--capa .vitrine-area2,
    .vitrine--capa-direita .vitrine-area2 {
        top: auto;
        bottom: 0;
        left: 4%;
        width: 440px;
        height: auto;
        padding: 40px 40px 36px;
        display: flex;
        flex-direction: column;
        z-index: 2;
        box-shadow: 0 30px 60px rgba(0,0,0,0.35);
    }

    .vitrine--capa-direita .vitrine-area2 { left: auto; right: 4%; }

    /* Telhados: foto média (16:9), cortando só um pouco do telhado e da base.
       O palco cresce junto com a foto e o painel passa 60px abaixo dela */
    .vitrine--capa .vitrine-palco { height: auto; padding-bottom: 60px; } /* AUMENTA/DIMINUI o quanto o painel passa da foto */
    .vitrine--capa .vitrine-area1 {
        position: relative;
        top: auto;
        height: auto;
        aspect-ratio: 16 / 9;   /* ALTURA da foto: 3 / 2 = inteira; 2 / 1 = mais baixa */
    }
    .vitrine--capa .vitrine-area1 img { object-position: center 55%; } /* SOBE/DESCE o enquadramento */

    /* Drywall: mesma foto média (16:9) dos telhados, com o painel passando 60px abaixo dela */
    .vitrine--capa-direita .vitrine-palco { height: auto; padding-bottom: 60px; } /* AUMENTA/DIMINUI o quanto o painel passa da foto */
    .vitrine--capa-direita .vitrine-area1 {
        position: relative;
        top: auto;
        height: auto;
        aspect-ratio: 16 / 9;   /* ALTURA da foto: 3 / 2 = inteira; 2 / 1 = mais baixa */
    }
    .vitrine--capa-direita .vitrine-area1 img { object-position: center 35%; } /* SOBE/DESCE o enquadramento */

    .vitrine--capa .vitrine-texto,
    .vitrine--capa-direita .vitrine-texto { position: static; width: auto; }

    .vitrine--capa .vitrine-orcamento,
    .vitrine--capa-direita .vitrine-orcamento { position: static; margin-top: 22px; }

    /* Ar-condicionado: painel em cima, foto descendo por baixo */
    .vitrine--invertida .vitrine-area2 { top: 0; }
    .vitrine--invertida .vitrine-area1 { top: 167px; }
    .vitrine--invertida .vitrine-orcamento { top: 40px; bottom: auto; } /* Acima da foto */
}
/* Pintura em computador com tela menor: título menor e foto um pouco mais baixa,
   porque o painel fica mais estreito e os textos ocupam mais linhas */
@media (min-width: 933px) and (max-width: 1199px) and (orientation: landscape) {
    .vitrine--laranja .vitrine-texto h1 { font-size: 1.6rem; }
    .vitrine--laranja .vitrine-area1 { height: 425px; }
}

/* ---------- Celular e tablet em pé ---------- */
@media (max-width: 1024px) and (orientation: portrait) {

    /* Ar-condicionado: painel em cima, foto embaixo subindo por cima dele */
    .vitrine--invertida .vitrine-area2 {
        order: 1;
        margin-top: 0;
        padding-top: 36px;
        padding-bottom: 70px;
    }

    .vitrine--invertida .vitrine-area1 {
        order: 2;
        margin-top: -40px;
    }

    /* Telhados e drywall: foto maior, painel subindo por cima da parte de baixo dela */
    .vitrine--capa .vitrine-area1,
    .vitrine--capa-direita .vitrine-area1 {
        width: 100%;
        height: 300px;
        z-index: 1;
    }

    .vitrine--capa .vitrine-area2,
    .vitrine--capa-direita .vitrine-area2 {
        margin-top: -90px;
        padding-top: 36px;
        z-index: 2;
    }

    .vitrine--capa .vitrine-area2 { margin-left: 0; margin-right: auto; }
    .vitrine--capa-direita .vitrine-area2 { margin-left: auto; }

    /* Telhados: foto encostando nos dois lados da tela (passa por cima dos 15px de margem da vitrine) */
    .vitrine--capa .vitrine-area1 {
        width: calc(100% + 30px);
        margin-left: -15px;
        border-radius: 0;
    }
}

/* Tablet em pé: foto das capas maior */
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .vitrine--capa .vitrine-area1,
    .vitrine--capa-direita .vitrine-area1 { height: 440px; }
}

/* ---------- Celular deitado ---------- */
@media (max-width: 932px) and (orientation: landscape) {

    /* Ar-condicionado: painel em cima, foto descendo por baixo */
    .vitrine--invertida .vitrine-area2 { top: 0; }
    .vitrine--invertida .vitrine-area1 { top: 70px; }

    /* Telhados e drywall: foto na largura toda, painel encaixado num canto */
    .vitrine--capa .vitrine-palco,
    .vitrine--capa-direita .vitrine-palco { height: 340px; }

    .vitrine--capa .vitrine-area1,
    .vitrine--capa-direita .vitrine-area1 {
        left: 0;
        width: 100%;
        height: 280px;
        z-index: 1;
    }

    .vitrine--capa .vitrine-area2,
    .vitrine--capa-direita .vitrine-area2 {
        top: auto;
        bottom: 0;
        left: 3%;
        width: 60%;
        height: auto;
        z-index: 2;
        box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    }

    .vitrine--capa-direita .vitrine-area2 { left: auto; right: 3%; }

    /* Telhados: foto inteira, igual ao PC, com o painel passando 100px abaixo dela */
    .vitrine--capa .vitrine-palco { height: auto; padding-bottom: 100px; }
    .vitrine--capa .vitrine-area1 {
        position: relative;
        top: auto;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .vitrine--capa .vitrine-texto,
    .vitrine--capa-direita .vitrine-texto,
    .vitrine--capa .vitrine-orcamento,
    .vitrine--capa-direita .vitrine-orcamento { width: auto; }

    .vitrine--capa .vitrine-orcamento,
    .vitrine--capa-direita .vitrine-orcamento { margin-top: 12px; }
}

/* Elétrica: cartão azul grande, com o texto à esquerda e a foto saindo dele pela direita e por baixo */
.vitrine--dividida .vitrine-area2 {
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}
.vitrine--dividida { overflow: hidden; } /* A foto vai até a borda da tela sem criar rolagem lateral */
.vitrine--dividida .vitrine-area1 {
    z-index: 2;
    border-radius: 12px 0 0 12px; /* Lado direito reto: encosta na borda da tela */
    box-shadow: 0 20px 45px rgba(0,0,0,0.3);
}

/* PC, notebook e tablet deitado */
@media (orientation: landscape) and (min-width: 933px), (min-width: 1025px) {
    .vitrine--dividida .vitrine-palco { height: 590px; } /* Cartão (540px) + a foto passando por baixo */
    .vitrine--dividida .vitrine-area2 {
        top: 0;
        left: 0;
        width: 100%;
        height: 540px;
        padding: 0 0 0 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .vitrine--dividida .vitrine-texto { position: static; width: 40%; gap: 22px; }
    .vitrine--dividida .vitrine-texto h1 { font-size: 3rem; line-height: 1.05; }
    .vitrine--dividida .vitrine-texto p { font-size: 1.15rem; }
    .vitrine--dividida .vitrine-orcamento { position: static; width: 40%; margin-top: 26px; font-size: 14px; }
    /* Foto: começa dentro do laranja, passa pela direita até a borda da tela e desce 50px além do cartão */
    .vitrine--dividida .vitrine-area1 {
        top: 28px;
        left: 50%;
        right: calc((100vw - min(1100px, 100vw - 40px)) / -2);
        width: auto;
        height: 562px;
    }
}

/* Celular e tablet em pé: foto em cima, saindo do cartão para cima e para a direita; texto embaixo */
@media (max-width: 1024px) and (orientation: portrait) {
    .vitrine--dividida { padding-top: 140px; padding-bottom: 40px; }
    .vitrine--dividida .vitrine-palco { position: relative; }
    .vitrine--dividida .vitrine-area2 {
        order: 1;
        width: 100%;
        margin: 0;
        padding: 250px 24px 32px; /* Espaço em cima para a foto */
    }
    .vitrine--dividida .vitrine-area1 {
        position: absolute;
        order: 2;
        top: -40px;       /* Passa 40px acima do cartão */
        left: 16px;
        right: -15px;     /* Encosta na borda direita da tela */
        width: auto;
        height: 260px;
        margin: 0;
    }
}

@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .vitrine--dividida .vitrine-area2 { padding-top: 370px; }
    .vitrine--dividida .vitrine-area1 { top: -50px; left: 24px; height: 390px; }
}

/* Celular deitado */
@media (max-width: 932px) and (orientation: landscape) {
    .vitrine--dividida .vitrine-palco { height: 320px; }
    .vitrine--dividida .vitrine-area2 {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 0 0 26px;
        justify-content: center;
    }
    .vitrine--dividida .vitrine-texto,
    .vitrine--dividida .vitrine-orcamento { width: 44%; }
    .vitrine--dividida .vitrine-orcamento { margin-top: 12px; }
    .vitrine--dividida { padding-bottom: 60px; }
    .vitrine--dividida .vitrine-area1 { top: 16px; left: 52%; right: -20px; width: auto; height: calc(100% + 14px); }
}