/* ===========================================================
   Renata Höher Advocacia Especializada
   Sistema de design fechado no ESTUDO-Renatta-Hoher.md secao 3.
   Nenhuma cor, fonte ou raio fora deste bloco.
   =========================================================== */

:root{
  --tinta:#050a30;
  --tinta-fundo:#020318;
  --osso:#f2f1ef;
  --branco:#ffffff;
  --cinza:#5b5f6a;
  --cinza-rotulo:#686b75;
  --linha:rgba(5,10,48,.12);
  --linha-forte:rgba(5,10,48,.45);
  /* WCAG 1.4.11: borda de componente clicavel. .48 e o minimo que da 3:1
     contra o branco do card (3,45:1) e contra o osso da pagina (3,06:1). */
  --linha-clique:rgba(5,10,48,.48);
  --linha-clique-escuro:rgba(242,241,239,.37);

  --disp:"Italiana",Georgia,serif;
  --corpo:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --dado:"IBM Plex Mono",ui-monospace,monospace;

  --raio-card:14px;
  --raio-btn:4px;
  --raio-selo:100px;
  --env:1160px;

  --topo-h:76px;
}

@property --p { syntax: "<percentage>"; initial-value: 0%; inherits: false; }

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--osso);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--tinta);color:var(--osso)}

.env{max-width:var(--env);margin:0 auto;padding:0 24px;width:100%}
/* left:-9999px empurraria a caixa de rolagem horizontal do documento.
   clip-path + tamanho 1px esconde sem sair do fluxo. */
.pular{
  position:absolute;left:0;top:0;z-index:200;
  background:var(--tinta);color:var(--osso);
  padding:12px 18px;border-radius:0 0 var(--raio-btn) 0;
  width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);
}
.pular:focus{width:auto;height:auto;overflow:visible;clip-path:none}

/* ─── TIPOGRAFIA ─────────────────────────────────────────── */

h1{font-family:var(--disp);font-size:clamp(2.6rem,7vw,5.2rem);font-weight:400;line-height:1.04;letter-spacing:.01em;margin:0;text-wrap:balance}
h2{font-family:var(--disp);font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:400;line-height:1.12;margin:0;text-wrap:balance}
h3{font-family:var(--corpo);font-size:1.06rem;font-weight:600;line-height:1.35;margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.rotulo{
  font-family:var(--corpo);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cinza-rotulo);
  margin:0 0 14px;overflow-wrap:anywhere;
}
.dado{font-family:var(--dado);font-size:.86rem;letter-spacing:-.01em}
.intro{font-size:clamp(1.02rem,1.9vw,1.15rem);color:var(--cinza);max-width:62ch}
.dim{color:var(--cinza)}

/* ─── BOTOES ─────────────────────────────────────────────
   Assinatura visual 1: existe exatamente UM botao solido navy
   por pagina, e ele e sempre o de urgencia. .btn-cheio.
   Todo o resto e contorno (.btn-linha) ou link (.link-seta).
   ───────────────────────────────────────────────────────── */

.btn-cheio,.btn-linha{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--corpo);font-size:.92rem;font-weight:600;line-height:1;
  padding:15px 22px;border-radius:var(--raio-btn);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background-color .22s ease,color .22s ease,border-color .22s ease;
}
.btn-cheio{background:var(--tinta);color:var(--branco)}
.btn-linha{background:transparent;color:var(--tinta);border-color:var(--linha-forte)}
@media(hover:hover){
  .btn-cheio:hover{transform:translateY(-2px)}
  .btn-linha:hover{border-color:var(--tinta);transform:translateY(-2px)}
}
.btn-cheio:focus-visible,.btn-linha:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

/* fundo escuro inverte */
.escuro .btn-cheio{background:var(--osso);color:var(--tinta)}
.escuro .btn-linha{color:var(--osso);border-color:rgba(242,241,239,.42)}
@media(hover:hover){ .escuro .btn-linha:hover{border-color:var(--osso)} }
.escuro .btn-cheio:focus-visible,.escuro .btn-linha:focus-visible{outline-color:var(--osso)}

.link-seta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.94rem;font-weight:600;text-decoration:none;color:var(--tinta);
  border-bottom:1px solid var(--linha-forte);padding-bottom:3px;
  transition:gap .22s ease,border-color .22s ease;
}
.link-seta::after{content:"\2192";font-weight:400;transition:transform .22s ease}
@media(hover:hover){ .link-seta:hover{gap:13px;border-color:var(--tinta)} }
.escuro .link-seta{color:var(--osso);border-color:rgba(242,241,239,.42)}

