/*
 * Redesenho dos blocos azuis de formulário (newsletter "Fique por dentro", Contato, Trabalhe conosco,
 * Currículo, Parceiro e Canal de comunicação), aprovado pelo Sergio em 26/10/2026.
 *
 * Folha própria carregada depois de forms.css (e antes de titles.css). Só CSS: o markup continua o do
 * legado (mesmas classes, nomes, ids e nós de sucesso e erro). Escopo sempre em `.contactbox`, que só
 * existe nesses blocos. Os `!important` vencem os estilos inline do markup legado (botão com
 * `width: 100%`, borda de erro `1px solid red`) e os `!important` das folhas legadas (select2 e
 * `.w-input` com 50px por página); cada um está comentado.
 *
 * Contraste: branco sobre o azul do bloco (#0094E6) dá 3,3:1, abaixo do AA para texto pequeno. Por
 * isso o aviso do reCAPTCHA, o contador de anexo e os anéis de foco usam o navy da marca (5,9:1).
 */

/* ======================================================================================
 * Padrão de controles do site (pedido do Sergio, 04/11/2026): botão é retangular com raio de 8px,
 * como o "ENVIAR" dos formulários; nada de pílula. Cada botão mantém a cor e o texto que já tem.
 * Campos (texto, select, cidade, busca) usam o mesmo raio e a mesma altura de 48px. As folhas de
 * módulo (produto, componente, assistência, revendedor, parceiro) leem estes tokens com fallback.
 * ====================================================================================== */

:root {
    --rs-radius: 8px;
    --rs-radius-sm: 6px; /* só selos muito baixos (~20px de altura) */
    --rs-control-h: 48px;
    --rs-navy: var(--brand-color--primary, #000d1f);
    --rs-blue-ink: #006aa6; /* 5,3:1 com branco */
    --rs-field-text: #0f1b2d;
    --rs-placeholder: #5b6472; /* 5,9:1 sobre branco */
    --rs-field-line: #8a94a3; /* 3,0:1 sobre branco: contorno de campo visível (WCAG 1.4.11) */
    --rs-option-active: #e6f2fa; /* destaque da opção na lista (texto navy 17:1) */
}

/* Botões legados (`.button`: home, 404, Sobre, Onde comprar, downloads, busca) vinham em pílula (24px). */
.button {
    border-radius: var(--rs-radius);
}

/* "Voltar ao topo" flutuante. */
.back-to-top {
    border-radius: var(--rs-radius);
}

/* Etiquetas legadas também deixam de ser pílula (04/11/2026): `.tag` (rótulos do rodapé, etiquetas dos
 * cartões de produto, filtros da listagem) vinha com 20px, e as abas de Downloads e da descrição técnica
 * (`.downloadtabitem`, `.descriptiontabitem`) com 32px. O CSS legado é cópia byte a byte, então o ajuste
 * fica aqui. */
.tag,
.downloadtabitem,
.descriptiontabitem {
    border-radius: var(--rs-radius);
}

.contactbox {
    --fv2-navy: var(--brand-color--primary, #000d1f);
    --fv2-navy-hover: #0d2747;
    --fv2-field-text: #0f1b2d;
    --fv2-placeholder: #5b6472; /* 5,9:1 sobre branco */
    --fv2-border: rgba(0, 13, 31, 0.08);
    --fv2-error: #c8102e; /* 5,9:1 sobre branco */
    --fv2-success: #11804a;
    --fv2-radius: var(--rs-radius);
    --fv2-height: 48px;
    --fv2-gap: 12px;
    border-radius: 20px;
    padding: clamp(24px, 3.2vw, 48px);
}

/* ---------- Título e texto de apoio ---------- */

/* Mesma escala de titles.css (h3 do bloco, abaixo do h1 da página), agora em todos os blocos. */
.contactbox .footercontactnumber {
    font-size: clamp(1.25rem, 1rem + 0.75vw, 1.625rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.contactbox > div:first-child > .footercontactnumber + div,
.contactbox > div:first-child > p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
    max-width: 62ch;
}

/* ---------- Estrutura e respiro ---------- */

.contactbox .w-form {
    margin: 0;
}

.contactbox .formwrapper {
    gap: var(--fv2-gap);
    margin-top: 20px;
}

/* O `.w-clearfix` do Webflow cria ::before/::after (display: table) que viram itens do flex e da
   grade: somavam um gap vazio em cima e embaixo e, na grade da newsletter, ocupavam a 1ª célula. */
.contactbox .formwrapper::before,
.contactbox .formwrapper::after {
    content: none;
    display: none;
}

.contactbox .contactformdivider {
    gap: var(--fv2-gap);
}

/* Contato: parte dos campos fica fora do <form> (árvore do legado), como irmãos do bloco. */
.contactbox > .contactformdivider {
    margin-top: var(--fv2-gap);
}

.contactbox h4 {
    margin: 4px 0 0;
    color: var(--brand-color--white);
    font-size: 15px;
    line-height: 1.4;
}

/* ---------- Campos ---------- */

.contactbox .input,
.contactbox .w-input,
.contactbox .w-select {
    height: var(--fv2-height) !important; /* vence o `.w-input { height: 50px !important }` das páginas */
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--fv2-border);
    border-radius: var(--fv2-radius);
    background-color: var(--brand-color--white);
    color: var(--fv2-field-text);
    font-size: 16px; /* 16px evita o zoom automático do iOS no foco */
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 13, 31, 0.12);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.contactbox .input:hover {
    background-color: var(--brand-color--white);
    border-color: rgba(0, 13, 31, 0.28);
}

.contactbox .input::placeholder {
    color: var(--fv2-placeholder);
    opacity: 1;
}

.contactbox textarea.input {
    height: auto !important;
    min-height: 120px;
    padding: 12px 16px;
    resize: vertical;
    border: 1px solid var(--fv2-border);
}

/* Select nativo com seta própria (a do navegador some no Safari e fica colada na borda no Chrome). */
.contactbox select.input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    cursor: pointer;
}

/* Opção-placeholder ("Selecione...") com a cor dos demais placeholders enquanto nada foi escolhido. */
.contactbox select.input:has(option[value=""]:checked) {
    color: var(--fv2-placeholder);
}

.contactbox select.input option {
    color: var(--fv2-field-text);
}

/* Campos lado a lado com a mesma largura (input e select tinham larguras intrínsecas diferentes e a
   divisão da linha E-mail | Estado não batia com a de Nome | Telefone).
   Só com os campos lado a lado: abaixo de 480px o legado empilha (coluna) e a base viraria altura. */
@media screen and (min-width: 480px) {
    .contactbox .contactformdivider > :not(.formsubmitbutton) {
        flex: 1 1 50%; /* base em %, não 0: com base 0 o padding maior do select (seta) o deixava mais largo */
        min-width: 0;
    }
}

/* ---------- Combobox de cidade (`.rs-combobox`, city-select.tsx) ---------- */

.rs-combobox {
    position: relative;
    width: 100%;
}

.rs-combobox .rs-combobox__input {
    width: 100%;
    padding-right: 48px;
    cursor: text;
}

.rs-combobox.has-value .rs-combobox__input {
    padding-right: 84px;
}

/* Sem o "x" nativo do campo de busca (o combobox tem o próprio botão de limpar). */
.rs-combobox .rs-combobox__input::-webkit-search-cancel-button {
    display: none;
}

.rs-combobox__chevron {
    position: absolute;
    top: 0;
    right: 4px;
    display: grid;
    place-items: center;
    width: 40px;
    height: var(--rs-control-h);
    color: var(--rs-navy);
    cursor: pointer;
}

.rs-combobox__chevron svg {
    transition: transform 0.15s ease;
}

.rs-combobox.is-open .rs-combobox__chevron svg {
    transform: rotate(180deg);
}

.rs-combobox__clear {
    position: absolute;
    top: 6px;
    right: 44px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--rs-placeholder);
    cursor: pointer;
}

