/* =============================================================================
   HALLCO PISO MÓVEL — folha de estilo do site
   =============================================================================

   Organização do arquivo:

     1. Tokens            variáveis de cor, tipografia e medida
     2. Base              reset, tipografia, utilitários
     3. Topo              barra de contato, menu, menu do celular
     4. Rodapé            faixa de crédito e botões flutuantes
     5. Blocos da home    uma seção por bloco, na ordem em que aparecem
     6. Dados técnicos
     7. Páginas simples   obrigado, 404
     8. Formulários
     9. Movimento         revelação na rolagem e reduced-motion

   TODO valor de cor, corpo, altura e espaçamento aqui foi MEDIDO no site
   original com o navegador (Chrome, 1440×900), não estimado. A tabela
   completa está em `.claude/02-referencia-visual.md`. Antes de mudar um
   número, confira lá — a réplica se apoia nele.

   A geometria do original, em uma frase: faixa de largura total com 30px de
   respiro lateral, linha de 1217px centrada dentro dela, e 1170px de conteúdo
   dentro da linha. É o que `.interna` reproduz.
   ========================================================================== */


/* ------------------------------ 1. TOKENS -------------------------------- */
:root {
    /* Marca */
    --verde: #4e9920;             /* hover e item ativo do menu */
    --verde-icone: #3ca34d;       /* ícones das vantagens */
    --verde-claro: #8bc34a;       /* topo do gradiente do botão de catálogo */
    --verde-escuro: #489636;      /* base do gradiente do botão de catálogo */

    /* Texto e superfícies */
    --texto: #7f8795;
    --texto-suave: #747474;       /* barra de contato do topo */
    --titulo: #515b69;
    --link: #72849c;              /* links e fundo do botão Enviar */
    --borda: #dbe2ea;
    --branco: #ffffff;
    --cinza-claro: #ecf0f5;       /* rodapé */
    --cinza-secao: #f4f6f8;       /* fundo de Vantagens e Accelerator */
    --preto: #000000;             /* faixa Novidades */
    --campo-texto: #474747;

    /* Tipografia */
    --fonte: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --corpo: 22px;
    --entrelinha: 1.68;

    /* Medidas — 1170px de conteúdo + 30px de respiro de cada lado */
    --largura: 1230px;
    --respiro: 30px;

    /* Alturas do topo */
    --topo-contato: 48px;
    --topo-barra: 108px;

    /* Movimento */
    --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
    --transicao: 0.3s var(--curva);
}


/* ------------------------------- 2. BASE --------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* A barra principal gruda no topo: âncora precisa parar abaixo dela. */
    scroll-padding-top: calc(var(--topo-barra) + 20px);
}

body {
    margin: 0;
    background: var(--branco);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: var(--corpo);
    font-weight: 300;
    line-height: var(--entrelinha);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Os corpos de título do original, um a um. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--titulo);
    font-weight: 300;
}

h1 { font-size: 56px; line-height: 1.16; }
h2 { font-size: 48px; line-height: 1.2; }
h3 { font-size: 32px; line-height: 1.2; }
h4 { font-size: 28px; line-height: 1.29; }
h5 { font-size: 24px; line-height: 1.3; }
h6 { font-size: 20px; line-height: 1.3; }

p {
    margin: 0 0 20px;
}

a {
    color: var(--link);
    text-decoration: none;
    transition: color var(--transicao);
}

a:hover,
a:focus-visible {
    color: var(--verde);
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    margin: 0 0 20px;
    padding-left: 1.4em;
}

:focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: 3px;
}

/*
 * Container. 1230 de caixa menos 30 de respiro de cada lado = 1170 de
 * conteúdo, que é exatamente o que o original entrega em 1440px de tela.
 */
.interna {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 var(--respiro);
}

.oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 1rem 1.5rem;
    background: var(--verde);
    color: var(--branco);
    font-weight: 600;
}

.pular-para-conteudo:focus {
    left: 0;
    color: var(--branco);
}

/*
 * Títulos de seção. O bloco do título tem `margin: 15px 0` no original —
 * é ele que dá o respiro entre o título e o texto que vem depois.
 */
.secao-titulo {
    margin: 15px 0;
}

