/* ==========================================================================
   Ritto — Camada global de interface
   Carregado em todas as páginas: menu do topo e redes sociais do rodapé.
   Sem !important.
   ========================================================================== */

.footer-social{margin-top:24px}
.footer-social-title{
  display:block;margin-bottom:12px;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#8FA0C4;
}
.footer-social-links{display:flex;flex-wrap:wrap;gap:10px}

.footer-social-btn{
  display:inline-flex;align-items:center;gap:9px;
  height:44px;padding:0 16px 0 8px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#E9EDF7;
  font-family:Inter,system-ui,sans-serif;font-size:.88rem;font-weight:600;line-height:1;
  text-decoration:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.footer-social-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);color:#fff}

.footer-social-mark{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  display:grid;place-items:center;
}
.footer-social-mark svg{width:16px;height:16px;fill:#fff;display:block}

/* cores reais de cada marca */
.footer-social-instagram .footer-social-mark{
  background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%);
}
.footer-social-instagram:hover{border-color:#D6249F}

.footer-social-linkedin .footer-social-mark{background:#0A66C2}
.footer-social-linkedin:hover{border-color:#0A66C2}

.footer-social-mail .footer-social-mark{background:linear-gradient(135deg,#34246E,#19CFE3)}
.footer-social-mail:hover{border-color:#19CFE3}

/* o rodapé usa fundo escuro; a página Sobre reaproveita os botões em fundo claro */
.sobre-public-page .footer-social-btn{
  border-color:#E7E3F0;
  background:#fff;
  color:#11122C;
}
.sobre-public-page .footer-social-btn:hover{background:#fff;color:#11122C}
.sobre-public-page .public-footer .footer-social-btn{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#E9EDF7;
}
.sobre-public-page .public-footer .footer-social-btn:hover{background:rgba(255,255,255,.08);color:#fff}

.footer-social-btn:focus-visible{outline:3px solid #19CFE3;outline-offset:3px}

@media (max-width:820px){
  .footer-social{margin-top:20px}
}

@media (max-width:600px){
  .footer-social-links{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .footer-social-btn{width:100%;padding:0 10px 0 7px;font-size:.83rem}
}

@media (prefers-reduced-motion:reduce){
  .footer-social-btn:hover{transform:none}
}


/* ==========================================================================
   MENU DO TOPO
   Ordem pela sequência de perguntas de quem chega ao site:
   o que é isto, serve para mim, como funciona, quanto custa, o que posso ler.
   Sete itens viraram cinco. Menu curto é menu que se lê.
   ========================================================================== */

.public-header .nav-wrap{height:76px}
.public-header .brand-logo{width:132px}

.public-nav{gap:26px;font-weight:500}
.public-nav > a:not(.btn){
  font-size:.94rem;
  font-weight:500;
  color:#3A3D52;
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:color .2s ease;
}
.public-nav > a:not(.btn):hover{color:#34246E}

/* página atual em evidência */
.public-nav > a.is-current{color:#34246E;font-weight:650}
.public-nav > a.is-current::after{transform:scaleX(1)}

/* separação entre navegar e agir */
.public-nav > .btn{margin-left:6px}
.public-nav > .btn:first-of-type{margin-left:16px;position:relative}
.public-nav > .btn:first-of-type::before{
  content:'';position:absolute;left:-16px;top:50%;
  width:1px;height:22px;margin-top:-11px;
  background:#E7E3F0;
}
.public-nav .btn{padding:11px 20px;font-size:.9rem}
.public-nav .btn-ghost{border:1px solid #DED5EE;color:#34246E;background:transparent}
.public-nav .btn-ghost:hover{border-color:#B9A6E4;background:#F8F5FE}

@media (max-width:1080px){
  .public-nav{gap:20px}
  .public-nav > a:not(.btn){font-size:.9rem}
}

/* no celular o menu vira lista; a separação por linha não faz sentido */
@media (max-width:820px){
  .public-header .nav-wrap{height:66px}
  .public-nav > .btn:first-of-type::before{display:none}
  .public-nav > .btn:first-of-type{margin-left:0}
  .public-nav > .btn{margin-left:0;margin-top:4px}
  .public-nav > a:not(.btn){font-size:1rem;padding:11px 9px}
}

/* 09/08 — E-mail centralizado abaixo do Instagram e do LinkedIn */
@media (max-width:600px){
  .footer-social-links .footer-social-mail{
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - 4.5px);
  }
}