.rs-combobox__clear:hover {
    background-color: #eef1f5;
    color: var(--rs-navy);
}

.rs-combobox__clear:focus-visible {
    outline: 2px solid var(--rs-blue-ink);
    outline-offset: -2px;
}

.rs-combobox__popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    overflow: hidden;
    border: 1px solid #d5dbe3;
    border-radius: var(--rs-radius);
    background-color: #fff;
    box-shadow: 0 16px 40px -12px rgba(0, 13, 31, 0.45), 0 2px 6px rgba(0, 13, 31, 0.08);
}

.rs-combobox__popup[hidden] {
    display: none;
}

.rs-combobox__list {
    max-height: min(296px, 45vh);
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.rs-combobox__list:empty {
    display: none;
}

.rs-combobox__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--rs-field-text);
    font-size: 15px;
    line-height: 1.35;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Opção destacada (seta ou mouse): tinta clara da marca com uma barra azul à esquerda. */
.rs-combobox__option.is-active {
    background-color: var(--rs-option-active);
    box-shadow: inset 3px 0 0 var(--rs-blue-ink);
    color: var(--rs-navy);
}

.rs-combobox__option[aria-selected="true"] {
    color: var(--rs-blue-ink);
    font-weight: 700;
}

.rs-combobox__option mark {
    background: none;
    color: inherit;
    font-weight: 700;
}

.rs-combobox__check {
    flex: none;
    color: var(--rs-blue-ink);
}

.rs-combobox__status {
    padding: 0 16px;
    color: var(--rs-placeholder);
    font-size: 15px;
    line-height: 1.4;
}

.rs-combobox__status:not(:empty) {
    padding: 14px 16px;
}

.rs-combobox__list:not(:empty) + .rs-combobox__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .rs-combobox__chevron svg {
        transition: none;
    }
}

/* ---------- Foco visível (anel navy, 5,9:1 sobre o azul) ---------- */

