/* Arruda Advogados & Associados — cores e fonte do Manual da Marca (Poppins é a fonte secundária oficial).
   Elemento próprio da marca: o hexágono do logo, usado como moldura e marcador. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root{
  --marinho:#162d49; --azul:#2f4560; --dourado:#e89b1f; --dourado-escuro:#b8740c;
  --cinza:#e5e5e5; --papel:#f6f4ef; --branco:#ffffff; --texto:#1d2a3a; --suave:#5b6878;
  --largura:1120px;
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Poppins",Arial,sans-serif;color:var(--texto);background:var(--branco);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--azul)}
a:focus-visible,button:focus-visible{outline:3px solid var(--dourado);outline-offset:3px}
.conteudo{max-width:var(--largura);margin:0 auto;padding-inline:20px}
h1,h2,h3{line-height:1.15;text-wrap:balance;color:var(--marinho)}
.olho{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado-escuro)}
.olho::before{content:"";width:14px;height:14px;background:var(--dourado);clip-path:var(--hex)}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--cinza)}
.cab{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.logo{height:46px;width:auto}
nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--marinho);font-weight:500;font-size:.95rem}
nav a:hover{color:var(--dourado-escuro)}
.botao{display:inline-flex;align-items:center;gap:8px;background:var(--dourado);color:var(--marinho);padding:12px 22px;border-radius:6px;text-decoration:none;font-weight:700;border:0}
.botao:hover{background:#f2ab35}
.botao.contorno{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.botao.contorno:hover{border-color:var(--dourado);color:var(--dourado)}
nav .botao{padding:9px 16px;color:var(--marinho)}

/* Capa */
.capa{position:relative;color:#fff;background:var(--marinho);overflow:hidden}
.capa img.fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.capa::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--marinho) 35%,rgba(22,45,73,.75) 55%,rgba(22,45,73,.15) 85%)}
@media (max-width:640px){.capa::after{background:linear-gradient(180deg,rgba(22,45,73,.82),var(--marinho) 75%)}}
.capa .conteudo{position:relative;z-index:1;padding-block:110px 120px;display:grid;gap:22px;max-width:var(--largura)}
.capa h1{color:#fff;font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800;max-width:15ch;margin:0}
.capa h1 span{color:var(--dourado)}
.capa p{max-width:56ch;margin:0;font-size:1.08rem;color:#dfe6ee}
.capa .acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.capa .olho{color:var(--dourado)}
.hexa-deco{position:absolute;right:-70px;bottom:-90px;width:340px;height:auto;opacity:.85;z-index:1}

/* Faixa de números/fatos */
.fatos{background:var(--papel);border-bottom:1px solid var(--cinza)}
.fatos .conteudo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding-block:26px}
.fatos div{display:flex;gap:12px;align-items:flex-start}
.fatos b{display:block;color:var(--marinho)}
.fatos small{color:var(--suave);font-size:.88rem}
.fatos i{flex:none;width:30px;height:26px;background:var(--dourado);clip-path:var(--hex);margin-top:4px}

/* Seções */
.bloco{padding-block:84px}
.bloco > .conteudo > header{display:grid;gap:10px;margin-bottom:38px;max-width:62ch}
.bloco h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:0}
.bloco header p{margin:0;color:var(--suave)}

/* Áreas */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.areas{grid-template-columns:1fr}}
.area{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--cinza);border-radius:10px;overflow:hidden;min-width:0;transition:transform .2s,box-shadow .2s}
.area:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,45,73,.12)}
.area figure{margin:0;position:relative;aspect-ratio:16/10;background:var(--azul)}
.area figure img{width:100%;height:100%;object-fit:cover}
.area figure span{position:absolute;left:14px;bottom:-18px;width:44px;height:38px;background:var(--dourado);clip-path:var(--hex)}
.area div{padding:28px 20px 22px}
.area h3{margin:0 0 6px;font-size:1.12rem}
.area p{margin:0;color:var(--suave);font-size:.95rem}

/* Como funciona */
.faixa-escura{background:var(--marinho);color:#dfe6ee}
.faixa-escura h2,.faixa-escura h3{color:#fff}
.faixa-escura header p{color:#c3cfdc}
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:passo}
@media (max-width:900px){.passos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.passos{grid-template-columns:1fr}}
.passos li{counter-increment:passo;display:grid;gap:8px;min-width:0}
.passos li::before{content:counter(passo);display:grid;place-items:center;width:58px;height:50px;background:var(--dourado);color:var(--marinho);font-weight:800;font-size:1.3rem;clip-path:var(--hex)}
.passos h3{margin:6px 0 0;font-size:1.05rem}
.passos p{margin:0;font-size:.95rem}

/* Escritório */
.duas{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:820px){.duas{grid-template-columns:1fr}}
.duas p{margin:0 0 14px}
.cartao-resp{background:var(--papel);border-left:6px solid var(--dourado);padding:22px 24px;border-radius:6px}
.cartao-resp b{display:block;color:var(--marinho);font-size:1.1rem}
.marca-grande img{max-width:420px;margin-inline:auto}

/* Contato */
.contato{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:820px){.contato{grid-template-columns:1fr}}
.contato > div{background:#fff;border:1px solid var(--cinza);border-radius:10px;padding:22px;min-width:0;overflow-wrap:anywhere}
.contato h3{margin:0 0 6px;font-size:1rem;color:var(--suave);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.contato p{margin:0;font-size:1.05rem;color:var(--marinho);font-weight:500}
.contato a{color:var(--marinho)}
.aviso-contato{margin-top:20px;color:var(--suave);font-size:.9rem;max-width:70ch}

/* Rodapé */
.rodape{background:#0f2035;color:#b9c6d4;font-size:.9rem}
.rodape .conteudo{display:grid;gap:12px;padding-block:40px}
.rodape img{height:44px;width:auto}
.rodape a{color:var(--dourado)}
.rodape p{margin:0}
.faixa-cores{display:flex;height:8px}
.faixa-cores span:nth-child(1){flex:6;background:var(--marinho)}
.faixa-cores span:nth-child(2){flex:1;background:var(--azul)}
.faixa-cores span:nth-child(3){flex:1;background:#8a949d}
.faixa-cores span:nth-child(4){flex:1;background:var(--dourado)}

/* Botão flutuante de WhatsApp */
.zap{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--marinho);border:2px solid var(--dourado);padding:10px 16px;border-radius:30px;font-weight:700;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.18)}

/* Textos legais */
.texto-legal{max-width:820px;padding-block:56px}
.texto-legal h2{margin-top:34px;font-size:1.3rem}

@media (max-width:640px){
  body{font-size:16px}
  nav{gap:14px}
  .logo{height:38px}
  .capa .conteudo{padding-block:72px 90px}
  .hexa-deco{width:220px;right:-70px;bottom:-60px}
  .bloco{padding-block:60px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.area{transition:none}}