@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');

/* ============================================================
   Vértice Odontologia · template de clínica
   Um arquivo, sem build. Trocar os tokens abaixo muda o site inteiro.
   ============================================================ */
:root{
  --ink:#183b3e;      /* texto e superfícies escuras */
  --dark:#062e33;     /* blocos escuros e botões */
  --blue:#81a6ad;     /* apoio, destaques */
  --paper:#f4f4f6;    /* fundo de cartão */
  --muted:#4f6165;    /* texto de apoio, 5,9:1 sobre branco */
  --linha:#dfe4e5;
  --radius:14px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.55 'DM Sans',Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
h1{font-size:clamp(38px,5vw,66px)}
h2{font-size:clamp(27px,3.1vw,42px)}
h3{font-size:19px}
p{color:var(--muted)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid var(--blue);outline-offset:4px;border-radius:3px}
::selection{background:var(--blue);color:var(--dark)}

.site{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.section{padding:clamp(54px,7vw,100px) 0}
.numero{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.center-heading{text-align:center;max-width:660px;margin:0 auto 40px}
.center-heading p{margin-top:12px}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:13px 26px;border-radius:999px;font-size:14px;font-weight:550;border:1px solid transparent;
  transition:background .22s ease,color .22s ease}
.pill.dark{background:var(--dark);color:#fff}
.pill.dark:hover{background:var(--ink)}
.pill.claro{background:#fff;color:var(--dark)}
.pill.claro:hover{background:var(--blue)}
.link-seta{display:inline-block;margin-top:20px;font-weight:550;font-size:14px;
  border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- topo ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;
  position:sticky;top:0;z-index:30;background:#fffffff2;backdrop-filter:blur(8px)}
.marca{font-weight:650;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.menu-links{display:flex;gap:26px;font-size:14.5px}
.menu-links a:hover{color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;width:46px;height:46px;align-items:center;justify-content:center}
.menu-toggle svg{width:24px;height:24px}

/* ---------- herói ---------- */
.hero{position:relative;border-radius:var(--radius);overflow:hidden;color:#fff;
  min-height:clamp(470px,66vh,640px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4.6vw,58px)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veu{position:absolute;inset:0;background:
  linear-gradient(100deg,#062e33f2,#062e33bf 55%,#062e337a),
  radial-gradient(ellipse 76% 78% at 20% 50%,#062e3380,transparent 72%)}
.hero-copy{position:relative;max-width:600px}
.tag{display:inline-block;margin-bottom:22px;padding:8px 15px;border-radius:999px;
  border:1px solid #ffffff6b;font-size:12.5px}
.hero h1{color:#fff;margin-bottom:20px}
.hero p{color:#ffffffe8;font-size:16px;margin-bottom:28px}
.hero-bottom{position:relative;display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:44px}
.mini{background:#ffffff26;border:1px solid #ffffff4d;border-radius:10px;padding:13px 18px;
  backdrop-filter:blur(4px);min-width:190px}
.mini b{display:block;font-size:14px;font-weight:600;white-space:nowrap}
.mini span{font-size:12.5px;color:#ffffffd1}

/* ---------- resposta direta ---------- */
.resposta{max-width:960px}
.resposta-direta{font-size:17px;line-height:1.65;color:var(--ink);margin-top:6px}
.resposta-lista{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px}
.resposta-lista li{position:relative;padding-left:24px;font-size:15px;line-height:1.6;color:var(--muted)}
.resposta-lista li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--blue)}
.resposta-lista strong{color:var(--ink);font-weight:600}

/* ---------- intro ---------- */
.intro{display:grid;grid-template-columns:1.02fr .9fr .9fr .78fr;gap:20px;align-items:center}
.intro-copy p{margin-top:14px}
.eye-photo{margin:0;position:relative;border-radius:var(--radius);overflow:hidden}
.eye-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.eye-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;color:#fff;
  font-size:13px;line-height:1.45;background:linear-gradient(transparent,#062e33e6)}

/* ---------- a clínica ---------- */
.about{display:grid;grid-template-columns:1fr .58fr 1.05fr;gap:22px;align-items:stretch}
.about-copy{background:var(--paper);border-radius:var(--radius);padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;justify-content:center}
.about-stack{display:grid;gap:12px;grid-template-rows:auto 1fr}
.brand-tile{background:var(--dark);color:#fff;border-radius:var(--radius);padding:24px 22px;
  display:flex;flex-direction:column;justify-content:space-between;gap:34px}
.marca-tile{font-weight:650;font-size:17px}
.brand-tile small{color:#ffffffad;font-size:12.5px}
.about-stack figure,.about-foto{margin:0;border-radius:var(--radius);overflow:hidden}
.about-stack img{width:100%;height:100%;min-height:180px;object-fit:cover}
.about-foto img{width:100%;height:100%;min-height:320px;object-fit:cover}

/* ---------- tratamentos ---------- */
.services{display:grid;grid-template-columns:.82fr 1.18fr;gap:26px;align-items:start}
.service-side{display:grid;gap:16px}
.service-copy{background:var(--dark);color:#fff;border-radius:var(--radius);padding:clamp(24px,3vw,38px)}
.service-copy h2{color:#fff}
.service-copy .numero{color:#ffffffa6}
.service-copy p{color:#ffffffd1;margin-top:12px}
.service-image{border-radius:var(--radius);overflow:hidden}
.service-image img{width:100%;height:auto;aspect-ratio:16/11;max-height:300px;object-fit:cover}
.service-list details{border-bottom:1px solid var(--linha)}
.service-list details:first-child{border-top:1px solid var(--linha)}
.service-list summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 34px;gap:20px;align-items:center;
  padding:22px 4px;min-height:56px}
.service-list summary::-webkit-details-marker{display:none}
.service-list summary small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.service-list summary b{font-size:19px;font-weight:550;letter-spacing:-.02em}
.service-list summary p{font-size:14px}
.serv-abre{justify-self:end;width:32px;height:32px;border:1px solid var(--linha);border-radius:50%;
  display:grid;place-items:center;font-size:17px;color:var(--muted);transition:transform .22s ease}
details[open] .serv-abre{transform:rotate(45deg)}
.service-detail{padding:0 4px 24px;max-width:640px;animation:abre .28s var(--ease) both}
.service-detail p{margin-bottom:18px}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- antes e depois ---------- */
.caso{margin:0 auto;max-width:520px}
.comparador{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--paper);
  aspect-ratio:9/10.6;touch-action:pan-y}
.comparador img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.caso-depois{position:absolute;inset:0;clip-path:inset(0 0 0 var(--corte,50%))}
.rotulo{position:absolute;bottom:14px;z-index:3;font-size:11px;letter-spacing:.11em;
  padding:7px 13px;border-radius:999px;background:#062e33cc;color:#fff;pointer-events:none}
.rotulo-antes{left:14px}
.rotulo-depois{right:14px}
.cursor{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:none;
  border:0;appearance:none;-webkit-appearance:none;cursor:ew-resize;z-index:4}
.cursor::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:44px;height:100%;
  background:transparent;cursor:ew-resize}
.cursor::-moz-range-thumb{width:44px;height:999px;background:transparent;border:0;cursor:ew-resize}
.alca{position:absolute;top:0;bottom:0;left:var(--corte,50%);width:2px;background:#ffffffe6;
  z-index:2;pointer-events:none;transform:translateX(-1px)}
.alca::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;
  transform:translate(-50%,-50%);border:1px solid #fff;border-radius:50%;background:#062e3366}
.alca::before{content:"";position:absolute;top:50%;left:50%;width:15px;height:9px;z-index:1;
  transform:translate(-50%,-50%);background:linear-gradient(90deg,#fff 0 3px,transparent 3px 6px,
  #fff 6px 9px,transparent 9px 12px,#fff 12px 15px)}
.caso figcaption{padding:16px 2px 0;text-align:center}
.caso figcaption strong{display:block;font-size:16px;font-weight:600}
.caso figcaption span{display:block;font-size:13px;color:var(--muted);margin-top:5px}
.casos-aviso{max-width:820px;margin:34px auto 0;text-align:center;font-size:12.5px;
  line-height:1.75;color:var(--muted)}
.casos-aviso strong{color:var(--ink);font-weight:600}

/* ---------- equipe ---------- */
.doctor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.doctor{margin:0;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--paper)}
.doctor img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.doctor figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 18px;color:#fff;
  background:linear-gradient(transparent,#062e33f5)}
.doctor figcaption b{display:block;font-size:16px;font-weight:600}
.doctor figcaption small{display:block;font-size:12px;color:#ffffffd6;margin:4px 0 6px}
.doctor figcaption span{font-size:13px;color:#ffffffe6}

/* ---------- depoimentos ---------- */
.review-header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}
.review-controls{display:flex;gap:8px}
.review-controls button{width:46px;height:46px;border:1px solid var(--linha);border-radius:50%;
  display:grid;place-items:center;font-size:17px;transition:background .22s ease}
.review-controls button:hover{background:var(--paper)}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.review{background:var(--paper);border-radius:var(--radius);padding:26px}
.review-top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.review-ini{width:38px;height:38px;border-radius:50%;background:var(--blue);color:var(--dark);
  display:grid;place-items:center;font-size:13px;font-weight:600;flex-shrink:0}
.review p{font-size:14.5px;line-height:1.62}

/* ---------- área atendida ---------- */
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.area-grid h3{margin-bottom:10px}

/* ---------- perguntas ---------- */
.faq-list{max-width:900px;margin:0 auto;border-top:1px solid var(--linha)}
.faq-item{border-bottom:1px solid var(--linha)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:22px;padding:22px 4px;min-height:56px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary b{font-size:18px;font-weight:550;letter-spacing:-.02em}
.faq-item[open] .serv-abre{transform:rotate(45deg)}
.faq-item p{padding:0 4px 24px;max-width:760px;font-size:14.5px;line-height:1.65;
  animation:abre .28s var(--ease) both}

/* ---------- mapa ---------- */
.mapa{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--paper);
  margin-bottom:clamp(54px,7vw,100px)}
.mapa iframe{display:block;width:100%;height:420px;border:0;
  filter:grayscale(.5) sepia(.14) saturate(.8) contrast(.96) brightness(1.02)}
.mapa-etiqueta{position:absolute;right:32px;bottom:32px;background:#fff;border-radius:var(--radius);
  padding:24px 26px;max-width:330px;box-shadow:0 18px 44px #062e3326}
.mapa-etiqueta strong{display:block;font-size:21px;font-weight:550;letter-spacing:-.03em;margin-bottom:8px}
.mapa-etiqueta p{font-size:13.5px;margin-bottom:16px}

/* ---------- agendamento ---------- */
.appointment{padding-top:0}
.offer{background:var(--dark);color:#fff;border-radius:var(--radius);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.offer-copy{padding:clamp(28px,4vw,54px)}
.offer-copy h2{color:#fff}
.offer-copy .numero{color:#ffffffa6}
.offer-copy p{color:#ffffffd1;margin-top:12px}
.dados{margin:28px 0 26px;display:grid;gap:18px}
.dados div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start}
.dados dt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#ffffffa6;padding-top:4px}
.dados dd{margin:0;font-size:14.5px;line-height:1.6;color:#fff}
.dados a{text-decoration:underline;text-underline-offset:4px}
.offer-image img{width:100%;height:100%;min-height:280px;object-fit:cover}

/* ---------- rodapé ---------- */
.rodape{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding:56px 0 34px;
  border-top:1px solid var(--linha);margin-top:clamp(40px,5vw,70px)}
.footer-brand .marca{display:block;margin-bottom:12px}
.footer-brand p,.footer-contato p{font-size:13.5px;line-height:1.6}
.footer-links{display:grid;gap:9px;font-size:14px;align-content:start}
.footer-links a:hover{color:var(--blue)}
.footer-contato a{font-size:17px;font-weight:550;display:inline-block;margin-bottom:10px}
.responsavel{padding:0 0 22px;text-align:center;font-size:11.5px;line-height:1.7;color:var(--muted)}
.fineprint{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px 0 26px;border-top:1px solid var(--linha);font-size:12px;color:var(--muted)}
.assinatura{display:inline-flex;align-items:center;gap:7px;opacity:.8;transition:opacity .2s ease}
.assinatura:hover{opacity:1}
.assinatura svg{width:13px;height:13px;flex-shrink:0}
.assinatura b{font-weight:600;color:var(--ink)}
.text-button{padding:12px 0;text-decoration:underline;text-underline-offset:4px;font-size:12px}

/* ---------- diálogo ---------- */
dialog{border:0;border-radius:var(--radius);padding:44px 38px;max-width:520px;
  width:calc(100% - 32px);color:var(--ink);position:relative}
dialog::backdrop{background:#062e3399;backdrop-filter:blur(4px)}
dialog h2{margin-bottom:16px}
.close{position:absolute;right:14px;top:8px;font-size:28px;width:44px;height:44px}

/* ---------- responsivo ---------- */
@media(max-width:1000px){
  .intro{grid-template-columns:1fr 1fr}
  .intro-copy{grid-column:1/-1}
  .intro-destaque{grid-column:1/-1}
  .about{grid-template-columns:1fr 1fr}
  .about-copy{grid-column:1/-1}
  .services{grid-template-columns:1fr}
  .service-side{grid-template-columns:1fr 1fr}
  .service-image img{aspect-ratio:16/10;max-height:none}
  .offer{grid-template-columns:1fr}
  .offer-image img{aspect-ratio:16/9;min-height:0}
  .rodape{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  html{scroll-padding-top:20px}
  .topbar{position:relative}
  .menu-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:#fff;border-top:1px solid var(--linha);padding:4px clamp(16px,4vw,40px) 14px;
    box-shadow:0 18px 34px #062e331a;z-index:40}
  .menu-links.aberto{display:flex}
  .menu-links a{padding:15px 0;border-bottom:1px solid var(--linha)}
  .menu-toggle{display:inline-flex}
  .header-actions .pill{padding:12px 18px;font-size:13px}
  .intro,.about{grid-template-columns:1fr}
  .service-side{grid-template-columns:1fr}
  .review-header{flex-direction:column;align-items:start}
  .mapa{border-radius:0;margin-left:calc(-1*clamp(16px,4vw,40px));margin-right:calc(-1*clamp(16px,4vw,40px))}
  .mapa iframe{height:300px}
  .mapa-etiqueta{position:static;max-width:none;border-radius:0;box-shadow:none;padding:24px clamp(16px,4vw,40px)}
  .rodape{grid-template-columns:1fr;gap:26px}
  .dados div{grid-template-columns:1fr;gap:3px}
  .service-list summary{grid-template-columns:minmax(0,1fr) 34px;gap:12px}
  .service-list summary p{grid-column:1/-1;margin-top:6px}
  .mini{min-width:0;flex:1 1 160px}
  h1,h2,h3{overflow-wrap:break-word}
}
@media(pointer:coarse){
  .service-list summary{min-height:62px}
  .text-button{padding:16px 0}
  .menu-links a{padding:16px 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- movimento ---------- */
.revela{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease) var(--atraso,0ms),transform .7s var(--ease) var(--atraso,0ms)}
.revela.visivel{opacity:1;transform:none}
.topbar{transition:padding .3s var(--ease),box-shadow .3s ease}
.topbar.rolado{padding:11px 0;box-shadow:0 1px 0 var(--linha)}
.hero-img{will-change:transform}
.doctor img,.eye-photo img,.about-foto img,.service-image img{
  transition:transform .6s var(--ease)}
.doctor:hover img,.eye-photo:hover img{transform:scale(1.04)}
.review{transition:transform .3s var(--ease),box-shadow .3s ease}
.review:hover{transform:translateY(-3px);box-shadow:0 12px 30px #062e3312}
@media(prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  .hero-img{transform:none!important}
}
/* cartão de destaque da abertura */
.intro-destaque{background:var(--paper);border-radius:var(--radius);padding:26px 24px;
  display:flex;flex-direction:column;justify-content:center;min-height:240px}
.intro-destaque strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;
  line-height:1.2;margin-bottom:10px}
.intro-destaque p{font-size:14px;line-height:1.6}
.intro-destaque .link-seta{margin-top:16px;align-self:start}

/* estrelas e redes, que existiam na referência */
.review-estrelas{display:block;font-size:12px;letter-spacing:.14em;color:var(--blue);margin-top:2px}
.review-top{align-items:flex-start}
.rodape-social{display:flex;gap:10px;margin-top:16px}
.rodape-social a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linha);color:var(--muted);transition:color .22s ease,border-color .22s ease}
.rodape-social a:hover{color:var(--ink);border-color:var(--ink)}
.rodape-social svg{width:17px;height:17px}
@media(max-width:760px){.intro-destaque{min-height:0}}


/* ============================================================
   Cartões, etapas e barra do celular
   ============================================================ */

/* garantias da resposta direta */
.garantias{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.garantias li{background:#fff;border:1px solid var(--linha);border-radius:var(--radius);
  padding:22px 20px 20px;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s ease}
.garantias li:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 14px 30px #062e330f}
.garantias svg{width:21px;height:21px;color:var(--blue);margin-bottom:14px}
.garantias strong{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.garantias p{font-size:13.5px;line-height:1.55}

/* etapas do atendimento, dentro da abertura */
.etapas{grid-column:1/-1;list-style:none;padding:0;margin:clamp(30px,4vw,46px) 0 0;
  display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.etapa{background:var(--paper);border-radius:var(--radius);padding:24px 22px;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s ease}
.etapa b{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;font-weight:600}
.etapa strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.etapa p{font-size:13.5px;line-height:1.55}
.etapa.ativa{background:var(--dark);transform:translateY(-4px);box-shadow:0 18px 40px #062e3320}
.etapa.ativa b{color:var(--blue)}
.etapa.ativa strong{color:#fff}
.etapa.ativa p{color:#ffffffd1}

/* área atendida em cartões */
.area-grid{gap:16px}
.area-grid > div{background:#fff;border:1px solid var(--linha);border-radius:var(--radius);
  padding:26px 24px;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s ease}
.area-grid > div:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 14px 30px #062e330f}
.area-grid svg{width:21px;height:21px;color:var(--blue);margin-bottom:14px}
.area-grid h3{font-size:17.5px;margin-bottom:8px}
.area-grid p{font-size:14px;line-height:1.6}
.area-grid .link-seta{margin-top:14px;font-size:13.5px}

/* depoimento com aspas e cartão vivo */
.review{position:relative;border:1px solid transparent}
.review::before{content:"“";position:absolute;top:16px;right:18px;font-size:66px;line-height:.75;
  font-family:Georgia,"Times New Roman",serif;color:var(--blue);opacity:.26;pointer-events:none}
.review:hover{border-color:var(--linha)}

/* barra de agendamento no celular */
.barra-mob{display:none}

@media(max-width:1000px){
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .etapas{grid-template-columns:1fr}
  .etapa{padding:20px}
}
@media(max-width:760px){
  .barra-mob{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px clamp(16px,4vw,40px) calc(10px + env(safe-area-inset-bottom));
    background:#fffffff2;backdrop-filter:blur(10px);border-top:1px solid var(--linha);
    transform:translateY(130%);transition:transform .35s var(--ease)}
  body.mostra-barra .barra-mob{transform:none}
  .barra-mob .pill{flex:1}
  .barra-mob .zap{width:52px;min-height:46px;border:1px solid var(--linha);border-radius:999px;
    display:grid;place-items:center;color:var(--ink)}
  .barra-mob .zap svg{width:21px;height:21px}
  .fineprint{padding-bottom:86px}
}
@media(prefers-reduced-motion:reduce){
  .etapa.ativa{transform:none}
}