/* ==========================================================================
   Bê Odontologia — landing page
   Sistema visual derivado do padrão de feed v01:
   verde #01331A, rosa #E49AB1, neutro tirado do cinza de estúdio das fotos.
   O motivo condutor é o arco: uma curva por bloco, sempre no canto superior
   esquerdo, como nas máscaras das artes.
   ========================================================================== */

@property --zoom { syntax: "<number>"; inherits: false; initial-value: 1.04; }

:root{
  /* tinta */
  --tinta:        #01331A;
  --tinta-funda:  #02220F;
  --tinta-clara:  #0B4527;

  /* rosa */
  --rosa:         #E49AB1;
  --rosa-veu:     #F0C6D4;
  --rosa-fumo:    #C98FA2;

  /* neutro: o cinza do fundo de estúdio das fotografias */
  --papel:        #E9ECE7;
  --papel-fundo:  #DFE4DE;
  --fumo:         #5E6E63;

  /* curvas */
  --arco:         clamp(72px, 15vw, 210px);
  --arco-placa:   clamp(40px, 7vw, 132px);

  /* ritmo */
  --gutter:       clamp(20px, 5vw, 76px);
  --largura:      1320px;
  --respiro:      clamp(72px, 11vw, 168px);

  /* movimento */
  --curva:        cubic-bezier(.22,1,.36,1);
  --curva-arco:   cubic-bezier(.16,.84,.24,1);
}

/* ---------- base ---------- */

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scrollbar-width:none;          /* Firefox e Chrome recentes */
  -ms-overflow-style:none;
  overscroll-behavior-x:none;    /* corta o arrasto lateral no celular */
}
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; }

body{
  margin:0;
  background:var(--tinta-funda);
  color:var(--papel);
  font-family:"Archivo","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .22vw,1.115rem);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* overflow-x:hidden só no body é furão no Safari do iPhone, onde o viewport
   visual e o de layout divergem. clip corta sem criar caixa de rolagem. */
html{ overflow-x:hidden; }
@supports (overflow-x: clip){
  html,body{ overflow-x:clip; }
}

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

a{ color:inherit; }

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

.pular{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--rosa); color:var(--tinta);
  padding:14px 22px; font-size:.9rem; text-decoration:none;
}
.pular:focus{ left:12px; top:12px; }

.envelope{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
}

/* ---------- tipografia ---------- */

.display-xl,.display-l,h1,h2,h3{
  font-family:"Newsreader",Palatino,"Palatino Linotype",Georgia,serif;
  font-weight:380;
  font-optical-sizing:auto;
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0;
}

.display-xl{ font-size:clamp(2.4rem,5.5vw,4.45rem); line-height:1.07; }
.display-l { font-size:clamp(2.05rem,4.3vw,3.5rem);  line-height:1.12; }

h3{ font-size:clamp(1.22rem,1.6vw,1.5rem); line-height:1.25; letter-spacing:-.01em; }

/* o itálico é reservado à frase de destaque — regra do padrão da marca */
.display-xl em,.display-l em{ font-style:italic; font-weight:340; }

.rotulo{
  font-family:"Archivo",sans-serif;
  font-size:.705rem;
  font-weight:500;
  letter-spacing:.21em;
  text-transform:uppercase;
  margin:0 0 clamp(18px,2.4vw,30px);
  opacity:.85;
}

p{ margin:0 0 1.05em; max-width:62ch; }
p:last-child{ margin-bottom:0; }

.nota{
  font-size:.86rem;
  line-height:1.6;
  opacity:.72;
  max-width:52ch;
}
.nota a{ text-underline-offset:3px; }

.pendente{
  font-style:italic;
  opacity:.75;
  border-bottom:1px dotted currentColor;
  padding-bottom:1px;
}

/* ---------- botões e links ---------- */

