/* ==========================================================================
   Vazto — página central de formulário

   Institutional, not product-branded: the Vazto teal carries everything, and
   the product only shows up as one line of origin text. Built on vazto.css.
   ========================================================================== */

body{ background:var(--grad-tint); min-block-size:100vh; display:grid; grid-template-rows:auto 1fr auto }


.fmain{ padding-block:clamp(34px,6vw,64px) }
.fwrap{ max-width:820px }
.fintro{ text-align:center; margin-block-end:28px }
.fintro .h1{ margin-block-start:12px; font-size:clamp(26px,5.4vw,40px) }
.fintro .lede{ margin-block-start:13px; max-inline-size:52ch; margin-inline:auto }
.forigem{
  display:inline-block; margin-block-start:16px; padding:8px 16px; border-radius:100px;
  font-size:13.5px; font-weight:600; color:var(--teal-deep);
  background:rgba(2,115,115,.09); box-shadow:inset 0 0 0 1px rgba(2,115,115,.22);
}

/* O nome do produto dentro da pílula é o caminho de volta. Sublinhado a
   pedido do contraste, não da decoração: dentro de uma pílula já colorida,
   um link distinto só pela cor não se lê como link. */
.forigem__volta{
  color:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(2,115,115,.45);
}
.forigem__volta:hover,.forigem__volta:focus-visible{ text-decoration-color:currentColor }

/* Sem origem no endereço a pílula fica vazia — e uma pílula vazia é uma
   mancha sem significado. */
.forigem:empty{ display:none }

.fcard{
  background:var(--paper); border-radius:24px; padding:clamp(22px,4vw,40px);
  box-shadow:0 34px 80px -60px rgba(1,26,32,.7), 0 0 0 1px var(--rule);
}

/* --------------------------------------------------------------------------
   Progresso
   -------------------------------------------------------------------------- */
