/* ==========================================================================
   Duarte Júnior 4010 — Landing Page 2026
   Namespace .dj-*  (não conflita com o .aps-* da LP anterior)
   Referência: assets/Images/3188.3_LandPage.pdf
   ========================================================================== */

/* Fonte display da marca — a mesma da LP anterior (LP-Duarte).
   É estática, peso único: nada de font-weight/font-stretch aqui, senão o
   navegador sintetiza negrito e engorda o traço. */
@font-face {
    font-family: 'Boldonse';
    src: url('../fonts/Boldonse/Boldonse.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --dj-azul:      #0000FA;
    --dj-azul-esc:  #00008C;
    --dj-verde:     #6FB55F;
    --dj-amarelo:   #FFCA08;
    --dj-vermelho:  #C4382F;
    --dj-cinza:     #F0F0F0;
    --dj-tinta:     #16161A;
    --dj-branco:    #FFFFFF;

    --dj-display: 'Boldonse', 'Archivo', 'Arial Narrow', system-ui, sans-serif;
    --dj-texto:   'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --dj-shell:   1573px;
    --dj-gutter:  clamp(1.25rem, 4vw, 4.8rem);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body.dj-lp {
    margin: 0;
    font-family: var(--dj-texto);
    color: var(--dj-tinta);
    background: var(--dj-branco);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.dj-lp *,
.dj-lp *::before,
.dj-lp *::after { box-sizing: border-box; }

.dj-lp img { max-width: 100%; display: block; }

.dj-shell {
    width: 100%;
    max-width: var(--dj-shell);
    margin-inline: auto;
    padding-inline: var(--dj-gutter);
}

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

/* Título display: Boldonse — o condensado pesado do material impresso */
.dj-display {
    font-family: var(--dj-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: -.005em;
    margin: 0;
}

/* Rótulo dos pilares: mesma display da marca, só sem o aperto de tracking */
.dj-geo {
    font-family: var(--dj-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0;
}

/* Grifo — a caixa colorida atrás de uma palavra.

   O padding de cima é grande e o de baixo é zero de propósito. A Boldonse tem
   uma descendente larga (~0.30em) que entra na caixa inline mesmo quando não
   há letra descendente: medindo os pixels pintados, "MAIS VOZ" tinha 4px de
   folga acima e 31px abaixo. Como a caixa de fundo de um elemento inline é a
   área de conteúdo da fonte — e `line-height` não a altera, só o padding —,
   centralizar exige empurrar o texto para baixo com padding-top.

   Não vira `inline-block`: isso resolveria a altura, mas tornaria o grifo
   inquebrável, e grifos de duas palavras ("pequenos negócios") precisam poder
   quebrar em telas estreitas.

   A correção pertence à FONTE, não ao lugar: por isso o valor forte fica em
   `.dj-display .dj-grifo`. No texto corrido (DM Sans, no fecho) a descendente
   é bem menor e o mesmo padding jogava a palavra 18px para baixo. */
.dj-grifo {
    padding: 0 .28em .177em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Títulos display usam Boldonse — descendente larga, correção grande. */
.dj-display .dj-grifo {
    padding: .284em .28em 0;
}
.dj-grifo--verde    { background: var(--dj-verde);    color: var(--dj-branco); }
.dj-grifo--azul     { background: var(--dj-azul);     color: var(--dj-branco); }
.dj-grifo--vermelho { background: var(--dj-vermelho); color: var(--dj-branco); }

/* --------------------------------------------------------------------------
   Cabeçalho — transparente sobre o hero, sólido depois da rolagem
   -------------------------------------------------------------------------- */
.dj-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    padding-block: .9rem;
    transition: background-color .25s ease, box-shadow .25s ease;
}
.dj-header.is-preso {
    background: var(--dj-azul);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}

.dj-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.dj-header__marca img { height: 34px; width: auto; }

.dj-nav ul {
    display: flex;
    gap: clamp(1rem, 2.2vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.dj-nav a {
    color: var(--dj-branco);
    text-decoration: none;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding-block: .35rem;
    border-bottom: 2px solid transparent;
    transition: border-color .2s ease;
}
.dj-nav a:hover,
.dj-nav a:focus-visible { border-bottom-color: var(--dj-amarelo); }

.dj-header__right { display: flex; align-items: center; gap: 1rem; }

.dj-social { display: flex; gap: .6rem; }
.dj-social a {
    display: grid;
    place-items: center;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    color: var(--dj-azul);
    background: var(--dj-amarelo);
    text-decoration: none;
    font-size: .9rem;
    transition: transform .2s ease;
}
.dj-social a:hover { transform: translateY(-2px); }

.dj-burger {
    display: none;
    background: var(--dj-amarelo);
    color: var(--dj-azul);
    border: 0;
    border-radius: .5rem;
    width: 2.6rem; height: 2.6rem;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Menu mobile */
.dj-menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--dj-azul);
    padding: 1.5rem var(--dj-gutter) 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transform: translateX(100%);
    transition: transform .3s ease;
    visibility: hidden;
}
.dj-menu-mobile.is-open { transform: none; visibility: visible; }

.dj-menu-mobile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dj-menu-mobile__top img { height: 42px; width: auto; }
.dj-menu-mobile__fechar {
    background: none;
    border: 0;
    color: var(--dj-amarelo);
    font-size: 1.6rem;
    cursor: pointer;
}
.dj-menu-mobile ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.dj-menu-mobile a {
    color: var(--dj-branco);
    text-decoration: none;
    font-family: var(--dj-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.17rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   1. HERO

   A arte (D amarelo, recorte e assinatura) sangra pela borda esquerda da
   janela, como na arte impressa — por isso o grid do hero não usa o .dj-shell:
   a coluna da esquerda começa no pixel zero e o respiro fica só na direita.
   As medidas abaixo saem do PDF, em fração da largura da página:
   D até 46%, ombro do Duarte em 40%, assinatura de 15% a 53%, form de 56% a 93%.
   -------------------------------------------------------------------------- */
.dj-hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
    padding: 0;
    background: #12203A url('../Images/web/hero-bg.jpg') center top / cover no-repeat;
    overflow: hidden;
}

/* escurece a rua o suficiente para o formulário ter contraste */
.dj-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg, rgba(8, 14, 40, .28) 0 36%, rgba(8, 14, 40, .58) 58%, rgba(8, 14, 40, .68) 100%);
}

.dj-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

/* --- coluna da esquerda: o D amarelo, o recorte e a assinatura ---

   O "D" e o recorte precisam dividir o mesmo centro em qualquer proporção de
   tela. Como o D é dimensionado pela ALTURA da coluna (um quadrado de 93%) e a
   posição horizontal se mede pela LARGURA, não dá para acertar os dois com
   porcentagens independentes: o desvio mudava com a proporção da janela —
   -7% da coluna em 1440x900 e -18% em 1920x1080, com ele saindo da bola.

   Com `container-type: size` o `cqh` passa a valer 1% da altura desta coluna,
   e as duas peças passam a ser medidas pela mesma régua. */
.dj-hero__art {
    position: relative;
    align-self: stretch;
    container-type: size;

    --dj-bola: 93cqh;   /* lado do quadrado do D */
    --dj-bola-dir: 15%; /* distância do D até a borda direita da coluna */
}

.dj-hero__d {
    position: absolute;
    right: var(--dj-bola-dir);
    bottom: 0;
    width: var(--dj-bola);
    height: var(--dj-bola);
    /* redundante no desktop, indispensável no mobile: lá a regra troca para
       `width: 60%; height: auto`, e sem a proporção a bola fica com altura 0 */
    aspect-ratio: 1;
    background: var(--dj-amarelo);
    -webkit-mask: url('../Images/web/icone-d-hero.png') no-repeat center / contain;
            mask: url('../Images/web/icone-d-hero.png') no-repeat center / contain;
}

/* O recorte tem a proporção do próprio arquivo, então a caixa e a imagem
   coincidem e o centro da caixa é o centro dele.

   O deslocamento alinha o EIXO DO CORPO dele ao centro da bola, e não o meio
   da imagem: medindo o recorte, cabeça e tronco ficam em 0.428 da largura do
   arquivo. Daí:

     centro da bola, medido da direita = 15% + 93cqh/2         = 15% + 46.5cqh
     eixo dele, medido da direita      = right + 0.572*88.6cqh = right + 50.7cqh
     igualando                          ⇒ right = 15% - 4.2cqh

   (88.6cqh é a largura do recorte: 95cqh de altura na proporção 2400/2573.)
   Trocar o arquivo do recorte exige refazer estas duas medidas. */
.dj-hero__arte {
    position: absolute;
    left: auto;
    top: auto;
    bottom: 0;
    right: calc(var(--dj-bola-dir) - 4.2cqh);
    height: 95cqh;
    aspect-ratio: 2400 / 2573;
}
.dj-hero__foto {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, .35));
}


/* --- coluna da direita: o cadastro --- */
.dj-hero__form {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 6.5rem clamp(1.25rem, 5vw, 6rem) 3rem 1.5rem;
    color: var(--dj-branco);
}

.dj-form__titulo {
    font-size: clamp(.95rem, 2.85vw, 3.42rem);
    color: var(--dj-branco);
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 .15rem .8rem rgba(0, 0, 0, .45);
}

.dj-form__intro {
    margin: .9rem 0 1.6rem;
    text-align: center;
    font-size: clamp(.92rem, 1.25vw, 1.5rem);
    line-height: 1.45;
    text-shadow: 0 .1rem .5rem rgba(0, 0, 0, .5);
}

.dj-form__campos {
    display: grid;
    gap: .7rem;
}

.dj-input {
    width: 100%;
    border: 0;
    border-radius: .3rem;
    background: var(--dj-branco);
    color: var(--dj-tinta);
    font-family: inherit;
    font-size: 1rem;
    padding: .95rem 1.1rem;
}
.dj-input::placeholder { color: #6B6B70; }
.dj-input:focus-visible {
    outline: 3px solid var(--dj-amarelo);
    outline-offset: 2px;
}

.dj-btn {
    display: inline-block;
    border: 0;
    cursor: pointer;
    font-family: var(--dj-display);
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-size: clamp(1.16rem, 1.92vw, 2.3rem);
    letter-spacing: .01em;
    padding: .6rem 1.6rem .7rem;
    border-radius: .2rem;
    background: var(--dj-amarelo);
    color: var(--dj-azul);
    transition: transform .18s ease, filter .18s ease;
}
.dj-btn:hover,
.dj-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.dj-btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.dj-btn--bloco { width: 100%; margin-top: .5rem; }

.dj-btn--azul { background: var(--dj-azul); color: var(--dj-branco); }

.dj-form__nota {
    margin: .7rem 0 0;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 .1rem .4rem rgba(0, 0, 0, .6);
}

.dj-form__msg {
    margin: .6rem 0 0;
    min-height: 1.2em;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    color: var(--dj-amarelo);
}

/* --------------------------------------------------------------------------
   2. NOSSA REGIÃO MERECE MAIS VOZ

   Todas as medidas desta seção em diante saem do PDF em fração da largura
   da página (810pt): título 9.3%, caixa de 10% a 88%, selo 3.2%. Por isso
   os tamanhos são em vw, com teto para não explodir em telas muito largas.
   -------------------------------------------------------------------------- */
.dj-regiao {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3.5rem, 9vw, 10.8rem);
    background: var(--dj-azul-esc) url('../Images/web/bg-regiao.jpg') center / cover no-repeat;
    color: var(--dj-branco);
    text-align: center;
}
.dj-regiao::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 20, 110, .62), rgba(6, 20, 110, .46));
}

