/* =========================================================
   Mobii Consórcios — Landing Page
   Paleta da marca: azul #3FA0DA + navy #14202E sobre branco.
   O logotipo só aparece sobre fundo branco.
   ========================================================= */

:root{
  --blue:#3FA0DA;
  --blue-700:#1F7FBB;
  --blue-050:#EAF4FB;
  --blue-100:#D3E8F6;

  --navy:#0F1B27;
  --navy-2:#16283A;
  --ink:#14202E;
  --ink-2:#34485D;
  --muted:#5F7385;
  --muted-onnavy:#9FB4C6;

  --paper:#EDF3F8;
  --line:#DCE5EC;
  --line-2:#C6D5E1;
  --white:#fff;

  --r:16px;
  --r-sm:10px;

  --shadow:0 1px 2px rgba(15,27,39,.05), 0 12px 32px -18px rgba(15,27,39,.35);
  --shadow-lg:0 2px 4px rgba(15,27,39,.06), 0 28px 60px -30px rgba(15,27,39,.45);

  --display:"Sora", system-ui, sans-serif;
  --body:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --pad:clamp(20px, 5vw, 40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.022em; line-height:1.1; margin:0}
p{margin:0 0 1em}
a{color:inherit}

.wrap{width:100%; max-width:1180px; margin:0 auto; padding-inline:var(--pad)}
.muted{color:var(--muted)}
.only-lg{display:none}
@media (min-width:900px){ .only-lg{display:inline} }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- tipografia utilitária ---------- */
.eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-700); margin:0 0 18px;
}
.eyebrow__glyph{width:15px; height:15px; color:var(--blue); flex:none}
.eyebrow--onpaper{color:var(--blue-700)}
.lead{font-size:clamp(17px, 1.9vw, 19.5px); color:var(--ink-2); max-width:62ch}

.sec-head{max-width:64ch; margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{font-size:clamp(28px,4vw,42px); margin-bottom:14px}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--blue); color:#fff; text-decoration:none;
  font-family:var(--body); font-weight:600; font-size:16px; line-height:1;
  padding:16px 26px; border:0; border-radius:999px; cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(31,127,187,.9);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{background:var(--blue-700); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{font-size:17px; padding:19px 32px}
.btn--sm{font-size:14.5px; padding:12px 20px}
.btn--onnavy{background:#fff; color:var(--navy); box-shadow:0 14px 30px -18px rgba(0,0,0,.9)}
.btn--onnavy:hover{background:var(--blue-050); color:var(--navy)}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn[disabled]:hover{background:var(--blue); transform:none}

.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:500; font-size:16px; text-decoration:none; color:var(--ink);
  padding:16px 6px; border-bottom:1px solid var(--line-2);
  transition:border-color .18s ease, color .18s ease;
}
.btn-ghost:hover{color:var(--blue-700); border-color:var(--blue)}
.btn-ghost--onnavy{color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ghost--onnavy:hover{color:#fff; border-color:#fff}

/* =========================================================
   HEADER
   ========================================================= */
.head{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head__in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:70px}
.head__logo img{width:auto; height:30px}
.head__right{display:flex; align-items:center; gap:20px}
.head__local{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); display:none;
}
@media (min-width:720px){ .head__local{display:block} .head__logo img{height:34px} }

/* =========================================================
   1. HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--white);
  padding:clamp(44px,6vw,84px) 0 clamp(180px,52vw,260px);
}
/* foto de fundo: casa + veículos. No mobile a arte é vertical e a cena fica no
   terço inferior, então a imagem é ancorada embaixo e a copy respira em cima. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("../imagens/bg-hero-mobile-mobii-consorcios.jpg") no-repeat center bottom / cover;
}
/* véu branco que devolve legibilidade à copy e abre na base para a cena aparecer */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.88) 46%,
    rgba(255,255,255,.62) 64%,
    rgba(255,255,255,.18) 80%,
    rgba(255,255,255,0) 92%);
}
.hero__mark{
  position:absolute; left:-8%; bottom:-22%;
  width:min(560px, 66vw); height:min(420px, 50vw);
  color:var(--blue); opacity:.07; pointer-events:none;
  display:none;
}
@media (min-width:980px){ .hero__mark{display:block} }
.hero__in{display:grid; gap:clamp(40px,5vw,64px)}
.hero__copy{position:relative; z-index:1; max-width:640px}
@media (min-width:980px){
  .hero{
    display:flex; align-items:center; min-height:min(84vh, 740px);
    padding:clamp(44px,6vw,84px) 0 clamp(56px,7vw,96px);
  }
  /* a arte desktop já traz o próprio fade à esquerda; véu horizontal emenda com ele */
  .hero::before{
    background-image:url("../imagens/bg-hero-desktop-mobii-consorcios.jpg");
    background-position:right center;
  }
  .hero::after{
    background:linear-gradient(90deg,
      #fff 0%,
      rgba(255,255,255,.98) 28%,
      rgba(255,255,255,.86) 44%,
      rgba(255,255,255,.30) 62%,
      rgba(255,255,255,0) 78%);
  }
  .hero__copy{max-width:min(620px, 54%)}
}
.hero h1{
  font-size:clamp(31px, 5vw, 55px);
  margin-bottom:22px;
  text-wrap:balance;
}
.hero h1 em{
  font-style:normal;
  display:inline;
  background-image:linear-gradient(transparent 62%, var(--blue-100) 62%);
  padding-bottom:2px;
}
.hero .lead{margin-bottom:26px}

