/* SS Finance · paleta oficial (decisao de 25/10) num so bloco :root.
   Os tokens "derivados" saem dos quatro oficiais; nao sao cores novas da marca. */
:root{
  /* oficiais */
  --marinho:#0b2545;
  --creme:#faf6ef;
  --dourado:#c9a227;
  --cobre:#b87333;
  /* derivados: cobre mais escuro so para texto pequeno e links (>= 4,5:1 sobre creme e branco) */
  --cobre-texto:#9a5f26;
  --marinho-escuro:#071a33;
  --marinho-linha:#2c4568;
  --marinho-contorno:#8696b0;
  --creme-linha:#e8e0d0;
  --creme-claro:#e7e1d4;
  --creme-suave:#d6d0c2;
  --creme-mudo:#cbc5b7;
  --texto:#243149;
  --texto-suave:#465067;
  --rodape-texto:#adb5c6;
  --branco:#ffffff;
}

/* Fontes hospedadas no proprio site (OFL; licencas em /fonts). Nada de Google Fonts. */
@font-face{font-family:"Jost";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("/fonts/jost-latin-400-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;font-display:swap;
  src:url("/fonts/cormorant-garamond-latin-500-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500 600;font-display:swap;
  src:url("/fonts/cormorant-garamond-italic-latin-500-600.woff2") format("woff2")}

body{margin:0;background:var(--creme)}
a{color:var(--cobre-texto)}a:hover{color:var(--marinho)}
summary{list-style-position:outside}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
.rodape a{color:var(--rodape-texto)}.rodape a:hover{color:var(--creme)}

/* ---------- acabamento: o que vale para todos (sem movimento) ---------- */

/* foco visivel em todo link, botao e pergunta da FAQ; sobre fundo escuro o anel e' dourado */
a:focus-visible,summary:focus-visible{outline:3px solid var(--cobre-texto);outline-offset:3px;border-radius:4px}
.escuro a:focus-visible,.escuro summary:focus-visible{outline-color:var(--dourado)}

/* alvos de toque de 44 px (os botoes ja tem) */
header nav a{display:inline-flex;align-items:center;min-height:44px}
.rodape a{display:inline-flex;align-items:center;min-height:44px}
.link-alvo{display:inline-flex;align-items:center;min-height:44px}
summary{min-height:44px;box-sizing:border-box}

/* destaque do botao principal "Agende uma conversa" (topo e fim) */
.btn-destaque{box-shadow:0 8px 22px color-mix(in srgb,var(--dourado) 28%,transparent)}

/* quem esta por tras: foto com moldura fina e texto numa medida boa de leitura */
.foto-samuel{flex:0 0 280px;width:280px;max-width:100%;height:340px;object-fit:cover;border-radius:6px;
  box-shadow:0 18px 40px color-mix(in srgb,var(--marinho) 18%,transparent);
  outline:1px solid var(--cobre);outline-offset:6px}
.sobre-texto p{max-width:62ch}

/* ancoras nao ficam escondidas atras do menu fixo */
section[id]{scroll-margin-top:24px}

/* cabecalho fixo so em tela larga (em celular ele e' alto e comeria a tela) */
header.topo{border-bottom:1px solid var(--marinho-linha)}
@media (min-width: 960px){
  header.topo{position:sticky;top:0;z-index:50}
  section[id]{scroll-margin-top:88px}
}

/* pagina de privacidade */
.pol{max-width:760px;margin:0 auto;padding:72px 24px 96px}
.pol h1{margin:0 0 8px;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:48px;line-height:1.1;color:var(--marinho)}
.pol h2{margin:40px 0 10px;font-family:"Cormorant Garamond",serif;font-weight:600;font-size:28px;color:var(--marinho)}
.pol p,.pol li{color:var(--texto-suave)}
.pol .data{color:var(--texto-suave);font-size:15px;margin:0 0 24px}

@media (max-width: 960px){
  section{padding-top:80px !important;padding-bottom:80px !important}
}
@media (max-width: 700px){
  h1{font-size:42px !important}
  h2{font-size:34px !important}
  section{padding-top:64px !important;padding-bottom:64px !important}
  header nav{gap:4px 16px !important}
  header.topo{padding-top:12px !important;padding-bottom:12px !important}
  .pol h1{font-size:38px !important}
  .pol h2{font-size:26px !important}
  .foto-samuel{flex-basis:auto}
}

/* ---------- movimento: TUDO aqui dentro. Quem pede menos movimento ve a pagina parada. ---------- */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}

  /* hover e foco dos botoes e cartoes (as cores vem so dos tokens) */
  .btn,.btn-sec,.card,.card-escuro,.rodape a,header nav a,.link-alvo{
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease}
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px color-mix(in srgb,var(--dourado) 38%,transparent)}
  .btn:active{transform:translateY(0)}
  .btn-sec:hover{border-color:var(--creme) !important;background-color:color-mix(in srgb,var(--creme) 8%,transparent)}
  .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px color-mix(in srgb,var(--marinho) 12%,transparent)}
  .card-escuro:hover{border-color:var(--dourado) !important}

  /* efeitos guiados pela rolagem: so onde o navegador suporta; sem isso a pagina fica normal e visivel */
  @supports (animation-timeline: scroll()){
    @keyframes surgir{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
    @keyframes sombra-do-menu{from{box-shadow:0 0 0 transparent}to{box-shadow:0 10px 28px color-mix(in srgb,var(--marinho-escuro) 55%,transparent)}}

    section:not(#topo) h2,.card,.card-escuro,.passo,.linha,.sobre-texto,.foto-samuel,#contato > div{
      animation:surgir linear backwards;animation-timeline:view();animation-range:entry 0% entry 100%}
    .foto-samuel{animation-range:entry 0% entry 80%}

    @media (min-width: 960px){
      header.topo{animation:sombra-do-menu linear both;animation-timeline:scroll(root block);animation-range:0 96px}
    }
  }
}