.pulso{width:7px;height:7px;border-radius:50%;background:#7bd88f;flex:none}

/* ─── HEADER ─────────────────────────────────────────────── */

.topo{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(242,241,239,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,box-shadow .3s ease;
}
/* efeito 2: header densifica no scroll */
.topo .env{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--topo-h);transition:height .3s cubic-bezier(.2,.8,.2,1);
}
.topo.denso{border-bottom-color:var(--linha);box-shadow:0 4px 24px rgba(5,10,48,.05)}

/* variante escura: usada na landing /plantao/, que abre em fundo navy */
.topo-escuro{background:rgba(2,3,24,.9);color:var(--osso)}
.topo-escuro .btn-cheio{background:var(--osso);color:var(--tinta)}
.topo-escuro.denso{border-bottom-color:rgba(242,241,239,.16);box-shadow:0 4px 24px rgba(2,3,24,.3)}
.topo.denso .env{height:58px}
/* o menu mobile (overlay de tela cheia) comeca em top:var(--topo-h), que e
   um valor FIXO de 76px -- se a pagina ja estava rolada quando o menu abre,
   o header "densifica" pra 58px reais e sobra um vao de 18px entre o fim
   do header de verdade e o topo do menu, onde a pagina por tras aparece.
   Trava o header na altura cheia enquanto o menu esta aberto pra --topo-h
   sempre bater com a altura real. */
body.gaveta-aberta .topo.denso .env{height:var(--topo-h)}

.marca{display:block;text-decoration:none;flex:none;line-height:0}
.marca img{
  height:clamp(38px,4.4vw,54px);width:auto;
  transition:height .3s cubic-bezier(.2,.8,.2,1);
}
.topo.denso .marca img{height:clamp(32px,3.4vw,40px)}
/* no header escuro a logo navy sumiria: troca por filtro em vez de
   carregar um segundo arquivo */
.topo-escuro .marca img{filter:invert(1) brightness(1.6) saturate(0)}

.menu{display:flex;align-items:center;gap:26px}
.menu-rodape{display:none}
.menu a{
  text-decoration:none;font-size:.88rem;font-weight:500;color:var(--tinta);
  padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s ease;
}
@media(hover:hover){ .menu a:hover{border-bottom-color:var(--tinta)} }
.menu a[aria-current="page"]{border-bottom-color:var(--tinta)}

.topo .btn-cheio{padding:12px 18px;font-size:.85rem}

.abre-menu{
  display:none;background:none;border:1px solid var(--linha-forte);
  border-radius:var(--raio-btn);width:42px;height:40px;cursor:pointer;
  align-items:center;justify-content:center;color:var(--tinta);flex:none;
}
.abre-menu span{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.abre-menu span::before,.abre-menu span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;
  transition:transform .25s ease,top .25s ease;
}
.abre-menu span::before{top:-6px}
.abre-menu span::after{top:6px}
body.gaveta-aberta .abre-menu span{background:transparent}
body.gaveta-aberta .abre-menu span::before{top:0;transform:rotate(45deg)}
body.gaveta-aberta .abre-menu span::after{top:0;transform:rotate(-45deg)}

/* corpo comeca abaixo do header fixo */
.conteudo{padding-top:var(--topo-h)}

@media(max-width:940px){
  /* com 3 itens flex (marca, abre-menu, btn-cheio) o space-between
     centralizava o botao de menu entre a logo e o plantao. margin-left:auto
     agrupa abre-menu + btn-cheio no canto direito, como em qualquer site. */
  .abre-menu{display:inline-flex;margin-left:auto}

  /* menu de tela cheia: cobre da base do header pra baixo, fundo navy,
     links grandes em serifa (a mesma familia dos titulos) que entram com
     leve atraso escalonado, um por um. */
  .menu{
    position:fixed;top:var(--topo-h);left:0;right:0;
    height:calc(100dvh - var(--topo-h));
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:6px;background:var(--tinta-fundo);
    padding:44px 28px 0;overflow-y:auto;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  body.gaveta-aberta .menu{opacity:1;pointer-events:auto}
  .menu a{
    font-family:var(--disp);font-size:clamp(1.6rem,7.5vw,2.3rem);font-weight:400;
    color:var(--osso);padding:9px 0;border-bottom:0;text-decoration:none;
    opacity:0;transform:translateY(14px);
    transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);
  }
  body.gaveta-aberta .menu a{opacity:1;transform:none}
  .menu a:nth-child(1){transition-delay:.06s}
  .menu a:nth-child(2){transition-delay:.11s}
  .menu a:nth-child(3){transition-delay:.16s}
  .menu a:nth-child(4){transition-delay:.21s}
  .menu a:nth-child(5){transition-delay:.26s}
  .menu a[aria-current="page"]{color:rgba(242,241,239,.5)}

  /* rodape decorativo dentro do overlay: preenche o espaco que sobrava
     vazio embaixo dos links, com a mesma assinatura do rodape do site */
  .menu-rodape{
    display:flex;flex-direction:column;gap:6px;margin-top:auto;
    padding:22px 0 32px;width:100%;border-top:1px solid rgba(242,241,239,.16);
    font-family:var(--dado);font-size:.72rem;color:rgba(242,241,239,.5);
    opacity:0;transition:opacity .5s ease;transition-delay:.3s;
  }
  body.gaveta-aberta .menu-rodape{opacity:1}

  /* o header (onde o botao mora) continua claro mesmo com o menu aberto --
     so o painel abaixo dele vira navy -- entao o X fica navy sempre, nunca
     osso, senao some sobre o proprio header */
  body.gaveta-aberta{overflow:hidden}
}

/* ─── TRACO DIVISOR (assinatura visual 2) ────────────────── */

.divisor{
  display:flex;align-items:center;gap:20px;
  max-width:var(--env);margin:0 auto;padding:0 24px;
  color:var(--tinta);
}
.divisor::before,.divisor::after{content:"";flex:1;height:1px;background:var(--linha)}
.traco{
  width:96px;height:auto;fill:currentColor;flex:none;
  --p:0%;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) - 12%), transparent var(--p));
          mask-image:linear-gradient(90deg,#000 calc(var(--p) - 12%), transparent var(--p));
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:--p 1.15s cubic-bezier(.4,0,.2,1);
}
.traco.vis{ --p:112% }

