/* Home do apresentacao.dldgroup.com.br · a porta de entrada das três.

   NÃO reaproveita a base.css das apresentações de propósito: lá o
   `body{overflow:hidden}` existe porque um deck não rola. Esta página rola.
   A fonte e a paleta são as mesmas, declaradas aqui de novo — duplicar sete
   linhas custa menos que herdar um comportamento que quebra a página. */
@font-face{
  font-family:'InterVar';
  src:url('./fontes/InterVariable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:block;
}

:root{
  --black:#050706; --ink:#0a0d0c; --teal:#0F766E; --teal-bright:#168c82;
  --white:#f6f8f7; --muted:#a8b0ad; --line:rgba(255,255,255,.14);
  --ease:cubic-bezier(.2,.75,.25,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; background:var(--black); color:var(--white);
  font-family:'InterVar',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* opsz travado: sem isso a mesma linha muda de largura entre telas */
  font-optical-sizing:none; font-variation-settings:'opsz' 32;
  display:flex; flex-direction:column;
}
a{color:inherit}
/* o bloco de símbolos do SVG não é conteúdo: sem isto ele RENDERIZA no topo
   da página. Vem do comum/.defs.html, e estava estilizado só na base.css. */
.svg-defs{position:absolute; width:0; height:0; overflow:hidden}

/* A cor da marca precisa das DUAS metades, e a ordem importa:
   · o `fill="var(--logo-d,#111)"` do arquivo de símbolos é ATRIBUTO de
     apresentação, e `var()` não resolve em atributo — vira preto;
   · a regra abaixo casa com o elemento ORIGINAL em <defs>, e o <use> leva
     essa cascata junto para a cópia que ele renderiza;
   · aí sim a variável definida no container (`.marca`, `.simbolo`) herda
     para dentro do clone e pinta.
   Uma sem a outra dá logo preto no fundo preto. */
.symbol-d{fill:var(--logo-d,currentColor)}
.symbol-l{fill:var(--logo-l,var(--teal))}
:focus-visible{outline:2px solid var(--teal-bright); outline-offset:3px}

.envelope{width:100%; max-width:1600px; margin:0 auto; padding:0 var(--pad)}

/* ── topo ────────────────────────────────────────────────────────── */
.topo{border-bottom:1px solid var(--line)}
.topo .envelope{
  height:clamp(68px,9vh,88px); display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem;
}
.marca{--logo-d:var(--white);--logo-l:var(--teal);--logo-m:var(--muted);
  display:flex; align-items:center; text-decoration:none}
.marca .lockup{width:auto; height:clamp(20px,2.6vh,28px)}
.tagline{
  color:var(--teal-bright); font-size:clamp(.58rem,.75vw,.72rem);
  font-weight:700; letter-spacing:.2em; text-align:right;
}

/* ── abertura ────────────────────────────────────────────────────── */
.abertura .envelope{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:clamp(2rem,5vw,4rem); padding-top:clamp(2.6rem,7vh,5rem);
  padding-bottom:clamp(2.2rem,5vh,3.4rem);
}
.olho{
  margin:0 0 clamp(.9rem,2vh,1.3rem); color:var(--teal-bright);
  font-size:clamp(.62rem,.8vw,.78rem); font-weight:700; letter-spacing:.24em;
}
h1{
  margin:0; font-size:clamp(2.3rem,min(4.6vw,7.4vh),4.4rem);
  line-height:1.06; letter-spacing:-.028em; text-wrap:balance;
  /* em `em`, não px: a quebra do título fica igual em qualquer resolução */
  max-width:11em;
}
h1 span{display:block; color:var(--teal-bright)}
.entrada{
  margin:clamp(1.1rem,2.6vh,1.8rem) 0 0; max-width:46ch;
  color:#c1c9c6; font-size:clamp(.95rem,min(1.15vw,1.9vh),1.12rem); line-height:1.62;
}
/* A cor da marca entra por VARIÁVEL, nunca por classe. O <use> clona o
   símbolo num shadow DOM: `.simbolo .symbol-d{}` existe, casa com o
   original em <defs> e não alcança a cópia renderizada. Propriedade
   customizada herda para dentro do shadow — o fill do path é
   `var(--logo-d,#111)`, e o #111 é o preto que aparecia. */
.simbolo{--logo-d:var(--white); --logo-l:var(--teal);
  width:clamp(150px,20vw,300px); height:auto; flex-shrink:0}

/* ── escolha ─────────────────────────────────────────────────────── */
.escolha{flex:1}
.escolha-cabeca{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; padding-bottom:clamp(.9rem,2vh,1.2rem);
}
.escolha-cabeca p{margin:0; font-size:clamp(.86rem,1vw,1rem); color:var(--white)}
.escolha-cabeca span{
  color:var(--teal-bright); font-size:clamp(.56rem,.72vw,.68rem);
  font-weight:700; letter-spacing:.2em; white-space:nowrap;
}
.cartoes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,1.4vw,1.3rem);
  padding-bottom:clamp(2rem,5vh,3.2rem);
}

