/* =========================================================
   Valentim Rodrigues Advocacia — folha de estilo
   Tema único: bordô sobre branco. Não usar modo escuro.
   ========================================================= */
:root{
  --bordo:#6F1012;
  --bordo-forte:#560C0E;
  --branco:#FFFFFF;
  --tinta:#16161A;
  --tinta-2:#55555C;
  --tinta-3:#8E8E96;
  --regua:#E6E6E9;
  --regua-2:#D4D4D8;
  --falta:#A31E42;
  --falta-bg:#FDF3F5;
  --display:"Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --texto:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(1.5rem,5vw,3.5rem);
  --shell:1160px;
  --rail:150px;
  color-scheme:light;
  scroll-behavior:smooth;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font-family:var(--texto); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bordo); text-underline-offset:3px; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--bordo); outline-offset:3px}
.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter)}

.pular{position:absolute; left:-9999px; top:0; background:var(--bordo); color:#fff; padding:.75rem 1.25rem; z-index:100}
.pular:focus{left:0}

/* ---------- topo ---------- */
.fio-topo{height:4px; background:var(--bordo)}
.topo{position:sticky; top:0; z-index:30; background:var(--branco); border-bottom:1px solid var(--regua)}
.topo__in{display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:76px; padding-block:.9rem}
/* logotipo — altura fixa, largura livre (proporção sempre preservada) */
.marca{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; flex:none}
.marca img{display:block; height:38px; width:auto}
.marca--neg img{height:44px; filter:brightness(0) invert(1)}
@media (max-width:820px){
  .marca img{height:28px}
  .marca--neg img{height:32px}
}
.marca__nome{display:block; font-family:var(--display); font-weight:500; font-size:1.32rem; color:var(--bordo); letter-spacing:.004em}
.marca__tipo{display:block; margin-top:.45rem; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-3)}
.topo__meta{display:flex; gap:2rem; font-size:.8rem; color:var(--tinta-2); text-align:right}
.topo__meta b{display:block; font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3); font-weight:500; margin-bottom:.2rem}
.topo__meta a{text-decoration:none}
@media (max-width:820px){ .topo__meta{display:none} }

/* ação no cabeçalho */
.topo__acao{display:flex; align-items:center; gap:1.75rem}
.btn--sm{min-height:44px; padding:0 1.15rem; font-size:.92rem; gap:.5rem}
@media (max-width:720px){ .topo__acao .btn{display:none} }


.abas{border-bottom:1px solid var(--regua); overflow-x:auto; scrollbar-width:none; background:var(--branco)}
.abas::-webkit-scrollbar{display:none}
.abas__in{display:flex; gap:2.25rem; min-width:max-content}
.aba{
  font-family:var(--texto); font-size:.875rem; color:var(--tinta-2);
  padding:.95rem 0; border-bottom:2px solid transparent; white-space:nowrap;
  text-decoration:none; display:inline-block;
}
.aba:hover{color:var(--bordo)}
.aba[aria-current="page"]{color:var(--bordo); border-bottom-color:var(--bordo)}

/* ---------- abertura ---------- */
.abertura{padding-block:clamp(3.5rem,8vw,6rem) clamp(3rem,7vw,5rem); border-bottom:1px solid var(--regua)}
.abertura__grid{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:3rem 4rem; align-items:start}
@media (max-width:900px){ .abertura__grid{grid-template-columns:1fr; gap:2.5rem} }
.eyebrow{margin:0 0 2rem; font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--tinta-3)}
.abertura h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,5.4vw,3.6rem); line-height:1.1; letter-spacing:-.016em;
  margin:0 0 1.6rem; max-width:17ch; text-wrap:balance;
}
.abertura h1 em{font-style:italic; color:var(--bordo)}
.abertura__lead{margin:0; max-width:44ch; font-size:1.08rem; color:var(--tinta-2)}
.ficha{border-top:2px solid var(--bordo); padding-top:1.25rem; display:grid; gap:1.35rem}
.ficha div b{display:block; font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3); font-weight:500; margin-bottom:.3rem}
.ficha div span{display:block; font-size:.95rem; color:var(--tinta)}
.ficha a{text-decoration:none}

/* ---------- cabeçalho de página ---------- */
.cab{padding-block:clamp(2.75rem,6vw,4.25rem) clamp(1.75rem,4vw,2.5rem); border-bottom:1px solid var(--regua)}
.cab h1{font-family:var(--display); font-weight:400; font-size:clamp(1.85rem,4vw,2.6rem); line-height:1.14; letter-spacing:-.014em; margin:0 0 .9rem; max-width:20ch}
.cab__sub{margin:0; max-width:56ch; color:var(--tinta-2); font-size:1.02rem}

