/* ==========================================================================
   COMPONENTS.CSS — peças reutilizadas
   ========================================================================== */

/* ---------------------------------------------------------- Contêiner --- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
}

.secao { padding-block: var(--secao-y); position: relative; z-index: 1; }
.secao--fina { padding-block: clamp(2.5rem, 6vh, 4rem); }

/* ========================================================== Montagem =====
   --montagem vai de 0 a 1 conforme a seção cruza a tela (app.js). Cada peça
   tem sua vez, em --vez: enquanto a montagem não passa da vez dela, ela não
   entrou. É isso que faz a página parecer se montando na frente de quem lê,
   em vez de tudo aparecer junto.

   O padrão é 1 nos dois: sem JavaScript, tudo aparece pronto em vez de a
   página subir invisível.
   ========================================================================= */

.secao { --montagem: 1; }

.secao .titulo,
.secao .apoio,
.marca-nova__texto > *,
.lancamento__data,
.atributos__item,
.produto,
.noticia,
.brasil__texto > *,
.brasil__nota,
.marca-nova__titulo,
.marca-nova__texto > *,
.contato__pitch > *,
.contato .form > *,
.lancamento__corpo > *,
.noticias__todas {
    /* O multiplicador é o inverso da duração: 6 quer dizer que cada peça leva
       1/6 do trilho para entrar por inteiro. Quanto menor, mais lento. */
    --entrou: clamp(0, calc((var(--montagem, 1) - var(--vez, 0)) * 6), 1);
    opacity: var(--entrou);
    transform: translateY(calc(16px * (1 - var(--entrou))));
}

/* A ordem de entrada, espalhada pelo trilho inteiro. O intervalo entre uma
   vez e a seguinte é maior que a duração de cada entrada, então uma peça
   termina de aparecer antes de a próxima começar — é o que dá tempo de ler
   antes de a seguinte roubar a atenção. */
.secao .titulo        { --vez: .03; }
.secao .apoio         { --vez: .16; }
.noticias__todas      { --vez: .16; }
.brasil__nota         { --vez: .58; }
.marca-nova__titulo   { --vez: .03; }

.atributos__item:nth-child(1), .produto:nth-child(1), .noticia:nth-child(1) { --vez: .28; }
.atributos__item:nth-child(2), .produto:nth-child(2), .noticia:nth-child(2) { --vez: .38; }
.atributos__item:nth-child(3), .produto:nth-child(3), .noticia:nth-child(3) { --vez: .48; }
.atributos__item:nth-child(4), .produto:nth-child(4), .noticia:nth-child(4) { --vez: .58; }

.brasil__texto > *:nth-child(1)      { --vez: .04; }
.brasil__texto > *:nth-child(2)      { --vez: .16; }
/* Quatro filhos, não três: título, abertura, corpo e fecho. O fecho ficava
   sem vez e por isso aparecia antes de todo o resto. */
.marca-nova__texto > *:nth-child(1)  { --vez: .13; }
.marca-nova__texto > *:nth-child(2)  { --vez: .25; }
.marca-nova__texto > *:nth-child(3)  { --vez: .37; }
.lancamento__data                    { --vez: .02; }
.lancamento__corpo > .relogio        { --vez: .29; }
.lancamento__corpo > .lancamento__dados { --vez: .42; }
.lancamento__corpo > .lancamento__prazo { --vez: .54; }
.contato__pitch > *:nth-child(n+2)   { --vez: .25; }
.contato .form > *:nth-child(n)      { --vez: .40; }

/* ========================================================== Travadas =====
   As seções de conteúdo prendem enquanto se montam, como a do vídeo. O trilho
   é curto de propósito — meia tela de rolagem além do palco. Travar deixa de
   ser recurso quando vira o estado padrão da página, e com cinco seções
   presas o curso já soma o bastante.

   O contato fica de fora: prender uma página enquanto alguém preenche
   formulário atrapalha em vez de impressionar. A faixa de atributos também,
   por ser rasa demais para justificar palco.
   ========================================================================= */

#produtos, #lancamento, #brasil, #marca {
    padding-block: 0;
    /* Trilho mais longo para caber uma entrada de cada vez com tempo de
       leitura, e ainda sobrar um quarto final com tudo já no lugar antes de
       a seção soltar. */
    min-height: 212vh;
}
/* A da marca é a mais longa da página: o caminhão precisa correr pelo mesmo
   tanto de rolagem que o pneu do hero. O hero tem 300vh de trilho com 200vh
   presos e o vídeo ocupando tudo; aqui são 360vh com 260vh presos e o vídeo
   ocupando 78% deles, o que dá o mesmo curso em pixels. */