/* ─── REVEAL ON SCROLL (efeito 1) ────────────────────────── */

.rev{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.rev.vis{opacity:1;transform:none}
.rev[style*="--i"]{transition-delay:calc(var(--i) * 90ms)}

/* ─── SECOES ─────────────────────────────────────────────── */

.secao{padding:clamp(72px,9vw,116px) 0}
.secao-cabeca{max-width:64ch;margin-bottom:clamp(36px,5vw,54px)}
.secao-cabeca h2{margin-bottom:16px}

.escuro{background:var(--tinta-fundo);color:var(--osso)}
.escuro .rotulo{color:rgba(242,241,239,.62)}
.escuro .dim,.escuro .intro{color:rgba(242,241,239,.78)}
.escuro .divisor::before,.escuro .divisor::after{background:rgba(242,241,239,.2)}

/* ─── HERO COM SCRUB DE VIDEO ────────────────────────────
   O video ocupa a viewport inteira. So funciona porque o fundo
   dele foi achatado no #f2f1ef exato da pagina: sem moldura,
   nao existe emenda pra disfarcar.
   ───────────────────────────────────────────────────────── */

/* --curso: quanto scroll os 8s de video ocupam. Maior = mais lento.
   560vh era o passo anterior; 820vh estica em ~46% a mesma animacao. */
.cena{position:relative;--curso:820vh;height:var(--curso)}
.grude{
  position:sticky;top:var(--topo-h);
  height:calc(100dvh - var(--topo-h));
  overflow:hidden;display:grid;place-items:center;
}

/* ── ENQUADRAMENTO DO HERO ─────────────────────────────────
   Proporcao do prototipo aprovado: a balanca contida no meio
   da tela, com respiro em volta, e mascara suave nas quatro
   bordas dissolvendo o quadro no fundo da pagina.
   Nao sangra ate a borda: 72vw ate o teto de 860px.
   ────────────────────────────────────────────────────────── */
.palco{
  position:relative;
  width:min(72vw,860px); aspect-ratio:1100/618;
  /* teto de altura: em tela baixa a balanca encolhe junto, garantindo
     faixa limpa em cima pro titulo e embaixo pras portas */
  max-height:56dvh;
  -webkit-mask-image:
     linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
     linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:
     linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
     linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.palco video,.palco .poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
}
.palco video{opacity:0;transition:opacity .5s ease}
.palco video.pronto{opacity:1}
.palco .poster{transition:opacity .5s ease}
.palco .poster.oculto{opacity:0}

.legendas{position:absolute;inset:0;pointer-events:none;z-index:2}
.legenda{
  position:absolute;left:0;right:0;padding:0 24px;
  opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);
}
.legenda.vis{opacity:1;transform:none}
.legenda{isolation:isolate}
.legenda .env{padding:0 24px}

.lg-2,.lg-3,.lg-4{top:50%;transform:translateY(-50%) translateY(20px)}
.legenda.lg-2.vis,.legenda.lg-3.vis,.legenda.lg-4.vis{transform:translateY(-50%)}
.lg-5{bottom:7vh}

.lg-1{top:calc(var(--topo-h) + 4vh)}
.lg-1 .env{max-width:var(--env)}
.lg-1 h1{max-width:11ch;font-size:clamp(2.2rem,4.6vw,3.9rem)}
/* o titulo e o bloco mais exposto: fica em cima da viga em tela baixa.
   Veu proprio, mais fechado e mais alto que o dos blocos de dado. */


/* Veu de luz atras dos blocos de dado.
   Em cima da balanca o navy some sobre o metal. Antes era um gradiente
   linear dentro de uma caixa, mas a caixa tinha topo e base retos e essa
   aresta aparecia cortando a imagem. Elipse radial nao tem borda pra
   aparecer: dissolve em todas as direcoes. */