.botao{
  display:inline-flex; align-items:center; gap:.7em;
  padding:16px 30px;
  font-size:.925rem; font-weight:500; letter-spacing:.012em;
  text-decoration:none;
  border-radius:999px 999px 999px 4px;  /* a curva da marca, em miniatura */
  transition:transform .4s var(--curva), background-color .3s ease, color .3s ease;
}
.botao--rosa{ background:var(--rosa); color:var(--tinta); }
.botao--rosa:hover{ background:var(--rosa-veu); transform:translateY(-2px); }
.botao--mini{ padding:11px 22px; font-size:.84rem; }

.link-seta{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.925rem; font-weight:500;
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid currentColor;
  transition:gap .35s var(--curva), opacity .3s ease;
}
.link-seta::after{ content:"→"; font-size:1.05em; line-height:1; }
.link-seta:hover{ gap:.95em; }

.acoes{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(28px,3.6vw,44px);
}

/* ---------- topo ---------- */

.topo{
  position:fixed; inset:0 0 auto 0; z-index:40;
  background:transparent;
  transition:background-color .45s ease, backdrop-filter .45s ease;
}
.topo--preso{
  background:color-mix(in srgb, var(--tinta-funda) 88%, transparent);
  backdrop-filter:blur(14px) saturate(120%);
}
.topo__interno{
  max-width:var(--largura);
  margin-inline:auto;
  padding-block:clamp(14px,1.7vw,22px);
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:clamp(20px,3vw,48px);
  color:var(--rosa);
}

.marca{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--rosa);
  margin-right:auto;
}
.marca__simbolo{
  width:42px; height:33px; display:block;
  background:currentColor;
  -webkit-mask:url("../img/logo-be.svg") no-repeat center / contain;
          mask:url("../img/logo-be.svg") no-repeat center / contain;
}
.marca__simbolo--grande{ width:66px; height:52px; }
.marca__texto{
  font-size:.695rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
}

.menu{ display:flex; gap:clamp(16px,2.2vw,32px); }
.menu a{
  font-size:.815rem; text-decoration:none; color:var(--rosa);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:border-color .3s ease, opacity .3s ease;
  opacity:.82;
}
.menu a:hover{ opacity:1; border-bottom-color:currentColor; }

/* ---------- placas ---------- */

.hero,.frase,.sobre,.cuidados,.caso,.consulta,.prevencao,.agendar,.duvidas,.rodape{
  position:relative;
  padding-inline:var(--gutter);
  margin-top:-1px;
}

/* A borda de cada placa segue o papel da seção, em vez de repetir o mesmo
   canto arredondado em todas e virar uma fila de balões de conversa.
   O arco de canto fica reservado às fotos e às placas verdes. */

/* rosa: as pausas do texto. Cúpula simétrica, larga e rasa. */
.frase,.caso,.prevencao{
  border-radius:100% 100% 0 0 / clamp(26px,4.5vw,78px) clamp(26px,4.5vw,78px) 0 0;
}

/* papel: um único arco varrendo a largura inteira, preso a um dos lados.
   Assimétrico de propósito, para não ecoar a cúpula das rosas. */
.sobre,.duvidas{ border-radius:0 100% 0 0 / 0 clamp(28px,4.6vw,84px) 0 0; }
.consulta       { border-radius:100% 0 0 0 / clamp(28px,4.6vw,84px) 0 0 0; }

/* verde: um único arco de canto, do lado oposto ao das fotos. */
.cuidados,.agendar{ border-radius:0 var(--arco-placa) 0 0; }

/* rodapé: reto. É o chão da página. */
.rodape{ border-radius:0; }

/* Cada placa pinta só a própria caixa, então no recorte curvo apareceria o
   fundo do body. Cada seção estende a própria cor por baixo da seguinte,
   preenchendo o recorte com a cor de cima, que é o que se espera ver. */
.hero::after,.frase::after,.sobre::after,.cuidados::after,.caso::after,
.consulta::after,.prevencao::after,.agendar::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:clamp(40px,7vw,134px);
  background:inherit;
  pointer-events:none;
}

