/* =========================================================
   Marina Carabetti Odontologia
   ========================================================= */

:root{
  --bordo:        #6F150D;
  --bordo-escuro: #55100A;
  --bordo-claro:  #8E2318;
  --creme:        #FAF7F5;
  --creme-2:      #F3EEEA;
  --tinta:        #2A2320;
  --tinta-suave:  #6B605B;
  --linha:        #E3DAD4;
  --branco:       #FFFFFF;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --topo-h: 100px;
  --max: 1180px;
  --gap: clamp(3.5rem, 8vw, 7.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: var(--topo-h); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--creme);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.005em;
  margin:0 0 .6em;
}
h1{ font-size:clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem); }
h2{ font-size:clamp(2rem, 1.5rem + 2.1vw, 3.1rem); }
h3{ font-size:clamp(1.35rem, 1.2rem + .6vw, 1.65rem); }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--bordo); }

sup{ font-size:.55em; vertical-align:super; line-height:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--bordo); color:#fff; padding:.8rem 1.2rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--bordo); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(1.25rem, 5vw, 2.5rem); }
.wrap--estreito{ max-width:760px; }
.centro{ text-align:center; }

.sobrelinha{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bordo); font-weight:400; margin-bottom:1.4rem;
}
.sobrelinha--claro{ color:rgba(255,255,255,.72); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 2.1rem;
  background:var(--bordo); color:#fff;
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; font-weight:400;
  text-decoration:none; border:1px solid var(--bordo); border-radius:2px;
  cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ background:var(--bordo-escuro); border-color:var(--bordo-escuro); }
.btn--vazado{ background:transparent; color:var(--bordo); }
.btn--vazado:hover{ background:var(--bordo); color:#fff; }
.btn--claro{ background:#fff; color:var(--bordo); border-color:#fff; }
.btn--claro:hover{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--sm{ padding:.68rem 1.5rem; font-size:.72rem; }
.btn--bloco{ width:100%; }

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,245,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.topo.rolou{ border-bottom-color:var(--linha); box-shadow:0 1px 24px rgba(42,35,32,.05); }
.topo__inner{
  max-width:var(--max); margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 2.5rem);
  height:var(--topo-h);
  display:flex; align-items:center; gap:2rem;
}
.topo__logo{ flex:none; line-height:0; }
.topo__logo img{ height:66px; width:auto; }

.nav{ margin-left:auto; display:flex; gap:1.9rem; }
.nav a{
  color:var(--tinta); text-decoration:none;
  font-size:.8rem; letter-spacing:.055em;
  padding-block:.35rem; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--bordo);
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.nav a:hover::after, .nav a.ativo::after{ transform:scaleX(1); }
.nav a.ativo{ color:var(--bordo); }

.topo__cta{ flex:none; }

.menu-btn{
  display:none; margin-left:auto;
  width:42px; height:42px; padding:0;
  background:none; border:0; cursor:pointer;
}
.menu-btn span{
  display:block; height:1px; width:24px; margin:6px auto;
  background:var(--tinta); transition:transform .3s ease, opacity .2s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(2rem, 5vw, 4.5rem);
  max-width:1440px; margin-inline:auto;
  padding:clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3.5rem) clamp(3.5rem, 8vw, 6.5rem);
}
.hero__texto{ max-width:33rem; }
.hero h1{ margin-bottom:.5em; }
.lead{
  font-family:var(--serif);
  font-size:clamp(1.2rem, 1.05rem + .55vw, 1.55rem);
  line-height:1.55; color:var(--tinta-suave); font-weight:300;
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }
.hero__foto{ position:relative; }
.hero__foto img{
  width:100%; aspect-ratio:4/3.1; object-fit:cover; object-position:center 22%;
  border-radius:3px;
}

/* ---------- manifesto ---------- */
.manifesto{
  background:var(--creme-2);
  padding-block:var(--gap);
  text-align:center;
}
.manifesto__abre{
  font-family:var(--serif);
  font-size:clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem);
  line-height:1.35; color:var(--bordo); margin-bottom:1.4rem;
}
.manifesto p:not(.manifesto__abre){ color:var(--tinta-suave); }
.manifesto__fecha{
  margin-top:1.8rem; padding-top:1.8rem;
  border-top:1px solid var(--linha);
  font-family:var(--serif); font-style:italic;
  font-size:1.2rem; color:var(--tinta);
}