.legenda.tem-veu::before{
  content:"";position:absolute;top:50%;translate:0 -50%;
  width:min(64vw,790px);height:190%;
  pointer-events:none;z-index:-1;
}
.lg-2::before,.lg-4::before{
  left:-10vw;
  background:radial-gradient(ellipse 58% 42% at 46% 50%,
    var(--osso) 0%, var(--osso) 42%, rgba(242,241,239,.66) 68%, rgba(242,241,239,0) 100%);
}
.lg-1::before{
  left:-12vw;width:min(58vw,700px);height:260%;
  background:radial-gradient(ellipse 56% 40% at 44% 50%,
    var(--osso) 0%, var(--osso) 54%, rgba(242,241,239,.8) 76%, rgba(242,241,239,0) 100%);
}
.lg-3::before{
  right:-10vw;
  background:radial-gradient(ellipse 58% 42% at 54% 50%,
    var(--osso) 0%, var(--osso) 42%, rgba(242,241,239,.66) 68%, rgba(242,241,239,0) 100%);
}

/* bloco de dado: numero grande + uma linha. Menos texto, mais peso. */
.marco{max-width:min(36vw,410px)}
.marco .n{
  display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(3.4rem,9vw,7.5rem);line-height:.86;letter-spacing:.01em;
  margin:0 0 4px;
}
.marco .n small{font-size:.34em;letter-spacing:.02em}
/* O telefone era numero solto com um risco embaixo, e ficava tosco. Como
   e o unico elemento de acao do hero, vira botao preenchido: le como coisa
   clicavel, nao como texto. O numero segue em Plex Mono, que no sistema e
   a fonte de dado conferivel. */
.btn-plantao{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--tinta);color:var(--branco);
  border-radius:var(--raio-btn);padding:15px 20px;text-decoration:none;
  font-family:var(--dado);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
@media(hover:hover){ .btn-plantao:hover{transform:translateY(-2px)} }
.btn-plantao:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.marco p{
  font-size:clamp(.96rem,1.4vw,1.1rem);line-height:1.5;margin:12px 0 0;
  color:var(--tinta);max-width:28ch;text-wrap:pretty;
}
.marco p b{font-weight:600}
.marco.dir{margin-left:auto;text-align:right}
.marco.dir p{margin-left:auto}

.selo-cena{
  position:absolute;left:0;right:0;bottom:2.2vh;padding:0 24px;
  opacity:0;transition:opacity .6s ease;z-index:2;
}
.selo-cena.vis{opacity:1}
.selo-cena .env{display:flex;flex-wrap:wrap;gap:8px 22px}
.selo-cena span{font-family:var(--dado);font-size:.78rem;color:var(--cinza-rotulo)}

/* as tres portas do hero */
.portas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;pointer-events:auto}
.porta{
  background:var(--branco);border:1px solid var(--linha-clique);border-radius:var(--raio-card);
  padding:18px 19px;text-decoration:none;color:var(--tinta);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease;
}
.porta strong{display:block;font-size:.97rem;font-weight:600;margin-bottom:6px}
.porta p{font-size:.83rem;color:var(--cinza);margin:0 0 12px;line-height:1.5}
.porta em{font-style:normal;font-size:.85rem;font-weight:600;display:inline-flex;gap:7px;align-items:center}
.porta em::after{content:"\2192";font-weight:400;transition:transform .24s ease}
@media(hover:hover){
  .porta:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(5,10,48,.11);border-color:var(--tinta)}
  .porta:hover em::after{transform:translateX(4px)}
}
.porta:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

/* hero estatico das paginas internas */
.capa{padding:clamp(58px,8vw,96px) 0 clamp(36px,5vw,56px)}
.capa h1{max-width:16ch;margin-bottom:22px}
.capa .intro{max-width:58ch}

/* ─── GRADES ─────────────────────────────────────────────── */

.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:26px 24px;display:flex;flex-direction:column;gap:10px;
}
.card h3{margin-bottom:2px}
.card p{font-size:.92rem;color:var(--cinza);margin:0}
.card .quando{
  font-size:.86rem;color:var(--tinta);margin-top:auto;padding-top:14px;
  border-top:1px solid var(--linha);
}
.card .quando b{font-weight:600;display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-rotulo);margin-bottom:5px}
/* efeito 3: hover com profundidade, so em card clicavel */
a.card{border-color:var(--linha-clique);text-decoration:none;color:inherit;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease}
@media(hover:hover){ a.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(5,10,48,.11);border-color:var(--tinta)} }
a.card:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

.escuro .card{background:rgba(242,241,239,.05);border-color:rgba(242,241,239,.16)}
.escuro .card p{color:rgba(242,241,239,.75)}
.escuro .card .quando{color:var(--osso);border-top-color:rgba(242,241,239,.16)}

/* ─── MOSTRAR MAIS (grids compridos no mobile) ────────────
   No celular ninguem quer rolar past 8 cards. Mostra so os 2
   primeiros e revela o resto quando a pessoa pede. No desktop o
   grid aparece inteiro, como sempre -- a regra so existe dentro
   do media query de 760px. */
