/* =========================================================
   EMI Odontologia — páginas institucionais
   Complementa style.css e especialidade.css (que traz o hero,
   o bloco de intro, as etapas, a ficha, o CTA e a galeria).
   ========================================================= */

/* ---------- grade de cards (equipe, estrutura) ---------- */
.in-cards{background:var(--c-light-base);color:var(--c-dark-base);padding:8rem 2rem}
.in-cards-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:4rem}
.in-cards-head .h3{width:32rem;text-wrap:balance}
.in-cards-head i{font-style:italic}
.in-cards-head .description{width:19rem;color:var(--c-dark-40)}
.in-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.in-grid.dois{grid-template-columns:repeat(2,minmax(0,1fr));max-width:64rem;margin:0 auto}
.in-card{
  display:flex;flex-direction:column;padding:.5rem .5rem 1.5rem;border-radius:1.875rem;
  background:rgba(18,16,15,.05);transition:background .4s var(--ease);
}
a.in-card:hover{background:rgba(18,16,15,.1)}
.in-card-img{width:100%;aspect-ratio:1.2;border-radius:1.5rem;overflow:hidden}
.in-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-quint)}
a.in-card:hover .in-card-img img{transform:scale(1.05)}
.in-card-nome{padding:1.5rem 1rem .25rem}
.in-card-cargo{padding:0 1rem;color:var(--c-dark-40)}
.in-card-desc{padding:1rem 1rem 0;color:var(--c-dark-40)}
.in-card .wrap-link{margin:1.5rem 1rem 0}

/* ---------- contato ---------- */
.ct-blocos{background:var(--c-light-base);color:var(--c-dark-base);padding:8rem 2rem 4rem}
.ct-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.ct-bloco{
  display:flex;flex-direction:column;gap:.75rem;
  padding:2rem;border-radius:1.875rem;border:1px solid var(--c-dark-10);
}
.ct-bloco .rotulo{color:var(--c-dark-40)}
.ct-bloco a{transition:color .3s var(--ease)}
.ct-bloco a:hover{color:var(--c-red)}
.ct-linha{display:flex;align-items:baseline;gap:1rem}
.ct-linha .dias{width:6rem;flex:none;color:var(--c-dark-40)}
.ct-mapa{
  margin-top:1.5rem;width:100%;height:32rem;border-radius:1.875rem;overflow:hidden;
  background:var(--c-beige);
}
.ct-mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(.95)}

/* ---------- páginas legais ---------- */
.lg-conteudo{
  background:var(--c-light-base);color:var(--c-dark-base);
  padding:10rem 2rem 6rem;
}
.lg-corpo{max-width:44rem;margin:0 auto}
.lg-corpo h2{margin:3rem 0 1rem}
.lg-corpo h2:first-child{margin-top:0}
.lg-corpo p{margin-bottom:1rem;color:var(--c-dark-40)}
.lg-corpo a{color:var(--c-red);text-decoration:underline}
.lg-corpo ul{margin:0 0 1rem 1.25rem;list-style:disc;color:var(--c-dark-40)}
.lg-corpo li{margin-bottom:.5rem}
.lg-data{color:var(--c-dark-40);margin-bottom:3rem;display:block}

/* ---------- profissional ---------- */
.pf-hero .esp-title{font-size:7.5rem;letter-spacing:-.375rem}
.pf-cro{display:flex;gap:.625rem;align-items:center;margin-bottom:5.375rem;color:var(--c-light-40)}
.pf-cro a{color:var(--c-light-40);transition:color .3s var(--ease)}
.pf-cro a:hover{color:var(--c-light-base)}
.pf-cro .sep{opacity:.5}

/* ---------- mobile ---------- */
@media (max-width:1023px){
  .in-cards{padding:3.5rem 1rem}
  .in-cards-head{flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:2.5rem;text-align:center}
  .in-cards-head .h3,.in-cards-head .description{width:100%}
  .in-grid,.in-grid.dois{grid-template-columns:1fr}

  .ct-blocos{padding:3.5rem 1rem 2rem}
  .ct-grid{grid-template-columns:1fr}
  .ct-bloco{padding:1.5rem}
  .ct-mapa{height:20rem;border-radius:1.25rem}

  .lg-conteudo{padding:6rem 1rem 3.5rem}
  .pf-hero .esp-title{font-size:4.3125rem;letter-spacing:-.1725rem}
  .pf-cro{margin:4.5rem 0 0;justify-content:center;flex-wrap:wrap}
}

/* Títulos de seção com duas palavras longas estouram os 17.25rem do .h1.
   A classe é aplicada pelo gerador quando o par passa de 14 caracteres. */
.sol-steps .title.menor{font-size:11rem;letter-spacing:-.44rem}
.sol-steps .title.bem-menor{font-size:8.5rem;letter-spacing:-.34rem}
@media (max-width:1023px){
  .sol-steps .title.menor,.sol-steps .title.bem-menor{font-size:4.3125rem;letter-spacing:-.1725rem}
}