.cartao{
  display:flex; flex-direction:column;
  padding:clamp(1.2rem,2.6vh,1.75rem);
  border:1px solid var(--line); background:var(--ink);
  text-decoration:none; transition:border-color .25s var(--ease),
    background .25s var(--ease), transform .25s var(--ease);
}
.cartao:hover,.cartao:focus-visible{
  border-color:var(--teal); background:#0c1211; transform:translateY(-4px);
}
/* o do meio nasce destacado, como no desenho */
.cartao.destaque{border-color:var(--teal)}

.cartao-topo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding-bottom:clamp(.8rem,1.8vh,1.1rem); border-bottom:1px solid var(--line);
}
.etiqueta{
  margin:0; max-width:11ch; color:var(--teal-bright);
  font-size:clamp(.54rem,.7vw,.66rem); font-weight:700; letter-spacing:.18em; line-height:1.6;
}
.numero{
  color:var(--muted); font-size:clamp(.54rem,.7vw,.66rem); font-weight:700;
  letter-spacing:.14em; font-variant-numeric:tabular-nums;
}

.identidade{
  display:flex; align-items:center; gap:.85rem;
  margin:clamp(1.1rem,2.6vh,1.7rem) 0 0;
}
.identidade svg{--logo-d:var(--white); --logo-l:var(--teal);
  width:clamp(34px,4vw,44px); height:auto; flex-shrink:0}
.identidade h2{
  margin:0; font-size:clamp(1.15rem,min(1.75vw,2.9vh),1.6rem);
  line-height:1.08; letter-spacing:-.015em; font-weight:700;
}
.identidade small{
  display:block; margin-top:.34rem; color:var(--muted);
  font-size:clamp(.54rem,.7vw,.64rem); font-weight:700; letter-spacing:.14em; line-height:1.5;
}

.chamada{
  margin:clamp(1.1rem,2.6vh,1.6rem) 0 0;
  font-size:clamp(1rem,min(1.32vw,2.2vh),1.28rem); line-height:1.28;
  letter-spacing:-.012em; text-wrap:balance;
}
.resumo{
  margin:.75rem 0 clamp(1.3rem,3vh,1.9rem);
  color:var(--muted); font-size:clamp(.83rem,min(1vw,1.65vh),.95rem); line-height:1.58;
}

/* o botão empurrado para o pé do cartão: os três alinham a base */
.acesso{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:clamp(.7rem,1.6vh,.95rem) clamp(.85rem,1.8vh,1.1rem);
  background:var(--teal); color:#fff;
  font-size:clamp(.58rem,.74vw,.7rem); font-weight:700; letter-spacing:.14em;
  transition:background .25s var(--ease);
}
.cartao:hover .acesso,.cartao:focus-visible .acesso{background:var(--teal-bright)}
.acesso-icones{display:flex; align-items:center; gap:.55rem; flex-shrink:0}
.acesso-icones svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6}

/* ── rodapé ──────────────────────────────────────────────────────── */
.rodape{border-top:1px solid var(--line); position:relative}
.rodape .envelope{
  height:clamp(58px,8vh,74px); display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
  color:var(--muted); font-size:clamp(.54rem,.7vw,.66rem);
  font-weight:700; letter-spacing:.18em;
}
.rolar{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--black); color:var(--white);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.rolar:hover{border-color:var(--teal); background:var(--teal)}
.rolar svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6}
.rolar[hidden]{display:none}