.btn-mostra-mais{display:none}
@media(max-width:760px){
  .grade.expande-mobile > :nth-child(n+3){display:none}
  .grade.expande-mobile.aberto > *{display:revert}
  .btn-mostra-mais{
    display:inline-flex;align-items:center;gap:9px;margin-top:18px;
    font-family:var(--corpo);font-size:.9rem;font-weight:600;
    background:transparent;color:var(--tinta);border:1px solid var(--linha-forte);
    border-radius:var(--raio-btn);padding:13px 20px;cursor:pointer;
  }
  .btn-mostra-mais:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
  .escuro .btn-mostra-mais{color:var(--osso);border-color:rgba(242,241,239,.42)}
  .escuro .btn-mostra-mais:focus-visible{outline-color:var(--osso)}
}

/* ─── BLOCO EXPANSIVEL (texto complementar no mobile) ─────
   Usado em dois niveis: a pagina de areas-de-atuacao fecha o artigo
   inteiro (resta so nome + seta), a pagina de sobre fecha so o ultimo
   paragrafo. Em ambos os casos o HTML vem sempre aberto (desktop
   mostra tudo) e o JS fecha por padrao no mobile. A seta fica
   centralizada verticalmente no summary, entao funciona igual com
   um summary de uma linha ou de duas (rotulo + titulo). */
.bloco-expande summary{cursor:pointer;list-style:none;display:block}
.bloco-expande summary::-webkit-details-marker{display:none}
/* .so-controle: o summary e so um controle pra abrir/fechar no mobile,
   nao e conteudo -- no desktop o details ja vem sempre aberto, entao o
   controle nem precisa aparecer */
@media(min-width:761px){ .so-controle > summary{display:none} }
@media(max-width:760px){
  .bloco-expande summary{position:relative;padding-right:30px}
  .bloco-expande summary::after{
    content:"";position:absolute;right:4px;top:50%;
    width:9px;height:9px;border-right:1.5px solid var(--cinza);border-bottom:1.5px solid var(--cinza);
    transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
  }
  .bloco-expande[open] summary::after{transform:translateY(-25%) rotate(-135deg)}

  /* areas-de-atuacao: cada artigo vira uma linha compacta -- menos
     respiro vertical que o padrao de secao, porque agora e uma lista
     de 8 itens, nao 8 blocos de leitura inteira */
  .area-item{padding:20px 0 !important}
  .area-item .bloco-expande[open] summary{margin-bottom:4px}
}

/* ─── PLANTAO ────────────────────────────────────────────── */

.triagem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:30px 0 26px}
.triagem a{
  display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--linha-clique-escuro);border-radius:var(--raio-card);
  padding:20px 22px;text-decoration:none;color:var(--osso);
  transition:background-color .24s ease,border-color .24s ease,transform .24s cubic-bezier(.2,.8,.2,1);
}
.triagem a strong{font-size:1rem;font-weight:600}
.triagem a span{font-size:.84rem;color:rgba(242,241,239,.68);line-height:1.45}
@media(hover:hover){ .triagem a:hover{background:rgba(242,241,239,.07);border-color:var(--osso);transform:translateY(-3px)} }
.triagem a:focus-visible{outline:3px solid var(--osso);outline-offset:3px}

.numerao{
  display:inline-block;font-family:var(--dado);font-weight:500;
  font-size:clamp(1.5rem,4.4vw,2.4rem);letter-spacing:-.02em;
  text-decoration:none;color:inherit;border-bottom:1px solid rgba(242,241,239,.35);
  padding-bottom:4px;transition:border-color .24s ease;
}
@media(hover:hover){ .numerao:hover{border-bottom-color:var(--osso)} }
.nota{font-size:.86rem;color:rgba(242,241,239,.62);max-width:60ch;margin-top:20px}

/* ─── VIOLENCIA DE GENERO (bloco largo) ──────────────────── */

.painel{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:clamp(30px,4.6vw,54px);
}
.garantias{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.garantias li{
  padding-left:26px;position:relative;font-size:.98rem;color:var(--cinza);max-width:66ch;
}
.garantias li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:11px;height:1px;background:var(--linha-forte);
}
.garantias li b{color:var(--tinta);font-weight:600}

/* ─── PASSOS ─────────────────────────────────────────────── */

.passos{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;gap:2px}
.passos li{
  counter-increment:p;display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:26px 0;border-top:1px solid var(--linha);align-items:start;
}
.passos li:last-child{border-bottom:1px solid var(--linha)}
.passos li::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--dado);font-size:.92rem;color:var(--cinza-rotulo);padding-top:2px;
}
.passos h3{margin-bottom:6px}
.passos p{font-size:.95rem;color:var(--cinza);margin:0;max-width:62ch}

/* ─── SOBRE ──────────────────────────────────────────────── */

.dupla{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start}
.retrato{border-radius:var(--raio-card);overflow:hidden;background:rgba(5,10,48,.05);aspect-ratio:4/5}
.retrato img{width:100%;height:100%;object-fit:cover}

/* ─── GALERIA DE RETRATOS ─────────────────────────────────
   Passa sozinha, e o clique avanca. Cross-fade com um zoom
   lento na foto ativa, que e o que da vida sem virar carrossel
   de banner. Para fora da tela e quando o mouse esta em cima.
   ───────────────────────────────────────────────────────── */