.contactbox .input:focus,
.contactbox .input.textarea:focus {
    outline: none;
}

/* Campo com foco (teclado ou toque): um anel navy fino de 2px, afastado 2px do campo, que sobre o azul
   do bloco dá 5,9:1 (era borda navy + anel de 3px: contorno preto grosso). O combobox aberto mantém o anel enquanto a lista está à mostra. */
.contactbox .input:focus-visible,
.contactbox .input.textarea:focus-visible,
.contactbox .rs-combobox__input:focus,
.contactbox .rs-combobox.is-open .rs-combobox__input {
    outline: 2px solid var(--fv2-navy) !important;
    outline-offset: 2px;
}

/* ---------- Erro de validação ---------- */

/* O hook põe `border: 1px solid red` inline e `aria-invalid`; a borda fica mais clara e firme. */
.contactbox .input[aria-invalid="true"] {
    border: 2px solid var(--fv2-error) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* Ícone de alerta nos campos de texto (o select e a cidade já têm a seta). */
.contactbox input.input[aria-invalid="true"]:not(.rs-combobox__input) {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23c8102e'/%3E%3Cpath d='M10 5.5v5.5' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.3' r='1.2' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px 20px;
}

/* Mensagens de erro e sucesso: cartão branco com barra de cor, em vez do rosa do Webflow. */
.contactbox .w-form-fail,
.contactbox .w-form-done {
    margin-top: 16px !important; /* vence o `marginTop: 10` inline */
    padding: 12px 16px;
    border-radius: var(--fv2-radius);
    background-color: var(--brand-color--white);
    color: var(--fv2-navy) !important;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 13, 31, 0.16);
}

.contactbox .w-form-fail {
    padding-left: 20px;
    box-shadow: inset 4px 0 0 var(--fv2-error), 0 2px 8px rgba(0, 13, 31, 0.16);
}

.contactbox .w-form-done {
    padding-left: 20px;
    box-shadow: inset 4px 0 0 var(--fv2-success), 0 2px 8px rgba(0, 13, 31, 0.16);
}

/* ---------- Botão de envio ---------- */