.stance{
  list-style:none; margin:0 0 30px; padding:0;
  border-left:2px solid var(--blue);
  display:grid; gap:4px;
}
.stance li{
  padding:2px 0 2px 18px;
  font-size:16px; color:var(--ink-2);
}
.stance li:last-child{color:var(--ink); font-weight:600}

.hero__cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px}
.hero__note{
  margin:20px 0 0; font-family:var(--mono); font-size:13px; color:var(--muted);
}

/* =========================================================
   FICHA DO PLANO (assinatura da página)
   ========================================================= */
.ficha{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ficha__top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px;
  background:var(--navy);
  color:#fff;
}
.ficha__tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-100);
}
.ficha__brand{
  font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.02em;
}
.ficha__rows{margin:0; padding:6px 20px 10px}
.ficha__row{
  display:flex; align-items:center; gap:14px; min-height:44px;
  padding:11px 0;
  border-bottom:1px dashed var(--line);
  transition:background .3s ease;
}
.ficha__row:last-child{border-bottom:0}
.ficha__row dt{
  flex:none; width:42%;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.ficha__row dd{
  margin:0; flex:1; min-width:0;
  font-size:15px; font-weight:500; color:var(--ink);
}
.ficha__row dd:empty::after,
.ficha__row dd .ph{
  content:"";
  display:block; height:2px; width:70%;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px);
  border-radius:2px;
}
.ficha__row.is-filled dt{color:var(--ink-2)}
.ficha__row.is-active{background:linear-gradient(90deg, var(--blue-050), transparent 85%)}
.ficha__row .val{
  display:inline-block;
  animation:valIn .38s cubic-bezier(.2,.7,.3,1) both;
}
.ficha__row.is-total{
  margin-top:2px; padding-top:14px;
  border-top:1px solid var(--line-2); border-bottom:0;
}
.ficha__row.is-total dt{color:var(--ink)}
.ficha__row.is-total dd{font-family:var(--mono); font-size:16px; font-weight:500}
@keyframes valIn{
  from{opacity:0; transform:translateY(5px)}
  to{opacity:1; transform:none}
}
.ficha__foot{
  margin:0; padding:14px 20px;
  background:var(--paper);
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--muted);
}
@media (prefers-reduced-motion:reduce){
  .ficha__row .val{animation:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   2. SIMULADOR
   ========================================================= */
.sim{
  position:relative; overflow:hidden;
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:clamp(56px,7vw,96px) 0;
}
.sim__mark{
  position:absolute; right:-6%; top:-14%;
  width:min(480px,58vw); height:min(360px,44vw);
  color:var(--blue); opacity:.09; pointer-events:none;
}
.sim__head{position:relative; z-index:1; max-width:60ch; margin-bottom:clamp(30px,4vw,44px)}
.sim__head h2{font-size:clamp(27px,3.6vw,40px); margin-bottom:14px}
.sim__grid{position:relative; z-index:1; display:grid; gap:26px}
@media (min-width:980px){
  .sim__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:start; gap:34px}
  .sim__aside{position:sticky; top:96px}
}

.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  padding:clamp(22px,3vw,36px);
}
.panel__progress{display:flex; align-items:center; gap:16px; margin-bottom:clamp(22px,3vw,32px)}
.ticks{display:flex; gap:5px; flex:1}
.ticks span{
  height:4px; flex:1; border-radius:2px; background:var(--line-2);
  transition:background .3s ease;
}
.ticks span.on{background:var(--blue)}
.ticks__label{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted); white-space:nowrap;
}

.step{animation:stepIn .32s ease both}
@keyframes stepIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .step{animation:none} }

.step__kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-700); margin:0 0 10px;
}
.step__q{font-family:var(--display); font-weight:600; font-size:clamp(21px,2.6vw,28px); line-height:1.2; margin:0 0 6px; letter-spacing:-.02em}
.step__hint{font-size:15px; color:var(--muted); margin:0 0 22px}