.galeria{
  position:relative;aspect-ratio:4/5;border-radius:var(--raio-card);
  overflow:hidden;background:rgba(5,10,48,.05);
}
.galeria img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.045);
  transition:opacity .45s ease, transform 1.9s linear;
}
.galeria img.ativa{opacity:1;transform:scale(1)}
.galeria-avanca{
  position:absolute;inset:0;width:100%;border:0;background:transparent;
  cursor:pointer;padding:0;
}
.galeria-avanca:focus-visible{outline:3px solid var(--tinta);outline-offset:-3px}
.pontos{
  position:absolute;left:0;right:0;bottom:14px;
  display:flex;justify-content:center;gap:7px;
}
.pontos button{
  width:26px;height:3px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(242,241,239,.45);
  transition:background-color .3s ease;
}
.pontos button[aria-current="true"]{background:var(--branco)}
.pontos button:focus-visible{outline:2px solid var(--branco);outline-offset:3px}
.galeria::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
  pointer-events:none;
  background:linear-gradient(to top, rgba(5,10,48,.34), transparent);
}
@media(prefers-reduced-motion:reduce){
  .galeria img{transition:opacity .01ms;transform:none}
  .galeria img.ativa{transform:none}
}
.citacao{
  font-family:var(--disp);font-size:clamp(1.4rem,2.8vw,2rem);line-height:1.25;
  margin:34px 0;padding-left:24px;border-left:1px solid var(--linha-forte);
  max-width:26ch;
}
.ficha{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:26px;padding-top:22px;border-top:1px solid var(--linha)}
.ficha span{font-family:var(--dado);font-size:.78rem;color:var(--cinza-rotulo)}

/* ─── REDE DE PARCEIRAS ──────────────────────────────────── */

.pilulas{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;padding:0;list-style:none}
.pilulas li{
  border:1px solid var(--linha-forte);border-radius:var(--raio-selo);
  padding:9px 17px;font-size:.87rem;
}
/* os itens que sao link (filtro de areas-de-atuacao) herdavam o
   sublinhado padrao do navegador, que nao aparecia em outro lugar do
   site porque o resto dos links usa classes proprias */
.pilulas a{text-decoration:none;color:inherit}

/* filtro de areas-de-atuacao no mobile: em vez de quebrar linha e
   empilhar 8 pilulas, rola pro lado como um carrossel */
@media(max-width:760px){
  .filtros-area{
    flex-wrap:nowrap;overflow-x:auto;gap:8px;
    margin-inline:-24px;padding:0 24px 6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .filtros-area::-webkit-scrollbar{display:none}
  .filtros-area li{flex:none}
}

/* ─── FAQ ────────────────────────────────────────────────── */

.faq{max-width:78ch;margin:0 auto}
.faq details{border-top:1px solid var(--linha)}
.faq details:last-of-type{border-bottom:1px solid var(--linha)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-size:1.02rem;font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;border-right:1.5px solid var(--cinza);border-bottom:1.5px solid var(--cinza);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.faq .resposta{padding:0 0 26px;color:var(--cinza);max-width:66ch}

/* ─── CONTATO ────────────────────────────────────────────── */

.contato-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:start}
.caminhos{display:grid;gap:14px;margin-top:6px}
.caminho{
  border:1px solid var(--linha-clique-escuro);border-radius:var(--raio-card);padding:24px;
}
.caminho .rotulo{margin-bottom:10px}
.caminho p{font-size:.88rem;color:rgba(242,241,239,.7);margin:12px 0 0;max-width:44ch}
.endereco{display:grid;gap:18px;margin-top:8px}
.endereco div{padding-bottom:18px;border-bottom:1px solid rgba(242,241,239,.16)}
.endereco div:last-child{border-bottom:0;padding-bottom:0}
.endereco p{margin:6px 0 0;font-size:.95rem}
.endereco a{color:inherit}

/* formulario */
.form{display:grid;gap:16px}
.campo{display:grid;gap:7px}
.campo label{font-size:.82rem;font-weight:600}
.campo input,.campo textarea,.campo select{
  font-family:var(--corpo);font-size:1rem;color:var(--tinta);
  background:var(--branco);border:1px solid var(--linha-forte);border-radius:var(--raio-btn);
  padding:13px 14px;width:100%;
}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus-visible,.campo textarea:focus-visible,.campo select:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.form .aviso{font-size:.82rem;color:var(--cinza-rotulo);margin:0}

/* ─── BLOG ───────────────────────────────────────────────── */

.posts{display:grid;gap:0}
.post{
  display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start;
  padding:30px 0;border-top:1px solid var(--linha);text-decoration:none;color:inherit;
  transition:padding-left .28s cubic-bezier(.2,.8,.2,1);
}
.posts .post:last-child{border-bottom:1px solid var(--linha)}
@media(hover:hover){ .post:hover{padding-left:10px} }
.post time{font-family:var(--dado);font-size:.78rem;color:var(--cinza-rotulo);padding-top:5px}
.post h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.2;margin-bottom:8px}
.post p{font-size:.93rem;color:var(--cinza);margin:0;max-width:64ch}
.breve{
  display:inline-block;font-family:var(--dado);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza-rotulo);border:1px solid var(--linha);
  border-radius:var(--raio-selo);padding:5px 12px;margin-bottom:12px;
}

