/* =============================================================
   MN — Dra. Marcela Noronha
   interna.css · componentes exclusivos das páginas internas
   (elas também carregam home.css, para reaproveitar .etapas,
   .publicos, .contato__grade, .pilares e .areas__item)
   ============================================================= */

/* ---------------------------------------------------------------
   TOPO — o hero das internas: mesma gramática do hero da home,
   em versão curta e sem retrato.
   --------------------------------------------------------------- */

.topo{
  background:var(--tinta);
  color:var(--papel);
  padding-top:calc(var(--alt-cab) + clamp(3rem,8vw,6.5rem));
  padding-bottom:clamp(3.2rem,7.5vw,6rem);
  position:relative;
  overflow:hidden;
}

/* um filete de luz atravessa o topo, girando com a página */
.topo::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:linear-gradient(to right,
    rgba(242,240,236,.34) 0,
    rgba(242,240,236,.34) var(--medida,28%),
    rgba(242,240,236,.1) var(--medida,28%),
    rgba(242,240,236,.1) 100%);
}

.topo__grade{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(1.6rem,5vw,5rem);
  align-items:end;
}
.topo h1{
  font-size:clamp(2.3rem,5.9vw,4.4rem);
  line-height:1.035;
  letter-spacing:-.026em;
  max-width:21ch;
}
.topo h1 em{font-style:italic;padding-right:.05em}
.topo__olho{
  color:rgba(242,240,236,.72);
  max-width:44ch;
  padding-bottom:.5rem;
}

/* migalhas */
.migalhas{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55em .75em;
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(242,240,236,.55);
  margin-bottom:clamp(1.2rem,3vw,2rem);
}
.migalhas ol{
  list-style:none;
  margin:0;padding:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:.55em .75em;
}
.migalhas li{display:flex;align-items:center;gap:.75em}
.migalhas i{
  width:1.15em;height:1px;
  background:rgba(242,240,236,.3);
  display:block;flex:none;
}
.migalhas a{transition:color .45s var(--suave)}
.migalhas a:hover,.migalhas a:focus-visible{color:var(--papel)}
.migalhas [aria-current="page"]{color:var(--papel)}

/* ---------------------------------------------------------------
   BLOCO — texto em duas colunas, com rótulo que acompanha a rolagem
   --------------------------------------------------------------- */

.bloco__grade{
  display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,5rem);
  align-items:start;
}
.bloco__rotulo{
  position:sticky;
  top:calc(var(--alt-cab) + 2rem);
}
.bloco__rotulo h2{
  font-size:clamp(1.5rem,2.6vw,2.15rem);
  line-height:1.14;
  max-width:14ch;
}
.bloco__texto .olho{margin-bottom:1.35rem;max-width:52ch}

/* ---------------------------------------------------------------
   MATÉRIAS — o que é tratado em cada área
   --------------------------------------------------------------- */

.materias{
  list-style:none;
  margin:clamp(2.2rem,4.6vw,3.4rem) 0 0;
  padding:0;
  border-top:1px solid var(--linha);
}
.materias li{
  display:grid;
  grid-template-columns:3rem minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(.8rem,2.4vw,2.2rem);
  padding-block:clamp(1.25rem,2.6vw,1.85rem);
  border-bottom:1px solid var(--linha);
  align-items:baseline;
}
.materias b{
  font-family:var(--sans);
  font-size:var(--t-micro);
  font-weight:400;
  letter-spacing:.2em;
  color:var(--texto-2);
  font-variant-numeric:tabular-nums;
}
.materias h3{font-size:clamp(1.05rem,1.65vw,1.3rem);line-height:1.22}
.materias p{font-size:.9375rem;line-height:1.68;color:var(--texto-2)}

.aviso{
  margin-top:clamp(1.8rem,3.6vw,2.6rem);
  font-size:.875rem;
  line-height:1.7;
  color:var(--texto-2);
  max-width:64ch;
  padding-left:1.1rem;
  border-left:1px solid var(--linha-forte);
}

/* ---------------------------------------------------------------
   OUTRAS ÁREAS — navegação lateral entre as internas
   --------------------------------------------------------------- */

.outras{padding-top:clamp(3rem,7vw,5.5rem)}
.outras > .wrap > .micro{margin-bottom:clamp(1.6rem,3.4vw,2.4rem)}

/* ---------------------------------------------------------------
   CHAMADA — faixa de conversão no pé das internas
   --------------------------------------------------------------- */

.chamada__grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(1.8rem,5vw,4.5rem);
  align-items:end;
}
.chamada h2{max-width:19ch}
.chamada__acoes{display:flex;flex-wrap:wrap;gap:.85rem 1rem}
.chamada .corpo{max-width:40ch;margin-bottom:1.6rem}