.opts{display:grid; gap:10px; margin:0 0 4px}
.opt{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left;
  background:#fff; border:1.5px solid var(--line-2); border-radius:12px;
  padding:16px 18px; cursor:pointer;
  font-family:var(--body); font-size:16px; color:var(--ink);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.opt:hover{border-color:var(--blue); background:var(--blue-050); transform:translateX(2px)}
.opt.is-on{border-color:var(--blue); background:var(--blue-050)}
.opt__mark{
  flex:none; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--line-2); background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.opt:hover .opt__mark,
.opt.is-on .opt__mark{border-color:var(--blue); box-shadow:inset 0 0 0 4px var(--blue)}

.money{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--line-2); border-radius:12px;
  padding:14px 18px; background:#fff;
  transition:border-color .16s ease;
  max-width:420px;
}
.money:focus-within{border-color:var(--blue)}
.money__sym{font-family:var(--mono); font-size:18px; color:var(--muted)}
.money input{
  border:0; outline:0; width:100%; background:transparent;
  font-family:var(--mono); font-size:clamp(22px,3vw,28px); font-weight:500; color:var(--ink);
  letter-spacing:-.01em;
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.chip{
  font-family:var(--mono); font-size:13px; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.chip:hover{border-color:var(--blue); color:var(--blue-700); background:var(--blue-050)}

.fields{display:grid; gap:14px; margin-bottom:20px}
@media (min-width:640px){ .fields{grid-template-columns:1fr 1fr} }
.field label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.field input{
  width:100%; padding:14px 16px; font-family:var(--body); font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-2); border-radius:12px; outline:0;
  transition:border-color .16s ease;
}
.field input:focus{border-color:var(--blue)}
.field input[aria-invalid="true"]{border-color:#C2453B}
.field__err{
  display:none; margin:6px 0 0; font-size:13px; color:#C2453B;
}
.field.has-err .field__err{display:block}

.consent{font-size:13.5px; line-height:1.55; color:var(--muted); max-width:60ch; margin:0 0 20px}

.step__nav{display:flex; align-items:center; gap:20px; margin-top:24px; flex-wrap:wrap}
.back{
  background:none; border:0; cursor:pointer; padding:6px 0;
  font-family:var(--body); font-size:14.5px; color:var(--muted);
  border-bottom:1px solid transparent;
}
.back:hover{color:var(--ink); border-bottom-color:var(--line-2)}

/* tela de sucesso */
.done__title{font-family:var(--display); font-weight:600; font-size:clamp(23px,3vw,32px); line-height:1.15; margin:0 0 14px; letter-spacing:-.02em}
.done__list{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:0}
.done__list li{
  display:flex; gap:12px; align-items:baseline;
  padding:11px 0; border-bottom:1px dashed var(--line); font-size:15.5px; color:var(--ink-2);
}
.done__list li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--blue);
}
.done__foot{font-size:14px; color:var(--muted); margin:18px 0 0}

/* =========================================================
   4. POSICIONAMENTO
   ========================================================= */
.pos{background:var(--navy); color:#fff; padding:clamp(60px,8vw,110px) 0}
.pos__title{
  font-size:clamp(26px,3.9vw,44px); line-height:1.14; max-width:20ch; margin-bottom:clamp(30px,4vw,48px);
  text-wrap:balance;
}
.pos__title span{color:var(--blue); display:block}
.pos__intro{font-size:16px; color:var(--muted-onnavy); margin-bottom:18px}
.pos__list{
  list-style:none; margin:0 0 clamp(32px,4vw,48px); padding:0;
  display:grid; gap:0; border-top:1px solid rgba(255,255,255,.14);
}
@media (min-width:820px){ .pos__list{grid-template-columns:1fr 1fr; column-gap:52px} }
.pos__list li{
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.14);
  font-size:clamp(16px,1.8vw,18px); color:#E6EEF5;
}
.pos__close p{margin:0 0 8px; font-size:clamp(18px,2.2vw,22px); font-family:var(--display); font-weight:500; letter-spacing:-.015em}
.pos__close .muted{color:var(--muted-onnavy); font-family:var(--body); font-weight:400; font-size:16.5px; max-width:56ch}

/* =========================================================
   5. PARA QUEM
   ========================================================= */
.who{padding:clamp(60px,8vw,104px) 0; background:#fff}
.who__grid{display:grid; gap:18px}
@media (min-width:760px){ .who__grid{grid-template-columns:1fr 1fr} }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,32px);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover{border-color:var(--blue-100); transform:translateY(-2px); box-shadow:var(--shadow)}
.card h3{font-size:20px; margin-bottom:10px}
.card p{margin:0; color:var(--ink-2); font-size:16px}

/* =========================================================
   6. VERDADE COMERCIAL
   ========================================================= */
