/* Página de construção do dldgroup.com.br

   Mesma ideia da que está no ar em agboost.com.br, mas na linguagem da DLD:
   preto, teal e o símbolo da marca. CSS em arquivo separado porque a política
   de segurança do vercel.json é `style-src 'self'` — <style> inline não
   executa em produção, e não avisa.

   Fonte servida daqui, não do Google: navegadores diferentes recebem
   arquivos com métricas diferentes e o texto muda de largura. */
@font-face{
  font-family:'InterVar';
  src:url('./fontes/InterVariable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:block;
}

:root{
  --preto:#050706; --tinta:#0a0d0c; --teal:#0F766E; --teal-claro:#168c82;
  --branco:#f6f8f7; --apagado:#a8b0ad; --linha:rgba(255,255,255,.14);
  --suave:cubic-bezier(.2,.75,.25,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{touch-action:manipulation; -webkit-tap-highlight-color:rgba(22,140,130,.18)}
html,body{height:100%; margin:0}
body{
  background:var(--preto); color:var(--branco); overflow:hidden;
  font-family:'InterVar',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* opsz travado: sem isto a mesma linha muda de largura entre telas */
  font-optical-sizing:none; font-variation-settings:'opsz' 32;
  display:grid; place-items:center;
  padding:max(2rem,env(safe-area-inset-top)) max(2rem,env(safe-area-inset-right))
          max(2rem,env(safe-area-inset-bottom)) max(2rem,env(safe-area-inset-left));
}
:focus-visible{outline:2px solid var(--teal-claro); outline-offset:3px}
.svg-defs{position:absolute; width:0; height:0; overflow:hidden}
/* A cor da marca entra por variável: `<use>` clona num shadow DOM e regra de
   descendente não atravessa, só propriedade customizada herda. */
.symbol-d{fill:var(--logo-d,currentColor)}
.symbol-l{fill:var(--logo-l,var(--teal))}
.lockup-barra{fill:var(--logo-barra,#111)}
.lockup-group{fill:var(--logo-m,#9ca3af)}

/* ── fundo ───────────────────────────────────────────────────────── */
.grade{
  position:fixed; inset:0; z-index:0; pointer-events:none; 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 90% 78% at 50% 46%, #000 28%, transparent 82%);
          mask-image:radial-gradient(ellipse 90% 78% at 50% 46%, #000 28%, transparent 82%);
}
.brilho{
  position:fixed; left:50%; top:46%; z-index:0; pointer-events:none;
  width:min(92vw,900px); height:min(62vh,540px); transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(22,140,130,.16) 0%, rgba(22,140,130,.06) 40%, transparent 70%);
  filter:blur(70px);
  animation:respira 9s var(--suave) infinite alternate;
}
@keyframes respira{
  from{transform:translate(-50%,-50%) scale(1);    opacity:.6}
  to  {transform:translate(-50%,-50%) scale(1.12); opacity:1}
}
/* o símbolo gigante atrás de tudo · só um vulto */
.marca-fundo{
  position:fixed; left:50%; top:50%; z-index:0; transform:translate(-50%,-50%);
  width:min(74vw,720px); height:auto; pointer-events:none; user-select:none;
  --logo-d:rgba(246,248,247,.035); --logo-l:rgba(15,118,110,.14);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 62%,transparent 100%);
}

/* ── conteúdo ────────────────────────────────────────────────────── */
main{
  position:relative; z-index:1; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.5rem,4vh,2.4rem);
  animation:entra .9s var(--suave) both;
}
@keyframes entra{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

.etiqueta{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1rem; border:1px solid var(--linha); border-radius:999px;
  background:rgba(10,13,12,.6); backdrop-filter:blur(12px);
  color:var(--apagado); font-size:clamp(.62rem,1.2vh,.74rem);
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.pulso{
  width:6px; height:6px; border-radius:50%; background:var(--teal-claro);
  animation:pulsa 2.4s ease-out infinite;
}
@keyframes pulsa{
  0%{box-shadow:0 0 0 0 rgba(22,140,130,.55)}
  70%{box-shadow:0 0 0 9px rgba(22,140,130,0)}
  100%{box-shadow:0 0 0 0 rgba(22,140,130,0)}
}

.lockup{
  --logo-d:var(--branco); --logo-l:var(--teal); --logo-m:var(--apagado);
  width:auto; height:clamp(34px,7vh,58px);
}

.linha{
  margin:0; max-width:38ch; color:#c1c9c6; line-height:1.6;
  font-size:clamp(.95rem,min(1.15vw,2.2vh),1.15rem);
}

.acesso{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:clamp(.85rem,2vh,1.05rem) clamp(1.3rem,3vh,1.7rem);
  background:var(--teal); color:#fff; text-decoration:none;
  font-size:clamp(.68rem,1.4vh,.82rem); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase;
  transition:background .25s var(--suave), transform .25s var(--suave);
}
.acesso:hover{background:var(--teal-claro); transform:translateY(-2px)}
.acesso:active{transform:none}
.acesso svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8}

footer{
  position:fixed; z-index:1; left:0; right:0;
  bottom:max(1.6rem,env(safe-area-inset-bottom));
  text-align:center; color:#4a5250;
  font-size:clamp(.56rem,1.1vh,.66rem); font-weight:700; letter-spacing:.2em;
}

@media(max-height:520px){
  footer{display:none}
  main{gap:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* O lockup é 6,3 vezes mais largo que alto: dimensionado pela ALTURA, num
   celular de 390px ele dava 368px de largura e estourava a tela de lado.
   Abaixo de 560px quem manda é a largura. */
@media(max-width:560px){
  body{padding-left:max(1.4rem,env(safe-area-inset-left));
       padding-right:max(1.4rem,env(safe-area-inset-right))}
  .lockup{height:auto; width:min(74vw,300px)}
  .linha{max-width:32ch}
}

/* O WhatsApp virou a ação principal · o ícone vem antes do texto porque é
   ele que identifica o canal antes da leitura. */
.acesso svg:first-child{width:18px; height:18px; fill:currentColor; stroke:none}

/* As apresentações continuam alcançáveis, como link e não como botão: a
   página tem UMA ação principal, e um segundo botão do mesmo peso faria as
   duas competirem. */
.secundario{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--apagado); text-decoration:none;
  font-size:clamp(.78rem,1.6vh,.9rem);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .25s var(--suave), border-color .25s var(--suave);
}
.secundario:hover{color:var(--branco); border-color:var(--linha)}
.secundario svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8}