/* ==========================================================================
   Template "Orçamentos" (page-orcamentos.php)
   Layout com Bootstrap e botões do tema (.bot-azul / .bot-line). Aqui só o que eles não cobrem:
   medidas do Figma, cores das seções e a máscara inclinada das fotos.
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.orc {
    --orc-verde: #71a004;
    --orc-verde-escuro: #4a640d;
    --orc-verde-claro: #d9ecae;
    --orc-ambar: #e29607;
    background: #fff;
    color: var(--cinza);
}
.orc [id] { scroll-margin-top: 24px; }
.orc button { font-family: inherit; cursor: pointer; }
:where(.orc) :is(p, h1, h2, h3) { margin: 0; }   /* especificidade 0: não briga com as classes abaixo */
.orc img { display: block; object-fit: cover; }   /* fotos centralizadas e preenchendo a área */

.orc-hl { color: var(--azul); }

/* Botões do tema com as medidas do Figma */
.orc .bot-line { line-height: 48px; background: transparent; }
.orc .bot-line.branco:hover { background: #fff; color: var(--azul); }
.orc .bot-azul i,
.orc .bot-line i { font-size: 13px; line-height: 1; }

.orc-eyebrow {
    margin-bottom: 18px;
    font-size: 12px;
    line-height: normal;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.orc-h2 {
    font-size: clamp(1.875rem, 2.68vw, 2.875rem);   /* 46px */
    line-height: 1.1304;
    font-weight: 700;
    letter-spacing: -.025em;
}

/* ---------- Hero ---------- */
.orc-hero { padding-top: 56px; }

/* Breadcrumb do tema (#breadcrumbs), no estilo do Figma */
.orc #breadcrumbs { font-size: 11px; line-height: 28px; font-weight: 600; letter-spacing: .08em; color: var(--cinzac); }
.orc #breadcrumbs a { color: var(--cinzac); }

.orc-hero__title {
    max-width: 1000px;
    padding-top: 30px;
    font-size: clamp(2.125rem, 4.2vw, 4.5rem);     /* 72px */
    line-height: 1.3333;
    font-weight: 800;
    letter-spacing: -.0533em;
}
.orc-hero__bar { padding: 34px 0 44px; }
.orc-hero__text { max-width: 520px; font-size: 18px; line-height: 30px; }
.orc-hero__media { height: 430px; overflow: hidden; }

/* ---------- Escolha o serviço ---------- */
.orc-nav { padding-top: 26px; }
.orc-nav__head { min-height: 84px; padding-top: 28px; }
.orc-nav__label { font-size: 12px; line-height: normal; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.orc-nav__hint { font-size: 15px; line-height: 28px; color: var(--cinzac); }
.orc-nav__list { border-top: 1px solid var(--preto); }

.orc-nav__item--manutencao { --cor: var(--orc-verde); }
.orc-nav__item--projetos   { --cor: var(--azul); }
.orc-nav__item--laudos     { --cor: var(--orc-ambar); }

.orc-nav__item {
    grid-template-columns: 150px 64px minmax(0, 1fr) 52px;
    grid-template-areas: "tag icon title arrow";
    align-items: center;
    column-gap: 26px;
    min-height: 125px;
    padding: 30px 8px;
    border-bottom: 1px solid var(--lines);
    transition: background-color .2s linear;
}
.orc-nav__item:hover { background: #fafafa; color: var(--preto); }
.orc-nav__tag { grid-area: tag; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cinzac); }
.orc-nav__icon { grid-area: icon; width: 64px; height: 64px; border-radius: 10px; background: var(--cor); font-size: 28px; }
.orc-nav__title { grid-area: title; font-size: clamp(1.25rem, 1.75vw, 1.875rem); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.orc-nav__arrow { grid-area: arrow; width: 52px; height: 52px; border: 1px solid var(--lines); color: var(--cor); font-size: 16px; transition: .2s linear; }
.orc-nav__item:hover .orc-nav__arrow { background: var(--cor); border-color: var(--cor); color: #fff; }

/* ---------- Calculadora em pop-up ---------- */
.orc-modal .modal-dialog { --bs-modal-width: 1080px; }
.orc-modal .modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .25); }
/* A barra do plugin Mobile Menu usa z-index 99999998 e ficaria por cima do pop-up: enquanto ele está aberto, ela passa para trás do fundo escuro. */
body.modal-open .mob-menu-header-holder { z-index: 1 !important; }
.orc-modal .modal-header { padding: 20px 24px 0; }
.orc-modal .modal-body { padding: 0 clamp(20px, 5vw, 64px) clamp(24px, 4vw, 48px) !important; }   /* respiro nas laterais */
.orc-modal #calculadora { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; }   /* o componente foi feito para uma seção da página */
.orc-modal #calculadora .container { max-width: none; padding-left: 0; padding-right: 0; }   /* o padding já vem do modal */
@media (max-width: 767.98px) {
    .orc-modal .modal-content { border-radius: 0; box-shadow: none; }   /* tela cheia no mobile */
    .orc-modal .modal-header { padding: 14px 16px 0; }
}

/* ---------- Manutenção ---------- */
.orc-man { margin-top: 70px; background: var(--orc-verde); }
.orc-man .orc-eyebrow { margin-bottom: 4px; color: var(--orc-verde-claro); }
.orc-man .orc-hl { color: var(--orc-verde-claro); }
.orc-man .bot-azul { background-color: var(--orc-verde-escuro); }

.orc-man__top { padding: 70px 0 44px; }
.orc-man__text { max-width: 520px; font-size: 17px; line-height: 29px; }
.orc-man__media { height: 280px; overflow: hidden; }

.orc-man__benefits { padding: 50px 0 44px; }
.orc-man__bicon { width: 54px; height: 54px; margin-bottom: 16px; border-radius: 10px; background: rgba(255, 255, 255, .9); color: var(--orc-verde); font-size: 24px; }
.orc-man__benefits h3 { font-size: 16px; line-height: 22px; font-weight: 700; }
.orc-man__benefits p { margin-top: 5px; font-size: 14px; line-height: 22px; opacity: .9; }
.orc-man__actions { padding: 36px 0 70px; border-top: 1px solid rgba(255, 255, 255, .3); }

/* ---------- Projetos / Laudos ---------- */
.orc-split--projetos { --cor: var(--azul); }
.orc-split--laudos   { --cor: var(--orc-ambar); }
.orc-split .orc-section__content { position: relative; overflow: hidden; }
.orc-split .orc-eyebrow { color: var(--cor); }
.orc-split .orc-hl { color: var(--cor); }
.orc-split .bot-azul { background-color: var(--cor); }
.orc-split__row { min-height: 597px; }
.orc-split__inner { max-width: 556px; }
.orc-split__desc { margin: 20px 0 32px; font-size: 18px; line-height: 30px; }
.orc-note { margin-top: 26px; font-size: 13px; line-height: normal; color: var(--cinzac); }
.orc-note i { font-size: 15px; color: var(--cor); }

/* Máscara: o fundo (cor do serviço) é o recorte maior e a foto é o recorte 8px menor,
   o que desenha a faixa colorida na borda inclinada (~9° no Figma). Mobile: inclinação na base. */
.orc-split__media {
    position: relative;
    height: clamp(240px, 62vw, 420px);
    background: var(--cor);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px));
}
.orc-split__media img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 0 calc(100% - 48px)); }