/* ---------------------------------------------------------------
   LOCALIZAÇÃO
   --------------------------------------------------------------- */

.local__grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.8rem,5vw,4.5rem);
  align-items:start;
}
.local__cidade{
  font-family:var(--serif);
  font-size:clamp(2.4rem,6.5vw,4.6rem);
  line-height:1;
  letter-spacing:-.028em;
  margin-bottom:1.2rem;
}
.local__cidade span{
  display:block;
  font-family:var(--sans);
  font-size:var(--t-micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texto-2);
  margin-top:1rem;
}
.local__dados{
  font-style:normal;
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.62;
  padding-top:.4rem;
}
.local__dados .cep{
  display:block;
  font-family:var(--sans);
  font-size:.8125rem;
  letter-spacing:.04em;
  color:var(--texto-2);
  margin-top:.5rem;
}
.local__acoes{display:flex;flex-wrap:wrap;gap:.85rem 1rem;margin-top:clamp(1.8rem,3.6vw,2.6rem)}

/* ---------------------------------------------------------------
   PERFIL — a foto na página Sobre
   --------------------------------------------------------------- */

.perfil__grade{
  display:grid;
  /* o texto vem antes no DOM (ordem de leitura) e a foto sangra à DIREITA;
     com a foto na coluna 1, o margin-right negativo a jogava sobre o texto */
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,6vw,5.5rem);
  align-items:start;
}
.perfil__midia{margin-right:calc(var(--bleed) * -1)}
.perfil__midia img{width:100%}
.perfil__midia figcaption{
  margin-top:1.1rem;
  padding-right:clamp(1.25rem,5vw,4.5rem);
  text-align:right;
}
.perfil__texto{padding-top:clamp(.4rem,2.4vw,1.8rem)}
.perfil__texto .olho{margin-bottom:1.35rem;max-width:50ch}

/* ---------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------- */

@media (max-width:900px){
  .topo__grade,
  .bloco__grade,
  .chamada__grade,
  .local__grade,
  .perfil__grade{grid-template-columns:1fr}
  .topo__olho{padding-bottom:0}
  .bloco__rotulo{position:static}
  .bloco__rotulo h2{max-width:20ch}
  .perfil__grade{display:flex;flex-direction:column}
  /* no celular o retrato sobe: vem logo depois do título da página */
  .perfil__midia{
    order:-1;
    margin-left:calc(var(--bleed) * -1);
    margin-right:calc(var(--bleed) * -1);
    margin-bottom:clamp(1.6rem,4vw,2.4rem);
  }
  .perfil__midia figcaption{
    text-align:left;
    padding-left:clamp(1.25rem,5vw,4.5rem);
    padding-right:0;
  }
  .perfil__texto{padding-top:0}
  .local__cidade{margin-bottom:1rem}
}

@media (max-width:640px){
  .materias li{
    grid-template-columns:2.4rem minmax(0,1fr);
    row-gap:.45rem;
  }
  .materias li b{grid-row:1}
  .materias li h3{grid-row:1}
  .materias li p{grid-column:2;grid-row:2}
  .chamada__acoes .btn,
  .local__acoes .btn{width:100%;justify-content:center}
}


/* ---------------------------------------------------------------
   acréscimos da rodada de refinamento
   --------------------------------------------------------------- */

/* o numeral gigante da faixa de conversão */
.chamada{overflow:hidden}
.chamada__fantasma{
  right:calc(var(--pad) * .2);
  bottom:-.16em;
  font-size:clamp(7rem,18vw,15rem);
  letter-spacing:-.02em;
}

/* folga vertical para a paralaxe do retrato na página Sobre */
.perfil__midia{
  position:relative;
  aspect-ratio:37 / 44;
}
.perfil__midia img{
  position:relative;
  top:-5%;
  width:100%;height:110%;
  object-fit:cover;
  object-position:center 32%;
}
.perfil__midia figcaption{
  position:absolute;
  right:clamp(1.25rem,5vw,4.5rem);
  bottom:1.1rem;
  margin:0;padding:0;
  color:var(--papel);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
  z-index:1;
}

/* o topo herda o filete da moldura, então dispensa o ::after duplicado */
.topo{--luz:78% 8%}
.topo::after{opacity:.9}

@media (max-width:900px){
  .perfil__midia{aspect-ratio:4 / 5}
  .perfil__midia figcaption{
    left:clamp(1.25rem,5vw,4.5rem);
    right:auto;
    text-align:left;
  }
}