/* ==========================================================================
   FRONT-PAGE.CSS — home PDR Pneus
   ========================================================================== */

/* ==========================================================================
   1. HERO — pneu em vídeo girado pela rolagem
   --------------------------------------------------------------------------
   .hero é um trilho alto. Dentro dele .hero__palco fica preso na tela
   enquanto o trilho passa, e o quanto já passou vira o tempo do vídeo. Quando
   o trilho acaba, o palco solta e a página segue. A altura do trilho é o que
   define quanta rolagem custa uma volta do pneu: está em --hero-trilho.
   ========================================================================== */

.hero {
    position: relative;
    height: var(--hero-trilho);

    /* Onde o pneu fica no palco. No computador ele vai para a direita, com o
       texto ocupando a esquerda; no celular volta para o centro. O valor é
       calculado para o pneu começar depois de onde a coluna de texto acaba:
       abaixo de 70% o título encosta na borracha. */
    --hero-x: 75%;
    --hero-y: 50%;
}

/* Sem vídeo e sem poster o trilho alto seriam três telas de nada. */
.hero--seco { height: 100vh; height: 100svh; }

.hero__palco {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    overflow: hidden;
}

/* -------------------------------------------------------------- Vídeo --- */
/* O quadro é posicionado pelo centro do pneu, não pelo centro do arquivo: no
   vídeo atual o pneu ocupa de 6% a 74% da altura, então seu centro está a 40%.
   Daí o translateY de -40%, que alinha o centro do pneu com o centro do palco
   qualquer que seja o tamanho da tela. */