/* Largura natural, alinhado à esquerda (o markup legado força `width: 100%` inline). */
.contactbox .formsubmitbutton {
    width: auto !important;
    min-width: 180px;
    height: var(--fv2-height);
    margin-top: 4px !important; /* vence o `marginTop: 12` inline do Contato; o gap já separa */
    padding: 0 32px;
    border: 0;
    border-radius: var(--fv2-radius);
    background-color: var(--fv2-navy);
    color: var(--brand-color--white);
    font-size: 15px;
    letter-spacing: 0.06em;
    line-height: var(--fv2-height);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

/* O legado troca para ciano com texto branco no hover (1,3:1); aqui o navy só clareia. */
.contactbox .formsubmitbutton:hover {
    background-color: var(--fv2-navy-hover);
}

.contactbox .formsubmitbutton:active {
    transform: translateY(1px);
}

.contactbox .formsubmitbutton:focus-visible {
    outline: 3px solid var(--brand-color--white);
    outline-offset: 2px;
}

.contactbox .formsubmitbutton:disabled {
    cursor: default;
    opacity: 0.7;
}

/* ---------- Aviso do reCAPTCHA ---------- */

/* Largura total do formulário, a mesma dos campos (pedido do Sergio, 04/11/2026): em 72ch o aviso
   quebrava numa coluna estreita e sobrava "do Google" sozinho na linha de baixo. */
.contactbox .paragraph.small.recaptcha-notice {
    margin: 4px 0 0;
    max-width: none;
    color: var(--fv2-navy);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0;
}

.contactbox .recaptcha-notice a {
    color: var(--fv2-navy);
    font-weight: 600;
    text-underline-offset: 2px;
}

.contactbox .recaptcha-notice a:focus-visible {
    outline: 2px solid var(--fv2-navy);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Anexo (Trabalhe conosco e Parceiro) ---------- */

.contactbox .contact-btn-box {
    margin-top: 4px;
}

.contactbox .contact-btn-box_right {
    flex-wrap: wrap;
    gap: 8px 12px;
}

/* "Anexar currículo" vira botão secundário branco com clipe; o link e o input file são os mesmos. */
.contactbox .contact-btn-box_right_link.file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 2px solid var(--brand-color--white);
    border-radius: var(--fv2-radius);
    background-color: var(--brand-color--white);
    color: var(--fv2-navy) !important; /* vence o `color: white` inline */
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contactbox .contact-btn-box_right_link.file::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5l-8.6 8.6a5.5 5.5 0 01-7.8-7.8l8.6-8.6a3.7 3.7 0 015.2 5.2l-8.6 8.6a1.8 1.8 0 01-2.6-2.6l7.9-7.9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5l-8.6 8.6a5.5 5.5 0 01-7.8-7.8l8.6-8.6a3.7 3.7 0 015.2 5.2l-8.6 8.6a1.8 1.8 0 01-2.6-2.6l7.9-7.9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contactbox .contact-btn-box_right_link.file:hover {
    background-color: #e8f4fd;
    border-color: #e8f4fd;
}

.contactbox .contact-btn-box_right_link.file:focus-visible {
    outline: 3px solid var(--fv2-navy);
    outline-offset: 2px;
}

/* Anexo obrigatório faltando: o hook troca a cor inline para `red`. */
.contactbox .contact-btn-box_right_link.file[style*="red"] {
    border-color: var(--fv2-error);
    color: var(--fv2-error) !important;
}

.contactbox .file-count {
    margin-left: 0 !important;
    color: var(--fv2-navy) !important;
}

.contactbox .field-error {
    display: inline-block;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background: var(--brand-color--white) !important;
    color: var(--fv2-error) !important;
    font-size: 14px !important;
    font-weight: 600;
}

/* "Não tem currículo? Preencha seu currículo": separado do formulário por uma linha fina. */
.contactbox .contact-btn-box_left {
    width: 100%;
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.contactbox .contact-btn-box_left .contact-page_content_box_left-box_item_title {
    font-size: 16px;
}

.contactbox .contact-btn-box_left .contact-btn-box_right_link {
    font-weight: 700;
    text-underline-offset: 3px;
}

/* Parceiro: título dos produtos de interesse com respiro e o campo de documento inválido. */
.contactbox .partner-interests {
    margin-top: 8px;
}

.contactbox .partner-interests__legend {
    margin-bottom: 12px;
}

/* ---------- Newsletter ("Fique por dentro") ---------- */

/* Título e texto em cima; formulário embaixo, em grade com posições explícitas:
   - largo (>= 1200px): uma linha só, nome | e-mail | interesse | ENVIAR (botão compacto);
   - médio (768 a 1199px): nome | e-mail, depois interesse | ENVIAR, botão à direita;
   - celular (< 768px): tudo empilhado, botão em largura total.
   O aviso do reCAPTCHA fica numa linha discreta abaixo, alinhado à esquerda dos campos. */
.newsletter .res-form-newsletter {
    margin-top: 20px;
}

.newsletter .res-form-newsletter .formwrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) auto;
    align-items: start;
    margin-top: 0;
}

.newsletter .res-form-newsletter .contactformdivider {
    display: contents;
}

/* Botão com cara de botão: largura natural e a altura dos campos (o markup força `width: 100%`). */
.newsletter .res-form-newsletter .formsubmitbutton {
    width: auto !important;
    min-width: 140px;
    margin-top: 0 !important;
    padding: 0 28px;
}

.newsletter .res-form-newsletter .paragraph.small.recaptcha-notice {
    grid-column: 1 / -1;
    max-width: none;
    font-size: 12.5px;
}

.newsletter .contactbox > div:first-child > .footercontactnumber {
    font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem);
    line-height: 1.1;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .newsletter .res-form-newsletter .formwrapper {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .newsletter .res-form-newsletter .campo-nome {
        grid-column: 1;
    }

    .newsletter .res-form-newsletter .campo-email {
        grid-column: 2 / 4;
    }

    .newsletter .res-form-newsletter select {
        grid-column: 1 / 3;
    }

    .newsletter .res-form-newsletter .formsubmitbutton {
        grid-column: 3;
    }
}

@media screen and (max-width: 767px) {
    .newsletter .res-form-newsletter .formwrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .newsletter .res-form-newsletter .formsubmitbutton {
        width: 100% !important;
    }
}

/* ---------- Celular ---------- */

@media screen and (max-width: 767px) {
    .contactbox {
        border-radius: 16px;
    }
}

@media screen and (max-width: 479px) {
    .contactbox {
        padding: 24px 16px;
    }

    .contactbox select.input {
        padding-left: 14px;
        padding-right: 36px;
        background-position: right 12px center;
    }

    .contactbox .formsubmitbutton {
        width: 100% !important;
    }

    .newsletter .res-form-newsletter .formwrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .contactbox .contact-btn-box_right_link.file {
        width: 100%;
        justify-content: center;
    }
}

/* ======================================================================================
 * Canal de comunicação: "Consulte o protocolo" (fora do `.contactbox`, sobre o fundo branco)
 * no padrão novo: campo de 48px com raio 10 e botão navy, lado a lado; empilhados no celular.
 * O bloco tem `padding: 60px 100px` inline (espremia o campo no celular) e o legado usa
 * `#consulta-denuncia-form`, por isso os `!important` e o id no seletor.
 * ====================================================================================== */

:where([data-template="denuncia"]) div:has(> .consulta-denuncia-form) {
    --fv2-navy: var(--brand-color--primary, #000d1f);
    --fv2-error: #c8102e;
    box-sizing: border-box;
    width: min(100% - 32px, 1296px);
    margin-inline: auto;
    padding: 56px 0 80px !important;
}

:where([data-template="denuncia"]) div:has(> .consulta-denuncia-form) > .contact-title {
    margin: 0 0 16px !important;
    color: var(--fv2-navy);
    font-family: Magistral, sans-serif;
    font-size: clamp(1.25rem, 1rem + 0.75vw, 1.625rem) !important;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
}

.consulta-denuncia-form #consulta-denuncia-form {
    display: grid;
    grid-template-columns: minmax(0, 480px) auto;
    justify-content: start;
    align-items: start;
    gap: 12px;
}

.consulta-denuncia-form #consulta-denuncia-form::before,
.consulta-denuncia-form #consulta-denuncia-form::after {
    content: none;
    display: none;
}