/* ---------- bloco com trilho ---------- */
.bloco{border-bottom:1px solid var(--regua)}
.bloco__in{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:3rem; padding-block:clamp(2.75rem,6vw,4.25rem)}
@media (max-width:860px){ .bloco__in{grid-template-columns:1fr; gap:1.5rem} }
.bloco__rot{margin:0; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3); padding-top:.45rem}
@media (max-width:860px){ .bloco__rot{padding-top:0} }
.bloco h2{font-family:var(--display); font-weight:400; font-size:clamp(1.45rem,3vw,1.9rem); line-height:1.22; margin:0 0 1.25rem; letter-spacing:-.01em; max-width:24ch}
.intro{margin:0 0 2.5rem; max-width:56ch; color:var(--tinta-2); font-size:.98rem}
.texto{max-width:58ch}
.texto p{margin:0 0 1.2rem; font-size:1.02rem}
.texto p:last-child{margin-bottom:0}
.mais{margin:2.25rem 0 0; font-size:.95rem}
.obs{margin:2.5rem 0 0; max-width:56ch; font-size:.96rem; color:var(--tinta-2)}

.declara{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.6rem); line-height:1.45; color:var(--tinta);
  max-width:34ch; margin:0; padding-left:1.5rem; border-left:2px solid var(--bordo);
}

/* ---------- áreas ---------- */
.areas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){ .areas{grid-template-columns:1fr} }
.area{padding:1.4rem 2.25rem 2rem 0; border-top:1px solid var(--regua-2)}
.areas .area:nth-child(even){padding-left:2.25rem; border-left:1px solid var(--regua)}
@media (max-width:760px){
  .areas .area:nth-child(even){padding-left:0; border-left:0}
  .area{padding-right:0}
}
.area h3{font-family:var(--display); font-weight:500; font-size:1.18rem; margin:0 0 .55rem; color:var(--bordo)}
.area p{margin:0; font-size:.96rem; color:var(--tinta-2)}

.detalhe{display:grid; gap:0}
.det{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem 3.5rem; padding:1.6rem 0 2.4rem; border-top:1px solid var(--regua-2)}
@media (max-width:760px){ .det{grid-template-columns:1fr; gap:1.35rem} }
.det h3{font-family:var(--display); font-weight:500; font-size:1.3rem; margin:0 0 .8rem; color:var(--bordo)}
.det p{margin:0 0 .8rem; font-size:.98rem; color:var(--tinta-2)}
.det p:last-child{margin-bottom:0}
.det__rot{margin:0 0 .95rem; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3)}
.lista{list-style:none; margin:0; padding:0; display:grid; gap:.65rem}
.lista li{position:relative; padding-left:1.25rem; font-size:.96rem; color:var(--tinta-2)}
.lista li::before{content:""; position:absolute; left:0; top:.75em; width:7px; height:1px; background:var(--bordo)}

/* ---------- passos ---------- */
.passos{list-style:none; margin:0; padding:0; display:grid; counter-reset:p; max-width:60ch}
.passos li{counter-increment:p; display:grid; grid-template-columns:3rem minmax(0,1fr); gap:1.25rem; align-items:start; padding:1.4rem 0; border-top:1px solid var(--regua)}
.passos li:first-child{border-top:0; padding-top:0}
.passos li::before{content:"0" counter(p); font-family:var(--display); font-size:1.5rem; color:var(--bordo); line-height:1.15; font-variant-numeric:tabular-nums}
.passos strong{display:block; font-weight:500; font-size:1.05rem; margin-bottom:.2rem}
.passos p{margin:0; font-size:.96rem; color:var(--tinta-2)}