.fprog__bar{ block-size:4px; border-radius:4px; background:rgba(11,29,31,.1); overflow:hidden }
.fprog__bar i{
  display:block; block-size:100%; inline-size:var(--p,0%); border-radius:4px;
  background:linear-gradient(90deg,var(--teal-deep),var(--teal));
  transition:inline-size .42s var(--ease);
}
.fprog__list{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-block-start:14px }
.fprog__list li{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-soft);
  transition:color .25s ease;
}
.fprog__list li b{
  inline-size:22px; block-size:22px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-size:11.5px; font-weight:700;
  color:var(--text-soft); box-shadow:inset 0 0 0 1.5px var(--rule); transition:.25s ease;
}
.fprog__list li.is-done b{ background:rgba(2,115,115,.14); color:var(--teal); box-shadow:inset 0 0 0 1.5px rgba(2,115,115,.3) }
.fprog__list li.is-on{ color:var(--text) }
.fprog__list li.is-on b{ background:linear-gradient(160deg,#03908f,var(--teal)); color:#fff; box-shadow:none }
/* On a phone only the current step's name is worth the width. */
@media (max-width:659px){
  .fprog__list li{ display:none }
  .fprog__list li.is-on{ display:flex }
}

/* --------------------------------------------------------------------------
   Etapas
   -------------------------------------------------------------------------- */
.fpane{ display:none; padding-block-start:26px }
.fpane.is-on{ display:block; animation:fslide .34s var(--ease) }
@keyframes fslide{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.fpane__t{ font-family:var(--display); font-weight:700; font-size:clamp(19px,4.4vw,24px); letter-spacing:-.024em }
.fpane__d{ margin-block-start:7px; font-size:15px; color:var(--text-soft) }

.q{ padding-block:22px; border-block-start:1px solid var(--rule) }
.q:first-of-type{ border-block-start:0; padding-block-start:18px }
.q legend,.q .qt{
  display:block; font-family:var(--display); font-size:clamp(16.5px,3.6vw,19px);
  font-weight:700; letter-spacing:-.02em; line-height:1.25;
}
.q .hint{ margin-block-start:5px; font-size:13.5px; color:var(--text-soft) }
.inp{
  inline-size:100%; margin-block-start:13px; padding:15px 16px; border-radius:14px;
  font:inherit; font-size:16px; color:var(--text);
  background:#fff; border:1.5px solid var(--rule);
  transition:border-color .2s, box-shadow .2s;
}
.inp:focus{ outline:0; border-color:var(--teal); box-shadow:0 0 0 4px rgba(2,115,115,.13) }
.inp[aria-invalid="true"]{ border-color:#c0492f; box-shadow:0 0 0 4px rgba(192,73,47,.12) }
.opts{ margin-block-start:13px; display:grid; gap:8px }
@media (min-width:700px){ .opts--two{ grid-template-columns:1fr 1fr } }
.opt{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  padding:13px 15px; border-radius:13px; cursor:pointer;
  background:#fff; box-shadow:inset 0 0 0 1.5px var(--rule);
  font-size:15px; line-height:1.35;
  transition:box-shadow .2s, background-color .2s;
}
.opt:hover{ box-shadow:inset 0 0 0 1.5px rgba(2,115,115,.4) }
.opt input{
  appearance:none; margin:0; inline-size:20px; block-size:20px; flex:none;
  border:1.5px solid rgba(11,29,31,.28); background:#fff; transition:all .2s;
}
.opt input[type=radio]{ border-radius:50% }
.opt input[type=checkbox]{ border-radius:6px }
.opt input:checked{ border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px #fff }
.opt:has(input:checked){ box-shadow:inset 0 0 0 2px var(--teal); background:rgba(2,115,115,.05) }

.qerr{ margin-block-start:10px; font-size:13.5px; color:#c0492f }
.qerr:empty{ display:none }

/* --------------------------------------------------------------------------
   Navegação
   -------------------------------------------------------------------------- */
.fnav{
  margin-block-start:30px; padding-block-start:22px; border-block-start:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.fnav .btn,.fnav .btn-ghost{ min-block-size:50px }
/* The inline arrows carry a viewBox but no intrinsic size, so without this the
   replaced element falls back to 300×150 and stretches the button on a phone. */
.fnav .btn svg,.fnav .btn-ghost svg{ inline-size:15px; block-size:15px; flex:none }
.fnav__of{ font-size:13px; color:var(--text-soft); white-space:nowrap }
.fnav [hidden]{ display:none }
.fnote{ margin-block-start:14px; text-align:center; font-size:13px; color:var(--text-soft) }
.fnote.is-ok{ color:var(--teal-deep); font-weight:600 }

.fdone{ text-align:center; padding-block:20px }
.fdone__ring{
  inline-size:74px; block-size:74px; border-radius:50%; margin-inline:auto;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg,#03908f,var(--teal) 55%,#02585e);
  box-shadow:0 18px 40px -20px rgba(2,115,115,.9);
}
.fdone__ring svg{ inline-size:34px; block-size:34px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.fdone h2{ margin-block-start:20px; font-family:var(--display); font-weight:700; font-size:clamp(21px,4.6vw,27px); letter-spacing:-.026em }
.fdone p{ margin-block-start:11px; font-size:15.5px; color:var(--text-soft); max-inline-size:48ch; margin-inline:auto }
.fdone .actions{ justify-content:center }

.ffoot{ background:var(--ink); color:rgba(241,247,247,.5); text-align:center; padding-block:28px 32px }
.ffoot img{ inline-size:150px; margin-inline:auto }
.ffoot p{ margin-block-start:12px; font-size:12.5px }

@media (max-width:559px){
  .fnav{ flex-wrap:wrap }
  .fnav__of{ order:3; inline-size:100%; text-align:center }
  .fnav .btn,.fnav .btn-ghost{ flex:1 1 auto; justify-content:center }
}