/* ---------- blocos duplos ---------- */
.duo{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5.5rem); align-items:center;
}
.duo--inverso .duo__foto{ order:2; }
.duo__foto img{ width:100%; border-radius:3px; }
.duo__texto h2{ margin-bottom:.45em; }

.sobre{ padding-block:var(--gap); }
.sobre .duo__foto img{ aspect-ratio:3/3.7; object-fit:cover; }
.cargo{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:1.8rem;
}
.formacao{ list-style:none; margin:2.2rem 0 0; padding:0; border-top:1px solid var(--linha); }
.formacao li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:1rem;
  padding:.9rem 0; border-bottom:1px solid var(--linha);
  font-size:.94rem; line-height:1.5;
}
.formacao span{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bordo); padding-top:.22rem;
}

/* ---------- cabeçalho de seção ---------- */
.secao-cabeca{ max-width:44rem; margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.secao-cabeca__texto{ color:var(--tinta-suave); margin-top:.6rem; }
.centro .secao-cabeca, .agendar .secao-cabeca{ margin-inline:auto; text-align:center; }

/* ---------- fases ---------- */
.fases{ padding-block:var(--gap); background:var(--creme-2); }
/* 2×2: com quatro fases, três colunas deixariam cada card estreito
   demais para o texto. Em duas colunas a foto também respira melhor. */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem, 3vw, 2.5rem); }
.card{ background:var(--branco); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; }
/* Os cards misturam foto em retrato e em paisagem. No desktop eles ficam
   lado a lado e precisam de altura igual, então o 4:3 fica — mas o ponto
   de corte é ajustado por foto, senão o corte central corta o rosto. */
.card__foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; }
.card--adultos        .card__foto img{ object-position:center 12%; }
.card--criancas       .card__foto img{ object-position:center 38%; }
/* já exportada em 4:3 — não sofre recorte, então fica no centro */
.card--interceptativa .card__foto img{ object-position:center; }
.card__corpo{ padding:clamp(1.6rem, 3vw, 2.2rem); }
.card__corpo h3{ color:var(--bordo); }
.card__corpo p{ font-size:.96rem; color:var(--tinta-suave); }
.card__destaque{
  margin-top:1.4rem; padding-top:1.4rem;
  border-top:1px solid var(--linha);
  font-family:var(--serif); font-style:italic;
  font-size:1.1rem !important; line-height:1.5; color:var(--tinta) !important;
}

/* ---------- procedimentos ----------
   Dois níveis, seguindo o que a própria Marina diz: a especialidade
   (ortodontia e ortopedia funcional) ganha peso de card; o que ela
   "também faz" no consultório entra em tratamento leve. Sem essa
   hierarquia os sete itens saíam com o mesmo peso e nada se destacava. */
/* Fundo branco: mais claro que o creme das seções vizinhas, o que dá
   contraste para os cards em tom quente. Card branco sobre creme não
   aparecia — a diferença entre #FFF e #FAF7F5 é imperceptível. */
.procedimentos{ padding-block:var(--gap); background:var(--branco); }

/* rótulo de grupo: linha fina com o texto recortado no meio */
.rotulo{
  display:flex; align-items:center; gap:1.2rem;
  margin:0 0 1.9rem;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bordo); font-weight:400;
}
.rotulo::after{ content:""; flex:1; height:1px; background:var(--linha); }
.rotulo span{ flex:none; }
.complementos + .rotulo, .destaques + .rotulo{ margin-top:clamp(3rem, 5vw, 4rem); }

/* nível 1 — especialidade */
.destaques{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.25rem, 2.5vw, 1.75rem);
}
.destaque{
  position:relative;
  padding:clamp(2rem, 3vw, 2.6rem);
  background:var(--creme-2);
  border-top:3px solid var(--bordo);
  border-radius:3px;
  transition:box-shadow .3s ease, transform .3s ease;
}
.destaque:hover{ box-shadow:0 16px 38px rgba(111,21,13,.13); transform:translateY(-3px); }
.destaque h3{
  color:var(--bordo);
  font-size:clamp(1.55rem, 1.35rem + .6vw, 1.9rem);
  margin-bottom:.45em;
}
.destaque p{ font-size:.97rem; color:var(--tinta-suave); margin:0; }