.secao-titulo.centro {
    text-align: center;
}

/* "Contato" e "Estrutura do Piso" têm um filete embaixo. No original o de
   Estrutura está com alpha 0 (invisível) e só o de Contato aparece. */
.secao-titulo.sublinhado {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borda);
}

/* Botões. */
.botao {
    display: inline-block;
    padding: 17px 40px;
    border: 0;
    border-radius: 0;
    background: var(--link);
    color: var(--branco);
    font-family: var(--fonte);
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    /* O rótulo é escrito em caixa mista no PHP e sai em maiúsculas na tela,
       como no original ("Enviar" vira "ENVIAR"). */
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transicao), box-shadow var(--transicao);
}

.botao:hover,
.botao:focus-visible {
    background: #61738d;
    color: var(--branco);
}

/* Botão do catálogo: pílula verde com o brilho interno do original. */
.botao-verde {
    border-radius: 31px;
    background: linear-gradient(180deg, var(--verde-claro) 0%, var(--verde-escuro) 100%);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
                0 3px 0 0 rgba(60, 118, 40, 0.5),
                0 5px 12px rgba(0, 0, 0, 0.16);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.botao-verde:hover,
.botao-verde:focus-visible {
    background: linear-gradient(180deg, #97cd57 0%, #52a33e 100%);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
                0 2px 0 0 rgba(60, 118, 40, 0.5),
                0 7px 16px rgba(0, 0, 0, 0.2);
}


/* -------------------------------- 3. TOPO -------------------------------- */
/*
 * O original tem duas barras: a fina de contato, que rola embora, e a branca
 * principal, que gruda no topo mantendo os MESMOS 108px de altura e ganhando
 * só uma sombra discreta. Nada encolhe, nada muda de cor.
 */
/*
 * Quem gruda é o TOPO INTEIRO, recuado para cima pela altura da barra de
 * contato: a faixa fina sai da tela e sobra a barra branca de 108px colada
 * no alto — exatamente o que o original faz.
 *
 * A primeira versão grudava só `.topo-barra`. Não funcionava: um elemento
 * sticky não passa dos limites do pai, e `.topo` tem só 156px de altura, então
 * a barra ia embora junto com ele.
 */
.topo {
    position: sticky;
    top: calc(var(--topo-contato) * -1);
    z-index: 100;
    background: var(--branco);
}

/* 3.1 — Barra fina de contato -------------------------------------------- */
.topo-contato {
    height: var(--topo-contato);
    background: var(--branco);
    color: var(--texto-suave);
    font-size: 14px;
}

/* O original recua o conteúdo do topo em 58px, não nos 30px da faixa: é o
   que põe a logo em x=58 e faz o menu terminar em 1382. */
.topo-contato .interna,
.topo-barra .interna {
    max-width: none;
    padding: 0 58px;
}

.topo-contato-itens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    line-height: 44px;
}

.topo-contato a {
    color: var(--texto-suave);
}

.topo-contato a:hover {
    color: var(--verde);
}

.topo-contato-separador {
    padding: 0 6px;
    color: var(--texto-suave);
}

/* 3.2 — Barra principal --------------------------------------------------- */
.topo-barra {
    height: var(--topo-barra);
    background: var(--branco);
    transition: box-shadow var(--transicao);
}

.topo.rolado .topo-barra {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.118);
}

.topo-barra .interna {
    height: 100%;
}

.topo-barra-interna {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 100%;
}

.topo-logo img {
    width: 173px;
    height: 45px;
}