.truth{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(56px,7vw,96px) 0}
.truth__in{display:grid; gap:28px}
@media (min-width:900px){ .truth__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:60px} }
.truth__left h2{font-size:clamp(26px,3.6vw,38px); text-wrap:balance}
.truth__right{border-left:2px solid var(--blue); padding-left:clamp(18px,2.4vw,28px)}
.truth__right p{color:var(--ink-2); max-width:60ch}
.truth__right .btn{margin-top:12px}

/* =========================================================
   7. COMO FUNCIONA
   ========================================================= */
.flow{padding:clamp(60px,8vw,104px) 0; background:#fff}
.flow__list{list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:none}
@media (min-width:900px){
  .flow__list{grid-template-columns:repeat(4,1fr); gap:0}
  .flow__list li{border-top:1px solid var(--line); border-bottom:0; padding:28px 24px 0 0}
  .flow__list li + li{padding-left:24px; border-left:1px solid var(--line)}
}
.flow__list li{
  padding:22px 0; border-bottom:1px solid var(--line);
}
.flow__list li:first-child{border-top:1px solid var(--line)}
.flow__n{
  display:block; font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--blue); letter-spacing:.1em; margin-bottom:12px;
}
.flow__list h3{font-size:18.5px; margin-bottom:8px}
.flow__list p{margin:0; font-size:15.5px; color:var(--ink-2)}

/* =========================================================
   8. POR QUE MOBII
   ========================================================= */
.why{background:var(--paper); border-top:1px solid var(--line); padding:clamp(56px,7vw,96px) 0}
.why__in{display:grid; gap:32px}
@media (min-width:940px){ .why__in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:56px; align-items:start} }
.why__copy h2{font-size:clamp(25px,3.4vw,36px); margin-bottom:14px; text-wrap:balance}
.why__copy p{color:var(--ink-2)}
.why__copy strong{color:var(--ink); font-weight:600}
.why__claim{
  font-family:var(--display); font-weight:500; font-size:clamp(17px,2vw,20px);
  line-height:1.4; color:var(--ink); letter-spacing:-.015em;
  border-left:2px solid var(--blue); padding-left:20px; margin-top:24px;
}
.credential{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,30px); box-shadow:var(--shadow);
}
.credential__tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.credential__name{
  font-family:var(--display); font-weight:600; font-size:24px; color:var(--navy);
  letter-spacing:-.02em; margin-bottom:12px;
}
.credential__txt{margin:0; font-size:14.5px; color:var(--ink-2)}

/* =========================================================
   9. FAQ
   ========================================================= */
.faq{padding:clamp(60px,8vw,104px) 0; background:#fff}
.faq__list{border-top:1px solid var(--line); max-width:920px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-family:var(--display); font-weight:500; font-size:clamp(16.5px,1.9vw,19px);
  letter-spacing:-.015em; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq summary:hover{color:var(--blue-700)}
.faq details p{margin:0 0 22px; max-width:70ch; color:var(--ink-2); font-size:16px}

/* =========================================================
   10. CHAMADA FINAL
   ========================================================= */
.final{position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:clamp(64px,8vw,110px) 0}
.final__mark{
  position:absolute; right:-4%; bottom:-26%;
  width:min(520px,62vw); height:min(400px,48vw);
  color:var(--blue); opacity:.13; pointer-events:none;
}
.final__in{position:relative; z-index:1}
.final h2{font-size:clamp(28px,4.2vw,48px); max-width:18ch; margin-bottom:20px; text-wrap:balance}
.final h2 span{color:var(--blue); display:block}
.final .lead{color:var(--muted-onnavy); margin-bottom:32px; max-width:58ch}
.final__cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px}
.final__note{margin:26px 0 0; font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-onnavy)}

/* =========================================================
   11. RODAPÉ (fundo branco: exigência do logotipo)
   ========================================================= */
.foot{background:#fff; border-top:1px solid var(--line); padding:clamp(40px,5vw,64px) 0 calc(clamp(40px,5vw,64px) + env(safe-area-inset-bottom))}
.foot__in{display:grid; gap:32px}
@media (min-width:900px){ .foot__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:60px} }
.foot__brand img{width:auto; height:36px; margin-bottom:14px}
.foot__brand p{font-size:14px; color:var(--muted); margin:0}
.foot__legal p{font-size:12.8px; line-height:1.65; color:var(--muted); margin:0 0 12px; max-width:78ch}
.foot__legal p:last-child{margin-bottom:0}

/* =========================================================
   DOCK MOBILE
   ========================================================= */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; align-items:center; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .28s ease;
}
.dock .btn{flex:1}
.dock__wa{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue-700); text-decoration:none; padding:12px 4px;
}
.dock.is-on{transform:none}
@media (max-width:719px){ .dock{display:flex} body{padding-bottom:78px} }