.dj-regiao .dj-shell {
    max-width: 1733px;
    padding-inline: clamp(1.25rem, 5vw, 6rem);
}

.dj-regiao__titulo {
    font-size: clamp(1.2rem, 5.65vw, 6.78rem);
    line-height: 1.74;
}

.dj-regiao__caixa {
    margin: clamp(1.8rem, 4.5vw, 5.4rem) auto 0;
    border: 3px solid var(--dj-verde);
    padding: clamp(1.4rem, 3.5vw, 4.2rem);
}
.dj-regiao__caixa p {
    margin: 0 auto;
    max-width: 44rem;
    font-size: clamp(.95rem, 1.6vw, 1.92rem);
    line-height: 1.5;
}

.dj-regiao__selo-wrap {
    text-align: right;
    padding-top: 0;
}
.dj-regiao__selo {
    display: inline-block;
    margin: 0;
    background: var(--dj-verde);
    color: var(--dj-branco);
    font-family: var(--dj-display);
    font-weight: 400;
    font-size: clamp(.9rem, 2.75vw, 3.3rem);
    line-height: 1.25;
    /* mesma correção de centralização vertical da .dj-sou__tag e do grifo:
       a Boldonse deixa mais folga embaixo do que em cima */
    padding: .407em .55em .393em;
}