.sobre,.consulta,.duvidas{ background:var(--papel); color:var(--tinta); }
.cuidados,.agendar{ background:var(--tinta); color:var(--rosa); }
.frase,.caso,.prevencao{ background:var(--rosa); color:var(--tinta); }
.rodape{ background:var(--tinta-funda); color:var(--rosa); }

.sobre,.cuidados,.caso,.consulta,.prevencao,.agendar,.duvidas{
  padding-block:var(--respiro);
}

.cabecalho{ margin-bottom:clamp(44px,6vw,80px); }

/* ---------- arco: a máscara de foto ---------- */

.arco{ position:relative; margin:0; }

.arco__janela{
  position:relative;
  overflow:hidden;
  border-radius:var(--arco) 0 0 0;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--curva-arco);
  background:#7C8084;
}
.arco__janela > img{
  position:absolute;
  inset:-10% 0 auto 0;
  width:100%;
  height:120%;
  object-fit:cover;
  --zoom:1.04;
  transform:translate3d(0,var(--py,0px),0) scale(var(--zoom));
  transition:--zoom 1.4s var(--curva-arco);
  will-change:transform;
}

/* o traço fino que passa por trás da foto, como nas artes do feed */
.arco__contorno{
  position:absolute;
  inset:clamp(-26px,-2.4vw,-14px) auto auto clamp(-26px,-2.4vw,-14px);
  width:min(62%,340px);
  aspect-ratio:1/1.12;
  border:1px solid currentColor;
  border-right:0; border-bottom:0;
  border-radius:var(--arco) 0 0 0;
  opacity:.5;
  pointer-events:none;
}

/* ---------- hero ---------- */

.hero{
  padding-inline:var(--gutter);
  padding-top:clamp(108px,13vw,172px);
  padding-bottom:clamp(38px,5vw,64px);
  background:var(--tinta-funda);
  color:var(--rosa);
}
.hero__grade{
  max-width:var(--largura);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(36px,5vw,80px);
  align-items:center;
}
.hero__texto{ padding-bottom:clamp(0px,2vw,28px); }
.hero__linha{
  margin-top:clamp(24px,3vw,36px);
  max-width:46ch;
  color:var(--rosa-fumo);
  font-size:1.055em;
}
.hero__foto{ justify-self:end; width:100%; max-width:440px; }
.hero__foto .arco__janela{ aspect-ratio:4/5; }
.hero__foto .arco__janela img{ object-position:50% 26%; }

.hero__assinatura{
  max-width:var(--largura);
  margin:clamp(40px,5vw,72px) auto 0;
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid color-mix(in srgb, var(--rosa) 34%, transparent);
  display:flex; flex-wrap:wrap; gap:6px clamp(16px,2vw,28px);
  align-items:baseline;
  font-size:.83rem;
}
.hero__cargo{ color:var(--rosa-fumo); }

/* ---------- frase ----------
   A placa verde sobre o rosa e o mesmo arranjo do post 02: fundo rosa,
   caixa verde com o cabecalho da marca dentro. */

.frase{ padding-block:clamp(72px,10vw,142px); }

.frase__grade{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,84px);
  align-items:center;
}
.frase__linha{ max-width:14ch; }

.frase__placa{
  background:var(--tinta);
  color:var(--rosa);
  border-radius:clamp(44px,6vw,88px) 0 0 0;
  padding:clamp(28px,3.4vw,44px);
}
.frase__cabeca{
  display:flex; align-items:center; gap:12px;
  padding-bottom:14px;
  margin-bottom:clamp(20px,2.4vw,28px);
  border-bottom:1px solid color-mix(in srgb, var(--rosa) 38%, transparent);
}
.frase__marca{
  width:38px; height:30px; display:block;
  background:currentColor;
  -webkit-mask:url("../img/logo-be.svg") no-repeat center / contain;
          mask:url("../img/logo-be.svg") no-repeat center / contain;
}
.frase__rotulo{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
}
.frase__placa p{ font-size:.975rem; line-height:1.62; max-width:38ch; margin:0; }