#marca { min-height: 388vh; }

#produtos > .wrap,
#lancamento > .wrap,
#brasil > .wrap,
#marca > .wrap {
    position: sticky; top: 0;
    min-height: 100vh; min-height: 100svh;
    padding-block: clamp(4rem, 11vh, 7rem);
    align-content: center;   /* centra o conteúdo nas que são grade */
}
/* A que não é grade precisa do flex para centrar. */
#produtos > .wrap { display: flex; flex-direction: column; justify-content: center; }

/* No celular o trilho encolhe. A tela é mais alta em proporção, então o mesmo
   curso em vh dá muito mais rolagem parada — e a página já passava de 19
   telas só de conteúdo. */
@media (max-width: 900px) {
    #produtos, #lancamento, #brasil { min-height: 168vh; }
    #marca { min-height: 250vh; }
}

/* ------------------------------------------------------- Fio de avanço ---
   Na base do palco preso, como no hero: ali ele diz "a página está travada de
   propósito e falta isto para soltar". */
#produtos > .wrap::after,
#lancamento > .wrap::after,
#brasil > .wrap::after,
#marca > .wrap::after {
    content: ""; position: absolute; left: var(--wrap-pad); right: var(--wrap-pad);
    bottom: 2.2rem; height: 2px;
    background: var(--origem-claro);
    transform: scaleX(var(--montagem, 0)); transform-origin: left center;
    pointer-events: none;
}

/* A faixa de atributos é a única que não trava: rasa demais para justificar
   palco. O fio dela fica na aresta de cima e some ao fim. */
#atributos::before {
    content: ""; position: absolute; left: 0; top: 0;
    width: 100%; height: 2px;
    background: var(--origem-claro);
    transform: scaleX(var(--montagem, 0)); transform-origin: left center;
    opacity: calc(1 - clamp(0, calc((var(--montagem, 1) - .88) * 9), 1));
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .secao { --montagem: 1; }
    #produtos, #lancamento, #brasil, #marca {
        min-height: 0; padding-block: var(--secao-y);
    }
    #produtos > .wrap, #lancamento > .wrap, #brasil > .wrap, #marca > .wrap {
        position: static; min-height: 0; padding-block: 0;
    }
    #produtos > .wrap::after, #lancamento > .wrap::after, #brasil > .wrap::after,
    #marca > .wrap::after,
    #atributos::before { display: none; }
    .secao .titulo, .secao .apoio, .atributos__item, .produto, .noticia,
    .brasil__texto > *, .brasil__nota, .marca-nova__titulo,
    .marca-nova__texto > *, .contato__pitch > *, .contato .form > *,
    .lancamento__corpo > *, .noticias__todas {
        opacity: 1; transform: none;
    }
}

/* ------------------------------------------------------------- Grão -----
   Vídeo comprimido tem ruído; fundo CSS é liso e perfeito. Sem esta camada a
   emenda entre os dois aparece porque só um lado tem textura. Também quebra o
   banding do gradiente azul, que é o pior caso de compressão. */