/* --------------------------------------------------------------------------
   3. QUEM EU SOU

   A caixa azul atravessa quase toda a página (3% a 96%) e a foto passa
   por cima da metade direita, sangrando pela borda da janela.
   -------------------------------------------------------------------------- */
.dj-sou {
    --dj-sou-pad: clamp(2.5rem, 6vw, 7.2rem);
    position: relative;
    padding-block: var(--dj-sou-pad);
    background: var(--dj-branco);
    overflow: hidden;
}

.dj-sou .dj-shell {
    max-width: 1920px;
    padding-inline: clamp(1rem, 3vw, 3.6rem);
}

.dj-sou__grid { position: relative; }

.dj-sou__tag {
    display: inline-block;
    position: relative;
    z-index: 2;
    background: var(--dj-azul);
    color: var(--dj-amarelo);
    font-size: clamp(.9rem, 2.75vw, 3.3rem);
    line-height: 1.25;
    /* mesma correção do grifo, em escala menor: aqui sobravam 4px acima e
       10px abaixo, e como há padding-bottom de sobra a troca não muda a
       altura da caixa */
    padding: .308em .3em .212em;
}

.dj-sou__caixa {
    position: relative;
    border: 3px solid var(--dj-azul);
    padding: clamp(1.4rem, 3.2vw, 3.84rem);
    margin-top: -.4em;
    background: transparent;
}
.dj-sou__caixa p {
    margin: 0 0 1.2em;
    /* A foto é absoluta e sangra pela direita: com `right: calc(50% - 55vw)` e
       `width: 53vw`, a borda esquerda dela cai por volta de metade da grade
       (≈ 50% + 2vw). Só a porcentagem não segura o texto antes disso — em
       1920px as linhas passavam 227px por baixo do braço —, então o teto em vw
       é quem manda a partir de ~1100px de janela. Abaixo de 861px a foto vai
       para cima do texto e este limite deixa de valer.

       O terceiro teto existe porque acima de 1920px o .dj-shell para de
       crescer (max-width) e o vw não: sem ele a sobreposição voltava em telas
       maiores que isso. */
    max-width: min(66%, calc(48vw - 6rem), 50rem);
    font-size: clamp(.92rem, 1.25vw, 1.5rem);
    line-height: 1.6;
}
.dj-sou__caixa p:last-child { margin-bottom: 0; }

/* a foto sangra pela direita e é cortada pela base da seção, como no PDF */
.dj-sou__arte {
    position: absolute;
    z-index: 1;
    top: calc(var(--dj-sou-pad) * -1);
    right: calc(50% - 55vw);
    width: 53vw;
    aspect-ratio: 874 / 1200;
    pointer-events: none;
}
.dj-sou__foto {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top right;
}