/* ---------- a bê ---------- */

.sobre__grade{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,5vw,92px);
  align-items:start;
}
.sobre__corpo p{ max-width:56ch; }
.sobre__corpo p + p{ margin-top:0; }

/* ---------- cuidados ---------- */

.cartoes{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));   /* 6 itens, 2 fileiras cheias */
  gap:0 clamp(28px,4vw,64px);
}
@media (max-width:900px){ .cartoes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cartoes{ grid-template-columns:minmax(0,1fr); } }
.cartao{
  padding-block:clamp(30px,3.4vw,42px);
  border-top:1px solid color-mix(in srgb, var(--rosa) 30%, transparent);
}
.cartao h3{ margin-bottom:.5em; }
.cartao p{ color:var(--rosa-fumo); font-size:.955rem; max-width:34ch; margin:0; }

.cuidados .nota{ margin-top:clamp(34px,4vw,52px); color:var(--rosa-fumo); opacity:1; }

/* ---------- caso clínico: o comparador ----------
   As duas fotos vivem no MESMO arquivo, empilhadas, com a emenda medida na
   linha 479 de 952. Em vez de fatiar em dois arquivos, a mesma imagem entra
   duas vezes e cada camada mostra uma metade pelo object-position. A janela
   tem a proporção de meia foto (1018x472), o que deixa a emenda de fora das
   duas. A de cima e revelada por clip-path, que não deforma a imagem. */

.compara{ margin:0; }

.compara__palco{
  --arco-foto:clamp(28px,4vw,76px);
  --recuo-rotulo:clamp(12px,1.6vw,20px);
  position:relative;
  aspect-ratio:1018/472;
  overflow:hidden;
  border-radius:var(--arco-foto) 0 0 0;
  background:var(--tinta);
  touch-action:pan-y;
}
.compara__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.compara__img--antes { object-position:50% 0%; }
.compara__img--depois{
  object-position:50% 100%;
  /* corta pela esquerda: o depois ocupa a direita, do lado do seu rotulo.
     Cortar pela direita invertia a leitura em relação às legendas. */
  clip-path:inset(0 0 0 var(--corte,50%));
}

.compara__rotulo{
  position:absolute; top:var(--recuo-rotulo);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  padding:7px 13px;
  border-radius:999px;
  background:color-mix(in srgb, var(--tinta-funda) 74%, transparent);
  color:var(--rosa-veu);
  backdrop-filter:blur(6px);
  pointer-events:none;
  transition:opacity .16s ease;
}
/* O canto superior esquerdo é curvo e corta o que passa por fora do arco.
   0,3 × raio é o quanto o rótulo precisa entrar para caber na curva. */
.compara__rotulo--antes{
  left:max(var(--recuo-rotulo), calc(var(--arco-foto) * 0.32));
  top: max(var(--recuo-rotulo), calc(var(--arco-foto) * 0.32));
}
.compara__rotulo--depois{ right:var(--recuo-rotulo); }

.compara__alca{
  position:absolute; top:0; bottom:0;
  left:var(--corte,50%);
  width:2px;
  margin-left:-1px;
  background:var(--papel);
  pointer-events:none;
}
.compara__alca i{
  position:absolute; top:50%; left:50%;
  width:46px; height:46px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:var(--papel);
  box-shadow:0 3px 16px rgba(0,0,0,.3);
}
.compara__alca i::before,
.compara__alca i::after{
  content:"";
  position:absolute; top:50%;
  width:7px; height:7px;
  border:1.6px solid var(--tinta);
  border-width:1.6px 1.6px 0 0;
}
.compara__alca i::before{ left:14px;  transform:translateY(-50%) rotate(-135deg); }
.compara__alca i::after { right:14px; transform:translateY(-50%) rotate(45deg); }