.hero__quadro {
    position: absolute;
    left: var(--hero-x); top: var(--hero-y);
    transform: translate(-50%, -40%);

    /* Mais alto que o palco de propósito: as bordas superior e inferior do
       arquivo ficam fora da tela e não há emenda horizontal para disfarçar. */
    height: var(--hero-escala);
    aspect-ratio: 9 / 16;

    /* As bordas laterais continuam dentro da tela, então esmaecem para o
       fundo. As cores dos dois lados já batem (ver variables.css); a máscara
       resolve o resto, inclusive no celular, onde o topo do arquivo entra. */
    --mascara-h: linear-gradient(to right,
        transparent 0, #000 var(--hero-fade),
        #000 calc(100% - var(--hero-fade)), transparent 100%);
    --mascara-v: linear-gradient(to bottom,
        transparent 0, #000 var(--hero-fade),
        #000 calc(100% - var(--hero-fade)), transparent 100%);
    -webkit-mask-image: var(--mascara-h), var(--mascara-v);
    -webkit-mask-composite: source-in;
    mask-image: var(--mascara-h), var(--mascara-v);
    mask-composite: intersect;
}

.hero__video {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Brilho atrás do pneu. O arquivo já traz o seu; este estende o mesmo halo
   para fora do quadro, senão a luz termina numa borda reta. */
.hero__brilho {
    position: absolute;
    left: var(--hero-x); top: var(--hero-y);
    transform: translate(-50%, -50%);
    width: min(105vh, 130vw); aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(34,52,111,.50) 0%,
        rgba(10,26,52,.30) 38%,
        transparent 70%);
}

/* Vinheta: escurece as beiradas para o texto respirar. */
.hero__vinheta {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(125% 90% at var(--hero-x) 50%,
        transparent 42%, rgba(4,10,19,.78) 100%);
}

/* ------------------------------------------------------------ Conteúdo -- */
.hero__conteudo {
    position: absolute; z-index: 3;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
/* Logo abrindo a tela. O tamanho acompanha a janela mas tem teto: acima de
   uns 300px o bloco de marca passa a competir com o pneu em vez de apresentar
   a página. */
.hero__titulo {
    font-size: var(--t-hero);
    /* 11ch quebra depois de "PARA", como na referência. text-wrap:balance
       aqui atrapalha: ele iguala o comprimento das linhas e joga o título
       para três. */
    max-width: 11ch;
}
/* A coluna de texto tem teto próprio para nunca correr por baixo do pneu,
   qualquer que seja a largura da janela. */
.hero__conteudo > * {
    max-width: min(52%, 36rem);
}
.hero__linha {
    color: var(--text-muted);
    max-width: 34ch; margin-top: 1.2rem; font-size: 1rem;
}

/* O texto fica firme durante a volta inteira. A versão anterior o apagava
   enquanto o pneu girava, e o efeito lia como falha de carregamento. */

/* ---------------------------------------------------------- Dica e barra -*/
/* A dica acompanha a coluna de texto em vez de ficar centralizada: no centro
   ela cairia em cima do pneu, que no computador ocupa a direita. */
.hero__dica {
    position: absolute; left: 0; right: 0; bottom: 2.4rem;
    padding-inline: max(var(--wrap-pad), calc(50% - var(--wrap) / 2 + var(--wrap-pad)));
    z-index: 5; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-dim);
    transition: opacity .4s var(--ease);
}
.hero__dica::after {
    content: ""; display: block; width: 1px; height: 26px; margin-top: .6rem;
    background: linear-gradient(to bottom, var(--text-dim), transparent);
}
.is-girando .hero__dica { opacity: 0; }

/* A barra é o único aviso de que a página está travada de propósito. Sem ela
   a rolagem parada lê como travamento, não como recurso. */
.hero__barra {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    height: 2px; background: var(--line);
    opacity: 0; transition: opacity .4s var(--ease);
}
/* Serve aos dois trilhos: o seletor não amarra na classe .hero, senão a barra
   ficaria invisível na seção das camadas, que usa a mesma peça.

   O estado completo entra junto para a barra ser vista chegando ao fim — sem
   ele ela desaparecia nos últimos 3%, sempre antes de encher. */
.is-girando .hero__barra,
.is-completo .hero__barra { opacity: 1; }
/* scaleX em vez de width: largura anima na thread de layout e engasga junto
   com o seek do vídeo, justo no momento em que ele já está caro.
   Verde e não amarelo: a barra mostra progresso, e progresso não é ação. */
.hero__barra span {
    display: block; height: 100%; width: 100%;
    background: var(--origem-claro);
    transform: scaleX(0); transform-origin: left center;
}

@media (max-width: 1100px) {
    .hero { --hero-x: 70%; }
    .hero__conteudo > * { max-width: min(56%, 28rem); }
}

@media (max-width: 900px) {
    /* No celular o texto fica na faixa de cima e o pneu na de baixo, sem se
       cruzarem: --hero-y desce o quadro para a metade inferior e a escala
       encolhe o pneu o bastante para ele caber inteiro ali. Antes os botões
       caíam em cima da borracha e o pneu ficava cortado no rodapé. */
    .hero {
        --hero-x: 50%;
        --hero-y: 66%;
        --hero-escala: 96%;
        --hero-trilho: 260vh;
    }
    /* No celular o quadro é dimensionado pela largura: pelo lado da altura,
       o pneu ficaria mais largo que a tela e sairia cortado nas duas pontas. */
    .hero__quadro { height: auto; width: 108%; }

    .hero__conteudo {
        top: calc(var(--topo-h) + 1.4rem);
        transform: none;
        text-align: center;
    }
    .hero__titulo, .hero__linha { margin-inline: auto; }
    .hero__titulo { font-size: clamp(2.2rem, 10vw, 3.2rem); max-width: 9ch; }
    .hero__conteudo > * { max-width: 100%; }
    .hero__linha  { max-width: 30ch; }
    .hero__dica   { text-align: center; padding-inline: var(--wrap-pad); }
    .hero__dica::after { margin-inline: auto; }
    /* Véu leve atrás do texto. Com o pneu deslocado para baixo ele quase não
       é mais necessário, mas protege quando a tela é muito baixa e as duas
       faixas se aproximam. */
    .hero__conteudo::before {
        content: ""; position: absolute; inset: -1.5rem -100vw;
        z-index: -1; pointer-events: none;
        background: linear-gradient(to bottom, rgba(4,10,19,.9) 45%, transparent 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Sem scrub o trilho não tem função: vira uma tela só, com o pôster. */
    .hero { height: 100vh; height: 100svh; }
    .hero.is-girando .hero__dica { opacity: 1; }
    .hero__barra { display: none; }
}


/* ==========================================================================
   2. PRODUTOS
   --------------------------------------------------------------------------
   Colunas separadas por fio, sem card e sem sombra: card fechado é o que mais
   aproxima esta página de um template genérico. A grade se ajusta à
   quantidade cadastrada, e a seção inteira não é impressa quando não há
   nenhum produto (a decisão está em template-parts/home/produtos.php).
   ========================================================================== */

/* Colunas de larguras iguais, com o fio no meio do vão.
   Antes o espaçamento vinha de padding nos itens, e o do meio ficava com
   padding dos dois lados enquanto os das pontas tinham de um só — resultado:
   a coluna central era mais estreita e a foto dela saía mais baixa que as
   outras, desalinhando a faixa inteira. */
.produtos {
    display: grid;
    grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr));
    column-gap: var(--vao, clamp(1.6rem, 3.6vw, 3rem));
    margin-top: 3.5rem;
}
.produtos[data-colunas="2"] { --colunas: 2; }
.produtos[data-colunas="1"] { --colunas: 1; max-width: 46ch; }

.produto { position: relative; }
.produto + .produto::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(var(--vao, clamp(1.6rem, 3.6vw, 3rem)) / -2);
    width: 1px; background: var(--line);
}

.produto__midia { display: block; margin-bottom: 1.5rem; }
.produto__foto {
    width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
    transition: transform .6s var(--ease);
}
.produto__midia:hover .produto__foto { transform: scale(1.04); }

/* Produto sem foto numa lista em que outros têm: mantém o alinhamento das
   colunas sem fingir que existe imagem. */
.produto__sem-foto {
    display: block; width: 100%; aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    background: linear-gradient(160deg, rgba(18,32,63,.5), rgba(4,10,19,0));
}

.produto__etiqueta {
    display: block; font-size: var(--t-mini); color: var(--text-dim);
    margin-bottom: .35rem;
}
.produto__nome { font-size: var(--t-item); margin-bottom: .55rem; }
.produto__nome a { transition: color var(--dur) var(--ease); }
.produto__nome a:hover { color: var(--acao); }
.produto__texto { font-size: .94rem; color: var(--text-muted); }
.produto__medida {
    margin-top: 1.3rem; padding-top: .9rem;
    border-top: 1px solid var(--line);
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    font-size: 1.1rem; color: var(--origem-claro);
}

@media (max-width: 860px) {
    .produtos, .produtos[data-colunas="2"] { grid-template-columns: 1fr; gap: 3rem; }
    .produto + .produto::before {
        width: auto; height: 1px; left: 0; right: 0; top: -1.5rem; bottom: auto;
    }
}


/* ==========================================================================
   3. FEITO PARA A ESTRADA BRASILEIRA
   ========================================================================== */

.brasil {
    display: grid; grid-template-columns: .85fr 1.15fr;
    gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
/* --mapa é a montagem da seção atrasada: o mapa só começa a se desenhar
   depois que o título e o texto entraram, na ordem de leitura. Sem
   JavaScript --montagem fica em 1 e o mapa aparece pronto. */
.brasil__figura {
    margin: 0; --traco: 900;
    --mapa: clamp(0, calc((var(--montagem, 1) - .34) * 1.6), 1);
}
.brasil__mapa { width: 100%; height: auto; max-height: 62vh; overflow: visible; }

/* O contorno se desenha na primeira metade da montagem. Aqui o dashoffset
   funciona — ao contrário da curva de fundo, este SVG tem viewBox uniforme,
   então getTotalLength() e o traço vivem no mesmo sistema de coordenadas. */
.brasil__contorno {
    fill: rgba(233,239,250,.025);
    stroke: var(--line);
    stroke-width: .5;
    stroke-linejoin: round;
    stroke-dasharray: var(--traco);
    stroke-dashoffset: calc(var(--traco) * (1 - clamp(0, calc(var(--mapa) / .5), 1)));
    /* o preenchimento entra depois do traço fechar */
    fill-opacity: clamp(0, calc((var(--mapa) - .5) * 4), 1);
}

/* Cada ponto tem sua vez: --ordem é a latitude normalizada, então o mapa se
   preenche de norte a sul. A multiplicação por 9 encurta a transição de cada
   ponto para ele aparecer com estalo em vez de desbotar. */
.brasil__mapa circle {
    fill: var(--text);
    transform-box: fill-box;
    transform-origin: center;
    opacity: calc(.5 * clamp(0, calc((var(--montagem) - var(--ordem, 0)) * 9), 1));
    transform: scale(clamp(.2, calc((var(--montagem) - var(--ordem, 0)) * 9), 1));
}
/* Verde nos pontos fortes: a seção é sobre território, não sobre clicar. */
.brasil__mapa circle.is-forte {
    fill: var(--origem-claro);
    opacity: clamp(0, calc((var(--montagem) - var(--ordem, 0)) * 9), 1);
}
/* O pulso só começa depois do mapa montado, senão briga com a entrada. */
.brasil__figura.is-montado circle.is-forte {
    animation: pulso 4.5s var(--atraso, 0s) infinite ease-in-out;
}
@keyframes pulso {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .brasil__figura { --mapa: 1; }
    .brasil__mapa circle.is-forte { animation: none; }
    .brasil__contorno { stroke-dashoffset: 0; }
}

.brasil__nota {
    margin-top: 1.5rem; font-size: var(--t-mini); color: var(--text-dim);
    max-width: 34ch;
}

@media (max-width: 860px) {
    .brasil { grid-template-columns: 1fr; }
    .brasil__figura { order: 2; }   /* texto em cima, mapa embaixo */
    .brasil__mapa { max-height: 42vh; }
}


/* ==========================================================================
   4. CONTATO
   ========================================================================== */

.contato { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); }
.contato__pitch .titulo { font-size: clamp(2.4rem, 5.5vw, 4rem); max-width: 14ch; }
.contato__lista { display: grid; gap: .8rem; margin-top: 1.8rem; color: var(--text-muted); }
.contato__lista li { padding-left: 1.5rem; position: relative; }
.contato__lista li::before {
    content: ""; position: absolute; left: 0; top: .65em;
    width: 9px; height: 1px; background: var(--origem-claro);
}
.contato__atalho { margin-top: 1.8rem; color: var(--text-muted); font-size: .94rem; }
.contato__atalho a { color: var(--text); border-bottom: 1px solid var(--line-forte); }
.contato__atalho a:hover { border-color: var(--acao); }

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


/* ==========================================================================
   5. O LANÇAMENTO
   --------------------------------------------------------------------------
   Substituiu o diagrama de custo, que era o único infográfico do site e por
   isso lia como peça de outra página. Aqui a data é o objeto: número grande em
   display, relógio ao lado, dados embaixo.
   ========================================================================== */

.secao--lancamento { border-block: 1px solid var(--line); }

/* Tudo centrado: a data em cima, como carimbo, e o resto embaixo dela. */
.lancamento {
    display: grid; justify-items: center;
    gap: clamp(1.6rem, 4vw, 2.6rem);
    text-align: center;
}

/* Sem teto de largura: o de 16ch herdado de .titulo quebrava
   "O lançamento da PDR" deixando "PDR" sozinho na segunda linha. Quem limita
   aqui é a própria coluna da grade, que já é larga o bastante. */
.lancamento .titulo { max-width: none; }
.lancamento .apoio  { max-width: 54ch; margin-inline: auto; }

/* A data em pilha, como carimbo. Entra antes do resto na montagem. */
.lancamento__data {
    display: grid; justify-items: center; align-content: center;
    min-width: 9.5rem;
    padding: 1.6rem 1.4rem;
    border: 1px solid var(--line-forte);
    line-height: .9;
    opacity: clamp(0, calc(var(--montagem) * 4), 1);
    transform: scale(calc(.92 + .08 * clamp(0, calc(var(--montagem) * 4), 1)));
}
.lancamento__dia {
    font-family: var(--f-display); font-style: italic; font-weight: 800;
    font-size: clamp(3.6rem, 7vw, 5.4rem); color: var(--text);
    font-variant-numeric: tabular-nums;
}
.lancamento__mes {
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; font-size: 1.45rem; letter-spacing: .1em;
    color: var(--origem-claro); margin-top: .4rem;
}
.lancamento__ano {
    font-size: var(--t-mini); letter-spacing: .26em; color: var(--text-muted);
    margin-top: .55rem;
}

/* ------------------------------------------------------------- Relógio --- */
.relogio {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: .3rem 1.5rem; width: 100%;
    margin-top: 2rem; padding: 1.2rem 0;
    border-block: 1px solid var(--line);
}
.relogio__rotulo {
    font-size: var(--t-mini); letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-dim); width: 100%; text-align: center;
}
.relogio__peca { display: flex; align-items: baseline; gap: .3rem; }
.relogio__peca b {
    font-family: var(--f-display); font-style: italic; font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1;
    /* Tabular para os segundos não empurrarem o resto a cada tique. */
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.relogio__peca i {
    font-style: normal; font-size: var(--t-mini); color: var(--text-muted);
}
.relogio__espera, .relogio__hoje {
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; font-size: 1.6rem; color: var(--origem-claro);
}

/* --------------------------------------------------------------- Dados ---
   Horário e endereço migraram para a coluna da direita, que antes era um vão
   vazio ao lado do relógio. A seção encolheu junto. */
.lancamento__corpo {
    display: grid;
    /* Uma coluna só. A segunda, herdada do layout anterior, continuava
       reservando espaço à direita e empurrava todo o conteúdo para a
       esquerda, mesmo com o texto centralizado dentro dele. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titulo" "apoio" "relogio" "dados" "prazo";
    justify-items: center;
    width: 100%;
}
.lancamento__corpo > .titulo { grid-area: titulo; }
.lancamento__corpo > .apoio  { grid-area: apoio; }
.lancamento__corpo > .relogio { grid-area: relogio; }
.lancamento__corpo > .lancamento__dados { grid-area: dados; }
.lancamento__corpo > .lancamento__prazo { grid-area: prazo; }

.lancamento__dados {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem clamp(2rem, 6vw, 4rem);
    margin: .6rem 0 0; width: 100%; max-width: 46rem;
}
.lancamento__dados > div { padding-top: 1rem; border-top: 1px solid var(--line); }
.lancamento__dados dt {
    font-size: var(--t-mini); letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: .5rem;
}
/* O navegador dá 40px de recuo ao <dd> por padrão, e era isso que deixava o
   horário e o endereço desalinhados dos próprios rótulos. */
.lancamento__dados dd { margin: 0; color: var(--text-muted); line-height: 1.55; }
.lancamento__dados dd p { margin: 0; }

.lancamento__prazo {
    margin-top: 1.4rem; font-size: var(--t-mini); color: var(--text-dim);
}

@media (max-width: 640px) {
    .lancamento__dados { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 720px) {
    .lancamento .titulo { max-width: 16ch; margin-inline: auto; }
}
}


/* ==========================================================================
   5b. ÚLTIMAS DA PDR
   ========================================================================== */

.noticias__topo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
}
.noticias__todas {
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; font-size: .95rem; letter-spacing: .06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line-forte); padding-bottom: 2px;
}
.noticias__todas:hover { color: var(--acao); border-color: var(--acao); }