.grao {
    position: fixed; inset: 0; z-index: 2;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* ---------------------------------------------------------- Estrelas ----
   Campo estelar do fundo da página, para continuar o do vídeo. Desenhado em
   canvas por app.js; este é só o palco. O deslocamento na rolagem também vem
   de lá: é o canvas que redesenha, não um transform no elemento. */
.ceu { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ceu canvas { width: 100%; height: 100%; }

/* ---------------------------------------------------------- Camadas ----- */
.site { position: relative; z-index: 1; }

/* ------------------------------------------------------------- Curva ----
   Um traço só atravessando a página inteira, do topo ao rodapé. Existe para
   costurar as seções: sem ela a home lê como uma pilha de blocos sem relação.
   Fica atrás de tudo e nunca cruza texto — o desenho do path é que garante
   isso, passando pelas margens. */
.curva {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;

    /* app.js empurra --revela de 6% a 100% conforme a rolagem, e a linha se
       desenha de cima para baixo. O padrão é 100%: se o JS não rodar, o traço
       aparece inteiro em vez de sumir. */
    --revela: 100%;
    --pincel: linear-gradient(to bottom,
        #000 0%, #000 var(--revela), transparent calc(var(--revela) + 6%));
    -webkit-mask-image: var(--pincel);
    mask-image: var(--pincel);
}
/* O traço sai esverdeado no topo e chega amarelado no rodapé. Numa linha de
   1px a 22% de opacidade ninguém identifica as cores conscientemente — o que
   se percebe é que a página inteira tem a mesma origem. É a bandeira sem
   nenhum lugar onde ela apareça literalmente. */
.curva path {
    fill: none;
    stroke: url(#curva-tinta);
    stroke-width: 1.25;
    stroke-linecap: round;
    opacity: .55;
}

/* --------------------------------------------------------- Realce -------
   Trechos coloridos dentro de um título, nas cores do logo. Os marcadores
   vêm do painel (*verde*, +amarelo+, ~azul~) e quem converte é pdr_realce()
   em functions.php. */
.verde   { color: var(--origem-claro); }
.amarelo { color: var(--acao); }
.azul    { color: var(--marca-azul); }

/* ------------------------------------------------------------ Botões ----
   A tarja inclinada na aresta esquerda é o adorno da marca. A inclinação não
   é enfeite: ela repete o ângulo do itálico do rótulo e o do próprio logo, e
   é o que faz o adorno parecer parte do botão em vez de um adesivo colado.
   Na hora do hover ela engorda, em vez de mudar de cor — movimento em vez de
   troca de tinta é mais discreto e não confunde estado com identidade. */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em;
    padding: .72rem 1.7rem .72rem 2rem;
    border: 1px solid transparent;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}
.btn::before {
    content: ""; position: absolute;
    left: -6px; top: -2px; bottom: -2px; width: 12px;
    transform: skewX(-12deg);
    transition: width var(--dur) var(--ease);
}
.btn:hover::before { width: 18px; }

/* No botão cheio o amarelo já é o fundo, então a tarja entra verde e as duas
   cores ficam lado a lado sem nenhuma delas virar enfeite. */
.btn--acao  { background: var(--acao); color: var(--tinta); }
.btn--acao::before { background: var(--pdr-verde); }
.btn--acao:hover  { background: var(--acao-hover); }

/* No botão de contorno o fundo é escuro, então a tarja carrega as duas cores
   sozinha — mesmo degradê da curva que atravessa a página. */
.btn--linha { border-color: var(--line-forte); color: var(--text); }
.btn--linha::before {
    background: linear-gradient(to bottom, var(--origem-claro), var(--acao));
}
.btn--linha:hover { border-color: var(--text); }

.btn--mini  { padding: .5rem 1.15rem .5rem 1.4rem; font-size: .95rem; }
.btn--mini::before { left: -5px; width: 9px; }
.btn--mini:hover::before { width: 13px; }

/* O do WhatsApp já tem o ícone verde; uma tarja ali seria verde sobre verde. */
.btn--zap::before { display: none; }

/* ------------------------------------------------------------- Marca ---- */
/* Se o cliente não subiu logo, cai neste desenho tipográfico. As cores vêm do
   logo real; o R fica claro porque o azul do logo some no fundo escuro. */
.marca { display: inline-flex; flex-direction: column; line-height: 1; gap: 2px; }
.marca img { height: 42px; width: auto; }
.marca__texto {
    font-family: var(--f-display); font-style: italic; font-weight: 800;
    font-size: 1.9rem; letter-spacing: -.01em;
}
.marca__texto .p { color: var(--pdr-verde); }
.marca__texto .d { color: var(--pdr-amarelo); }
.marca__texto .r { color: var(--text); }
.marca__sub {
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    font-size: .7rem; letter-spacing: .42em; color: var(--text-muted);
    border-top: 2px solid var(--pdr-azul); padding-top: 2px;
}

/* ------------------------------------------------------------ Títulos --- */
.titulo { font-size: var(--t-secao); max-width: 16ch; }
.apoio  { color: var(--text-muted); max-width: 52ch; margin-top: 1.1rem; }

/* ---------------------------------------------------------- Atributos ---
   Onde a referência trazia números da empresa. A marca é nova e não tem
   número nenhum para exibir, então a faixa fala do produto: destaque em
   display, legenda curta embaixo, fios verticais separando. */
.atributos {
    display: grid;
    grid-template-columns: repeat(var(--colunas, 4), 1fr);
    border-block: 1px solid var(--line);
}
.atributos[data-colunas="3"] { --colunas: 3; }
.atributos[data-colunas="2"] { --colunas: 2; }
.atributos[data-colunas="1"] { --colunas: 1; }

.atributos__item { padding: 1.9rem clamp(1rem,2.4vw,2rem); }
.atributos__item + .atributos__item { border-left: 1px solid var(--line); }

.atributos__destaque {
    display: block;
    font-family: var(--f-display); font-style: italic; font-weight: 800;
    text-transform: uppercase; font-size: var(--t-destaque);
    line-height: .98; letter-spacing: .005em;
}
.atributos__texto {
    display: block; margin-top: .55rem;
    font-size: var(--t-mini); line-height: 1.45; color: var(--text-muted);
    max-width: 24ch;
}

/* O blog e o contato ficam sem movimento nenhum: são as duas seções em que
   o visitante está lendo lista ou preenchendo campo, e ali animação atrapalha
   em vez de conduzir. Entram prontas e a página não trava. */
#noticias .titulo, #noticias .apoio, #noticias .noticias__todas, #noticias .noticia,
#contato .titulo, #contato .apoio, #contato .contato__pitch > *, #contato .form > * {
    opacity: 1 !important;
    transform: none !important;
}

/* --------------------------------------------- Cor por seção -----------
   Cada título da home puxa uma cor do logo, em ciclo: amarelo, azul, branco,
   verde. O branco entra no meio do ciclo de propósito — é o descanso que
   impede a página de virar arco-íris.

   O hero abre a sequência em verde e as seções seguintes continuam dali.

   Palavra marcada com *, + ou ~ continua valendo: o <span> tem prioridade
   sobre a cor da seção. */
.hero__titulo                  { color: var(--origem-claro); }
#camadas   .camadas__titulo    { color: var(--acao); }
#produtos  .titulo             { color: var(--marca-azul); }
#lancamento .titulo            { color: var(--text); }
#brasil    .titulo             { color: var(--origem-claro); }
#marca     .marca-nova__titulo { color: var(--acao); }
#noticias  .titulo             { color: var(--marca-azul); }
#contato   .titulo             { color: var(--text); }

/* Uma cor do logo por bloco, na ordem P-D-R e o quarto em branco. */
.atributos__item:nth-child(1) .atributos__destaque { color: var(--origem-claro); }
.atributos__item:nth-child(2) .atributos__destaque { color: var(--acao); }
.atributos__item:nth-child(3) .atributos__destaque { color: var(--marca-azul); }
.atributos__item:nth-child(4) .atributos__destaque { color: var(--text); }

@media (max-width: 900px) {
    .atributos { grid-template-columns: repeat(2, 1fr); }
    .atributos__item:nth-child(odd)   { border-left: 0; }
    .atributos__item:nth-child(n+3)   { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
    .atributos { grid-template-columns: 1fr; }
    .atributos__item + .atributos__item { border-left: 0; border-top: 1px solid var(--line); }
    .atributos__item { text-align: center; padding-block: 1.5rem; }
    .atributos__texto { max-width: 30ch; margin-inline: auto; }
}

/* ------------------------------------------------------------ Form ------ */
.form { display: grid; gap: 1rem; align-content: start; }
.form label { font-size: var(--t-mini); color: var(--text-muted); display: block; margin-bottom: .35rem; }
.form input, .form textarea {
    width: 100%; background: var(--cetim); border: 1px solid var(--line);
    padding: .8rem 1rem; color: var(--text);
    transition: border-color var(--dur) var(--ease);
}
.form input:focus, .form textarea:focus { border-color: var(--line-forte); }
.form__par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form__status { font-size: var(--t-mini); min-height: 1.4em; }
.form__status.erro { color: #FF8A8A; }
/* Verde em confirmação é convenção universal; amarelo aqui lia como aviso. */
.form__status.ok   { color: var(--origem-claro); }
/* Honeypot: campo isca invisível para robô de spam preencher. */
.form__isca { position: absolute; left: -9999px; }

@media (max-width: 460px) { .form__par { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Ficha ----
   Página de um produto. Mesma gramática da home: texto à esquerda, foto à
   direita, sem card e sem sombra. */
.ficha { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,6vw,5rem); align-items: start; }
.ficha__corpo { max-width: 62ch; margin-top: 1.6rem; }
.ficha__corpo p + p { margin-top: 1rem; }
.ficha__midia .produto__foto { aspect-ratio: 1; }
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Paginação --- */
.pagination { margin-top: 3rem; display: flex; gap: .5rem; }
.pagination .page-numbers {
    padding: .4rem .8rem; border: 1px solid var(--line); color: var(--text-muted);
}
.pagination .page-numbers.current { border-color: var(--acao); color: var(--text); }


/* ==========================================================================
   POST
   --------------------------------------------------------------------------
   Coluna de leitura estreita e centrada, no meio de uma página larga. A
   medida curta não é estética: linha longa demais faz o olho perder o começo
   da seguinte, e num fundo escuro isso pesa mais ainda.
   ========================================================================== */

.post { padding-block: clamp(3rem, 9vh, 6rem) var(--secao-y); position: relative; z-index: 1; }

/* ------------------------------------------------------------- Abertura -- */
/* Cabeçalho centrado, ocupando a largura toda do bloco. Título de notícia
   costuma ser longo — o do lançamento tem mais de cem caracteres — e numa
   coluna estreita ele virava cinco linhas com meia tela vazia ao lado. */
.post__topo { max-width: 62rem; text-align: center; }

.post__voltar {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; font-size: .85rem; letter-spacing: .08em;
    color: var(--text-muted);
    transition: color var(--dur) var(--ease);
}
.post__voltar::before { content: "←"; font-style: normal; }
.post__voltar:hover { color: var(--acao); }

.post__data {
    display: block; margin-top: 2.2rem;
    font-size: var(--t-mini); letter-spacing: .14em;
    color: var(--origem-claro);
}
.post__titulo {
    font-size: clamp(1.7rem, 3.1vw, 2.5rem);
    margin-top: .8rem;
    /* Sem teto próprio: quem limita é o bloco de 62rem. */
    max-width: none;
    /* A entrelinha global dos títulos é 0,92, que serve para uma linha só. Em
       título de notícia, que costuma ter três ou mais, o cedilha de uma linha
       encosta no acento da seguinte. */
    line-height: 1.1;
    text-wrap: balance;
}
.post__resumo {
    margin: 1.4rem auto 0; max-width: 58ch;
    font-size: 1.08rem; line-height: 1.6; color: var(--text-muted);
}

/* ---------------------------------------------------------------- Foto --- */
.post__midia {
    margin: clamp(2.5rem, 6vh, 4rem) auto 0;
    max-width: 62rem;
}
.post__midia img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 16 / 9; object-fit: cover;
    background: var(--cetim);
}

/* --------------------------------------------------------------- Corpo --- */
.post__corpo {
    max-width: 40rem; margin: clamp(2.5rem, 6vh, 4rem) auto 0;
    color: var(--text-muted);
    font-size: 1.05rem; line-height: 1.75;
}
.post__corpo > * + * { margin-top: 1.3rem; }

.post__corpo h2, .post__corpo h3, .post__corpo h4 {
    color: var(--text);
    margin-top: 2.6rem; margin-bottom: -.4rem;
}
.post__corpo h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.post__corpo h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.post__corpo h4 { font-size: 1.15rem; }

.post__corpo strong { color: var(--text); font-weight: 600; }
.post__corpo a {
    color: var(--text);
    border-bottom: 1px solid var(--origem-claro);
    transition: color var(--dur) var(--ease);
}
.post__corpo a:hover { color: var(--origem-claro); }

.post__corpo ul, .post__corpo ol { padding-left: 1.3rem; }
.post__corpo li + li { margin-top: .5rem; }
.post__corpo ul { list-style: none; padding-left: 0; }
.post__corpo ul li { padding-left: 1.5rem; position: relative; }
.post__corpo ul li::before {
    content: ""; position: absolute; left: 0; top: .8em;
    width: 9px; height: 1px; background: var(--origem-claro);
}

.post__corpo blockquote {
    margin-block: 2.2rem; padding-left: 1.5rem;
    border-left: 2px solid var(--origem-claro);
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.35;
    color: var(--text);
}
.post__corpo blockquote p { margin: 0; }

/* Imagem dentro do texto respira para fora da coluna de leitura. */
.post__corpo img, .post__corpo figure {
    display: block; width: 100%; height: auto;
    margin-block: 2.2rem;
}
.post__corpo figure img { margin-block: 0; }
.post__corpo figcaption {
    margin-top: .7rem; font-size: var(--t-mini); color: var(--text-dim);
}
@media (min-width: 900px) {
    .post__corpo figure, .post__corpo > img { width: calc(100% + 8rem); margin-inline: -4rem; }
}

.post__corpo hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.6rem; }

/* ------------------------------------------------------------- Navegar --- */
.post__navegar {
    max-width: 62rem;
    margin-top: clamp(3rem, 8vh, 5rem); padding-top: 2rem;
    border-top: 1px solid var(--line);
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
}
.post__salto { display: grid; gap: .5rem; }
.post__salto--pro { text-align: right; grid-column: 2; }
.post__salto span {
    font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-dim);
}
.post__salto strong {
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; font-size: 1.15rem; line-height: 1.2;
    color: var(--text);
    transition: color var(--dur) var(--ease);
}
.post__salto:hover strong { color: var(--acao); }

@media (max-width: 720px) {
    .post__navegar { grid-template-columns: 1fr; }
    .post__salto--pro { text-align: left; grid-column: 1; }
}