/* --------------------------------------------------------------------------
   4. PILARES — três faixas em forma de D

   A faixa é o corpo reto do "D"; a ponta é o próprio ícone da marca, usado
   como máscara. O vazado (triângulo, brilho, arco) deixa passar o amarelo
   de trás — é assim que o ícone é desenhado no material.
   -------------------------------------------------------------------------- */
.dj-pilares { background: var(--dj-branco); }

.dj-pilar {
    --dj-ponta: clamp(4.5rem, 13.6vw, 16.32rem);

    /* Quanto da ponta a faixa NÃO pode invadir. O azul da faixa passa por baixo
       da ponta; onde o ícone é vazado ele mostraria esse azul em vez do amarelo.
       Por isso a reserva é o quanto falta até o vazado começar: o triângulo do
       play abre a 10% do ícone, o arco a 50%. O resto vira largura para a frase,
       que no PDF chega a 88.9% da página. */
    --dj-reserva: var(--dj-ponta);

    position: relative;
    background: var(--dj-amarelo);
}
.dj-pilar--play { --dj-reserva: calc(var(--dj-ponta) * .92); }
.dj-pilar--arco { --dj-reserva: calc(var(--dj-ponta) * .55); }

/* Medidas do PDF: título em 6.05% da página, frase começando em ~36%. */
.dj-pilar__faixa {
    position: relative;
    /* a faixa avança por baixo da ponta; sem isto a ponta (irmã posterior)
       pintaria por cima e cortaria o fim da frase */
    z-index: 1;
    display: flex;
    align-items: center;
    gap: clamp(.6rem, 1.75vw, 2.1rem);
    height: var(--dj-ponta);
    padding-block: 0;
    padding-left: clamp(1rem, 6.05vw, 7.26rem);
    padding-right: clamp(.4rem, 1.2vw, 1.44rem);
}

.dj-pilar--azul .dj-pilar__faixa {
    background: var(--dj-azul);
    color: var(--dj-branco);
    margin-right: var(--dj-reserva);
}

.dj-pilar--claro .dj-pilar__faixa {
    background: var(--dj-branco);
    color: var(--dj-azul);
    margin-left: var(--dj-ponta);
    /* a ponta já ocupa 13.64%; o título entra em 18.21%, como no impresso */
    padding-left: clamp(1rem, 4.57vw, 5.48rem);
}

.dj-pilar__titulo {
    flex: 0 0 auto;
    font-size: clamp(1.07rem, 2.8vw, 3.36rem);
    line-height: 1.25;
}
.dj-pilar--azul .dj-pilar__titulo  { color: var(--dj-branco); }
.dj-pilar--claro .dj-pilar__titulo { color: var(--dj-azul); }

.dj-pilar__texto {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 500;
    font-size: clamp(.85rem, 1.4vw, 1.68rem);
    line-height: 1.35;
}

.dj-pilar__ponta {
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--dj-ponta);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.dj-pilar--azul .dj-pilar__ponta {
    right: 0;
    background: var(--dj-azul);
}
.dj-pilar--claro .dj-pilar__ponta {
    /* no impresso a calota não encosta na borda: sobra uma tira amarela de ~1.2% */
    left: 1.2%;
    background: var(--dj-branco);
    /* icone-brilho.png já vem com a calota do lado esquerdo — espelhar aqui
       jogava a curva para a direita e deixava a faixa com o canto quadrado */
}

.dj-pilar--play .dj-pilar__ponta {
    -webkit-mask-image: url('../Images/web/icone-play.png');
            mask-image: url('../Images/web/icone-play.png');
}
.dj-pilar--brilho .dj-pilar__ponta {
    -webkit-mask-image: url('../Images/web/icone-brilho.png');
            mask-image: url('../Images/web/icone-brilho.png');
}
.dj-pilar--arco .dj-pilar__ponta {
    -webkit-mask-image: url('../Images/web/icone-arco.png');
            mask-image: url('../Images/web/icone-arco.png');
}

/* --------------------------------------------------------------------------
   5. O QUE EU JÁ FIZ
   -------------------------------------------------------------------------- */
.dj-feito { padding-block: clamp(2.5rem, 6vw, 7.2rem) 0; background: var(--dj-branco); }