/* O controle e um range de verdade: teclado, toque e leitor de tela
   funcionam sem nada escrito a mao. Fica invisivel por cima do palco. */
.compara__cursor{
  position:absolute; inset:0;
  width:100%; height:100%;
  margin:0; padding:0;
  -webkit-appearance:none; appearance:none;
  background:transparent;
  cursor:ew-resize;
}
.compara__cursor::-webkit-slider-runnable-track{ background:transparent; height:100%; }
.compara__cursor::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:52px; height:52px; border-radius:999px;
  background:transparent; cursor:ew-resize;
}
.compara__cursor::-moz-range-track{ background:transparent; height:100%; }
.compara__cursor::-moz-range-thumb{
  width:52px; height:52px; border:0; border-radius:999px;
  background:transparent; cursor:ew-resize;
}
.compara__cursor:focus-visible{ outline:2px solid var(--tinta); outline-offset:5px; }

.compara__ficha{
  display:grid; gap:clamp(12px,1.6vw,18px);
  margin-top:clamp(26px,3.2vw,38px);
  max-width:56ch;
}
.compara__assinatura{ font-size:.93rem; line-height:1.6; margin:0; }
.compara__assinatura strong{ font-weight:600; }
.compara__aviso{
  font-size:.82rem; line-height:1.6; margin:0;
  opacity:.74;
}

/* ---------- a consulta ---------- */

.passos{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(40px,5vw,72px);
}
.passo{ position:relative; }
.passo__n{
  display:block;
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(3.2rem,5.4vw,4.6rem);
  line-height:.9;
  font-weight:250;
  color:var(--rosa);
  margin-bottom:clamp(16px,2vw,24px);
}
.passo h3{ margin-bottom:.55em; }
.passo p{ color:var(--fumo); font-size:.955rem; max-width:34ch; margin:0; }

/* ---------- prevenção ---------- */

.prevencao__grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,5vw,88px);
  align-items:center;
}
.prevencao__foto{ order:2; }
.prevencao__texto{ order:1; }
.prevencao__foto .arco__janela{ aspect-ratio:1/1; }
/* A moldura é quadrada e a foto é panorâmica: o cover preenche a altura
   exatamente, então o enquadramento vertical sai do deslocamento da caixa,
   não do object-position. Caixa mais alta na base para sobrar céu sobre a
   cabeça dela, e um pouco menos de zoom. */
.prevencao__foto .arco__janela > img{
  inset:-3.5% 0 auto 0;
  height:116%;
  object-position:56% 50%;
}

.listrada{
  list-style:none; margin:clamp(30px,3.6vw,42px) 0; padding:0;
  display:grid; gap:0;
  max-width:24rem;
}
.listrada li{
  padding-block:13px;
  border-top:1px solid color-mix(in srgb, var(--tinta) 32%, transparent);
  font-size:.955rem;
}
.listrada li:last-child{ border-bottom:1px solid color-mix(in srgb, var(--tinta) 32%, transparent); }

.prevencao .nota{ opacity:.78; }

/* ---------- agendar ---------- */

.agendar__grade{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(40px,5vw,96px);
  align-items:center;
}
.agendar__texto p{ color:var(--rosa-fumo); }
.agendar__texto .display-l{ color:var(--rosa); }
.agendar__foto{ order:1; justify-self:start; width:100%; max-width:440px; }
.agendar__texto{ order:2; }
.agendar__foto .arco__janela{ aspect-ratio:4/5; }

/* A foto do agendamento vive num palco com a proporcao exata do arquivo
   (1066x1600), para que o celular possa ser posicionado em % da foto e
   continuar no lugar em qualquer largura de tela. */
.foto-palco{
  position:absolute;
  left:0; top:-10%;
  width:100%;
  aspect-ratio:1066/1600;
  --zoom:1.04;
  transform:translate3d(0,var(--py,0px),0) scale(var(--zoom));
  transition:--zoom 1.4s var(--curva-arco);
  will-change:transform;
}
.foto-palco > img{ width:100%; height:auto; }