@media (min-width: 992px) {
    /* A foto é ancorada na borda da tela; o texto segue o grid do container. */
    .orc-split__media { position: absolute; top: 0; bottom: 0; height: auto; }
    .orc-split__media img { position: absolute; inset: 0; }

    .orc-split--media-right .orc-split__media { right: 0; width: 51%; clip-path: polygon(104px 0, 100% 0, 100% 100%, 4px 100%); }
    .orc-split--media-right .orc-split__media img { clip-path: polygon(112px 0, 100% 0, 100% 100%, 12px 100%); }

    .orc-split--media-left .orc-split__media { left: 0; width: 48%; clip-path: polygon(0 0, calc(100% - 104px) 0, calc(100% - 4px) 100%, 0 100%); }
    .orc-split--media-left .orc-split__media img { clip-path: polygon(0 0, calc(100% - 112px) 0, calc(100% - 12px) 100%, 0 100%); }
    .orc-split--media-left .orc-split__inner { padding-left: 2rem; }
}

/* ---------- Ainda tem dúvidas ---------- */
.orc-cta {
    background-color: var(--azul);
    background-image: var(--orc-fundo, none);          /* imagem do desktop (definida inline pelo template) */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.orc-cta__row { min-height: 540px; }
.orc-cta__body h2 { font-size: clamp(1.875rem, 2.56vw, 2.75rem); line-height: 1; font-weight: 700; letter-spacing: -.026em; }
.orc-cta__lead { max-width: 526px; margin: 24px 0 8px; font-size: clamp(1.25rem, 1.4vw, 1.5rem); line-height: 1.2; }
.orc-cta__text { max-width: 526px; margin-bottom: 24px; font-size: 16px; line-height: 27px; }
.orc-cta .orc-hl { color: inherit; }

/* ---------- Clientes (Figma): estilo só nesta página; o componente continua o mesmo do site ---------- */
body.page-template-page-orcamentos .clientes { padding-top: 34px !important; padding-bottom: 34px !important; }
body.page-template-page-orcamentos .clientes p {
    padding-left: 14px;
    border-left: 4px solid var(--azulc);
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: .1em;      /* 1.3px */
    text-transform: uppercase;
    color: var(--preto);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1199.98px) {
    .orc-nav__item { grid-template-columns: 110px 64px minmax(0, 1fr) 52px; }
}

@media (max-width: 991.98px) {
    .orc-hero { padding-top: 32px; }
    .orc-hero__title { padding-top: 16px; line-height: 1.18; letter-spacing: -.045em; }
    .orc-hero__bar { padding: 24px 0 32px; }
    .orc-hero__text { max-width: none; font-size: 16px; line-height: 27px; }
    .orc-hero__media { height: clamp(220px, 52vw, 430px); }

    .orc-nav__head { min-height: 0; padding: 12px 0 18px; }
    .orc-nav__hint { font-size: 14px; line-height: 22px; }

    .orc-man { margin-top: 48px; }
    .orc-man__top { padding: 48px 0 32px; }
    .orc-man__text { max-width: none; }
    .orc-man__media { height: clamp(180px, 40vw, 280px); }
    .orc-man__benefits { padding: 36px 0 32px; }
    .orc-man__actions { padding: 28px 0 48px; }

    .orc-split__row,
    .orc-cta__row { min-height: 0; }
    body.page-template-page-orcamentos .clientes p { width: fit-content; text-align: left; }
    /* Mobile: imagem própria na faixa do topo; o conteúdo vem por cima, com fundo sólido da cor da seção
       (a imagem fica "atrás" e não interfere no texto). */
    .orc-cta {
        padding-top: clamp(240px, 70vw, 360px);
        background-image: var(--orc-fundo-mobile, none);
        background-size: 100% auto;
        background-position: top center;
    }
    .orc-cta__content { background-color: var(--azul); }
    .orc-split__desc { margin: 16px 0 24px; font-size: 16px; line-height: 27px; }
}

@media (max-width: 767.98px) {
    /* Lista "Escolha o serviço": rótulo acima do título */
    .orc-nav__item {
        grid-template-columns: 56px minmax(0, 1fr) 44px;
        grid-template-areas: "icon tag arrow" "icon title arrow";
        column-gap: 16px;
        row-gap: 2px;
        min-height: 0;
        padding: 20px 4px;
    }
    .orc-nav__icon { width: 56px; height: 56px; font-size: 24px; }
    .orc-nav__tag { align-self: end; font-size: 11px; }
    .orc-nav__title { align-self: start; font-size: 1.25rem; }
    .orc-nav__arrow { width: 44px; height: 44px; font-size: 14px; }

    .orc-hero__title { letter-spacing: -.04em; }
    .orc .d-flex > .bot-azul,
    .orc .d-flex > .bot-line { width: 100%; justify-content: space-between; }
}

.orc-faq { padding-top: 64px; }
.orc-faq__titulo { margin: 0; }
.orc-faq .itens .tit18:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.orc-faq .fp { color: var(--cinza); }
@media (max-width: 767px) {
    .orc-faq { padding-top: 40px; }
    .orc-faq .itens .tit18 { padding-right: 28px; }
}