.consulta-denuncia-form .input.consulta-protocolo {
    width: 100%;
    height: 48px !important;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #c5ccd6;
    border-radius: var(--rs-radius) !important; /* o legado arredonda o campo branco em pílula (!important) */
    background-color: #fff;
    color: #1f2a37;
    font-size: 16px;
    line-height: 1.4;
}

.consulta-denuncia-form .input.consulta-protocolo::placeholder {
    color: #6b7480;
    opacity: 1;
}

.consulta-denuncia-form .input.consulta-protocolo:hover {
    background-color: #fff;
    border-color: #98a2b0;
}

.consulta-denuncia-form .input.consulta-protocolo:focus {
    outline: none;
}

.consulta-denuncia-form .input.consulta-protocolo:focus-visible {
    border-color: #006aa6;
    box-shadow: 0 0 0 3px rgba(0, 148, 230, 0.35);
}

/* Erro: a borda `1px solid red` inline vira 2px no vermelho do padrão. */
.consulta-denuncia-form .input.consulta-protocolo[aria-invalid="true"] {
    border: 2px solid var(--fv2-error) !important;
}

/* Botão primário do padrão (navy, 48px, raio 10), sem a seta do legado. */
.consulta-denuncia-form .button.distribuition-internal-btn {
    min-width: 160px;
    height: 48px;
    margin: 0;
    padding: 0 32px !important;
    border: 0;
    border-radius: var(--rs-radius);
    background-color: var(--fv2-navy) !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 48px;
    transition: background-color 0.15s ease;
}

.consulta-denuncia-form .button.distribuition-internal-btn:hover {
    background-color: #0d2747 !important;
}

.consulta-denuncia-form .button.distribuition-internal-btn:focus-visible {
    outline: 3px solid rgba(0, 148, 230, 0.55);
    outline-offset: 2px;
}

.consulta-denuncia-form .button.distribuition-internal-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.consulta-denuncia-form .paragraph.small.recaptcha-notice {
    grid-column: 1 / -1;
    margin: 0;
    max-width: none;
    color: #4a5565;
    font-size: 13px;
    line-height: 1.5;
}

.consulta-denuncia-form .recaptcha-notice a {
    color: #006aa6;
    font-weight: 600;
}

/* Protocolo não encontrado (erro) e resultado da consulta: cartões do padrão. */
:where([data-template="denuncia"]) .products-item-textbox.nao-encontrado,
:where([data-template="denuncia"]) .products-item-textbox.resposta-protocolo {
    box-sizing: border-box;
    max-width: 720px;
    padding: 14px 18px 14px 22px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
}