/* Vão maior que o dos produtos: aqui cada bloco tem foto, data, título,
   resumo e link, e com o espaçamento anterior os cinco ficavam espremidos
   contra o fio do vizinho. */
.noticias {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    column-gap: clamp(2.4rem, 5vw, 4.5rem);
    margin-top: 3.2rem;
}
/* Coluna em flex para o link poder ser empurrado à base: com resumos de
   tamanhos diferentes, os três "Ler notícia" terminavam em alturas
   diferentes e a faixa perdia a linha de base. */
.noticia { position: relative; display: flex; flex-direction: column; }
.noticia + .noticia::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(var(--vao, clamp(1.6rem, 3.6vw, 3rem)) / -2);
    width: 1px; background: var(--line);
}
/* A proporção fica na moldura e a foto preenche por dentro, em posição
   absoluta. Com aspect-ratio direto na <img>, os atributos width e height que
   o WordPress escreve na tag ganham em alguns navegadores e cada notícia
   saía com uma altura, que era o que deixava a faixa desalinhada. */
.noticia__midia {
    display: block; position: relative;
    /* 3:2 em vez de 16:10: menos achatado, e é a proporção em que a maioria
       das fotos de celular já vem. */
    aspect-ratio: 3 / 2; overflow: hidden;
    margin-bottom: 1.4rem;
    background: var(--cetim);
}
.noticia__foto {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .6s var(--ease);
}
.noticia__midia:hover .noticia__foto { transform: scale(1.04); }