/* ---------- destaque em bordô ---------- */
.destaque{background:var(--bordo); color:#fff}
.destaque__in{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:3rem; padding-block:clamp(3rem,6vw,4.5rem)}
@media (max-width:860px){ .destaque__in{grid-template-columns:1fr; gap:1.5rem} }
.destaque__rot{margin:0; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.62); padding-top:.45rem}
@media (max-width:860px){ .destaque__rot{padding-top:0} }
.destaque h2{font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,3.2vw,2.05rem); line-height:1.2; margin:0 0 1.15rem; max-width:22ch; letter-spacing:-.01em}
.destaque p{margin:0 0 1.15rem; max-width:52ch; color:rgba(255,255,255,.82); font-size:1.02rem}
.destaque p:last-of-type{margin-bottom:1.85rem}
.destaque .saiba{color:#fff; font-size:.92rem; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:3px}
.destaque .saiba:hover{border-bottom-color:#fff}

/* ---------- colunas ---------- */
.colunas{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:2.25rem 3rem}
.col h3{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3); margin:0 0 1rem; padding-bottom:.7rem; border-bottom:1px solid var(--regua-2)}
.col p{margin:0 0 .9rem; font-size:.96rem; color:var(--tinta-2)}
.col p:last-child{margin-bottom:0}

/* ---------- perguntas ---------- */
.faq{display:grid; max-width:64ch; border-top:1px solid var(--regua-2)}
.faq details{border-bottom:1px solid var(--regua)}
.faq summary{cursor:pointer; list-style:none; padding:1.25rem 2.25rem 1.25rem 0; font-size:1.05rem; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.25rem; top:1.05rem; font-family:var(--display); font-size:1.4rem; color:var(--bordo); line-height:1}
.faq details[open] summary{color:var(--bordo)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.4rem; font-size:.98rem; color:var(--tinta-2); max-width:58ch}

/* ---------- quem assina ---------- */
.assina{display:grid; grid-template-columns:190px minmax(0,1fr); gap:3rem; align-items:start}
@media (max-width:680px){ .assina{grid-template-columns:1fr; gap:1.75rem} }
.retrato{aspect-ratio:4/5; max-width:190px; border:1px dashed var(--falta); background:var(--falta-bg); display:grid; place-items:center; text-align:center; padding:1rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--falta)}
.assina__corpo p{margin:0 0 1.05rem; max-width:56ch; font-size:1.02rem}
.assina__corpo p:last-child{margin-bottom:0}

/* marcação do que ainda falta preencher — apagar quando o conteúdo chegar */
.falta{display:inline-block; padding:.05em .45em; background:var(--falta-bg); color:var(--falta); border:1px dashed var(--falta); font-size:.9em}

/* ---------- contato ---------- */
.contatos{list-style:none; margin:0; padding:0; display:grid; max-width:60ch}
.contatos li{display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1rem; align-items:baseline; padding:1rem 0; border-top:1px solid var(--regua)}
.contatos li:first-child{border-top:0; padding-top:0}
@media (max-width:520px){ .contatos li{grid-template-columns:1fr; gap:.15rem} }
.rot{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3)}
.val{font-size:1.05rem}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:54px; padding:0 1.85rem; background:var(--bordo-forte); color:#fff; border:1px solid var(--bordo-forte); font-family:var(--texto); font-size:1rem; font-weight:500; text-decoration:none; transition:background .15s ease}
.btn:hover{background:var(--bordo); border-color:var(--bordo)}
.acao{display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 1.75rem; margin-top:2.25rem}
.horario{font-size:.92rem; color:var(--tinta-2)}

/* ---------- rodapé ---------- */
.rodape{background:var(--bordo); color:#fff; padding-block:clamp(3rem,6vw,4.25rem) 7rem}
@media (min-width:721px){ .rodape{padding-bottom:3rem} }
.rodape__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap:2.5rem 3rem}
@media (max-width:820px){ .rodape__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .rodape__grid{grid-template-columns:1fr} }
.rodape .marca__nome{color:#fff; font-size:1.32rem}
.rodape .marca__tipo{color:rgba(255,255,255,.62)}
.rodape h2{font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 1rem; font-weight:500}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.95rem}
.rodape a{color:#fff; text-decoration:none; border-bottom:1px solid transparent}
.rodape a:hover{border-bottom-color:rgba(255,255,255,.6)}
.rodape__ctt{margin:0; font-size:.95rem; line-height:1.95; color:rgba(255,255,255,.86)}
.aviso{margin:3rem 0 0; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.22); font-size:.78rem; line-height:1.75; color:rgba(255,255,255,.6); max-width:78ch}
.aviso .falta{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5)}

/* ---------- barra fixa no celular ---------- */
.barra{position:fixed; inset:auto 0 0 0; z-index:40; display:none; padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--regua-2)}
.barra .btn{width:100%}
@media (max-width:720px){ .barra{display:block} }

@media (prefers-reduced-motion:reduce){ :root{scroll-behavior:auto} *{transition:none!important} }