/*
Theme Name: Santos Barbosa Advogado
Theme URI: https://santosbarbosa.adv.br
Author: Santos Barbosa Advogado
Description: Tema institucional de página única para o escritório Santos Barbosa Advogado — direito público e tributário.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: santos-barbosa
*/

:root{
  --tinta:#101F27;
  --tinta-2:#17303B;
  --papel:#FEF3EA;         /* creme da logo */
  --papel-2:#F7E7DA;
  --acento:#CE0404;        /* vermelho da logo */
  --acento-claro:#E8695E;  /* mesmo vermelho, legível sobre fundo escuro */
  --linha:rgba(254,243,234,.16);
  --maxw:1140px;
  --logo:url("assets/logo-clara.png");
  --topo:112px;
  --logo-vermelha:url("assets/logo-vermelha.png");
  --s1:url("assets/capa-escritorio.jpg");
  --s2:url("assets/capa-brasilia.jpg");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--topo)}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:300;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;margin:0;line-height:1.12}
p{margin:0 0 1.1em;text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.centro p,.centro h2,.nota,footer p{text-align:center}
.area p,.servico p,.etapa p,.bio p,.lead,.capa .sub{text-align:justify}
.canais li{text-align:left}
.credenciais li{text-align:justify;text-justify:inter-word;hyphens:auto}
.credenciais li strong{text-align:left}
@media (max-width:520px){p,.area p,.servico p,.etapa p,.bio p,.lead,.capa .sub{text-align:left;hyphens:manual}}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ——— topo fixo, em duas faixas ——— */
.topo{position:sticky;top:0;z-index:50;background:var(--papel)}
.faixa{background:var(--acento);color:#FDECE4}
.faixa .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 34px;padding-top:9px;padding-bottom:9px}
.faixa a{display:flex;align-items:center;gap:8px;text-decoration:none;color:#FFF0E8;
  font-size:13px;letter-spacing:.02em;transition:opacity .25s}
.faixa a:hover,.faixa a:focus-visible{opacity:.75}
.faixa svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.faixa svg .ponto{fill:currentColor;stroke:none}
.barra{border-bottom:1px solid rgba(45,32,28,.16)}
.barra .wrap{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.barra .marca{margin-right:auto}
.marca{display:flex;align-items:center;text-decoration:none}
.marca .logo{display:block;width:120px;height:61px;background:var(--logo-vermelha) left center/contain no-repeat}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.menu a{
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:#3A2B26;
  text-decoration:none;padding:5px 0;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.menu a:hover,.menu a:focus-visible,.menu a.ativo{color:var(--acento);border-color:var(--acento)}

/* ——— capa ——— */
.capa{background:var(--tinta);color:var(--papel);padding:130px 0 140px;position:relative;overflow:hidden}
.capa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acento-claro);z-index:3}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease}
.slide.ativa{opacity:1}
.slide.s1{background-image:var(--s1)}
.slide.s2{background-image:var(--s2)}
.capa::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(16,31,39,.95) 0%,rgba(16,31,39,.88) 46%,rgba(16,31,39,.62) 100%)}
.capa .wrap{position:relative;z-index:2}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento);margin-bottom:26px;
}
.capa h1{font-size:clamp(38px,6vw,72px);max-width:15ch;letter-spacing:-.01em}
.capa h1 em{font-style:italic;color:var(--acento-claro)}
.capa .sub{margin-top:26px;max-width:52ch;color:#DFE7EA;font-size:19px;text-shadow:0 1px 14px rgba(16,31,39,.8)}

/* ——— seções ——— */
section{padding:104px 0}
.escuro .eyebrow{color:#FBBDB4}
.escuro .regua{color:#FBBDB4}
.capa .eyebrow{
  font-family:"IBM Plex Sans",sans-serif;font-weight:400;font-size:13px;letter-spacing:.2em;
  color:#EFE0DB;text-shadow:0 1px 12px rgba(16,31,39,.85);
}
.escuro .regua{background:var(--acento-claro)}
.claro{background:var(--papel)}
.escuro{background:var(--tinta);color:var(--papel)}
.escuro p,.escuro .lead{color:#D3DDE0}
.medio{background:var(--papel-2)}
h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:14px}
.lead{max-width:60ch;color:#4A3B36;font-size:19px}
.regua{width:54px;height:2px;background:var(--acento);margin:0 0 30px}

/* áreas */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;background:var(--linha);margin-top:56px;border-top:1px solid var(--linha)}
.area.vazio{padding:0}
@media (max-width:700px){.area.vazio{display:none}}
.area{background:var(--tinta);padding:34px 30px 40px}
.area h3{font-size:24px;margin:0 0 12px;color:var(--papel)}
.area p{font-size:15.5px;color:#BECDD2;margin:0}

/* perfil */
.perfil{display:grid;grid-template-columns:minmax(0,232px) 1fr;gap:44px;align-items:start;margin-top:52px}
.retrato figure{margin:0}
.retrato img{width:100%;height:412px;object-fit:cover;object-position:56% 12%;filter:grayscale(.25) contrast(1.02)}
.retrato figcaption{
  margin-top:12px;font-family:"IBM Plex Mono",monospace;font-size:10px;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;color:#6B564E;
}
@media (max-width:1100px){.retrato img{height:392px}}
@media (max-width:900px){.perfil{grid-template-columns:170px 1fr;gap:26px}.retrato img{height:300px}}
@media (max-width:620px){
  .perfil{grid-template-columns:1fr;gap:24px}
  .retrato{max-width:186px}
  .retrato img{height:240px}
  .retrato figcaption{margin-top:10px}
}
.nome-bio{font-size:clamp(26px,3vw,36px);margin-bottom:6px}
.cargo{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento);margin-bottom:26px}
.bio p{color:#4A3B36;max-width:62ch}
.bio p strong{font-weight:600;color:#2E211C}
.sub-bio{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento);font-weight:500;margin:34px 0 14px}
.credenciais{list-style:none;margin:34px 0 0;padding:0;font-size:15.5px;border-top:1px solid rgba(45,32,28,.18)}
.credenciais li{padding:14px 0;border-bottom:1px solid rgba(45,32,28,.16);color:#4A3B36}
.credenciais li strong{display:block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acento);font-weight:500;margin-bottom:5px}

/* experiência — anéis abertos */
.centro{text-align:center}
.fio{width:min(540px,70%);height:1px;background:rgba(237,240,239,.45);margin:0 auto 46px}
.titulo-fino{
  font-family:"IBM Plex Sans",sans-serif;font-weight:400;
  font-size:clamp(30px,4.4vw,50px);letter-spacing:.16em;color:var(--papel);
  margin-bottom:60px;
}
.aneis{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:center}
.anel{position:relative;display:flex;align-items:center;justify-content:center;min-height:170px}
.anel svg{
  position:absolute;width:150px;height:150px;left:50%;top:50%;
  transform:translate(-88%,-50%);overflow:visible;
}
.anel svg circle{
  fill:none;stroke:var(--acento-claro);stroke-width:1.2;opacity:.75;
  stroke-dasharray:330 85;stroke-dashoffset:-42.5;
}
.anel span{
  position:relative;font-size:16px;font-weight:500;letter-spacing:.02em;
  color:var(--papel);max-width:14ch;line-height:1.35;
}
.nota{
  margin-top:54px;font-size:18px;color:#B9C7CC;max-width:60ch;
  margin-left:auto;margin-right:auto;
}

/* serviços */
.servicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px 46px;margin-top:56px}
.servico{border-top:1px solid rgba(45,32,28,.20);padding-top:22px}
.apresentacao{max-width:78ch;margin-top:20px;color:#574741;font-size:17px}
.servico h3{font-size:20px;margin-bottom:10px}
.servico p{font-size:15.5px;color:#574741;margin:0}

/* método */
.etapas{margin-top:56px}
.etapa{display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:baseline;padding:26px 0;border-bottom:1px solid rgba(45,32,28,.16)}
.etapa:first-child{border-top:1px solid rgba(45,32,28,.16)}
.etapa .n{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--acento);letter-spacing:.1em}
.etapa h3{font-size:21px;margin-bottom:8px}
.etapa p{font-size:15.5px;color:#574741;margin:0;max-width:62ch}

/* contato */
.contato{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.canais{list-style:none;margin:34px 0 0;padding:0}
.canais li{padding:18px 0;border-bottom:1px solid rgba(45,32,28,.18)}
.canais span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B564E;display:block;margin-bottom:6px}
.canais a{font-size:19px;text-decoration:none;border-bottom:1px solid var(--acento);padding-bottom:2px}
.canais a:hover{color:var(--acento)}

footer{background:var(--tinta);color:#8FA3AA;padding:46px 0;font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer .marca-rodape{display:block;width:74px;height:38px;background:var(--logo) left center/contain no-repeat}

:focus-visible{outline:2px solid var(--acento-claro);outline-offset:3px}
.rev{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:1180px){.menu{gap:18px}.menu a{font-size:12px;letter-spacing:.08em}}
@media (max-width:900px){.contato{grid-template-columns:1fr;gap:44px}}
@media (max-width:860px){
  :root{--topo:150px}
  .barra .wrap{flex-wrap:wrap;justify-content:flex-start;gap:10px 24px;padding-top:12px;padding-bottom:12px}
  .marca{margin-right:auto}
  .marca .logo{width:104px;height:53px}
  .menu{justify-content:flex-start;gap:12px 18px;width:100%}
  .faixa .wrap{justify-content:flex-start;gap:6px 18px;font-size:12px}
  section{padding:72px 0}
  .capa{padding:90px 0 100px}
  .aneis{grid-template-columns:1fr;gap:8px}
  .anel{min-height:150px}
  .anel svg{width:132px;height:132px;transform:translate(-85%,-50%)}
  .titulo-fino{margin-bottom:34px}
  .etapa{grid-template-columns:1fr;gap:6px}
}
@media (max-width:560px){.faixa a{font-size:11.5px}.menu a{font-size:11.5px}}