.noticia__data {
    display: block; font-size: var(--t-mini); color: var(--origem-claro);
    letter-spacing: .12em; margin-bottom: .7rem;
}
.noticia__titulo {
    font-size: var(--t-item); line-height: 1.2;
    margin-bottom: .8rem; text-wrap: pretty;
}
.noticia__titulo a { transition: color var(--dur) var(--ease); }
.noticia__titulo a:hover { color: var(--acao); }
.noticia__resumo { font-size: .94rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 1.1rem; }

/* O link fecha o bloco: sem ele a coluna terminava no meio de um parágrafo
   cortado e ficava com cara de bloco inacabado. */
.noticia__ler {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: auto; padding-top: .9rem;
    border-top: 1px solid var(--line);
    width: 100%;
    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);
}
.noticia__ler::after {
    content: "→"; font-style: normal;
    transition: transform var(--dur) var(--ease);
}
.noticia__ler:hover { color: var(--acao); }
.noticia__ler:hover::after { transform: translateX(4px); }

@media (max-width: 860px) {
    .noticias { grid-template-columns: 1fr; gap: 2.5rem; }
    .noticia + .noticia::before {
        width: auto; height: 1px; left: 0; right: 0; top: -1.25rem; bottom: auto;
    }
}


/* ==========================================================================
   6. POR QUE UMA MARCA NOVA
   --------------------------------------------------------------------------
   Sem animação de propósito: depois de duas seções que se montam com a
   rolagem, o silêncio aqui pesa mais que qualquer movimento.
   ========================================================================== */

