/* Árvore de links da bio do Instagram — vimezer.com.br/links/
   ============================================================
   Tudo o que dá forma a esta página vem do style.css do site: o verde do
   hero, a Bree Serif, o fio amarelo do eyebrow, o painel branco com as linhas
   de link (é o mesmo "Orçamento rápido" da home) e o zigue-zague de três
   linhas. Aqui fica só o que é desta página: uma coluna estreita, porque quem
   chega é quase sempre pelo celular, vindo do Instagram.
   ============================================================ */

.links-pagina{min-height:100vh;background:var(--papel)}
/* o style.css reserva 66px no pé da página, no celular, para a barra de
   WhatsApp/Ligar/Lojas — que não existe aqui */
@media (max-width:820px){ body.links-pagina{padding-bottom:0} }

.links-coluna{width:100%;max-width:560px;margin:0 auto;padding:0 20px}

.links-hero{padding:0}
.links-hero .links-coluna{position:relative;z-index:1;padding-top:34px;padding-bottom:34px}
/* o logo numa plaquinha branca com o fio amarelo em cima, como o painel */
.links-logo{display:inline-block;background:#fff;border-top:5px solid var(--amarelo);
            padding:12px 16px;margin-bottom:26px;border-radius:var(--raio)}
.links-logo img{display:block;width:150px;height:auto}
.links-hero h1{font-size:clamp(32px,8.5vw,44px);line-height:1.06;margin:0 0 12px;max-width:none}
.links-intro{font-size:17px;line-height:1.55;margin:0;color:rgba(255,255,255,.9);max-width:none}

.links-corpo{padding-top:26px;padding-bottom:40px}
.links-painel{background:#fff;border:1px solid var(--linha);border-top:5px solid var(--amarelo);
              padding:8px 22px 6px}
.links-painel .painel-lista{border-top:0}
.links-painel .painel-lista a:last-child{border-bottom:1px solid var(--linha)}

/* O botão das calculadoras copia a linha de link (.painel-lista a), trocando
   a seta por uma que gira quando o menu abre. */
.links-calc-toggle{display:grid;grid-template-columns:42px 1fr auto;gap:16px;align-items:center;
                   width:100%;padding:15px 4px;border:0;background:transparent;text-align:left;
                   font:inherit;color:inherit;cursor:pointer;
                   transition:background var(--transicao),padding-left var(--transicao)}
.links-calc-toggle::after{content:"";width:9px;height:9px;margin-right:6px;
                          border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);
                          transform:rotate(45deg) translateY(-3px);transition:transform var(--transicao)}
.links-calc-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.links-calc-toggle:hover{background:var(--papel);padding-left:10px}
.links-calc-toggle:hover .painel-icone{background:var(--amarelo);color:var(--verde-tinta)}
.links-calc-toggle[aria-expanded="true"] .painel-icone{background:var(--amarelo);color:var(--verde-tinta)}
.links-calc-toggle:focus-visible{outline:2px solid var(--verde);outline-offset:2px}

/* as quatro calculadoras entram recuadas, como sub-itens do botão */
.links-calc-menu{margin:0 0 10px 18px;padding-left:14px;border-left:3px solid var(--amarelo);border-top:0}
.links-calc-menu[hidden]{display:none}
.links-calc-menu a{padding-top:11px;padding-bottom:11px}
.links-calc-menu .painel-icone{background:var(--verde-escuro)}
.links-calc-menu .painel-texto strong{font-size:17px}

.links-rodape{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}

/* No celular o style.css encolhe a linha de link (ícone de 38px, gap 13px);
   o botão acompanha, senão fica 4px mais recuado que as outras linhas. */
@media (max-width:820px){
  .links-calc-toggle{grid-template-columns:38px 1fr auto;gap:13px;padding:14px 2px;min-height:60px}
}
@media (hover:none){
  .links-calc-toggle:hover{background:transparent;padding-left:2px}
  .links-calc-toggle:active{background:var(--papel)}
}
@media (max-width:420px){
  .links-painel{padding:4px 14px 4px}
  .links-calc-menu{margin-left:6px;padding-left:10px}
}