.dj-feito__cabeca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 6vw, 7.2rem);
    margin-bottom: clamp(1.5rem, 4vw, 4.8rem);
}
.dj-feito__titulo {
    font-size: clamp(1.05rem, 2.8vw, 3.36rem);
    color: var(--dj-verde);
}
.dj-feito__seta {
    flex: 0 0 auto;
    width: clamp(2.2rem, 9.9vw, 11.88rem);
    aspect-ratio: 3 / 2;
    background: var(--dj-verde);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* cada conquista: um bloco-seta colorido + o texto do outro lado */
.dj-conquista {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    isolation: isolate;
    overflow: hidden;
}

.dj-conquista__bloco {
    display: flex;
    align-items: center;
    min-height: clamp(6rem, 19.8vw, 23.76rem);
    padding: 1.5rem 6%;
    color: var(--dj-branco);
}
.dj-conquista__bloco h3 {
    margin: 0;
    font-size: clamp(.69rem, 2.8vw, 3.36rem);
    line-height: 1.83;
}

.dj-conquista__texto {
    display: flex;
    align-items: center;
    padding: 1.5rem 6%;
}
.dj-conquista__texto p {
    margin: 0;
    font-size: clamp(.85rem, 1.6vw, 1.92rem);
    line-height: 1.45;
    max-width: 34rem;
}

/* marca-d'água: o D do material, bem claro, atrás do texto */
.dj-conquista__marca {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: -1;
    width: clamp(7rem, 18vw, 21.6rem);
    aspect-ratio: 1;
    background: var(--dj-cinza);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* seta apontando para a direita: o bloco fica na coluna 1 */
.dj-conquista--dir .dj-conquista__bloco {
    grid-column: 1;
    margin-right: -4%;
    padding-right: 10%;
    clip-path: polygon(0 0, calc(100% - 4rem) 0, 100% 50%, calc(100% - 4rem) 100%, 0 100%);
}
.dj-conquista--dir .dj-conquista__texto {
    grid-column: 2;
    padding-left: 14%;
}
.dj-conquista--dir .dj-conquista__marca { right: 12%; }

/* seta apontando para a esquerda: o bloco fica na coluna 2 */
.dj-conquista--esq .dj-conquista__bloco {
    grid-column: 2;
    justify-content: flex-end;
    text-align: right;
    margin-left: -4%;
    padding-left: 10%;
    clip-path: polygon(4rem 0, 100% 0, 100% 100%, 4rem 100%, 0 50%);
}
.dj-conquista--esq .dj-conquista__texto {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-end;
    padding-right: 14%;
}
.dj-conquista--esq .dj-conquista__texto p { text-align: left; }
.dj-conquista--esq .dj-conquista__marca { left: 12%; }

.dj-conquista--azul     .dj-conquista__bloco { background: var(--dj-azul); }
.dj-conquista--verde    .dj-conquista__bloco { background: var(--dj-verde); }
.dj-conquista--amarelo  .dj-conquista__bloco { background: var(--dj-amarelo); color: var(--dj-branco); }

/* --------------------------------------------------------------------------
   6. O QUE VOU DEFENDER EM BRASÍLIA
   -------------------------------------------------------------------------- */
.dj-defender {
    padding-block: clamp(2.5rem, 7vw, 8.4rem);
    background: var(--dj-branco);
    text-align: center;
}

.dj-defender .dj-shell {
    max-width: 1920px;
    padding-inline: clamp(1.25rem, 4vw, 4.8rem);
}

.dj-defender__titulo {
    font-size: clamp(1.09rem, 3.37vw, 4.04rem);
    color: var(--dj-azul);
}
.dj-defender__intro {
    margin: .9rem auto 0;
    max-width: 58rem;
    font-weight: 500;
    font-size: clamp(.9rem, 1.6vw, 1.92rem);
}

.dj-defender__palco {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 3vw, 3.6rem);
    margin-top: clamp(1.75rem, 5vw, 6rem);
    /* dá profundidade ao tombo das cartas na entrada */
    perspective: 1400px;
}

.dj-defender__seta {
    flex: 0 0 auto;
    width: clamp(1.6rem, 4vw, 4.8rem);
    aspect-ratio: 2 / 3;
    background: var(--dj-azul);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}
.dj-defender__seta--ant  { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.dj-defender__seta--prox { clip-path: polygon(0 0, 0 100%, 100% 50%); }
.dj-defender__seta:hover { transform: scale(1.08); }
/* as setas fazem parte do desenho, então continuam sólidas mesmo quando
   não há o que rolar — só perdem o cursor de clique */
.dj-defender__seta[disabled] { opacity: .85; cursor: default; transform: none; }

.dj-defender__trilho {
    --dj-carta-gap: clamp(1rem, 3vw, 3.6rem);
    --dj-cartas-visiveis: 3;

    flex: 1 1 auto;
    display: grid;
    grid-auto-flow: column;
    /* Largura fixa por carta. Com `minmax(0, 1fr)` as cartas dividiam o
       espaço disponível: bastava passar de três propostas para todas
       encolherem até ficarem ilegíveis. Agora cabem sempre
       --dj-cartas-visiveis por vez e o resto rola. */
    grid-auto-columns: calc(
        (100% - (var(--dj-cartas-visiveis) - 1) * var(--dj-carta-gap))
        / var(--dj-cartas-visiveis)
    );
    gap: var(--dj-carta-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: .25rem;
}
.dj-defender__trilho::-webkit-scrollbar { display: none; }

.dj-carta {
    /* alinhado ao início para casar com o passo das setas (uma carta + gap);
       com `center` o snap puxava de volta no meio da rolagem */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border: 3px solid var(--dj-azul);
    background: var(--dj-branco);
}
.dj-carta--verde   { border-color: var(--dj-verde); }
.dj-carta--amarelo { border-color: var(--dj-amarelo); }

.dj-carta__titulo {
    margin: 0;
    padding: .55em .6em .7em;
    background: var(--dj-azul);
    color: var(--dj-branco);
    font-size: clamp(.68rem, 1.3vw, 1.56rem);
    line-height: 2.14;
}
.dj-carta--verde   .dj-carta__titulo { background: var(--dj-verde); }
.dj-carta--amarelo .dj-carta__titulo { background: var(--dj-amarelo); }

.dj-carta__corpo {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .55rem;
    padding: clamp(1rem, 2.5vw, 3rem) clamp(.75rem, 1.5vw, 1.8rem);
    border: 2px solid currentColor;
    color: var(--dj-azul);
}
.dj-carta--verde   .dj-carta__corpo { color: var(--dj-verde); }
.dj-carta--amarelo .dj-carta__corpo { color: var(--dj-amarelo); }

.dj-carta__corpo p {
    margin: 0;
    color: var(--dj-tinta);
    /* Teto de 19px (1.1875rem). O 1.55vw continua valendo abaixo de ~1226px
       de janela, onde o texto já era menor que isso — assim o pedido de
       diminuir não vira aumento nas telas pequenas. */
    font-size: clamp(.88rem, 1.55vw, 1.1875rem);
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   7. #DULADODAGENTE
   -------------------------------------------------------------------------- */
.dj-fecho {
    position: relative;
    container-type: inline-size;
    background: var(--dj-cinza);
    /* a foto entra ampliada e volta ao natural no scrub: sem isso o excesso
       vira barra de rolagem horizontal */
    overflow: hidden;
}

.dj-fecho__foto {
    width: 100%;
    height: auto;
    display: block;
}

/* no desktop o texto cai exatamente sobre o bloco verde já embutido na foto */
.dj-fecho__texto {
    position: absolute;
    left: 58.6%;
    top: 33%;
    width: 26.5%;
    margin: 0;
    color: var(--dj-branco);
    font-weight: 500;
    font-size: 2.05cqw;
    line-height: 1.34;
}

.dj-fecho__painel { display: none; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.dj-footer {
    background: var(--dj-azul);
    color: var(--dj-branco);
    padding-block: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
}
.dj-footer__logo {
    /* o atributo height do <img> vira altura fixa se o CSS não a soltar */
    width: min(190px, 46vw);
    height: auto;
    margin: 0 auto 1.5rem;
}
.dj-footer__legal {
    margin: 0 auto 1.5rem;
    max-width: 34rem;
    font-size: .82rem;
    opacity: .85;
}
.dj-footer__social {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.dj-footer__social a {
    display: grid;
    place-items: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    background: var(--dj-amarelo);
    color: var(--dj-azul);
    text-decoration: none;
}
.dj-footer__links {
    display: flex;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-size: .85rem;
    margin-bottom: 1.2rem;
}
.dj-footer__links a { color: var(--dj-amarelo); text-decoration: none; }
.dj-footer__links a:hover { text-decoration: underline; }
.dj-footer__coligacao,
.dj-footer__copy {
    margin: 0 0 .5rem;
    font-size: .78rem;
    opacity: .8;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .dj-defender__trilho { --dj-cartas-visiveis: 2; }
}

@media (max-width: 1024px) {
    .dj-nav { display: none; }
    .dj-header .dj-social { display: none; }
    .dj-burger { display: grid; place-items: center; }

    /* o teto em vw continua valendo: aqui só a porcentagem afrouxa */
    .dj-sou__caixa p { max-width: min(72%, calc(48vw - 6rem), 50rem); }
}

@media (max-width: 860px) {
    .dj-hero {
        min-height: 0;
        padding-block: 5.5rem 0;
        background-image: url('../Images/web/hero-bg-mobile.jpg');
        background-position: center top;
    }
    .dj-hero__grid { grid-template-columns: minmax(0, 1fr); }

    .dj-hero__art { min-height: 80vw; }
    .dj-hero__d {
        right: auto;
        left: -14%;
        bottom: auto;
        top: 6%;
        width: 60%;
        height: auto;
    }
    /* solta a altura e a proporção fixadas no desktop, senão as quatro
       bordas mais a altura deixam a caixa sobredeterminada */
    .dj-hero__arte {
        left: 0;
        right: 6%;
        top: 4%;
        bottom: 0;
        height: auto;
        aspect-ratio: auto;
    }
    .dj-hero__foto { object-position: bottom center; }

    .dj-hero__form {
        background: rgba(6, 12, 40, .55);
        backdrop-filter: blur(2px);
        padding: 1.75rem var(--dj-gutter) 2.25rem;
    }

    .dj-regiao__selo-wrap { text-align: center; }

    /* Quem eu sou: a foto sai de cima do texto e vai para o topo da seção */
    .dj-sou__grid { display: flex; flex-direction: column; }
    .dj-sou__arte {
        position: static;
        order: -1;
        align-self: center;
        width: min(70%, 20rem);
        margin: 0 auto -1.5rem;
    }
    .dj-sou__foto { object-position: bottom center; }
    .dj-sou__caixa p { max-width: none; }

    /* Pilares: título e frase empilham, a ponta em D encolhe e centraliza */
    .dj-pilar { --dj-ponta: clamp(3.5rem, 14vw, 5rem); }
    .dj-pilar__faixa {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        gap: .35rem;
        height: auto;
        min-height: var(--dj-ponta);
        padding-block: 1.25rem;
    }
    .dj-pilar__ponta {
        top: 50%;
        height: var(--dj-ponta);
        translate: 0 -50%;
    }
    .dj-pilar--claro .dj-pilar__ponta { translate: 0 -50%; }

    /* Conquistas viram cartões empilhados, sem o zigue-zague */
    .dj-conquista { grid-template-columns: minmax(0, 1fr); }
    .dj-conquista__bloco,
    .dj-conquista--dir .dj-conquista__bloco,
    .dj-conquista--esq .dj-conquista__bloco {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        min-height: 0;
        justify-content: flex-start;
        text-align: left;
        /* a ponta desconta do rodapé do bloco: o padding de baixo tem de cobri-la,
           senão o título fica encavalado no bico */
        padding: 1.35rem var(--dj-gutter) 2.4rem;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.15rem), 50% 100%, 0 calc(100% - 1.15rem));
    }

    /* No empilhado o título estava saindo com 11px contra 13.6px da frase — menor
       que o corpo que ele encabeça. Cresce com a tela e encosta nos 2.8vw do
       desktop bem no 1024, sem degrau na virada. */
    .dj-conquista__bloco h3 {
        font-size: calc(.95rem + 1.4vw);
        line-height: 1.5;
        text-wrap: balance;
    }
    .dj-conquista--esq .dj-conquista__texto,
    .dj-conquista--dir .dj-conquista__texto {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        padding: 1.25rem var(--dj-gutter) 2rem;
    }
    .dj-conquista__texto p { max-width: none; }
    .dj-conquista__marca {
        top: auto;
        bottom: 1rem;
        right: 1rem;
        left: auto;
        translate: none;
        width: 5.5rem;
    }
    .dj-conquista--esq .dj-conquista__marca { left: auto; right: 1rem; }

    /* Fecho: a foto recortada em cima, o texto num painel verde embaixo */
    .dj-fecho__foto { content: url('../Images/web/foto-final-mobile.jpg'); }
    .dj-fecho__texto { display: none; }
    .dj-fecho__painel {
        display: block;
        margin: 0;
        background: var(--dj-verde);
        color: var(--dj-branco);
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.5;
        padding: 1.75rem var(--dj-gutter) 2.25rem;
    }
}

@media (max-width: 780px) {
    /* Uma carta por vez, com uma fatia da próxima aparecendo para indicar
       que dá para arrastar. */
    .dj-defender__trilho {
        --dj-cartas-visiveis: 1;
        grid-auto-columns: 84%;
    }
}

@media (max-width: 560px) {
    .dj-feito__seta { width: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dj-lp * { animation: none !important; transition: none !important; }
    .dj-defender__trilho { scroll-behavior: auto; }
}

/* ==========================================================================
   Peças criadas pelo GSAP
   ==========================================================================
   Nada aqui esconde conteúdo: sem JS a página continua inteira e legível.
   A cortina, a barra de progresso e a dica de rolagem só existem se o
   duarte-anim.js rodar — ele as cria e as remove.
   -------------------------------------------------------------------------- */

/* palavra isolada pelo split dos títulos: precisa de inline-block pra
   aceitar transform, e o will-change evita repaint durante o stagger */
.dj-w {
    display: inline-block;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* o pai preserva a perspectiva do rotationX aplicado em cada palavra */
[data-dj-split] {
    perspective: 800px;
    transform-style: preserve-3d;
}

/* --- barra de progresso da leitura --- */
.dj-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,
        var(--dj-azul) 0%,
        var(--dj-verde) 38%,
        var(--dj-amarelo) 70%,
        var(--dj-vermelho) 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* --- cortina de abertura --- */
.dj-curtain {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--dj-azul);
    will-change: transform;
}

.dj-curtain__logo {
    width: min(56vw, 380px);
    max-height: 62vh;
    height: auto;
    object-fit: contain;
}

.dj-curtain__mark {
    font-family: var(--dj-display);
    font-size: clamp(64px, 14vw, 180px);
    line-height: 1;
    letter-spacing: .02em;
    color: var(--dj-amarelo);
}

/* --- dica de rolagem --- */
.dj-scroll-hint {
    position: fixed;
    bottom: 26px;
    left: 34px;
    z-index: 30;
    width: 22px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
}

.dj-scroll-hint__line {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 2px;
    height: 9px;
    margin-left: -1px;
    border-radius: 1px;
    background: rgba(255, 255, 255, .9);
}

/* --- botão magnético ---
   Tira `transform` da transição do CSS: com ela ligada o navegador interpola
   por conta própria e o GSAP, ao reler o valor, grava o número que pegou no
   meio do caminho — o botão fica preso fora do lugar. */
.dj-btn.dj-magnetic { transition: filter .18s ease; }
.dj-btn.dj-magnetic:hover { transform: none; }

/* cartas inclináveis: sem isto o navegador achata o rotationY */
.dj-carta { transform-style: preserve-3d; }

/* O JS marca .dj-anim-forcada no <html> sempre que anima. Estas regras só
   voltam a valer com ?anim=0, que desliga a animação e devolve a página
   estática. */
@media (prefers-reduced-motion: reduce) {
    html:not(.dj-anim-forcada) .dj-progress,
    html:not(.dj-anim-forcada) .dj-curtain,
    html:not(.dj-anim-forcada) .dj-scroll-hint { display: none; }
}


/* ==========================================================================
   Páginas legais — Política de Privacidade e Termos de Uso
   ========================================================================== */
.dj-legal {
    padding-top: 0;
    background: var(--dj-branco);
    color: var(--dj-tinta);
}

/* --- topo azul, com a marca-d'água do D --------------------------------- */
.dj-legal__topo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--dj-azul);
    color: var(--dj-branco);
    padding-block: clamp(7rem, 14vw, 12rem) clamp(3rem, 7vw, 6rem);
}

.dj-legal__topo::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -4%;
    top: 50%;
    translate: 0 -50%;
    width: clamp(14rem, 34vw, 32rem);
    aspect-ratio: 1;
    background: rgba(255, 255, 255, .09);
    -webkit-mask: url('../Images/web/marca-d-1.png') center / contain no-repeat;
            mask: url('../Images/web/marca-d-1.png') center / contain no-repeat;
    pointer-events: none;
}

.dj-legal__voltar {
    display: inline-block;
    margin-bottom: clamp(1.2rem, 3vw, 2.4rem);
    color: var(--dj-branco);
    font-weight: 600;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, .45);
    padding-bottom: .15rem;
    transition: border-color .2s ease;
}
.dj-legal__voltar:hover,
.dj-legal__voltar:focus-visible { color: var(--dj-branco); border-color: var(--dj-amarelo); }

.dj-legal__titulo {
    font-size: clamp(1.7rem, 5vw, 4.6rem);
    line-height: 1.35;
    color: var(--dj-branco);
}

.dj-legal__data {
    margin: clamp(1rem, 2.5vw, 1.8rem) 0 0;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
}

/* --- corpo --------------------------------------------------------------- */
.dj-legal__corpo {
    max-width: 60rem;
    margin-inline: auto;
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 8vw, 6.5rem);
}