/* ─── PAGINA DE PLANTAO (landing curta) ──────────────────── */

.plantao-capa{min-height:100dvh;display:flex;align-items:center;padding:110px 0 70px}
.plantao-capa h1{font-size:clamp(2.3rem,6vw,4.4rem);max-width:15ch;margin-bottom:20px}
.plantao-capa .sub{font-size:clamp(1.05rem,2.2vw,1.3rem);color:rgba(242,241,239,.82);max-width:46ch}

/* ─── SAIDA RAPIDA (violencia de genero) ─────────────────── */

.saida{
  /* canto esquerdo, nao direito: a pagina de violencia de genero e a
     unica que tem os dois botoes flutuantes juntos, e sair rapido
     precisa ficar isolado do botao de whatsapp, nunca colado nele */
  position:fixed;left:16px;bottom:16px;z-index:90;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--branco);color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:var(--raio-btn);
  font-size:.82rem;font-weight:600;padding:11px 16px;cursor:pointer;
  box-shadow:0 8px 26px rgba(5,10,48,.14);font-family:var(--corpo);
}
.saida:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

/* ─── WHATSAPP FLUTUANTE ─────────────────────────────────
   Substitui o balao verde generico: mesma logica de "sempre visivel
   no canto", so que na paleta do site (navy + osso), com o numero
   comercial legivel em vez de so um icone. */
.flutua-whats{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:none;
  background:var(--tinta);color:var(--osso);
  border-radius:50%;
  text-decoration:none;box-shadow:0 10px 26px rgba(5,10,48,.25);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;
}
.flutua-whats svg{width:23px;height:23px}
@media(hover:hover){ .flutua-whats:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(5,10,48,.32)} }
.flutua-whats:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
@media(max-width:440px){
  .flutua-whats{right:14px;bottom:14px;width:46px;height:46px}
  .flutua-whats svg{width:20px;height:20px}
}

/* ─── POPUP DO PLANTAO ───────────────────────────────────
   O botao do header abre isto em vez de ir direto pro WhatsApp:
   quem esta numa delegacia costuma preferir ligar.
   <dialog> nativo ja traz foco preso, Esc e fundo inerte.
   ───────────────────────────────────────────────────────── */
.janela{
  border:0;padding:0;background:transparent;max-width:min(92vw,430px);width:100%;
  color:var(--tinta);
}
.janela::backdrop{background:rgba(2,3,24,.55);backdrop-filter:blur(3px)}
.janela-corpo{
  background:var(--branco);border-radius:var(--raio-card);
  padding:clamp(24px,4vw,32px);
  box-shadow:0 24px 70px rgba(5,10,48,.28);
  position:relative;
}
.janela h2{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:8px}
.janela .numero{
  font-family:var(--dado);font-weight:500;font-size:clamp(1.3rem,3vw,1.65rem);
  letter-spacing:-.02em;display:block;margin:14px 0 20px;
}
.janela .acoes{display:grid;gap:10px}
.janela .acoes a{width:100%;justify-content:center}
.janela .rodape-jan{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--linha);
  font-size:.85rem;color:var(--cinza);
}
.janela .rodape-jan a{color:var(--tinta);font-weight:600}
.fecha-jan{
  position:absolute;top:12px;right:12px;width:36px;height:36px;
  border:0;background:transparent;cursor:pointer;color:var(--cinza);
  border-radius:var(--raio-btn);font-size:1.4rem;line-height:1;
}
@media(hover:hover){ .fecha-jan:hover{background:rgba(5,10,48,.06);color:var(--tinta)} }
.fecha-jan:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}

/* ─── RODAPE ─────────────────────────────────────────────── */

.rodape{background:var(--tinta-fundo);color:var(--osso);padding:clamp(56px,7vw,84px) 0 34px}
.rodape-topo{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:38px}
.rodape img{width:170px;height:auto;margin-bottom:20px}
.rodape h4{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,241,239,.6);margin:0 0 16px;font-weight:500}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rodape a{text-decoration:none;font-size:.92rem;color:rgba(242,241,239,.86);transition:color .2s ease}
@media(hover:hover){ .rodape a:hover{color:var(--osso)} }
.rodape .dado{color:rgba(242,241,239,.66);display:block;margin-bottom:7px}
.rodape-baixo{
  margin-top:46px;padding-top:24px;border-top:1px solid rgba(242,241,239,.16);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-size:.8rem;color:rgba(242,241,239,.55);
}

/* ─── RESPONSIVO ─────────────────────────────────────────── */