/* ── telas menores ───────────────────────────────────────────────── */
@media(max-width:1000px){
  .cartoes{grid-template-columns:1fr 1fr}
  .cartao:last-child{grid-column:1/-1}
}
@media(max-width:760px){
  .abertura .envelope{grid-template-columns:1fr}
  .simbolo{width:clamp(120px,32vw,180px); justify-self:start}
  .cartoes{grid-template-columns:1fr}
  .cartao:last-child{grid-column:auto}
  .escolha-cabeca{flex-direction:column; align-items:flex-start; gap:.5rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ── acréscimos ao desenho ───────────────────────────────────────────
   Quatro coisas que o cartão ganha sem mexer na composição. */

/* quantos slides são · a primeira pergunta de quem recebe o link */
.volume{
  margin:0 0 clamp(.9rem,2vh,1.2rem); color:var(--muted);
  font-size:clamp(.54rem,.7vw,.64rem); font-weight:700; letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}

/* O cartão inteiro é clicável, mas quem carrega o link é o <a>: assim o
   teclado tem UM destino por cartão e o leitor de tela anuncia o texto do
   botão, não a soma de tudo que está dentro. */
.cartao{position:relative; isolation:isolate}
.acesso:after{content:"";position:absolute;inset:0;z-index:1}
.cartao:focus-within{border-color:var(--teal)}

/* copiar o link de uma apresentação só · fica por cima da área clicável */
.copiar{
  position:absolute; z-index:2; top:clamp(1.2rem,2.6vh,1.75rem); right:clamp(1.2rem,2.6vh,1.75rem);
  width:30px; height:30px; display:grid; place-items:center;
  border:1px solid transparent; border-radius:50%;
  background:transparent; color:var(--muted); cursor:pointer;
  opacity:0; transition:opacity .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cartao:hover .copiar,.copiar:focus-visible{opacity:1}
.copiar:hover{color:var(--white); border-color:var(--line)}
.copiar svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7}
/* em telas de toque não existe hover: o botão fica sempre visível */
@media(hover:none){.copiar{opacity:1}}
/* o número do cartão cede o canto para o botão */
.cartao:hover .numero{opacity:0; transition:opacity .2s var(--ease)}

.aviso-copia{
  position:fixed; z-index:40; left:50%; bottom:clamp(5rem,11vh,7rem);
  transform:translateX(-50%); margin:0; max-width:calc(100vw - 2rem);
  padding:.6rem 1rem; border:1px solid var(--teal); background:var(--ink);
  color:var(--white); font-size:.75rem; font-weight:700; letter-spacing:.1em;
  overflow-wrap:anywhere;
}
.aviso-copia[hidden]{display:none}

/* ── no desktop a home cabe na tela ──────────────────────────────────
   O trabalho desta página é "escolha uma das três". Se uma delas fica com
   o pé abaixo da dobra, ela concorre em desvantagem — e era sempre a
   terceira, a PARTS. Medido antes: rolava ~100px em 1920, 1600, 1440, 1366
   e 1280. Cem pixels é o pior caso: parece que cabe.
   Sem `overflow:hidden`: se alguém abrir numa janela muito baixa, a página
   rola em vez de esconder conteúdo em silêncio. O conferir-home.mjs trava
   a regra nas resoluções que importam.
   No celular continua rolando, que é o certo com os cartões empilhados. */
@media(min-width:901px){
  .entrada{margin-top:clamp(.8rem,2vh,1.5rem)}
  .escolha-cabeca{padding-bottom:clamp(.6rem,1.5vh,1rem)}
  .cartao{padding:clamp(1rem,2.2vh,1.5rem)}
  .identidade{margin-top:clamp(.9rem,2.1vh,1.4rem)}
  .chamada{margin-top:clamp(.9rem,2.1vh,1.4rem)}
  .resumo{margin-bottom:clamp(.9rem,2.2vh,1.5rem)}
  .volume{margin-bottom:clamp(.6rem,1.5vh,1rem)}
  .copiar{top:clamp(1rem,2.2vh,1.5rem); right:clamp(1rem,2.2vh,1.5rem)}
}

/* último ajuste do encaixe · o que ainda media só em vw não encolhia quando
   a tela ficava baixa (1280×720 e 1366×768 eram os que sobravam) */
@media(min-width:901px){
  .topo .envelope{height:clamp(56px,8.2vh,88px)}
  .rodape .envelope{height:clamp(48px,7vh,74px)}
}

/* notebook baixo (768 e 720 de altura) · os poucos pixels que faltavam */
@media(min-width:901px) and (max-height:820px){
  .abertura .envelope{padding-top:3.4vh; padding-bottom:2.4vh}
  .entrada{margin-top:1.6vh}
  .cartoes{padding-bottom:2.4vh}
  .cartao{padding:1.9vh 1.6vh}
  .identidade{margin-top:1.7vh}
  .chamada{margin-top:1.7vh}
  .resumo{margin-bottom:1.8vh}
  .volume{margin-bottom:1.2vh}
}

/* No celular a tagline quebrava em cinco linhas e virava um bloco de ruído
   ao lado do logo. O lockup já diz DLD GROUP; a frase reaparece no tablet. */
@media(max-width:600px){.tagline{display:none}}
@media(min-width:601px) and (max-width:760px){.tagline{max-width:24ch}}

/* ══════════════════════════════════════════════════════════════════════
   MESMA RÉGUA DOS DECKS · 05/set
   ──────────────────────────────────────────────────────────────────────
   A subida de escala de hoje foi feita na base.css, que é dos decks. A home
   usa este arquivo e tinha ficado para trás: logo em 2,59% da altura contra
   3,5%, etiqueta em 0,98%, botão em 1,04%, margem lateral em 4,6%.
   Alvo, o mesmo dos decks: corpo 1,76% · apoio 2,4% · rótulo/etiqueta 1,3%
   · logo 3,5% · margem lateral 5,8%. Régua: (px em 1080) ÷ 10,8. */
:root{--pad:clamp(1.4rem,5.8vw,7rem)}

@media(min-width:901px){
  .marca .lockup      {height:clamp(24px,3.5vh,38px)}
  .tagline            {font-size:clamp(.62rem,1.2vh,.82rem)}
  .olho               {font-size:clamp(.68rem,1.57vh,1.06rem)}
  .entrada            {font-size:clamp(.95rem,min(1.15vw,2.2vh),1.5rem)}

  .escolha-cabeca p   {font-size:clamp(.86rem,min(1vw,1.76vh),1.19rem)}
  .escolha-cabeca span{font-size:clamp(.62rem,1.3vh,.88rem)}

  .etiqueta           {font-size:clamp(.62rem,1.3vh,.88rem)}
  .numero             {font-size:clamp(.62rem,1.3vh,.88rem)}
  .identidade h2      {font-size:clamp(1.2rem,min(1.75vw,2.8vh),1.9rem)}
  .identidade small   {font-size:clamp(.6rem,1.3vh,.86rem)}
  .identidade svg     {width:clamp(34px,5vh,54px)}
  .chamada            {font-size:clamp(1.05rem,min(1.32vw,2.4vh),1.63rem)}
  .resumo             {font-size:clamp(.86rem,min(1vw,1.76vh),1.19rem)}
  .volume             {font-size:clamp(.62rem,1.3vh,.88rem)}
  .acesso             {font-size:clamp(.62rem,1.3vh,.88rem)}
  .rodape .envelope   {font-size:clamp(.62rem,1.3vh,.88rem)}
}

/* encaixe depois da subida de escala · sobravam 31px em 1920 e 20px em 1600 */
@media(min-width:901px){
  h1{font-size:clamp(2.3rem,min(4.6vw,7vh),4.6rem)}
  .abertura .envelope{padding-top:clamp(1.3rem,4vh,3.4rem); padding-bottom:clamp(1.2rem,3vh,2.4rem)}
  .cartoes{padding-bottom:clamp(1.2rem,2.8vh,2.2rem)}
}
@media(min-width:901px) and (min-height:1000px){
  .abertura .envelope{padding-top:3.2vh; padding-bottom:2.4vh}
  .cartao{padding:2vh 1.8vh}
}

/* ══════════════════════════════════════════════════════════════════════
   ACABAMENTO · 05/set
   ────────────────────────────────────────────────────────────────────── */

/* ── grade de fundo ──────────────────────────────────────────────────
   Os três decks têm esta grade atrás do conteúdo; a home não tinha
   nenhuma. É o que amarra visualmente a porta de entrada com o que vem
   depois dela. Mesma malha, mesma opacidade. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* mesma malha teal de 80px dos decks, não uma grade branca inventada */
  opacity:.35;
  background-image:
    linear-gradient(rgba(15,118,110,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,.16) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 92% 78% at 50% 42%, #000 30%, transparent 82%);
          mask-image:radial-gradient(ellipse 92% 78% at 50% 42%, #000 30%, transparent 82%);
}
.topo,main,.rodape{position:relative; z-index:1}

/* ── foco de luz seguindo o cursor ───────────────────────────────────
   As coordenadas chegam em --mx/--my pelo home.js. Se o JS não rodar, o
   gradiente fica no centro do cartão e o cartão continua perfeito — o
   efeito é acréscimo, nunca requisito. */
.cartao::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .32s var(--ease);
  /* z-index NEGATIVO, e não empurrar o conteúdo para z-index 1: um
     `.cartao > *{position:relative}` vencia o `.copiar{position:absolute}`
     por vir depois no arquivo — o botão de copiar caía dentro do layout e
     somava 30px, e a área clicável do cartão encolhia para o tamanho do
     botão. Filho com z-index -1 pinta acima do fundo do cartão e abaixo do
     texto, que é exatamente o que um brilho de fundo precisa. */
  z-index:-1;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(22,140,130,.16), transparent 62%);
}
.cartao:hover::before,.cartao:focus-within::before{opacity:1}

/* ── borda que acende ────────────────────────────────────────────────
   Degradê pintado na moldura, revelado no hover. `mask-composite` recorta
   só a borda: o miolo do cartão continua com o fundo dele. */
.cartao::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  padding:1px; border-radius:inherit;
  background:linear-gradient(135deg, var(--teal-bright), transparent 42%, transparent 62%, var(--teal));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .32s var(--ease);
}
.cartao:hover::after,.cartao:focus-within::after{opacity:1}