/* ---------- o celular na mao dela ---------- */

/* Geometria do aparelho, medida na propria fotografia (1066x1600).
   O corpo do celular e o vidro sao os dois pretos, entao o que vale aqui e
   so o VIDRO: o corpo foi ajustado por energia de borda e depois descontada
   a moldura lado a lado (esq 4px, dir 18px — o brilho da lateral polida —,
   topo 1px, base 2px). Sobra uma tela de proporcao 2,155, que e a de um
   celular de verdade.

   Para acertar no olho, mexa so aqui: giro controla a inclinacao e
   perspectiva controla o quanto as bordas horizontais deitam a mais. */
.celular{
  --cel-x: 21.734%;      /* centro do vidro, em % da largura da foto */
  --cel-y: 53.916%;      /* centro do vidro, em % da altura da foto  */
  --cel-larg: 11.895%;
  --cel-alt: 17.075%;
  --cel-giro: 15.09deg;
  --cel-perspectiva: -3.02deg;

  position:absolute;
  left:var(--cel-x); top:var(--cel-y);
  width:var(--cel-larg); height:var(--cel-alt);
  transform:translate(-50%,-50%) rotate(var(--cel-giro)) skewY(var(--cel-perspectiva));
}
.celular__tela{
  position:absolute; inset:0;
  overflow:hidden;
  border-radius:9%/5%;
  background:var(--tinta-funda);
}
.celular__palco{
  position:absolute; top:0; left:0;
  width:390px;                       /* viewport de celular de verdade; */
  height:840px;                      /* a altura exata vem do JS */
  transform:scale(var(--mini-escala,.15));
  transform-origin:0 0;
}
.celular__fita{ will-change:transform; }

/* Apagada ate o JS medir e posicionar. Quem acende e acendeMini(), por
   estilo inline, para nao depender da cascata. */