.secao--marca { border-block: 1px solid var(--line); }

/* Texto à esquerda, caminhão à direita. Tudo alinhado à esquerda numa coluna
   só: antes o título ficava numa coluna e o corpo em outra, e as duas cheias
   não deixavam espaço para o vídeo. */
.marca-nova {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "titulo  midia"
                         "texto   midia";
    gap: 0 clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.marca-nova__titulo { grid-area: titulo; align-self: end; }
.marca-nova__texto  { grid-area: texto; align-self: start; }
.marca-nova__midia  { grid-area: midia; }
.marca-nova__titulo {
    font-size: var(--t-secao); max-width: 12ch;
    margin-bottom: 1.6rem;
}
.marca-nova__abertura {
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; font-size: var(--t-destaque);
    line-height: 1.05; color: var(--text);
    margin-bottom: 1.4rem; max-width: 20ch;
}
.marca-nova__texto p { color: var(--text-muted); max-width: 48ch; }
.marca-nova__assinatura {
    margin-top: 1.8rem; padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    color: var(--text) !important;
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; font-size: 1.15rem;
    max-width: 28ch;
}

/* O arquivo já nasce com os cantos no azul da página; a máscara cobre o
   resto e protege de qualquer vídeo futuro que venha com a borda diferente. */
.marca-nova__midia {
    --m-h: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
    --m-v: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-image: var(--m-h), var(--m-v);
    -webkit-mask-composite: source-in;
    mask-image: var(--m-h), var(--m-v);
    mask-composite: intersect;
}
.marca-nova__video {
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: cover; display: block;
}

/* Sem vídeo a coluna some e o texto volta a ocupar a largura toda. */
.secao--marca-seca .marca-nova { grid-template-columns: 1fr; }

@media (max-width: 860px) {
    /* No celular o caminhão sobe para logo abaixo do título: lá embaixo, no
       fim do texto, ele só era visto por quem rolava até o fim da seção. */
    .marca-nova {
        grid-template-columns: 1fr;
        grid-template-areas: "titulo" "midia" "texto";
        gap: 1.4rem 0;
    }
    .marca-nova__titulo { align-self: auto; margin-bottom: 0; }
}


/* ==========================================================================
   7. POR DENTRO DO PNEU — vídeo em largura total
   --------------------------------------------------------------------------
   Mesmo mecanismo do hero: trilho alto com o palco preso dentro. A diferença
   é o enquadramento — aqui o vídeo sangra na largura toda, então as quatro
   bordas do arquivo tocam a tela e o esmaecimento precisa cobrir os quatro
   lados, não só as laterais.

   O trilho é mais curto que o do hero de propósito: o arquivo tem 2,25s e
   135 quadros. Curso longo demais espalharia esses quadros por rolagem
   demais e o movimento apareceria aos saltos.
   ========================================================================== */

/* 280vh porque o trilho agora carrega três tempos — texto, vídeo e pausa — em
   vez de só o vídeo. */
.camadas {
    position: relative;
    height: 280vh;
}

.camadas__quadro {
    position: absolute; inset: 0;
    /* O arquivo já nasce com fundo praticamente igual ao da página — medi
       #000911 nos cantos contra #040A13 daqui. A máscara cobre o resto e
       protege de qualquer vídeo futuro que venha com a borda diferente. */
    --m-h: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    --m-v: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: var(--m-h), var(--m-v);
    -webkit-mask-composite: source-in;
    mask-image: var(--m-h), var(--m-v);
    mask-composite: intersect;
}

.camadas__video {
    width: 100%; height: 100%;
    object-fit: cover;
    /* O pneu vive na metade direita do quadro; ancorar à direita mantém ele
       inteiro quando a tela é mais estreita que 16:9 e o corte é lateral. */
    object-position: 68% center;
}

.camadas__vinheta {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to right, var(--noite) 0%, rgba(4,10,19,.72) 34%, transparent 62%),
        radial-gradient(120% 90% at 68% 50%, transparent 45%, rgba(4,10,19,.7) 100%);
}

