/* ===========================================================
   magic-site · LINKTREE — mobile first, uma coluna.
   A MARCA vem do site: o bloco entre os marcadores abaixo é copiado do :root de
   site/style.css pelo montar-site.mjs e de novo pelo entregar.mjs — mude a marca
   só no site. O CSS do palco do mascote é anexado ao fim deste arquivo.
   =========================================================== */
/* magic-site:marca */
:root{
  /* ===== MARCA — troque só este bloco para cada cliente =====
     Cada cor tem a versão hex e a versão RGB (usada em rgba(var(--x-rgb), alfa)). */
  --brand:#D9A62E;        --brand-rgb:217,166,46;     /* dourado do sol nascente: ação, destaque */
  --brand-hi:#F2C14E;     --brand-hi-rgb:242,193,78;  /* dourado claro: brilhos, gradiente */
  --brand-ink:#8a6a14;                                /* dourado escuro (texto sobre fundo claro) */
  --on-brand:#07130d;                                 /* texto sobre o dourado */
  --accent:#2E9E5B;       --accent-rgb:46,158,91;     /* verde da mata (status, "ok") */
  --accent-hi:#4CC97A;    --accent-hi-rgb:76,201,122;
  /* superfícies: verde montanha profundo */
  --bg:#07130d;
  --bg-2:#0a1911;
  --surface:#0f2017;
  --surface-2:#16301f;
  --text:#F3F6F1;
  --mute:#A6B3A8;
  --muted:#A6B3A8;
  --line:rgba(243,246,241,.08);
  --line-2:rgba(243,246,241,.14);
  --bg-rgb:7,19,13;       /* dev: a base usava rgba(10,10,10) fixo na nav e no menu */
  --bg-deep:#040a07;      /* dev: fundo mais fundo do rodapé (era #070707 da base) */
  --gutter:clamp(16px,4vw,40px); /* dev: os efeitos (assets/efeitos) usam var(--gutter); sem o token o padding lateral era descartado e o texto encostava na borda do celular */
  /* tipografia: --f-wm = fonte da marca (wordmark e títulos de impacto) */
  --f-wm:"Unbounded",sans-serif;
  --f-display:"Space Grotesk",sans-serif;  /* UI, h3, labels */
  --f-body:"Inter",sans-serif;
  --f-mono:"JetBrains Mono",monospace;
  /* forma e motion */
  --r:14px; --r-lg:22px; --r-xl:32px;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --fast:180ms; --base:320ms;
  --sec:clamp(96px,12vw,170px);   /* respiro vertical das seções */
}
/* /magic-site:marca */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100dvh;background:var(--bg);color:var(--text);
  font:400 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased; /* dev: sem overflow-x:hidden no body; o .lk recorta */
  background-image:
    radial-gradient(60% 40% at 50% 0%,rgba(var(--brand-rgb),.16),transparent 70%),
    radial-gradient(50% 35% at 50% 100%,rgba(var(--brand-rgb),.08),transparent 70%);
  background-attachment:fixed;
}
a{color:inherit}
.lk{
  width:100%;max-width:440px;margin:0 auto;min-width:0;overflow-x:clip;
  padding:clamp(20px,6vh,56px) 16px clamp(28px,5vh,48px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3.5vh,30px);
}
.lk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cartão dos botões: o mascote fica atrás dele e o sol nasce por trás da borda de cima */
.console-card{
  position:relative;z-index:5;width:100%;
  border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface-2),var(--surface)); /* dev: era cinza fixo da base */
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  padding:14px;
}
.lk-botoes{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.lk-btn{
  display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 18px;
  border-radius:var(--r);border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  font:600 16px/1.2 var(--f-display);text-decoration:none;
  transition:transform var(--ease) .25s,border-color .25s,background .25s;
}
.lk-btn i{width:22px;text-align:center;font-size:19px;color:var(--brand)}
.lk-btn span{flex:1;min-width:0}
.lk-btn::after{content:"\f061";font:900 13px "Font Awesome 6 Free";opacity:.45;transition:transform .25s var(--ease)}
.lk-btn:hover,.lk-btn:focus-visible{border-color:rgba(var(--brand-rgb),.6);background:rgba(var(--brand-rgb),.08);transform:translateY(-2px)}
.lk-btn:hover::after{transform:translateX(3px)}
.lk-btn--destaque{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.lk-btn--destaque i{color:var(--on-brand)}
.lk-btn--destaque:hover,.lk-btn--destaque:focus-visible{background:var(--brand-hi);border-color:var(--brand-hi)}
.lk-btn:focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px}

/* ícones redondos */
.lk-icones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0;padding:0;list-style:none}
.lk-icones a{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--surface);font-size:19px;text-decoration:none;
  transition:transform .25s var(--ease),border-color .25s,color .25s;
}
.lk-icones a:hover,.lk-icones a:focus-visible{transform:translateY(-3px);border-color:var(--brand);color:var(--brand)}
.lk-icones a:focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px}