.js .celular__palco{ opacity:0; transition:opacity .45s ease .05s; }
.celular__brilho{
  position:absolute; inset:0;
  border-radius:9%/5%;
  background:linear-gradient(118deg,
    rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 26%,
    rgba(255,255,255,0) 46%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* ---------- a pagina em miniatura ---------- */

.mini{ padding:26px 22px; }
.mini--verde{ background:var(--tinta-funda); color:var(--rosa); }
.mini--rosa { background:var(--rosa);        color:var(--tinta); border-radius:26px 0 0 0; margin-top:-1px; }
.mini--papel{ background:var(--papel);       color:var(--tinta); border-radius:26px 0 0 0; margin-top:-1px; }
.mini--verde + .mini--verde,
.mini--rosa + .mini--verde,
.mini--papel + .mini--verde{ border-radius:26px 0 0 0; margin-top:-1px; }
.mini--hero{ padding-top:20px; }

.mini__topo{ display:flex; align-items:center; gap:7px; margin-bottom:34px; }
.mini__logo{
  width:26px; height:20px; background:currentColor;
  -webkit-mask:url("../img/logo-be.svg") no-repeat center / contain;
          mask:url("../img/logo-be.svg") no-repeat center / contain;
}
.mini__marca{ font-size:7px; letter-spacing:.24em; text-transform:uppercase; }
.mini__rotulo{ font-size:7px; letter-spacing:.21em; text-transform:uppercase; margin:0 0 14px; opacity:.85; }
.mini__titulo{
  font-family:"Newsreader",Georgia,serif; font-weight:380;
  font-size:31px; line-height:1.08; letter-spacing:-.018em;
  margin:0 0 16px; max-width:none;
}
.mini__titulo em{ font-style:italic; font-weight:340; }
.mini__texto{ display:grid; gap:7px; margin-bottom:20px; }
.mini__texto i{ display:block; height:5px; border-radius:3px; background:currentColor; opacity:.34; }
.mini__texto i.curta{ width:58%; }
.mini__botao{
  display:inline-block; font-size:9px; padding:9px 16px;
  border-radius:999px 999px 999px 3px;
  background:var(--rosa); color:var(--tinta);
}
.mini--rosa .mini__botao{ background:var(--tinta); color:var(--rosa); }
.mini__foto{ margin-top:24px; height:210px; overflow:hidden; border-radius:62px 0 0 0; }
.mini__foto--larga{ height:150px; border-radius:48px 0 0 0; margin-bottom:20px; }
.mini__foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.mini__fios{ display:grid; }
.mini__fios span{
  font-size:10px; padding:11px 0;
  border-top:1px solid color-mix(in srgb, currentColor 32%, transparent);
}
.mini__fios span:last-child{ border-bottom:1px solid color-mix(in srgb, currentColor 32%, transparent); }
.mini__placa{
  background:var(--tinta); color:var(--rosa);
  border-radius:30px 0 0 0;
  padding:18px 16px;
  margin-top:20px;
  display:grid; gap:7px;
}
.mini__placa .mini__logo{ margin-bottom:6px; }
.mini__placa i{ display:block; height:5px; border-radius:3px; background:currentColor; opacity:.4; }
.mini__placa i.curta{ width:56%; }
.mini__passos{ display:flex; gap:26px; margin-top:8px; }
.mini__passos b{
  font-family:"Newsreader",Georgia,serif; font-weight:250;
  font-size:40px; line-height:1; color:var(--rosa);
}

.dados{
  margin:clamp(40px,4.6vw,60px) 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:clamp(22px,2.6vw,36px);
}
.dados dt{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rosa-fumo);
  padding-bottom:11px; margin-bottom:11px;
  border-bottom:1px solid color-mix(in srgb, var(--rosa) 28%, transparent);
}
.dados dd{ margin:0; font-size:.93rem; line-height:1.55; }
.dados dd a{ text-underline-offset:3px; }

/* ---------- dúvidas ---------- */

.acordeao{ max-width:860px; }
.acordeao details{
  border-top:1px solid color-mix(in srgb, var(--tinta) 24%, transparent);
}
.acordeao details:last-of-type{
  border-bottom:1px solid color-mix(in srgb, var(--tinta) 24%, transparent);
}
.acordeao summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:baseline; gap:18px;
  padding-block:clamp(20px,2.3vw,28px);
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(1.14rem,1.65vw,1.42rem);
  line-height:1.3;
  transition:opacity .25s ease;
}
.acordeao summary::-webkit-details-marker{ display:none; }
.acordeao summary::after{
  content:"+";
  margin-left:auto;
  font-family:"Archivo",sans-serif;
  font-size:1.35rem; line-height:1;
  color:var(--rosa-fumo);
  transition:transform .4s var(--curva);
}
.acordeao details[open] summary::after{ transform:rotate(45deg); }
.acordeao summary:hover{ opacity:.7; }
.acordeao__corpo{ padding-bottom:clamp(22px,2.6vw,32px); }
.acordeao__corpo p{ color:var(--fumo); max-width:58ch; font-size:.975rem; }

@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  .acordeao details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .45s var(--curva), content-visibility .45s allow-discrete;
  }
  .acordeao details[open]::details-content{ block-size:auto; }
}

/* ---------- rodapé ---------- */

.rodape{ padding-block:clamp(56px,7vw,96px) clamp(36px,4vw,54px); }
.rodape__grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,4vw,64px);
  align-items:start;
}
.rodape__marca{ display:flex; align-items:flex-start; gap:clamp(18px,2.2vw,28px); }
.rodape__assinatura{
  font-size:.875rem; line-height:1.7; margin:0;
  padding-top:4px;
}
.rodape__menu{ display:flex; flex-wrap:wrap; gap:10px clamp(16px,2vw,26px); }
.rodape__menu a{
  font-size:.79rem; text-decoration:none; opacity:.8;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:border-color .3s ease, opacity .3s ease;
}
.rodape__menu a:hover{ opacity:1; border-bottom-color:currentColor; }
.rodape__aviso{
  grid-column:1/-1;
  margin:clamp(34px,4vw,54px) 0 0;
  padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid color-mix(in srgb, var(--rosa) 24%, transparent);
  font-size:.775rem; line-height:1.7;
  color:var(--rosa-fumo);
  max-width:none;
}

