/* ==========================================================================
   Taurus Investimentos — site estático
   Base: Brandbook Taurus (#000319 + cinzas) com acento Pantone 2728 C #0047BA
   Tipografia: Sofia Pro (opcional) → Titillium Web → sistema
              Larken (opcional) nos títulos → serifada de fallback
   ========================================================================== */

/* Fontes opcionais. Se você tiver os arquivos, coloque em assets/fonts/ com
   estes nomes e elas passam a ser usadas automaticamente. Sem eles, valem as
   fallbacks declaradas em --fonte-texto e --fonte-display. */
@font-face{font-family:"Sofia Pro";src:url("../assets/fonts/SofiaPro-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("../assets/fonts/SofiaPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("../assets/fonts/SofiaPro-Medium.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Pro";src:url("../assets/fonts/SofiaPro-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Larken";src:url("../assets/fonts/Larken-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Larken";src:url("../assets/fonts/Larken-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* cores */
  --azul:#0047BA;          /* Pantone 2728 C */
  --azul-escuro:#00368e;
  --azul-fraco:#e8effb;
  --noite:#000319;         /* brandbook */
  --texto:#3b4150;
  --cinza:#606060;         /* brandbook */
  --linha:#e2e6ee;
  --nevoa:#f5f7fa;
  --branco:#ffffff;

  /* tipografia */
  --fonte-texto:"Sofia Pro","Titillium Web","Segoe UI",system-ui,-apple-system,sans-serif;
  /* usada nos títulos em caixa alta/negrito do topo — Poppins é a aproximação
     gratuita da Sofia Pro; com os arquivos da Sofia Pro em assets/fonts/ ela some da fila */
  --fonte-titulo:"Sofia Pro","Poppins","Titillium Web","Segoe UI",system-ui,sans-serif;
  --fonte-display:"Larken","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  /* layout */
  /* quanto de cinza nas fotos: 1 = preto e branco, .5 = meio-tom */
  --dessatura:.92;

  --largura:1180px;
  --respiro:clamp(3.5rem,6.5vw,6.5rem);

  /* cor do cabeçalho fixo depois da rolagem */
  --topo-fundo:rgba(0,71,186,.96);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--branco);
  color:var(--texto);
  font-family:var(--fonte-texto);
  font-size:1.0625rem;
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{max-width:100%;height:auto;display:block}
a{color:var(--azul)}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}

.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--azul);color:#fff;padding:.75rem 1.25rem;font-weight:600}
.skip:focus{left:1rem;top:1rem}

.wrap{width:min(100% - 2.5rem,var(--largura));margin-inline:auto}

/* ---------- Tipografia ---------- */
.titulo{
  font-family:var(--fonte-display);
  font-weight:500;
  font-size:clamp(1.85rem,3.2vw,2.75rem);
  line-height:1.18;
  color:var(--noite);
  margin:0 0 1.25rem;
}
p{margin:0 0 1.1rem;max-width:68ch}

.etiqueta{
  display:flex;align-items:center;gap:.75rem;
  font-size:.8rem;font-weight:600;letter-spacing:.12em;color:var(--azul);
  margin:0 0 .9rem;
}
.etiqueta::before{content:"";width:2rem;height:2px;background:var(--azul);flex:none}

/* ---------- Botões ---------- */
.acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}
.acoes--centro{justify-content:center;margin-top:2.5rem}

.botao{
  display:inline-block;padding:.85rem 1.9rem;
  background:var(--azul);color:#fff;border:1px solid var(--azul);
  font-family:var(--fonte-texto);font-weight:600;font-size:.98rem;letter-spacing:.01em;
  text-decoration:none;transition:background .22s ease,border-color .22s ease,color .22s ease;
}
.botao:hover{background:var(--azul-escuro);border-color:var(--azul-escuro);color:#fff}
.botao--escuro{
  display:inline-flex;align-items:center;gap:1.4rem;
  background:var(--noite);border-color:var(--noite);color:#fff;
  font-family:var(--fonte-titulo);font-size:.78rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;padding:1.05rem 1.6rem;
}
.botao--escuro:hover{background:#0b1330;border-color:#0b1330}

/* ---------- Cabeçalho ---------- */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:1rem 0;background:transparent;
  transition:background .28s ease,padding .28s ease,box-shadow .28s ease;
}
.topo.rolou{background:var(--topo-fundo);backdrop-filter:blur(10px);padding:.55rem 0;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.topo__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.topo__marca img{width:clamp(230px,27vw,360px);height:auto}

.menu{
  display:flex;align-items:center;gap:clamp(1.75rem,4vw,3.5rem);
  padding:0 0 .7rem 2rem;border-bottom:1px solid rgba(255,255,255,.55);
}
.menu a{
  color:#fff;text-decoration:none;
  font-family:var(--fonte-titulo);font-size:.8rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  opacity:.92;transition:opacity .2s ease;
}
.menu a:hover,.menu a.ativo{opacity:1;text-decoration:underline;text-underline-offset:.5em}

.topo__botao{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0}
.topo__barras,.topo__barras::before,.topo__barras::after{
  display:block;width:26px;height:2px;background:#fff;margin-inline:auto;
  transition:transform .3s ease,background .2s ease;
}
.topo__barras::before,.topo__barras::after{content:"";position:relative}
.topo__barras::before{top:-8px}
.topo__barras::after{top:6px}
.topo__botao[aria-expanded="true"] .topo__barras{background:transparent}
.topo__botao[aria-expanded="true"] .topo__barras::before{transform:translateY(8px) rotate(45deg)}
.topo__botao[aria-expanded="true"] .topo__barras::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(92svh,820px);
  display:flex;align-items:center;
  padding:9.5rem 0 4rem;
  background:var(--azul);
  overflow:hidden;
  isolation:isolate;
}
/* blocos geométricos do fundo, à direita */
.hero__padrao{
  position:absolute;top:0;right:0;height:100%;width:min(58%,760px);z-index:0;
}
.hero__padrao .p1{fill:#003a9c}
.hero__padrao .p2{fill:#0d55c8}

/* recorte do assessor, alinhado à direita e apoiado na base */
.hero__figura{
  position:absolute;right:clamp(0px,6vw,120px);bottom:0;z-index:1;
  opacity:.9;
  height:min(88%,760px);width:auto;max-width:52%;object-fit:contain;object-position:bottom;
}

.hero__conteudo{position:relative;z-index:2}
.hero__titulo{
  font-family:var(--fonte-titulo);
  font-weight:700;
  font-size:clamp(2.3rem,5vw,4.4rem);
  line-height:1.06;
  letter-spacing:-.015em;
  color:#fff;
  margin:0;
  max-width:11ch;
}
.hero .acoes{margin-top:2.5rem}

/* ---------- Seções ---------- */
.secao{padding:var(--respiro) 0}
.secao--servicos{background:var(--nevoa);border-block:1px solid var(--linha)}

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.dupla--inversa .dupla__foto{order:-1}
.dupla__foto{margin:0}
.dupla__texto p{color:var(--texto)}

/* lista de credenciais do bloco "Quem é a Taurus" */
.marcas{list-style:none;margin:1.75rem 0 0;padding:0;border-top:1px solid var(--linha)}
.marcas li{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.8rem 0;border-bottom:1px solid var(--linha);font-size:.95rem;
}
.marcas strong{color:var(--noite);font-weight:600}
.marcas span{color:var(--cinza)}

/* ---------- Tratamento das fotos ----------
   Meio-tom + recorte em degraus no canto superior direito, com os blocos claros
   preenchendo o vão (a sensação de imagem sendo montada). As fotos mantêm a
   proporção original do arquivo: nada é esticado nem cortado. */
.recorte{position:relative;margin:0;isolation:isolate}
.recorte img{
  position:relative;z-index:1;
  width:100%;height:auto;aspect-ratio:auto;
  filter:grayscale(var(--dessatura)) contrast(1.06) brightness(1.02);
  clip-path:polygon(0 0,72% 0,72% 9%,86% 9%,86% 18%,100% 18%,100% 100%,0 100%);
}
/* blocos claros preenchendo exatamente o vão dos degraus, o segundo avançando
   para fora da foto — é o que dá a leitura de imagem sendo montada */
.recorte::before{
  content:"";position:absolute;z-index:0;
  top:0;left:72%;right:-2rem;height:18%;
  background-image:
    linear-gradient(var(--nevoa) 0 0),
    linear-gradient(var(--linha) 0 0);
  background-repeat:no-repeat;
  background-size:50% 50%,50% 100%;
  background-position:0 0,100% 0;
}
/* bloco de apoio no canto oposto, atrás da foto */
.recorte::after{
  content:"";position:absolute;z-index:0;
  left:-2rem;bottom:-2rem;width:34%;height:38%;
  background:var(--nevoa);
}
.secao--servicos .recorte::after{background:#e6eaf1}

/* ---------- Serviços ---------- */
.dupla--servicos{margin-bottom:clamp(3rem,6vw,5rem)}
.servicos{max-width:940px;margin-inline:auto}
.secao--servicos .acordeao details{border-color:#dde2ea}
.secao--servicos .acordeao{border-top-color:#dde2ea}

.acordeao{border-top:1px solid var(--linha)}
.acordeao details{border-bottom:1px solid var(--linha)}
.acordeao summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem .25rem;
  font-size:1.1rem;font-weight:600;color:var(--noite);
  transition:color .2s ease;
}
.acordeao summary::-webkit-details-marker{display:none}
.acordeao summary:hover{color:var(--azul)}
.acordeao summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s ease;
}
.acordeao details[open] summary{color:var(--azul)}
.acordeao details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.acordeao__corpo{padding:0 0 1.4rem;border-left:2px solid var(--azul-fraco);padding-left:1.1rem}
.acordeao__corpo p{margin:0;font-size:1rem;color:var(--texto)}

.aviso{
  max-width:none;margin:3rem 0 0;padding-top:1.25rem;border-top:1px solid var(--linha);
  font-size:.82rem;line-height:1.65;color:var(--cinza);text-align:center;
}

/* ---------- Chamada ---------- */
.chamada{
  position:relative;overflow:hidden;isolation:isolate;
  padding:calc(var(--respiro) * .9) 0;
  background:var(--noite);
  text-align:center;
}
.chamada__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
  filter:grayscale(.5) contrast(1.05);
}
.chamada__veu{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(130% 150% at 50% 0%,rgba(0,71,186,.45) 0%,rgba(0,3,25,.55) 70%),
    rgba(0,3,25,.55);
}
/* figuras azuis escalonadas nas laterais, no mesmo idioma do recorte das fotos */
.chamada__figura{position:absolute;top:0;bottom:0;z-index:-1;background:var(--azul);opacity:.82;pointer-events:none}
.chamada__figura--esq{
  left:0;width:min(22%,300px);
  clip-path:polygon(0 0,58% 0,58% 22%,100% 22%,100% 62%,58% 62%,58% 100%,0 100%);
}
.chamada__figura--dir{
  right:0;width:min(18%,240px);
  clip-path:polygon(100% 0,100% 100%,42% 100%,42% 74%,0 74%,0 30%,42% 30%,42% 0);
}
.chamada__conteudo{position:relative;z-index:1}
.chamada .titulo{
  font-family:var(--fonte-titulo);font-weight:400;letter-spacing:-.01em;
  color:#fff;margin-inline:auto;max-width:24ch;
}
.chamada__assinatura{
  font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.8rem);
  color:#fff;margin:1.75rem auto 0;max-width:26ch;
}
.botao--claro-borda{background:var(--azul);border-color:var(--azul)}
.botao--claro-borda:hover{background:#fff;border-color:#fff;color:var(--noite)}

/* ---------- Contato ---------- */
.secao--contato{background:var(--nevoa);border-top:1px solid var(--linha)}
.canais{
  list-style:none;margin:2.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;
}
.canais a{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:1rem;row-gap:.15rem;align-items:center;
  background:#fff;border:1px solid var(--linha);padding:1.15rem 1.25rem;height:100%;
  text-decoration:none;transition:border-color .2s ease,transform .2s ease;
}
.canais a:hover{border-color:var(--azul);transform:translateY(-2px)}
.canais img{grid-row:1 / span 2;width:28px;height:28px;object-fit:contain}
.canais span{font-size:.8rem;letter-spacing:.08em;color:var(--cinza)}
.canais strong{font-size:1.02rem;font-weight:600;color:var(--noite)}

/* ---------- Rodapé ---------- */
.rodape{background:var(--noite);color:#a7adbb;padding:4rem 0 2.5rem;font-size:.9rem}
.rodape a{color:#dfe3ec}
.rodape__topo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.75rem;
  padding-bottom:2.25rem;border-bottom:1px solid rgba(255,255,255,.14);
}
.rodape__logo{width:clamp(200px,24vw,290px)}
.rodape__lado{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem}
.rodape__links{display:flex;flex-wrap:wrap;gap:1.5rem}
.rodape__links a{text-decoration:none;font-size:.95rem}
.rodape__links a:hover{color:#fff;text-decoration:underline}
.rodape__sociais{display:flex;align-items:center;gap:1.1rem}
.rodape__sociais a{display:grid;place-items:center;opacity:.85;transition:opacity .2s ease,transform .2s ease}
.rodape__sociais a:hover{opacity:1;transform:translateY(-2px)}
.rodape__sociais img{width:22px;height:22px;object-fit:contain}

.rodape__blocos{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);padding:2.5rem 0}
.rodape h3{font-family:var(--fonte-display);font-weight:500;font-size:1.15rem;color:#fff;margin:0 0 .8rem}
.rodape__blocos p{font-size:.88rem;line-height:1.7;max-width:none}
.rodape__blocos div > h3:nth-of-type(2){margin-top:1.75rem}

.rodape__disclaimer{
  font-size:.72rem;line-height:1.6;color:#7b8194;text-align:justify;max-width:none;
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.75rem;margin-bottom:2rem;
}
.rodape__disclaimer a{color:#9aa1b3}

.rodape__selos{
  display:flex;flex-wrap:wrap;align-items:center;gap:2.25rem;
  padding:1.5rem 0 2rem;border-top:1px solid rgba(255,255,255,.14);
}
.rodape__selos img{
  width:auto;height:auto;max-height:30px;max-width:110px;object-fit:contain;
  opacity:.78;transition:opacity .2s ease;
}
.rodape__selos a:hover img{opacity:1}
.rodape__copy{font-size:.78rem;color:#6d7385;margin:0;max-width:none}

/* ---------- WhatsApp flutuante ---------- */
.zap{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  width:54px;height:54px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--linha);border-radius:50%;
  box-shadow:0 8px 24px rgba(0,3,25,.18);transition:transform .22s ease;
}
.zap:hover{transform:translateY(-3px)}
.zap img{width:26px;height:26px}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .dupla,.rodape__blocos{grid-template-columns:1fr}
  .dupla--inversa .dupla__foto{order:0}
  .chamada__figura--esq{width:34%}
  .chamada__figura--dir{width:26%}

  .topo__botao{display:block;position:relative;z-index:101}
  .menu{
    position:fixed;inset:0;z-index:99;
    flex-direction:column;justify-content:center;gap:2rem;
    padding:0;border-bottom:0;
    background:var(--azul);
    transform:translateX(100%);transition:transform .32s ease;
  }
  .menu.aberto{transform:translateX(0)}
  .menu a{font-size:1.15rem;letter-spacing:.12em}

  .hero{padding:8rem 0 0;min-height:auto}
  .hero__conteudo{padding-bottom:2.5rem}
  .hero__titulo{max-width:14ch}
  .hero__figura{
    position:relative;right:auto;bottom:auto;margin:2rem auto 0;
    height:auto;width:min(78%,420px);max-width:none;display:block;
  }
  .hero__padrao{width:100%;opacity:.85}
}

@media (max-width:560px){
  body{font-size:1rem}
  .hero{padding:7rem 0 0}
  .hero__titulo{max-width:none;font-size:clamp(2rem,9vw,2.6rem)}
  .acoes .botao{width:100%;text-align:center}
  .rodape__disclaimer{text-align:left}
  .rodape__selos{gap:1.75rem}
  .rodape__lado{width:100%;justify-content:space-between}
  .recorte::after{display:none}
  .recorte::before{right:-1rem}
  .chamada__figura{opacity:.6}
}

@media print{
  .topo,.zap,.chamada__video{display:none}
  body{background:#fff;color:#000}
}