@media(max-width:940px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dupla{grid-template-columns:1fr}
  .retrato,.galeria{max-width:360px;width:100%;aspect-ratio:4/5;justify-self:center}
  .contato-grade{grid-template-columns:1fr}
  .rodape-topo{grid-template-columns:1fr 1fr}
  .rodape-topo > :first-child{grid-column:1 / -1}
}

@media(max-width:760px){
  .palco{width:88vw}
  .rotulo{font-size:.62rem;letter-spacing:.14em}

  .lg-1{top:calc(var(--topo-h) + 4vh)}
  .lg-1 h1{font-size:clamp(1.8rem,3.7vw,3.1rem)}
  /* os 3 blocos de dado (lg-2/3/4) antes ficavam empilhados no mesmo ponto,
     logo abaixo do header, deixando toda a metade de baixo da tela vazia.
     Agora cada um ocupa uma faixa vertical diferente -- primeiro mais no
     alto, segundo no meio puxado pra direita, terceiro mais embaixo puxado
     pra esquerda -- usando o espaco que a balanca (centralizada, max-height
     56dvh) deixa livre em volta dela. lg-4 (o mais alto dos tres, com
     rotulo+botao+paragrafo) ancora pela base em vez do topo, pra nunca
     estourar por baixo do viewport em telas curtas. */
  .lg-2{top:20vh;transform:translateY(20px)}
  .lg-3{top:45vh;transform:translateY(20px)}
  .lg-4{top:auto;bottom:9vh;transform:translateY(20px)}
  .legenda.lg-2.vis,.legenda.lg-3.vis,.legenda.lg-4.vis{transform:none}
  /* no mobile a transicao de troca de bloco fica mais curta (era .8s,
     compartilhada com o desktop): como os blocos agora ficam espalhados
     em pontos bem diferentes da tela, uma transicao longa deixava o texto
     de saida e o de entrada visiveis ao mesmo tempo por muito tempo,
     um cobrindo o outro visualmente durante a rolagem */
  .legenda{transition-duration:.35s}
  .lg-5{bottom:3vh}
  .marco{max-width:76%}
  .marco .n{font-size:clamp(2.6rem,13.6vw,4.2rem)}
  .marco p{font-size:.8rem;max-width:27ch}
  /* lg-2 (24h) puxa pra direita; lg-3 (5 formas), que no desktop e o
     .dir alinhado a direita, volta pra esquerda no mobile -- assim os
     dois blocos nao repetem o mesmo lado da tela */
  .lg-2 .marco{margin-left:auto;text-align:right}
  .lg-2 .marco p{margin-left:auto}
  .marco.dir{text-align:left;margin-left:0}
  .marco.dir p{margin-left:0}
  .btn-plantao{font-size:clamp(.9rem,1.6vw,1.08rem);padding:13px 17px}
  /* o veu deixa de ser uma faixa fixa no topo da tela e passa a acompanhar
     cada bloco onde quer que ele esteja (herda top:50%/translate/height:190%
     da regra base, que ja centraliza o veu na propria legenda) -- so troca
     o desenho de elipse lateral por uma faixa horizontal que esmaece em
     cima e embaixo, cobrindo a largura toda. */
  .legenda.tem-veu::before{
    left:0;right:0;width:auto;
    background:linear-gradient(180deg,
      rgba(242,241,239,0) 0%, var(--osso) 20%, var(--osso) 80%, rgba(242,241,239,0) 100%) !important;
  }
  /* cards "portas" (lg-5): mais compactos, ~20% menores que a leva anterior */
  .portas{grid-template-columns:1fr;gap:8px}
  .porta{padding:11px 13px}
  .porta strong{font-size:.85rem;margin-bottom:3px}
  .porta p{margin-bottom:6px;font-size:.74rem;line-height:1.4}
  .porta em{font-size:.74rem}
  .selo-cena{display:none}
  .triagem{grid-template-columns:1fr}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .passos li{grid-template-columns:44px 1fr;gap:14px}
  .post{grid-template-columns:1fr;gap:8px}
  .traco{width:70px}
  .divisor{gap:14px}
}

@media(max-width:440px){
  .btn-cheio,.btn-linha{padding:14px 17px;font-size:.87rem}
  .topo .env{gap:10px}
  .topo .btn-cheio{padding:10px 12px;font-size:.78rem;gap:7px;white-space:nowrap}
  .marca img{height:34px}
  .abre-menu{width:38px;height:36px}
  .env{padding:0 18px}
}

/* ─── MOVIMENTO REDUZIDO ─────────────────────────────────── */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rev{opacity:1;transform:none}
  .traco{--p:112%}
  .cena{height:auto}
  .grude{position:static;height:auto;padding:40px 0}
  .legendas{position:static}
  .legenda{position:static;opacity:1;transform:none !important;margin:30px 0;padding:0}
  .palco{position:static;aspect-ratio:1100/618}
  .palco::after{display:none}
  .selo-cena{position:static;opacity:1;padding:0;margin-top:22px}
}

@media print{
  .topo,.saida,.flutua-whats,.cena video,.legendas{display:none}
}