.topo-menu ul {
    display: flex;
    align-items: center;
    /* 42px deixa o bloco do menu com os mesmos 760px do original: os dois
       terminam no mesmo lugar e começam no mesmo lugar. */
    gap: 42px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.topo-menu a {
    display: block;
    color: var(--titulo);
    font-size: 15px;
    font-weight: 600;
    line-height: 84px;
}

.topo-menu a:hover,
.topo-menu a:focus-visible,
.topo-menu a.ativo {
    color: var(--verde);
}

/* 3.0b — Área de toque dos links finos ------------------------------------ */
/*
 * Telefone e e-mail da barra de contato têm 18px de altura — abaixo dos 24px
 * que a WCAG 2.2 pede para alvo de toque, e difíceis de acertar no celular.
 *
 * A área é aumentada por um pseudo-elemento transparente, não por padding:
 * padding empurraria o texto e mudaria a barra, que foi medida contra o site
 * original. Assim o dedo ganha espaço e o desenho não muda um pixel.
 *
 * O `inset` negativo é assimétrico de propósito: 4px na horizontal para as
 * áreas do telefone e do e-mail não se encostarem.
 */
.topo-contato-item a,
.contato-endereco a {
    position: relative;
}

@media (max-width: 991px) {
    /* Barra do topo: os dois links ficam lado a lado, separados por "|".
       Dá para crescer para cima e para baixo sem encostar em nada. */
    .topo-contato-item a::after {
        content: "";
        position: absolute;
        inset: -7px -4px;
    }

    /* Bloco de contato: aqui os links são LINHAS SEGUIDAS (e-mail, Tel., Cel.).
       Crescer 7px faria a área de um cobrir a do vizinho e o dedo abriria o
       link errado. 4px cabe dentro da entrelinha e não encosta. */
    .contato-endereco a::after {
        content: "";
        position: absolute;
        inset: -4px -3px;
    }
}

/* 3.1b — Aviso de envio do formulário, dentro do modal --------------------- */
/*
 * O mesmo bloco aparece em dois lugares: na página (quando não há JS) e dentro
 * do modal do Fancybox. `.aviso` cuida do primeiro; `.aviso-modal`, do segundo.
 */
/*
 * O Fancybox 5, com conteúdo inline, MOVE o elemento para dentro do slide e
 * põe nele a classe `.fancybox__content`. Ou seja: a caixa abaixo *é* o
 * `.fancybox__content` — não está dentro dele.
 *
 * Por isso as regras levam as duas classes: `.fancybox__content.aviso-modal`
 * pesa (0,2,0) e ganha do que o Fancybox traz de fábrica. Estilizar só
 * `.aviso-modal` não bastava.
 */
.aviso-modal,
.fancybox__content.aviso-modal {
    width: min(460px, 90vw);
    max-width: 460px;
    padding: 38px 40px 34px;
    background: var(--branco);
    border: 0;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

/* A cor vem de uma faixa no alto, não do fundo: texto escuro sobre branco lê
   melhor do que texto sobre verde. */
.aviso-modal::before {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin: 0 auto 22px;
    background: var(--verde);
}

.aviso-modal-erro::before {
    background: #d64545;
}

.aviso-modal .aviso-titulo {
    margin: 0 0 10px;
    color: var(--titulo);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.aviso-modal .aviso-texto {
    margin: 0;
    color: var(--texto);
    font-size: 16px;
    line-height: 1.55;
}

.fancybox-aviso .fancybox__backdrop {
    background: rgba(28, 34, 43, 0.72);
}

.fancybox-aviso .f-button.is-close-btn {
    top: 8px;
    right: 8px;
    color: var(--texto);
}

/* 3.2b — Submenu de Dados Técnicos ---------------------------------------- */
/*
 * O item pai é um <button>, e não um link: ele só abre a lista. Por isso
 * precisa ser zerado à mão — botão traz fundo, borda e fonte do sistema.
 */
.topo-menu-abre {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--titulo);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 84px;
    cursor: pointer;
}

.topo-menu-abre:hover,
.topo-menu-abre:focus-visible,
.topo-menu-abre.ativo,
.tem-submenu:hover .topo-menu-abre {
    color: var(--verde);
}

/* A seta é feita de borda: sem imagem, sem ícone, e acompanha a cor do texto. */
.topo-menu-seta {
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transicao);
}

.tem-submenu {
    position: relative;
}

/*
 * O painel fica montado e invisível, não `display:none`: assim a transição
 * funciona e o leitor de tela não perde a lista de vista quando ela abre.
 */
.topo-submenu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    min-width: 288px;
    padding: 22px 26px 18px;
    background: var(--branco);
    border-top: 3px solid var(--verde);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

/*
 * Três formas de abrir, de propósito: o mouse (hover), o teclado
 * (focus-within, que pega o botão e qualquer link de dentro) e o clique,
 * que é o que funciona no toque. O JS só cuida do terceiro.
 */
.tem-submenu:hover .topo-submenu,
.tem-submenu:focus-within .topo-submenu,
.tem-submenu.aberto .topo-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tem-submenu:hover .topo-menu-seta,
.tem-submenu.aberto .topo-menu-seta {
    transform: rotate(225deg);
    margin-top: 2px;
}

/* O rótulo do produto. Não é clicável: só separa e nomeia o grupo. */
.topo-submenu-grupo {
    margin: 18px 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--borda);
    color: var(--texto);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/*
 * `.topo-menu .topo-submenu-lista`, e não só `.topo-submenu-lista`.
 *
 * A regra do menu é `.topo-menu ul { display: flex }` — peso (0,1,1), porque
 * tem uma classe E um elemento. `.topo-submenu-lista` sozinha pesa (0,1,0) e
 * PERDE, mesmo vindo depois: os dois manuais ficavam lado a lado dentro do
 * painel. Com as duas classes, o peso vira (0,2,0) e ganha.
 *
 * É a mesma armadilha do `.vantagem p` contra `.vantagem-icone`, anotada em
 * `04-pendencias.md`.
 */
.topo-menu .topo-submenu-lista {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A folha do topo põe line-height 84px em todo `.topo-menu a`. Aqui dentro
   isso deixaria cada link com a altura da barra inteira. */
.topo-submenu-lista a {
    padding: 7px 0;
    color: var(--link);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

.topo-submenu-lista a:hover,
.topo-submenu-lista a:focus-visible,
.topo-submenu-lista a.ativo {
    color: var(--verde);
}

/* 3.3 — Botão sanduíche (só no celular) ----------------------------------- */
/* Precisa ser POSICIONADO: elemento posicionado (o painel do menu, que é
   `fixed`) pinta por cima de elemento estático, não importa o z-index do pai.
   Sem isto, o botão some atrás do painel e não dá para fechar por ele. */
.topo-sanduiche {
    display: none;
    position: relative;
    z-index: 101;
    width: 46px;
    height: 46px;
    padding: 11px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.topo-sanduiche span {
    display: block;
    height: 2px;
    background: var(--titulo);
    border-radius: 2px;
    transition: transform var(--transicao), opacity var(--transicao);
}

.topo-sanduiche span + span {
    margin-top: 6px;
}

.topo-sanduiche[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.topo-sanduiche[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.topo-sanduiche[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.topo-cortina {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(0, 0, 0, 0.45);
}


/* ------------------------------- 4. RODAPÉ ------------------------------- */
.rodape {
    padding: 34px 0;
    background: var(--cinza-claro);
    text-align: center;
}

.rodape-credito {
    margin: 0;
    font-size: 16px;
    color: var(--texto);
}

.rodape-redes {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 12px 0 0;
    font-size: 20px;
}

/* Botões flutuantes. */
.zap-flutuante,
.voltar-ao-topo {
    position: fixed;
    right: 22px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    transition: transform var(--transicao), opacity var(--transicao);
}

.zap-flutuante {
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: var(--branco);
    font-size: 32px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.zap-flutuante:hover {
    color: var(--branco);
    transform: scale(1.07);
}

.voltar-ao-topo {
    bottom: 88px;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: rgba(81, 91, 105, 0.75);
    color: var(--branco);
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
}

.voltar-ao-topo.visivel {
    opacity: 1;
    pointer-events: auto;
}

.voltar-ao-topo:hover {
    background: var(--verde);
}


/* --------------------------- 5. BLOCOS DA HOME --------------------------- */

/* 5.1 — Herói — 700px de altura, texto a 189px do topo -------------------- */
.heroi {
    min-height: 700px;
    display: flex;
    align-items: flex-start;
    padding-top: 189px;
    background: #0d2b0d center / cover no-repeat;
    color: var(--branco);
}

/* A foto já é escura: o original não põe véu nenhum por cima. */
/* O texto do herói fica 47px à direita do container das outras seções — é
   assim que o slider do site original posiciona as camadas. */
.heroi .interna {
    padding-left: 77px;
}

.heroi-titulo {
    margin: 0;
    color: var(--branco);
    font-size: 55px;
    font-weight: 700;
    line-height: 61px;
}

.heroi-subtitulo {
    margin: 0;
    color: var(--branco);
    font-size: 36px;
    font-weight: 200;
    line-height: 53px;
}

/* 5.2 — O Piso Móvel ------------------------------------------------------ */
.piso-movel-intro {
    padding: 120px 0 40px;
}

.piso-movel-intro .colunas {
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: 47px;
    align-items: start;
}

/* No original as colunas de texto têm 20px de recuo dentro da linha, o que
   põe o conteúdo em x=155 e não em x=135. */
.piso-movel-intro .texto {
    padding: 0 20px;
}

.piso-movel-intro .video {
    padding-top: 68px;   /* alinha o vídeo com o primeiro parágrafo, como no original */
}

.piso-movel-intro video {
    width: 100%;
    max-width: 359px;
}

/* 5.3 — Vantagens --------------------------------------------------------- */
.vantagens {
    padding: 80px 0 77px;
    background: var(--cinza-secao) center / cover no-repeat;
    text-align: center;
}

.vantagens-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 15px;
}

.vantagem {
    padding: 31px 30px 52px;
}

.vantagem .vantagem-icone {
    width: 124px;
    height: 124px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--branco);
    color: var(--verde-icone);
    font-size: 62px;
    line-height: 124px;
    text-align: center;
}

.vantagem h3 {
    font-size: 32px;
    line-height: 38.4px;
    margin: 0;
}

.vantagem p {
    margin: 15px 0 0;
    font-size: 22px;
}

/* 5.4 — Segmentos — quatro quadrantes de 50% × 854px ---------------------- */
.segmentos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.segmento {
    min-height: 854px;
    padding: 79px;
    background: #1f4d16 center / cover no-repeat;
    text-align: center;
}

.segmento h2 {
    margin: 15px 0;
    color: var(--branco);
    font-size: 40px;
    line-height: 1.2;
}

/*
 * Sem gap, sem cantos arredondados e sem sombra: o PNG de cada segmento já
 * traz a moldura, o arredondamento, a sombra e o respiro desenhados dentro
 * dele. Repetir no CSS dobraria tudo.
 */
.segmento-fotos img {
    width: 300px;
    margin: 0 auto;
}

/* 5.5 — Faixa de imagem larga --------------------------------------------- */
.faixa-imagem {
    height: 800px;
    background: center / cover no-repeat;
}

/* 5.6 — Unidades hidráulicas ---------------------------------------------- */
.unidades-hidraulicas {
    padding: 83px 0 0;
    text-align: center;
}

.unidades-hidraulicas .texto {
    text-align: center;
}

.unidades-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 46px;
    margin-top: 40px;
    text-align: left;
}

.unidade-foto {
    margin: 0;
}

/* As imagens já vêm com o recorte redondo desenhado (PNG com transparência
   e JPG com fundo claro). Nada de border-radius aqui. */
.unidade-foto img {
    width: 100%;
}

.unidade-foto h3 {
    margin: 0 0 40px;
    font-size: 28px;
    line-height: 1.29;
}

/* 5.7 — Estrutura do piso -------------------------------------------------- */
.estrutura-do-piso {
    padding: 70px 0 0;
}

/*
 * O maior título da página: 56px e CENTRALIZADO.
 *
 * O `text-align` computado do original diz "left" — mas o tema centraliza o
 * texto por outro caminho, e na tela ele aparece no meio. Vale o que se vê,
 * não o que a propriedade diz: conferido recortando a captura com régua.
 */
.estrutura-do-piso .secao-titulo {
    font-size: 56px;
    line-height: 1.16;
    text-align: center;
}

/* Mesmo caso: aparece centralizado, apesar do text-align computado. */
.tipos-de-piso .secao-titulo,
.tipos-de-piso .intro {
    text-align: center;
}

.estrutura-do-piso .destaques {
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.estrutura-do-piso .destaques li::before {
    content: "•";
    margin-right: 8px;
}

.estrutura-do-piso .acao {
    margin: 62px 0;
    text-align: center;
}

/* A foto dos trilhos não ocupa a linha inteira no original: 1039 de 1170. */
.estrutura-do-piso figure {
    margin: 0 auto;
    max-width: 1039px;
}

/* 5.8 — Tipos de piso ------------------------------------------------------ */
.tipos-de-piso {
    padding: 148px 0 178px;
}

.tipos-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 87px;
    row-gap: 130px;
    margin-top: 50px;
    padding: 0 20px;
}

.tipo-piso img {
    width: 100%;
}

.tipo-piso h3 {
    margin: 20px 0 0;
    font-size: 28px;
    line-height: 36px;
    text-align: center;
    text-transform: uppercase;
}

.tipo-piso p {
    margin: 10px 0 0;
    font-size: 22px;
}

/* 5.9 — Accelerator -------------------------------------------------------- */
.accelerator {
    padding: 110px 0 120px;
    background: var(--cinza-secao) center / cover no-repeat;
    color: var(--branco);
    text-align: center;
}

.accelerator h2,
.accelerator h3 {
    color: var(--branco);
}

.accelerator h3 {
    margin: 15px 0;
    font-size: 28px;
}

/* O selo é largo: 1170px, a linha inteira. Limitá-lo a 520 encolhia demais. */
.accelerator-selo {
    margin: 30px 0 40px;
}

.accelerator-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 47px;
    align-items: center;
}

.accelerator-colunas p {
    margin: 0;
    color: var(--branco);
    text-align: center;
}

/* 5.10 — A Hallco ---------------------------------------------------------- */
.a-hallco {
    padding: 40px 0 75px;
}

.a-hallco .colunas {
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: 47px;
    align-items: start;
}

.a-hallco .texto {
    text-align: center;
}

/* Menor que os outros títulos de seção: 32px. */
.a-hallco h2 {
    margin: 15px 0;
    font-size: 32px;
    line-height: 1.25;
}

/* A imagem da patente desce 91px em relação ao título, como no original —
   lá é um separador que abre esse espaço. */
.a-hallco figure {
    margin: 0;
    padding-top: 91px;
    text-align: center;
}

.a-hallco figure img {
    max-width: 359px;
    margin: 0 auto;
}

.a-hallco figcaption {
    margin-top: 20px;
    font-size: 22px;
    font-style: italic;
}

/* 5.11 — Novidades --------------------------------------------------------- */
.novidades {
    padding: 0 0 40px;
    background: var(--preto);
    color: var(--branco);
    text-align: center;
}

.novidades h2 {
    color: var(--branco);
    font-size: 56px;
    line-height: 1.16;
}

/*
 * Três colunas de 390px com a mídia de 310px encostada na direita de cada
 * uma: é o que põe os itens em x=215, 605 e 995, como no original. Foi
 * medido item a item, não estimado.
 */
.novidades-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0;
    justify-items: end;
    align-items: center;
    margin-top: 20px;
}

.novidade {
    width: 310px;
    max-width: 100%;
    margin: 0;
}

.novidade p {
    margin: 15px 0 0;
    color: var(--branco);
    font-size: 22px;
}

.novidade video,
.novidade img {
    width: 100%;
}

/* 5.12 — Contato ----------------------------------------------------------- */
.contato {
    padding: 40px 0 190px;
}

.contato .colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    align-items: start;
}

/* O título do Contato é H2 (a página tem um H1 só, no herói), mas mantém o
   corpo de 56px que o original usa. */
.contato h1,
.contato .secao-titulo {
    max-width: 562px;
    font-size: 56px;
    line-height: 1.16;
}

/* O endereço começa na altura do formulário, não na do título. */
.contato-endereco {
    margin-top: 68px;
}

.contato-endereco p {
    margin: 0 0 20px;
}


/* --------------------------- 6. DADOS TÉCNICOS ---------------------------- */
.migalhas {
    padding: 22px 0;
    background: #f6f8fa;
    border-bottom: 1px solid var(--borda);
    font-size: 16px;
    text-align: center;
}

.migalhas ol {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.migalhas li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--borda);
}

.ficha-tecnica {
    padding: 60px 0;
}

.ficha-tecnica figure {
    margin: 0;
    border: 1px solid var(--borda);
    background: var(--branco);
}

.ficha-tecnica .acoes {
    margin-top: 40px;
    text-align: center;
}


/* --------------------------- 7. PÁGINAS SIMPLES --------------------------- */
.pagina-simples {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    text-align: center;
}

.pagina-simples .codigo {
    font-size: 120px;
    font-weight: 300;
    line-height: 1;
    color: var(--verde);
}

.pagina-simples .acoes {
    margin-top: 40px;
}


/* ----------------------------- 8. FORMULÁRIOS ----------------------------- */
/* Dentro da coluna de contato o formulário recua 30px de cada lado — é o que
   deixa os campos com 502px numa coluna de 562px. */
.contato .formulario {
    max-width: 562px;
    padding: 0 30px;
}

.formulario .campo {
    margin-bottom: 22px;
}

.formulario label {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 22px;
    font-weight: 300;
    color: var(--texto);
}

.formulario label .obrigatorio {
    color: var(--texto);
}

.formulario input,
.formulario textarea,
.formulario select {
    width: 100%;
    height: 45px;
    padding: 0 13px;
    border: 1px solid var(--borda);
    border-radius: 0;
    background: var(--branco);
    color: var(--campo-texto);
    font-family: var(--fonte);
    font-size: 13px;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.formulario textarea {
    height: 96px;
    padding: 13px;
    resize: vertical;
}

.formulario input:focus,
.formulario textarea:focus {
    border-color: var(--verde);
    box-shadow: 0 0 0 2px rgba(78, 153, 32, 0.14);
    outline: none;
}

/* Campo-armadilha antispam: invisível para gente, visível para robô. */
.formulario .armadilha {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.aviso {
    margin-bottom: 22px;
    padding: 14px 18px;
    font-size: 18px;
}

.aviso-ok {
    background: #e8f5e2;
    border: 1px solid #b7dfa4;
    color: #35701b;
}

.aviso-erro {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #a32117;
}


/* ------------------------------ 9. MOVIMENTO ------------------------------ */
[data-revelar] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}

[data-revelar][data-visivel] {
    opacity: 1;
    transform: none;
}


/* ============================= RESPONSIVO ================================= */
/*
 * ATENÇÃO — o site original NÃO diminui a tipografia no celular.
 *
 * Ele mantém o corpo em 22px e os títulos em 56/48/32/28, e ganha espaço
 * recuando o conteúdo: a faixa passa a 23px de respiro e as colunas de texto
 * ganham mais 27px. Foi medido em 390px de largura, elemento por elemento.
 * Reduzir as fontes deixaria a réplica mais compacta que o original — foi
 * o que acontecia antes desta revisão.
 */

@media (max-width: 1200px) {
    .segmento {
        min-height: 0;
        padding: 60px 43px;
    }

    .faixa-imagem {
        height: 520px;
    }

    .heroi {
        min-height: 560px;
        padding-top: 140px;
    }
}

@media (max-width: 1100px) {
    .tipos-lista {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 50px;
    }

    .novidades-lista {
        column-gap: 20px;
        justify-items: center;
    }

    .novidade {
        width: 100%;
    }
}

@media (max-width: 991px) {
    /* Menu vira painel deslizante. */
    .topo-sanduiche {
        display: block;
    }

    .topo-menu {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 99;
        width: min(320px, 86vw);
        height: 100dvh;
        padding: 90px 30px 30px;
        background: var(--branco);
        box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(100%);
        transition: transform var(--transicao);
        overflow-y: auto;
    }

    .topo-menu.aberto {
        transform: none;
    }

    .topo-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .topo-menu li + li {
        border-top: 1px solid var(--borda);
    }

    .topo-menu a {
        padding: 16px 0;
        font-size: 17px;
        line-height: 1.4;
    }

    /* -- Submenu no celular: acordeão dentro do painel, não painel flutuante.
       Aqui não existe hover, então quem manda é só a classe `aberto`. */
    .topo-menu-abre {
        width: 100%;
        justify-content: space-between;
        padding: 16px 0;
        font-size: 17px;
        line-height: 1.4;
    }

    /* Anula o hover herdado do desktop: no toque, `hover` fica grudado depois
       do primeiro toque e o menu abriria sozinho. */
    .tem-submenu:hover .topo-submenu,
    .tem-submenu:focus-within .topo-submenu {
        opacity: 0;
        visibility: hidden;
    }

    .topo-submenu {
        position: static;
        min-width: 0;
        padding: 0 0 10px 14px;
        border-top: 0;
        box-shadow: none;
        transform: none;
        /* Fechado ocupa altura zero; aberto, a altura do conteúdo. */
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transicao), opacity var(--transicao);
    }

    .tem-submenu.aberto .topo-submenu {
        max-height: 640px;
        opacity: 1;
        visibility: visible;
    }

    .topo-submenu-grupo {
        margin: 12px 0 2px;
        padding-top: 12px;
    }

    .topo-submenu-lista a {
        padding: 11px 0;
        font-size: 15px;
        white-space: normal;
    }

    /* A linha divisória entre itens do menu não vale dentro do submenu. */
    .topo-submenu-lista li + li {
        border-top: 0;
    }

    /* Sem o menu horizontal, a barra pode encolher — 86px no original. */
    :root {
        --topo-barra: 86px;
    }

    /* Colunas viram pilha. */
    .piso-movel-intro .colunas,
    .unidades-fotos,
    .accelerator-colunas,
    .a-hallco .colunas,
    .contato .colunas {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .piso-movel-intro .video {
        padding-top: 0;
    }

    .piso-movel-intro video,
    .a-hallco figure img {
        max-width: 100%;
    }

    .vantagens-lista,
    .novidades-lista,
    .tipos-lista {
        grid-template-columns: 1fr;
        row-gap: 48px;
    }

    .segmentos {
        grid-template-columns: 1fr;
    }

    .unidade-foto h3 {
        margin-bottom: 0;
    }

    /* Com as colunas empilhadas, os recuos de alinhamento não fazem sentido. */
    .contato-endereco,
    .a-hallco figure {
        margin-top: 0;
        padding-top: 0;
    }

    .contato h1,
    .contato .formulario {
        max-width: none;
    }
}

@media (max-width: 700px) {
    :root {
        /* 23px de respiro na faixa: é o que o original usa em 390px. */
        --respiro: 23px;
    }

    /* Os recuos finos do desktop não cabem numa tela estreita — mas as
       colunas de texto continuam recuando, só que 27px em vez de 20. */
    .topo-contato .interna,
    .topo-barra .interna {
        padding: 0 20px;
    }

    .heroi .interna {
        padding-left: 23px;
    }

    .piso-movel-intro .texto,
    .a-hallco .texto {
        padding: 0 27px;
    }

    /* Campo de 270px de largura, começando em x=60, como no original. */
    .contato .formulario {
        padding: 0 37px;
    }

    /* Imagem do card de tipo com 290px, começando em x=50. */
    .tipos-lista {
        padding: 0 27px;
    }

    .heroi {
        min-height: 536px;
        padding-top: 150px;
    }

    .heroi-titulo { font-size: 40px; line-height: 1.15; }
    .heroi-subtitulo { font-size: 26px; line-height: 1.3; }

    .vantagens { padding: 60px 0 40px; }
    .unidades-hidraulicas { padding-top: 60px; }
    .estrutura-do-piso { padding-top: 50px; }
    .tipos-de-piso { padding: 80px 0 90px; }
    .accelerator { padding: 80px 0 90px; }
    .contato { padding: 40px 0 90px; }

    .segmento {
        padding: 48px 43px;
    }

    .faixa-imagem {
        height: 320px;
    }

    /* A barra de contato passa a ocupar duas linhas. */
    .topo-contato {
        height: auto;
    }

    .topo-contato-itens {
        justify-content: center;
        padding: 10px 0;
        line-height: 1.6;
        text-align: center;
        /*
         * O separador "|" some aqui embaixo, e sem ele os dois itens ficavam
         * ENCOSTADOS: "…4141 2917piso.movel@hallco…", como se fosse uma
         * palavra só. O `gap` ocupa o lugar dele — 14px quando cabem lado a
         * lado, 2px entre as linhas quando quebram.
         */
        gap: 2px 14px;
    }

    .topo-contato-separador {
        display: none;
    }

    .pagina-simples .codigo {
        font-size: 84px;
    }

    /* Os botões flutuantes ficam sobre o canto direito do rodapé. */
    .rodape {
        padding-bottom: 90px;
    }
}


/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-revelar] {
        opacity: 1;
        transform: none;
    }
}