/* nível 2 — complementares */
.complementos{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:0 clamp(2rem, 4vw, 3.5rem);
}
.complemento{ padding:1.6rem 0 0; border-top:1px solid var(--linha); }
.complemento h3{
  font-size:1.12rem; color:var(--tinta); margin-bottom:.4em;
  font-family:var(--sans); font-weight:400; letter-spacing:.01em;
}
.complemento p{ font-size:.92rem; color:var(--tinta-suave); margin:0; }

@media (prefers-reduced-motion: reduce){
  .destaque:hover{ transform:none; }
}

/* ---------- invisalign ----------
   Cena real do escaneamento ao fundo, coberta por bordô. O degradê deixa
   as bordas mais fechadas e o miolo mais aberto, então a imagem respira
   sem nunca disputar com o texto (contraste do branco fica ~9:1).

   Para trocar por vídeo depois: basta descomentar o <video class="fundo-video">
   no HTML — o overlay abaixo já funciona por cima dele. */
.invisalign{
  position:relative;
  background:
    linear-gradient(180deg,
      rgba(111,21,13,.96) 0%,
      rgba(111,21,13,.87) 45%,
      rgba(111,21,13,.96) 100%),
    url("../img/itero-scan.jpg") center / cover no-repeat;
  background-attachment: scroll, fixed;
  color:rgba(255,255,255,.86);
  padding-block:var(--gap);
  overflow:hidden;
}
/* vídeo de fundo (opcional) — entra atrás do overlay quando existir */
.invisalign .fundo-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.invisalign .wrap{ position:relative; z-index:1; }
.invisalign h2, .invisalign h3{ color:#fff; }
.invisalign .duo{ margin-bottom:clamp(3rem, 6vw, 5rem); }
.invisalign .duo__foto img{ aspect-ratio:4/3.2; object-fit:cover; }
.ressalva{
  margin-top:1.8rem; padding:1.3rem 1.5rem;
  background:rgba(0,0,0,.16); border-left:2px solid rgba(255,255,255,.4);
  font-size:.96rem;
}
.ressalva strong{ color:#fff; font-weight:400; }
.itero{ text-align:center; border-top:1px solid rgba(255,255,255,.2); padding-top:clamp(2.5rem, 5vw, 4rem); }
.itero h3{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom:.7em; }
.itero strong{ color:#fff; font-weight:400; }
.itero__fecha{
  margin-top:1.6rem; font-family:var(--serif); font-style:italic;
  font-size:1.35rem; color:#fff;
}

/* ---------- depoimentos ---------- */
.depoimentos{ padding-block:var(--gap); }
.depoimentos .secao-cabeca{ margin-inline:auto; text-align:center; }
.cards-dep{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem); margin-bottom:3rem; }
.dep{ margin:0; padding:2.2rem 2rem; background:var(--creme-2); border-radius:3px; display:flex; flex-direction:column; }
.dep blockquote{
  margin:0 0 1.4rem; padding:0;
  font-family:var(--serif); font-size:1.2rem; line-height:1.5; color:var(--tinta); flex:1;
}
.dep blockquote::before{ content:"\201C"; color:var(--bordo); font-size:1.6em; line-height:0; vertical-align:-.28em; margin-right:.06em; }
.dep blockquote::after{ content:"\201D"; color:var(--bordo); font-size:1.6em; line-height:0; vertical-align:-.28em; margin-left:.04em; }
.dep figcaption{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-suave); }

/* ---------- consultório ---------- */
.consultorio{ padding-block:var(--gap); background:var(--creme-2); }
.consultorio .secao-cabeca{ margin-inline:auto; text-align:center; }
.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
/* Enquadramento um pouco menos alto e alinhado ao terço superior:
   as fotos misturam retrato e paisagem, e o corte centralizado
   cortava cabeça em umas e pés em outras. */
.galeria img{ width:100%; aspect-ratio:3/3.3; object-fit:cover; object-position:center 28%; border-radius:3px; }
.galeria figure{ margin:0; }

/* ---------- formulário ---------- */
.agendar{ padding-block:var(--gap); }
.form{ margin-top:.5rem; }
.campo{ margin:0 0 2rem; padding:0; border:0; }
.campo label, .campo legend{
  display:block; padding:0;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:.85rem;
}
.campo input[type="text"]{
  width:100%; padding:.95rem 1.1rem;
  background:var(--branco); border:1px solid var(--linha); border-radius:2px;
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--tinta);
  transition:border-color .2s ease;
}
.campo input[type="text"]::placeholder{ color:#B6ABA4; }
.campo input[type="text"]:focus{ border-color:var(--bordo); outline:none; }
.opcoes{ display:flex; flex-wrap:wrap; gap:.65rem; }
.opcoes label{
  display:inline-flex; align-items:center; margin:0;
  text-transform:none; letter-spacing:0; font-size:.94rem; color:var(--tinta);
  cursor:pointer;
}
.opcoes input{ position:absolute; opacity:0; width:0; height:0; }
.opcoes span{
  display:inline-block; padding:.6rem 1.2rem;
  background:var(--branco); border:1px solid var(--linha); border-radius:2px;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.opcoes input:checked + span{ background:var(--bordo); border-color:var(--bordo); color:#fff; }
.opcoes input:focus-visible + span{ outline:2px solid var(--bordo); outline-offset:2px; }
.erro{ color:var(--bordo); font-size:.85rem; margin:.5rem 0 0; }
.form__nota{ margin-top:1rem; font-size:.82rem; color:var(--tinta-suave); text-align:center; }

/* ---------- contato ---------- */
.contato{ background:var(--bordo); color:rgba(255,255,255,.86); padding-block:var(--gap); }
.contato h2{ color:#fff; }
.duo--contato{ align-items:stretch; }
.dados{ margin:2rem 0 0; }
.dados > div{ padding:1.05rem 0; border-bottom:1px solid rgba(255,255,255,.18); }
.dados > div:first-child{ border-top:1px solid rgba(255,255,255,.18); }
.dados dt{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:.3rem;
}
.dados dd{ margin:0; font-size:1.06rem; line-height:1.5; }
.dados a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.dados a:hover{ border-bottom-color:#fff; }
.particular{ margin:1.5rem 0 2rem; font-size:.88rem; color:rgba(255,255,255,.6); font-style:italic; }
.duo__mapa{ min-height:400px; }
.duo__mapa iframe{ width:100%; height:100%; min-height:400px; border:0; border-radius:3px; filter:grayscale(.35); }

/* ---------- rodapé ---------- */
.rodape{ background:var(--bordo-escuro); color:rgba(255,255,255,.7); padding-top:clamp(3rem,6vw,4.5rem); font-size:.9rem; }
.rodape__inner{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; }
.rodape__logo{ width:190px; height:auto; opacity:.9; }
.rodape strong{ color:#fff; font-weight:400; }
.rodape a{ color:rgba(255,255,255,.85); }
.rodape__col p{ margin-bottom:.9rem; line-height:1.6; }
.rodape__base{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.78rem; color:rgba(255,255,255,.5);
}
.rodape__base p{ margin:0; }

/* ---------- chamadas intermediárias ----------
   Levam sempre ao formulário (#agendar), nunca direto ao WhatsApp:
   o objetivo é que o paciente percorra o site e chegue qualificado. */
.chamada{
  margin-top:clamp(3rem, 6vw, 4.5rem);
  padding-top:clamp(2.5rem, 5vw, 3.5rem);
  border-top:1px solid var(--linha);
  text-align:center;
}
.chamada p{
  font-family:var(--serif);
  font-size:clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  line-height:1.45; color:var(--tinta);
  max-width:34rem; margin-inline:auto; margin-bottom:1.6rem;
}
.chamada--claro{ border-top-color:rgba(255,255,255,.22); }
.chamada--claro p{ color:#fff; }

/* ---------- reveal ----------
   Só esconde quando o JS está ativo (classe .js no <html>).
   Sem JS, o conteúdo aparece normalmente, apenas sem a animação. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.js .reveal.visivel{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   responsivo
   ========================================================= */
@media (max-width:980px){
  .cards, .cards-dep, .galeria{ grid-template-columns:1fr 1fr; }
  .complementos{ grid-template-columns:1fr 1fr; gap:0 2rem; }
  .complementos .complemento:nth-child(3){ margin-top:1.75rem; }
  .galeria figure:last-child{ display:none; }
  .rodape__inner{ grid-template-columns:1fr 1fr; }
  .rodape__logo{ grid-column:1 / -1; }
}

@media (max-width:860px){
  .menu-btn{ display:block; margin-left:0; }
  /* Mantém o "Agendar" visível no mobile: com o botão flutuante removido,
     é a única chamada permanente — e leva ao formulário, não ao WhatsApp. */
  .topo__cta{ margin-left:auto; padding:.6rem 1.1rem; font-size:.68rem; }
  .nav{
    position:fixed; inset:var(--topo-h) 0 auto;
    flex-direction:column; gap:0; margin:0;
    background:var(--creme); border-bottom:1px solid var(--linha);
    padding:.5rem clamp(1.25rem,5vw,2.5rem) 1.5rem;
    transform:translateY(-120%); transition:transform .35s ease;
    box-shadow:0 18px 30px rgba(42,35,32,.08);
  }
  .nav.aberto{ transform:translateY(0); }
  .nav a{ padding-block:.95rem; border-bottom:1px solid var(--linha); font-size:.95rem; }
  .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }

  /* No mobile a headline vem antes da foto: a pessoa lê a proposta
     primeiro e a imagem entra como reforço, não como barreira. */
  .hero{ grid-template-columns:1fr; padding-top:2.5rem; }
  .hero__foto img{ aspect-ratio:4/3; }
  .hero__texto{ max-width:none; }
  .hero__acoes{ margin-bottom:.5rem; }

  .duo, .duo--contato{ grid-template-columns:1fr; }
  .duo--inverso .duo__foto{ order:0; }

  /* iOS não renderiza background-attachment:fixed direito — a imagem
     estica ou congela. No celular o fundo rola junto. */
  .invisalign{ background-attachment: scroll, scroll; }
  .sobre .duo__foto img{ aspect-ratio:4/3.4; object-position:center 25%; }
  .duo__mapa{ min-height:320px; }
  .duo__mapa iframe{ min-height:320px; }
}

@media (max-width:620px){
  :root{ --topo-h:84px; }
  .topo__logo img{ height:54px; }
  .cards, .cards-dep, .galeria{ grid-template-columns:1fr; }

  /* Coluna única: altura uniforme não serve para nada aqui, então cada
     foto aparece inteira. Recorte no celular é sempre visível. */
  .card__foto img{ aspect-ratio:auto; object-fit:contain; object-position:center; }
  .card--adultos .card__foto img,
  .card--criancas .card__foto img,
  .card--interceptativa .card__foto img{ object-position:center; }

  .destaques{ grid-template-columns:1fr; }
  .complementos{ grid-template-columns:1fr; gap:1.75rem 0; }
  .complementos .complemento:nth-child(3){ margin-top:0; }
  .galeria figure:last-child{ display:block; }
  /* Coluna única: cada foto aparece inteira, no formato original.
     Sem recorte — no celular a imagem cortada fica evidente. */
  .galeria img{ aspect-ratio:auto; object-fit:contain; object-position:center; }
  .formacao li{ grid-template-columns:1fr; gap:.15rem; }

  /* Rodapé centralizado no celular: em coluna única o texto alinhado
     à esquerda deixa a logo solta e o bloco desequilibrado. */
  .rodape__inner{ grid-template-columns:1fr; text-align:center; justify-items:center; gap:1.75rem; }
  .rodape__logo{ margin-inline:auto; }
  .rodape__base{ justify-content:center; text-align:center; }
  .opcoes{ flex-direction:column; align-items:stretch; }
  .opcoes span{ display:block; text-align:center; }
}