:where([data-template="denuncia"]) .products-item-textbox.nao-encontrado {
    background: #fdf0f2;
    box-shadow: inset 4px 0 0 var(--fv2-error, #c8102e);
}

:where([data-template="denuncia"]) .products-item-textbox.resposta-protocolo {
    background: #f6f8fa;
    box-shadow: inset 4px 0 0 #0094e6;
}

/* Texto da mensagem em caixa normal e cor legível (o legado usa caixa alta cinza). */
:where([data-template="denuncia"]) .nao-encontrado .texto-nao-encontrado {
    color: #7a0012 !important;
    font-family: Gotham, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

@media screen and (max-width: 479px) {
    .consulta-denuncia-form #consulta-denuncia-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .consulta-denuncia-form .button.distribuition-internal-btn {
        width: 100%;
    }
}

/* ======================================================================================
 * Faixa "Seja um revendedor Resfri Ar" (home, produto, componente e Sobre). Revisão de
 * 26/10/2026: papel distinto da newsletter. A faixa é o convite (navy com o fundo de estúdio
 * e o Beto com o caminhão, as imagens da página do revendedor; CTA ciano) e a newsletter, logo
 * abaixo, segue azul e mais enxuta. Markup, textos do CMS e link (/seja-um-revendedor) são os de hoje.
 * ====================================================================================== */

.beaseller .beasellerbox {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(94, 231, 255, 0.18); /* contorno sutil: a faixa navy também aparece sobre fundo navy */
    border-radius: 20px;
    padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3.2vw, 48px);
    /* `!important`: o legado pinta `.beasellerbox` de azul. */
    background-color: var(--brand-color--primary, #000d1f) !important;
    background-image: url("/images/revendedor/bg-destaques-estudio-1200.webp");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Beto e o caminhão à direita, apoiados na base da faixa (decorativo: fundo, sem texto). */
@media screen and (min-width: 992px) {
    .beaseller .beasellerbox {
        padding-right: clamp(300px, 26vw, 400px);
        background-image: url("/images/revendedor/destaque-beto-caminhao.webp"), url("/images/revendedor/bg-destaques-estudio.webp");
        background-position: right clamp(24px, 4vw, 72px) bottom 0, right center;
        background-size: auto 94%, cover;
    }
}

/* Coluna única: título, texto e CTA alinhados à esquerda; a direita é da imagem. O
   `.beasellertextbox` vira `display: contents` para os três ficarem na mesma grade. */
.beaseller .beasellerwrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "text" "cta";
    justify-items: start;
    row-gap: 8px;
}

.beaseller .beasellertextbox {
    display: contents;
}

/* Escala de seção (a do título dos blocos de formulário), não de página. O `<br>` do CMS fica. */
.beaseller .beasellerwrapper > .secondarytitle {
    grid-area: title;
    margin: 0;
    font-family: Magistral, sans-serif;
    font-size: clamp(1.25rem, 1rem + 0.75vw, 1.625rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.beaseller .beasellertextbox .paragraph {
    grid-area: text;
    max-width: 52ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 15px;
    line-height: 1.5;
}

.beaseller .beasellertextbox .paragraph strong {
    color: inherit !important;
    font-weight: 500;
}

/* CTA ciano da marca com texto navy (14:1), 48px e raio 10 como os botões dos formulários. */
.beaseller .beasellertextbox .button.dark {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important; /* o legado estica o botão até 991px */
    min-width: 200px;
    height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--rs-radius);
    /* `!important`: o legado pinta `.beasellerbox .button.dark` de branco com texto preto (!important). */
    background-color: var(--brand-color--terciary, #5ee7ff) !important;
    color: var(--brand-color--primary, #000d1f) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-top: 12px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.beaseller .beasellertextbox .button.dark:hover {
    background-color: #ffffff !important;
    color: var(--brand-color--primary, #000d1f) !important;
}

.beaseller .beasellertextbox .button.dark:focus-visible {
    outline: 3px solid var(--brand-color--terciary, #5ee7ff);
    outline-offset: 3px;
}

@media screen and (max-width: 767px) {
    .beaseller .beasellerbox {
        border-radius: 16px;
        background-position: 70% center;
    }

    .beaseller .beasellerwrapper {
        row-gap: 12px;
    }
}

@media screen and (max-width: 479px) {
    .beaseller .beasellerbox {
        padding: 24px 16px;
    }

    .beaseller .beasellertextbox .button.dark {
        justify-self: stretch;
        width: 100% !important;
    }
}

/* Faixa logo acima da newsletter (produto, componente, Sobre): um conjunto com 24px entre os
   blocos (eram 80px + 80px), e a newsletter mais baixa e enxuta, com o título na mesma escala. */
.beaseller:has(+ .newsletter) {
    margin-bottom: 24px;
}

.beaseller + .newsletter {
    margin-top: 24px;
}

.beaseller + .newsletter .contactbox {
    padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3.2vw, 48px);
}

.beaseller + .newsletter .contactbox > div:first-child > .footercontactnumber {
    font-size: clamp(1.25rem, 1rem + 0.75vw, 1.625rem);
    line-height: 1.15;
}

@media screen and (max-width: 479px) {
    .beaseller + .newsletter .contactbox {
        padding: 24px 16px;
    }
}

/* ======================================================================================
 * Campos de busca no padrão dos formulários (pedido do Sergio em 26/10/2026): busca do header
 * ("Faça sua pesquisa", desktop e menu do celular), busca grande da home (logo abaixo do vídeo)
 * e cidade do "Onde comprar". Raio 10 a 12 no lugar da pílula, borda sutil, placeholder legível,
 * foco com anel e a lupa como botão de 44px. Só CSS: markup, `aria-label`, envio para
 * /search?term= e o combobox de cidades continuam os de hoje.
 * ====================================================================================== */

/* Header (form.navbarsearch sem .herosearch): 44px no desktop, 48px no celular. */
.navbarsearch:not(.herosearch) {
    height: 44px;
    padding: 0 2px 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--rs-radius);
    background-color: #fff;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.navbarsearch:not(.herosearch):hover {
    background-color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

/* Anel ciano sobre o navy do header (contraste > 3:1). */
.navbarsearch:not(.herosearch):focus-within {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(94, 231, 255, 0.75);
}

/* Campos de busca: texto e placeholder legíveis, sem o anel próprio do input (o anel é da caixa). */
.navbarsearch .navbarsearchinput,
.herosearch .herosearchinput {
    height: 100%;
    min-width: 0;
    flex: 1 1 auto;
    color: #0f1b2d;
    font-size: 16px; /* 16px evita o zoom do iOS no foco */
    line-height: 1.4;
}

.navbarsearch .navbarsearchinput::placeholder,
.herosearch .herosearchinput::placeholder {
    color: #5b6472; /* 5,9:1 sobre branco */
    opacity: 1;
}

.navbarsearch .navbarsearchinput:focus,
.herosearch .herosearchinput:focus {
    outline: none;
}

/* Lupa como botão de 44px (o ícone de 24px continua o mesmo, centralizado). */
.navbarsearch .navbarsearchbtn.gray,
.herosearch .navbarsearchbtn.gray {
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    background-position: center;
    background-size: 22px 22px;
    cursor: pointer;
}

.navbarsearch:not(.herosearch) .navbarsearchbtn.gray {
    width: 40px;
    height: 40px;
}

.navbarsearch .navbarsearchbtn.gray:hover,
.herosearch .navbarsearchbtn.gray:hover {
    background-color: #eef1f5;
}

.navbarsearch .navbarsearchbtn.gray:focus-visible,
.herosearch .navbarsearchbtn.gray:focus-visible {
    outline: 2px solid #006aa6;
    outline-offset: -2px;
}

.navbarsearch .loading-wrapper {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
}

@media screen and (max-width: 991px) {
    .navbarsearch:not(.herosearch) {
        height: 48px;
        background-color: #fff;
    }

    .navbarsearch:not(.herosearch) .navbarsearchbtn.gray {
        width: 44px;
        height: 44px;
    }
}

/* Busca grande da home e cidade do "Onde comprar" (.herosearch): 52px, raio 12, sombra leve. */
.herosearch {
    box-sizing: border-box;
    height: 52px !important; /* vence o `height: 50` inline da home */
    padding: 0 4px 0 16px;
    border: 1px solid #c5ccd6;
    border-radius: var(--rs-radius);
    box-shadow: 0 6px 20px rgba(0, 13, 31, 0.18);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.herosearch:hover {
    border-color: #98a2b0;
    box-shadow: 0 6px 20px rgba(0, 13, 31, 0.18);
}

.herosearch:focus-within {
    border-color: #006aa6;
    box-shadow: 0 0 0 3px rgba(0, 148, 230, 0.35), 0 6px 20px rgba(0, 13, 31, 0.18);
}

/* "Onde comprar": dentro da página branca, sem a sombra de cartão flutuante. */
.herosearch.wheresearch {
    height: 48px !important;
    padding: 0 2px 0 14px;
    box-shadow: none;
}

.herosearch.wheresearch:hover {
    box-shadow: none;
}

.herosearch.wheresearch:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 148, 230, 0.35);
}

@media screen and (max-width: 767px) {
    .herosearch {
        height: 48px !important;
        padding-left: 14px;
    }

    /* A busca da home encostava nas bordas da tela no celular: 16px de respiro de cada lado. */
    .herosearch:not(.wheresearch) {
        width: calc(100% - 32px) !important;
    }
}

/*
 * Ritmo vertical no celular (pedido do Sergio, 26/10/2026): o legado usa as margens do computador
 * (80px por seção, 120px no fim do institucional) e, somadas, sobravam de 105 a 200px de vazio entre
 * blocos. No celular as seções respiram 40px.
 */
@media screen and (max-width: 767px) {
    .homecategory,
    .beaseller,
    .newsletter {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .homecategory.certificates {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .homeinstitutional {
        padding-bottom: 56px;
    }

    .beaseller:has(+ .newsletter) {
        margin-bottom: 16px;
    }

    .beaseller + .newsletter {
        margin-top: 16px;
    }
}

/* Celular: os telefones acima do formulário repetiam os do rodapé logo abaixo; ficam só no rodapé. */
@media screen and (max-width: 767px) {
    .internalheadertitlebox > .footercontactwrapper {
        display: none !important;
    }
}

/*
 * Sobre a empresa no celular (pedido do Sergio, 26/10/2026): o legado mantém o respiro e o texto
 * justificado do computador. Justificado em coluna estreita abre buracos entre as palavras, então o
 * texto alinha à esquerda; os vazios de 120px caem para 40px; os selos quebram linha sem encavalar.
 */
@media screen and (max-width: 767px) {
    .aboutmaincontent {
        padding-top: 40px;
        padding-bottom: 24px;
    }

    .aboutmaincontent .container {
        padding-bottom: 0 !important;
    }

    .aboutmaincontent .galleryrow {
        width: 100% !important;
    }

    .aboutcontentchunk:empty {
        display: none;
    }

    .aboutmaincontent .justify,
    .abouthighlightcontent .justify,
    .aboutmaincontent p,
    .abouthighlightcontent p,
    .aboutmaincontent .rich-text *,
    .abouthighlightcontent .rich-text * {
        text-align: left !important;
    }

    /* Título da política da qualidade: o legado fixa 45px e 70% em linha, sem versão de celular. */
    .aboutmaincontent .terciarytitle[style] {
        font-size: 28px !important;
        line-height: 1.2;
        width: 100% !important;
    }

    .aboutmaincontent .blogpostmainimage.negativemargin {
        width: 100% !important;
        margin: 0 0 24px !important;
    }

    .aboutmaincontent .brandsinfo {
        margin-top: 16px;
    }

    .institutional-awards.about {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .institutional-awards.about img {
        width: 120px;
        height: auto;
        margin: 0;
    }

    .abouthighlightcontent.secondabout {
        padding-bottom: 32px;
    }

    .abouthighlightcontent.secondabout .visionwrapper .paragraph {
        color: rgba(255, 255, 255, 0.8);
    }
}

@media screen and (max-width: 767px) {
    .institutional-awards.about .institutional-awards-item {
        margin: 0 !important;
    }
}

/* Contato, Trabalhe conosco e Denúncia no celular: o título e o formulário somavam 80px de vazio
   (40px embaixo do título e mais 40px em cima do formulário). */
@media screen and (max-width: 767px) {
    .header .internalheadertitlebox {
        padding-bottom: 24px;
    }

    .internalheader > .container > .internalheadertitlebox {
        padding-top: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    .aboutmaincontent .aboutcontentchunk {
        margin-top: 12px;
        margin-bottom: 8px;
    }

    .aboutmaincontent .brandsinfo {
        margin-bottom: 0;
    }
}

/* Lançamentos da home: o banner estica até a altura do cartão do produto ao lado (eram 50vh fixos). */
@media screen and (min-width: 768px) {
    .productbannerwrapper .mediumbanner {
        height: auto;
        min-height: 50vh;
    }
}

/* Textarea da Denúncia (e quem mais usar a classe do legado): sem pílula, no raio do padrão. */
.input.distribuition-internal-input.white.textarea {
    border-radius: var(--rs-radius, 8px);
}

/* Cabeçalho interno (Sergio, 04/11/2026: "parece invertido; acho que deveria ser embaixo"): o título
   (h1.primarytitle) vem primeiro no DOM e a frase de apoio (.internalheadersubtitle) logo abaixo dele,
   como linha de apoio: caixa normal, Gotham em tamanho de lead, cinza-claro legível sobre o azul-marinho
   (contraste ~11:1). Vale para todos os cabeçalhos internos, inclusive o do blog. */
.internalheadertitlebox .primarytitle + .internalheadersubtitle {
    max-width: 40em;
    margin-top: 16px;
    margin-bottom: 0;
    font-family: Gotham, sans-serif;
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
    color: #c4cad3;
}

/* Cabeçalho interno no celular (Sergio, 04/11/2026: "muito apertado"): título com mais presença,
   frase de apoio mais perto dele e respiro em volta do bloco. */
@media screen and (max-width: 767px) {
    .internalheadertitlebox .primarytitle + .internalheadersubtitle {
        margin-top: 12px;
    }
    .primarytitle {
        font-size: 38px;
        line-height: 1.02;
    }
    .header .internalheadertitlebox {
        padding-top: 36px;
        padding-bottom: 36px;
    }
}

/* Busca e filtros das listagens (categorias, componentes, lançamentos): sem pílula, no raio do padrão. */
.searchfilterwrapper .input.white.w-input,
.searchfilterwrapper select {
    border-radius: var(--rs-radius, 8px);
}

/* Celular: só a bandeirinha, logo à esquerda do MENU; a lista de idiomas abre alinhada à direita. */
.navbarmobilelinks--lang {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}
/* O CSS legado deixa `.navbar_secondmenu` com largura total no celular e espremia o MENU. */
.navbarmobilelinks--lang .navbar_secondmenu {
    width: auto;
    flex: none;
}
.navbarmobilelinks--lang .navbar_menuicon {
    flex: none;
}
.navbarmobilelinks--lang .navbardropdownselector {
    width: auto;
}
/* O CSS legado esconde `.langselector` no celular. */
.navbarmobilelinks--lang .langselector {
    display: flex;
}
.navbarmobilelinks--lang .langselector.w-dropdown-toggle {
    width: auto;
    min-width: 0;
    padding: 4px;
    gap: 0;
}
.navbarmobilelinks--lang .langselector.w-dropdown-toggle img {
    width: 28px;
}
.navbarmobilelinks--lang .langselector.w-dropdown-toggle .navbar_right-box_top-bar_language_txt {
    display: none;
}
.navbarmobilelinks--lang .w-dropdown-list {
    right: 0;
    left: auto;
    min-width: 120px;
    width: auto;
}

/* Computador: também só a bandeira no botão do idioma (a lista continua com a sigla). */
.navbarwrapper .langselector.w-dropdown-toggle .navbar_right-box_top-bar_language_txt {
    display: none;
}
.navbarwrapper .langselector.w-dropdown-toggle {
    padding: 6px;
}
.navbarwrapper .navbardropdownselector,
.navbarwrapper .navbar_secondmenu .navbar_secondmenu {
    width: auto;
}
.navbarwrapper .navbardropdownselector .w-dropdown-list {
    right: 0;
    left: auto;
    min-width: 140px;
}