/* ==========================================================================
   Movimento
   ========================================================================== */

/* entrada do hero: roda no carregamento, termina em menos de 1s */
.js .entra{
  animation:sobe .78s var(--curva) both;
  animation-delay:var(--atraso,0ms);
}
@keyframes sobe{
  from{ opacity:0; transform:translate3d(0,22px,0); }
  to  { opacity:1; transform:none; }
}
.js .hero__foto.entra .arco__janela{
  animation:abre-arco 1.25s var(--curva-arco) both;
  animation-delay:calc(var(--atraso,0ms) + 80ms);
}
@keyframes abre-arco{
  from{ clip-path:inset(0 0 100% 0); }
  to  { clip-path:inset(0 0 0 0); }
}
.js .hero__foto.entra .arco__janela img{
  animation:desliza-zoom 1.7s var(--curva-arco) both;
  animation-delay:calc(var(--atraso,0ms) + 80ms);
}
@keyframes desliza-zoom{
  from{ --zoom:1.17; }
  to  { --zoom:1.04; }
}

/* revelação por rolagem — o estado de repouso é o visível */
.js .revela:not(.dentro){
  opacity:0;
  transform:translate3d(0,26px,0);
}
.js .revela{
  transition:opacity .85s var(--curva), transform .85s var(--curva);
  transition-delay:var(--atraso,0ms);
}
.js .revela:not(.dentro) .arco__janela{ clip-path:inset(0 0 100% 0); }
.js .revela:not(.dentro) .arco__janela > img,
.js .revela:not(.dentro) .foto-palco{ --zoom:1.17; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .entra,
  .js .hero__foto.entra .arco__janela,
  .js .hero__foto.entra .arco__janela img{ animation:none; }
  .js .revela:not(.dentro){ opacity:1; transform:none; }
  .js .revela:not(.dentro) .arco__janela{ clip-path:inset(0 0 0 0); }
  .js .revela:not(.dentro) .arco__janela > img,
  .js .revela:not(.dentro) .foto-palco{ --zoom:1.04; }
  .arco__janela > img{ transform:none !important; transition:none; }
  .foto-palco{ transform:none !important; transition:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}

/* ==========================================================================
   Telas menores
   ========================================================================== */

@media (max-width:980px){
  .hero__grade,
  .frase__grade,
  .sobre__grade,
  .prevencao__grade,
  .agendar__grade{ grid-template-columns:minmax(0,1fr); }

  .hero__grade{ gap:clamp(36px,6vw,56px); }
  .hero__foto,.agendar__foto{ justify-self:start; max-width:min(420px,88%); }
  .frase__placa{ max-width:34rem; }   /* a placa acompanha o texto, sem verde vazio */
  .prevencao__foto{ max-width:min(520px,100%); }
  .agendar__foto{ order:2; }
  .agendar__texto{ order:1; }
  .rodape__grade{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:860px){
  .menu{ display:none; }
}

@media (max-width:560px){
  :root{ --arco:clamp(56px,20vw,110px); }
  .hero{ padding-top:104px; }
  .acoes{ gap:20px; }
  .botao{ width:100%; justify-content:center; }
  .link-seta{ align-self:flex-start; }
  .arco__contorno{ width:70%; }
}

/* aviso temporário dos links ainda sem destino */
.aviso-pendente{
  flex-basis:100%;
  font-size:.82rem;
  font-style:italic;
  opacity:.78;
}