.dj-legal__lead {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-size: clamp(1rem, 1.35vw, 1.28rem);
    line-height: 1.65;
    font-weight: 500;
    border-left: 4px solid var(--dj-verde);
    padding-left: clamp(1rem, 2vw, 1.6rem);
}

/* Sumário */
.dj-legal__sumario {
    margin: 0 0 clamp(2.4rem, 5vw, 3.6rem);
    background: var(--dj-cinza);
    padding: clamp(1.3rem, 3vw, 2.2rem);
}
.dj-legal__sumario h2 {
    font-family: var(--dj-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(.9rem, 1.15vw, 1.15rem);
    margin: 0 0 1rem;
    color: var(--dj-azul);
}
.dj-legal__sumario ol {
    margin: 0;
    padding-left: 1.4rem;
    columns: 2;
    column-gap: 2rem;
}
.dj-legal__sumario li {
    margin-bottom: .5rem;
    break-inside: avoid;
    font-size: clamp(.88rem, 1.05vw, 1rem);
}
.dj-legal__sumario a {
    color: var(--dj-tinta);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.dj-legal__sumario a:hover,
.dj-legal__sumario a:focus-visible { color: var(--dj-azul); border-bottom-color: currentColor; }

/* Seções numeradas */
.dj-legal__secao {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    /* âncoras do sumário não podem parar debaixo do cabeçalho fixo */
    scroll-margin-top: 7rem;
}
.dj-legal__secao:last-child { margin-bottom: 0; }

.dj-legal__secao h2 {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-family: var(--dj-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.55vw, 1.5rem);
    line-height: 1.45;
    margin: 0 0 clamp(.8rem, 1.5vw, 1.2rem);
}
.dj-legal__secao h2 span {
    flex: 0 0 auto;
    color: var(--dj-azul);
}

.dj-legal__secao p,
.dj-legal__secao li {
    font-size: clamp(.95rem, 1.15vw, 1.08rem);
    line-height: 1.7;
}
.dj-legal__secao p { margin: 0 0 1rem; }
.dj-legal__secao p:last-child { margin-bottom: 0; }

.dj-legal__secao ul {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}
.dj-legal__secao li { margin-bottom: .5rem; }

.dj-legal__secao a {
    color: var(--dj-azul);
    text-decoration: underline;
    text-underline-offset: .18em;
}
.dj-legal__secao a:hover,
.dj-legal__secao a:focus-visible { color: var(--dj-vermelho); }

/* Caixa de destaque (contato, cookies) */
.dj-legal__caixa {
    border: 3px solid var(--dj-azul);
    padding: clamp(1.1rem, 2.5vw, 1.8rem);
    margin: 0 0 1rem;
}
.dj-legal__caixa p:last-child { margin-bottom: 0; }

/* Tabela de cookies */
.dj-legal__tabela-wrap { overflow-x: auto; margin: 0 0 1rem; }
.dj-legal__tabela {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: clamp(.85rem, 1.05vw, 1rem);
}
.dj-legal__tabela th,
.dj-legal__tabela td {
    text-align: left;
    padding: .7rem .9rem;
    border-bottom: 1px solid #D8D8D8;
    vertical-align: top;
}
.dj-legal__tabela th {
    background: var(--dj-azul);
    color: var(--dj-branco);
    font-weight: 600;
}

/* Rodapé da página legal */
.dj-legal__fim {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}
/* o .dj-btn da home é dimensionado para o hero; aqui ele desafina */
.dj-legal__fim .dj-btn { font-size: clamp(.95rem, 1.4vw, 1.35rem); }

@media (max-width: 700px) {
    .dj-legal__sumario ol { columns: 1; }
}