.lk-slogan{margin:0;text-align:center;font:500 clamp(15px,4vw,17px)/1.45 var(--f-display);color:var(--text);max-width:32ch}
.lk-copy{margin:0;font:400 12px/1.4 var(--f-mono);color:var(--mute);letter-spacing:.04em;text-align:center}

/* palco do mascote no linktree: centrado, escala própria */
.lk .robo-palco{margin:0 auto;--z:1.3}
.lk .robo-palco .console-card{margin-top:calc(18px * var(--z))}
.lk .palco-tag{display:none}
.lk .palco-wm{margin-bottom:calc(36px * var(--z))} /* dev: o beija-flor não sobe (o robô subia 56·z e pedia 58·z de respiro); a tag escondida no linktree tira o respiro que o site tem */
.lk .palco-wm b{color:var(--brand);font-weight:inherit}
@media (max-width:370px){.lk .robo-palco{--z:1.18}}
@media (min-width:430px){.lk .robo-palco{--z:1.55}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ===== Mascote (magic-site: assets/mascote/palco.css) ===== */
/* ===================== MASCOTE (palco escalável) =====================
   caparao.net: o mascote é o BEIJA-FLOR. Asas, sol, pálpebras e roteiro ficam em
   site/beija-flor.css e beija-flor.js; aqui fica só o palco comum (logo, nome, palco, cartão).
   dev 02/10/2026: saíram as regras do rig do robô (braços, dedos, pálpebras e luzes rb-*, .is-apontado,
   --mascote-dedo-*), que ficaram sem uso quando a ave ganhou rig próprio.
   Camadas dentro de .robo-palco: ave e sol (1) < logo (3) < cartão (5). Tudo multiplica por --z. */
.robo-palco{
  --z:1.1;
  --mascote-centro:#fff3c4; /* miolo claro do sol (beija-flor.css) */
  position:relative;z-index:1;
  width:calc(250px * var(--z));max-width:100%;
  padding-top:calc(8px * var(--z));
}
@media (min-width:576px){.robo-palco{--z:1.3}}
@media (min-width:992px){.robo-palco{--z:1.3}}
@media (min-width:992px) and (max-height:800px){.robo-palco{--z:1.12}}
@media (min-width:1200px){.robo-palco{--z:1.55}}
@media (min-width:1200px) and (max-height:900px){.robo-palco{--z:1.3}}
@media (min-width:1200px) and (max-height:760px){.robo-palco{--z:1.12}}

.palco-head{text-align:center;margin-bottom:calc(26px * var(--z))}
.logo-carry{position:relative;z-index:3;width:calc(90px * var(--z));margin:0 auto} /* dev: sem will-change — ninguém mais carrega a logo */
.avatar{
  width:calc(90px * var(--z));height:calc(90px * var(--z));margin:0 auto calc(14px * var(--z));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,var(--surface-2),var(--bg));
  border:2px solid rgba(var(--brand-rgb),.5);
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 8px rgba(var(--brand-rgb),.05),0 0 60px -10px rgba(var(--brand-rgb),.35);
  animation:avatarFloat 6s var(--ease) infinite;
}
.avatar img{width:62%;height:auto;display:block}
@keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.palco-wm{font-family:var(--f-wm);font-weight:800;font-size:calc(30px * var(--z));line-height:.9;letter-spacing:-.03em;color:#fff;margin:0 0 calc(10px * var(--z))}
.palco-wm span{color:#fff}
.palco-tag{font-family:var(--f-mono);font-size:calc(9.5px * var(--z));letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0}

.robo-stage{position:relative;z-index:1;height:calc(160px * var(--z));margin-top:calc(-16px * var(--z))}
.robo{
  position:absolute;left:50%;top:0;
  width:calc(186px * var(--z));height:calc(240px * var(--z));margin-left:calc(-93px * var(--z));
  opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.2s var(--ease-out);
}
.robo.is-in{opacity:1;transform:none}
.robo-svg{display:block;width:100%;height:100%;overflow:visible;cursor:pointer;transform-origin:50% 100%}

.robo-palco .console-card{margin-top:calc(22px * var(--z));min-height:calc(66px * var(--z))}

/* CTA final: cabeça do mascote com olhos acesos (substitui .cta-mark) */
.cta-head{position:relative;width:170px;margin:0 auto 34px;will-change:transform}
.ch-head{display:block;width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.8))}
.ch-eyes{position:absolute;left:21%;top:52.5%;width:58%;filter:drop-shadow(0 0 10px var(--brand-hi)) drop-shadow(0 0 22px var(--brand));animation:eyes 4s ease-in-out infinite}
@keyframes eyes{0%,100%{opacity:.85}50%{opacity:1}}

/* brilho da logo quando o sol nasce (beija-flor.js liga .is-brilho): só a sombra muda.
   dev: o filtro de brilho da base deixava um quadrado claro em volta da logo na transição. */
.robo-palco .avatar{transition:box-shadow 1.6s ease}
.logo-carry.is-brilho .avatar{
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 8px rgba(var(--brand-rgb),.14),0 0 90px 4px rgba(var(--brand-rgb),.75);
}