.camadas__conteudo {
    position: absolute; z-index: 3;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
}
.camadas__titulo {
    font-size: var(--t-secao);
    max-width: 11ch;
}
.camadas__texto {
    color: var(--text-muted);
    max-width: 34ch; margin-top: 1.2rem;
}
.camadas__conteudo > * { max-width: min(42%, 30rem); }

/* Entrada escalonada: o título primeiro, o parágrafo logo atrás, e só então
   o vídeo começa a rodar (a fase está em data-fase-video no template). Cada
   peça tem sua vez, e o texto fica de pé até o fim — apagá-lo depois de tê-lo
   trazido contradiria a própria sequência.

   --p é o progresso do trilho, escrito por app.js. */
.camadas__titulo,
.camadas__texto {
    opacity: clamp(0, calc((var(--p, 1) - var(--vez, 0)) * 7), 1);
    transform: translateY(calc(14px * (1 - clamp(0, calc((var(--p, 1) - var(--vez, 0)) * 7), 1))));
}
.camadas__titulo { --vez: .03; }
.camadas__texto  { --vez: .17; }

/* O vídeo só aparece depois que o texto assentou. */
.camadas__quadro {
    opacity: clamp(.15, calc((var(--p, 1) - .20) * 8), 1);
}

@media (max-width: 900px) {
    .camadas { height: 250vh; }
    /* Numa tela de celular o quadro só enxerga 26% da largura do arquivo, e o
       pneu ocupa 57% dela: com tela cheia ele nunca cabe. Aqui o vídeo vira
       uma faixa no alto do palco, e o texto desce para baixo dela. */
    /* Valores conferidos direto no aparelho. O -24vh substitui o -178px que
       saiu do teste: em pixel fixo o pneu subiria ou desceria conforme a
       altura do celular; em vh ele mantém a mesma posição em qualquer um.
       Numa tela de 740px de altura, os dois dão o mesmo resultado. */
    .camadas__quadro {
        inset: auto 0 auto 0;
        top: 12vh;
        height: 81vh;
        margin-top: -24vh;
    }
    .camadas__video { object-position: 51% center; }
    .camadas__conteudo {
        top: auto; bottom: 14vh; transform: none;
    }
    .camadas__conteudo > * { max-width: 100%; }
    .camadas__titulo { font-size: clamp(2rem, 9vw, 3rem); max-width: 12ch; }
    .camadas__texto  { max-width: 32ch; }
    .camadas__vinheta {
        background: linear-gradient(to top, var(--noite) 6%, rgba(4,10,19,.6) 34%, transparent 60%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .camadas { height: 100vh; height: 100svh; }
    .camadas.is-girando .camadas__conteudo { opacity: 1; }
}