/* ── entrada ao carregar ─────────────────────────────────────────────
   Mesma gramática dos decks: rótulo, título, corpo e depois os cartões.
   `both` para o elemento já nascer no quadro inicial e não piscar. */
@keyframes home-entra{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.topo,.abertura .envelope > div,.simbolo,.escolha-cabeca,.cartao,.rodape{
  animation:home-entra .62s var(--ease) both;
}
.topo                        {animation-delay:.04s}
.abertura .envelope > div    {animation-delay:.12s}
.simbolo                     {animation-delay:.20s}
.escolha-cabeca              {animation-delay:.30s}
.cartao:nth-of-type(1)       {animation-delay:.38s}
.cartao:nth-of-type(2)       {animation-delay:.46s}
.cartao:nth-of-type(3)       {animation-delay:.54s}
.rodape                      {animation-delay:.62s}

/* ── o símbolo respira ───────────────────────────────────────────────
   Lento e discreto de propósito. Começa depois da entrada terminar. */
@keyframes home-respira{from{transform:scale(1); opacity:.92} to{transform:scale(1.035); opacity:1}}
.simbolo{animation:home-entra .62s var(--ease) both,
                   home-respira 9s var(--ease) 1.1s infinite alternate}

@media(prefers-reduced-motion:reduce){
  .topo,.abertura .envelope > div,.simbolo,.escolha-cabeca,.cartao,.rodape{animation:none}
  .cartao::before,.cartao::after{transition:none}
}

/* Estes dois vinham como atributo `style=` dentro do arquivo de símbolos, e
   a CSP `style-src 'self'` bloqueia atributo style vindo do HTML: davam duas
   violações no console em TODA página, em produção, desde sempre.
   As propriedades de fonte do "GROUP" eram letra morta — ele já é vetor. */
.lockup-barra{fill:var(--logo-barra,#111)}
.lockup-group{fill:var(--logo-m,#9ca3af)}

/* 1600×900 estava encaixando com folga ZERO e qualquer arredondamento de
   subpixel a fazia rolar. Dois pixels de respiro. */
@media(min-width:901px) and (min-height:860px) and (max-height:960px){
  .cartoes{padding-bottom:2.4vh}
}

/* ── Web Interface Guidelines · auditado em 05/set ──────────────────── */
html{touch-action:manipulation; -webkit-tap-highlight-color:rgba(22,140,130,.18)}
:root{color-scheme:dark}
.envelope{padding-left:max(var(--pad),env(safe-area-inset-left));
          padding-right:max(var(--pad),env(safe-area-inset-right))}
.rodape .envelope{padding-bottom:env(safe-area-inset-bottom)}

/* ── celular ─────────────────────────────────────────────────────────
   O logo ficava com 22px de altura: dimensionado por vh numa tela alta e
   estreita, ele encolhe justamente onde a marca precisa aparecer. Aqui a
   largura manda, como na página de construção.

   E o botão de rolar saiu. Ele mostrava uma seta para BAIXO que continuava
   ali depois de a pessoa já ter rolado até o fim — apontando para um lugar
   onde não havia mais nada. Os cartões empilhados já dizem que a página
   continua. */
@media(max-width:760px){
  .marca .lockup{height:auto; width:min(60vw,240px)}
  .topo .envelope{height:auto; padding-top:1.1rem; padding-bottom:1.1rem}
}
.rolar{display:none}