/* ==========================================================================
   Evodia · site
   Base branca. O laranja aparece só no símbolo, nos botões e nos ícones.
   Títulos em Marcellus, texto em Figtree.
   ========================================================================== */

:root {
  --paper: #fff;
  --stage: #F7F6F3;
  --ink: #1E1D1B;
  --ink-2: #5E5A55;
  --ink-3: #8C8780;
  --line: rgba(30, 29, 27, .1);
  --line-2: rgba(30, 29, 27, .18);
  --orange: #FF7B42;
  /* as duas abaixo saem do laranja: trocar a cor é trocar só a linha de cima */
  --orange-deep: color-mix(in oklab, var(--orange) 86%, #6B2400);
  --orange-wash: color-mix(in srgb, var(--orange) 11%, #fff);
  --serif: "Marcellus", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.2, 1.3, .3, 1);
  --shadow-1: 0 1px 2px rgba(30, 29, 27, .04), 0 10px 26px -14px rgba(30, 29, 27, .16);
  --shadow-2: 0 2px 4px rgba(30, 29, 27, .04), 0 30px 70px -30px rgba(30, 29, 27, .28);
  --wrap: 1160px;
  --zoom: .93;   /* a versão de computador fica um pouco menor (pedido dele em 06/10/2026: "zoom out, bem de leve") */
  /* cor da agência nas telas do app: o laranja por padrão; "Sua marca" troca no próprio bloco */
  --brand: var(--orange);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  margin: 0;
  font: 400 17px/1.55 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
i { font-style: normal; }

:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }

.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }

.ic {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: top .2s;
}
.skip:focus { top: 16px; }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .2s, border-color .2s, box-shadow .25s;
}
.btn .ic { transition: transform .25s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }

.btn--primary {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 26px -14px color-mix(in srgb, var(--orange) 60%, transparent);
}
.btn--primary:hover { background: var(--orange-deep); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--line { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }

.btn--sm { height: 42px; padding: 0 18px; font-size: 15.5px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.link .ic { transition: transform .25s var(--ease); }
.link:hover .ic { transform: translateY(3px); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Peças pequenas, usadas nos desenhos do produto ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chip small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.chip--seen { padding-left: 8px; background: var(--orange-wash); color: var(--ink); }
.chip--seen .ic { width: 16px; height: 16px; color: var(--orange); stroke-width: 2.2; }
.chip--off { border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); }

.meter {
  display: block;
  flex: none;
  width: 96px;
  height: 6px;
  border-radius: 99px;
  background: rgba(30, 29, 27, .08);
  overflow: hidden;
}
.meter i {
  display: block;
  width: var(--v, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
  transition: width .9s var(--ease) .3s;
}
.js .reveal:not(.is-in) .meter i { width: 0; }

.av {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EDEAE4;
  font-size: 13px;
  font-weight: 700;
}
.av--lg { width: 40px; height: 40px; font-size: 15px; }

.mono {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.mono--ag { background: var(--orange); color: #fff; }

/* ---------- Entrada dos blocos ao rolar ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Barra do topo
   ========================================================================== */

.nav { position: fixed; inset: 14px 0 auto 0; z-index: 50; pointer-events: none; }

.nav__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(100% - 28px, 1120px);
  height: 64px;
  margin-inline: auto;
  padding: 0 11px 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 2px rgba(30, 29, 27, .04), 0 14px 34px -20px rgba(30, 29, 27, .2);
  transition: height .35s var(--ease), background-color .3s;
}
.nav.is-scrolled .nav__bar { height: 58px; background: rgba(255, 255, 255, .92); }

.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; color: var(--orange); }
.brand__name { font: 400 26px/1 var(--serif); letter-spacing: .01em; }

.nav__links { display: flex; gap: 2px; margin-inline: auto; }
.nav__links a {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s, background-color .2s;
}
.nav__links a:hover { color: var(--ink); background: rgba(30, 29, 27, .05); }

.nav__actions { display: flex; align-items: center; gap: 8px; }

.nav__toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.nav__sheet {
  pointer-events: auto;
  display: none;
  flex-direction: column;
  width: min(100% - 28px, 1120px);
  margin: 8px auto 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--shadow-2);
}
.nav__sheet a:not(.btn) {
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}
.nav__sheet a:not(.btn):hover { background: var(--stage); }
.nav__sheet .btn { margin-top: 8px; }

/* ==========================================================================
   O roteiro da página (trilho lateral, só em tela larga)
   ========================================================================== */

.rail { position: fixed; left: 26px; top: 50%; z-index: 40; display: none; transform: translateY(-50%); }
.rail ol { position: relative; display: flex; flex-direction: column; gap: 22px; }
.rail ol::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  border-left: 2px dotted var(--line-2);
}
.rail a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.rail i {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2.5px solid #CFCBC4;
  border-radius: 50%;
  background: #fff;
  transition: border-color .3s, background-color .3s, transform .4s var(--spring);
}
.rail span { opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
.rail a:hover span, .rail a.is-on span { opacity: 1; transform: none; }
.rail a.is-done i { border-color: var(--orange); }
.rail a.is-on i { border-color: var(--orange); background: var(--orange); transform: scale(1.15); }
.rail a.is-on { color: var(--ink); }

@media (min-width: 1520px) { .rail { display: block; } }

/* ==========================================================================
   Partida (topo)
   ========================================================================== */

.hero { padding: 158px 0 0; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 16px 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.eyebrow__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange-wash);
  color: var(--orange);
}
.eyebrow__mark svg { width: 16px; height: 16px; }

.hero__title {
  margin-top: 26px;
  font: 400 clamp(40px, 7vw, 92px)/1.03 var(--serif);
  letter-spacing: -.018em;
  text-wrap: balance;
}

/* O traço laranja sob "abriu?": a estrada do símbolo */
.u { position: relative; display: inline-block; white-space: nowrap; }
.u svg { position: absolute; left: -3%; bottom: -.17em; width: 106%; height: auto; overflow: visible; }
.u path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: 1 1.2;
  stroke-dashoffset: 0;
}
.js .u path { stroke-dashoffset: 1.1; }
.js.is-ready .u path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .8s; }

.hero__lead {
  max-width: 760px;
  margin: 28px auto 0;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 34px;
}

.hero__note { margin-top: 20px; font-size: 15px; color: var(--ink-2); }

/* ---------- Palco: a janela do painel e o celular do viajante, lado a lado ---------- */
/* Os dois têm a mesma altura e os mesmos respiros: topo com topo, base com base. */

.stage {
  --fone-w: 244px;
  --cena-h: calc(var(--fone-w) * 19.3 / 9);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  margin-top: 72px;
  padding: 56px;
  border-radius: 40px;
  background: var(--stage);
  text-align: left;
}

.win {
  width: 100%;
  height: var(--cena-h);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
}

.win__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #FBFAF8;
}
.win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #E3E0DA; }
.win__url {
  margin-left: 14px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  color: var(--ink-3);
}

.win__body { display: grid; grid-template-columns: 204px minmax(0, 1fr); height: calc(100% - 42px); }

.side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: #FBFAF8;
}
.side__ag { display: flex; align-items: center; gap: 10px; padding: 0 6px 16px; }
.side__ag b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.side__ag small { font-size: 12px; color: var(--ink-3); }
.side__it {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.side__it .ic { width: 17px; height: 17px; }
.side__it.is-on { border-color: var(--line); background: #fff; color: var(--ink); font-weight: 600; }

.main { padding: 22px 28px 0; min-width: 0; }
.crumb { font-size: 12.5px; color: var(--ink-3); }
.crumb span { margin: 0 4px; }

.trip { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.trip__img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; flex: none; }
.trip__t { flex: 1; min-width: 0; }
.trip__t b { display: block; font: 400 28px/1.1 var(--serif); }
.trip__t small { display: block; margin-top: 5px; font-size: 13px; color: var(--ink-2); }
.trip__t em { font-style: normal; font-weight: 600; color: var(--ink); }
.trip__read { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.trip__read small { font-size: 12px; color: var(--ink-3); }
.trip__read b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trip__read .meter { width: 128px; }
.trip__read .meter i { transition: width .7s var(--ease); }

.tabs { display: flex; gap: 22px; margin-top: 22px; border-bottom: 1px solid var(--line); overflow: hidden; }
.tabs span { position: relative; flex: none; padding: 0 0 11px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.tabs .is-on { color: var(--ink); font-weight: 600; }
.tabs .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.tabs i {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 6px;
  border-radius: 99px;
  background: var(--stage);
  font-size: 11.5px;
  font-weight: 700;
}

.docs { margin-top: 6px; }
.doc {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 0;
}
.doc + .doc { border-top: 1px solid var(--line); }
.doc__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--stage);
  color: var(--ink-2);
}
.doc__ic .ic { width: 18px; height: 18px; }
.doc__t { flex: 1; min-width: 0; }
.doc__t b { display: block; font-size: 14.5px; font-weight: 600; }
.doc__t small { font-size: 12.5px; color: var(--ink-3); }

.swap { display: grid; }
.swap > * { grid-area: 1 / 1; justify-self: end; transition: opacity .35s, transform .5s var(--spring); }
.swap .chip--seen { opacity: 0; transform: scale(.8); }
.doc.is-seen .swap .chip--seen { opacity: 1; transform: none; }
.doc.is-seen .swap .chip--off { opacity: 0; transform: scale(.9); }
.doc.is-seen { animation: acende 1.6s var(--ease); }
@keyframes acende {
  0% { box-shadow: 0 0 0 10px var(--orange-wash); background: var(--orange-wash); }
  100% { box-shadow: 0 0 0 10px transparent; background: transparent; }
}

/* O aviso de "abriu" aparece no pé da barra lateral, dentro da janela */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-1);
  font-size: 12.5px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .35s, transform .55s var(--spring);
}
.toast.is-on { opacity: 1; transform: none; }
.toast__ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--orange-wash); color: var(--orange); }
.toast__ic .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.toast b { display: block; font-weight: 600; }
.toast small { font-size: 11.5px; color: var(--ink-3); }

.stage .phone--hero { --w: var(--fone-w); }
.js .stage .phone--hero { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease) .45s, transform 1.1s var(--ease) .45s; }
.js .stage.is-in .phone--hero { opacity: 1; transform: none; }

/* ---------- O celular (tudo em em, para escalar pela largura) ---------- */

.phone {
  --w: 252px;
  --brand-bright: color-mix(in oklab, var(--brand) 56%, #fff);
  position: relative;
  flex: none;
  width: var(--w);
  aspect-ratio: 9 / 19.3;
  padding: .75em;
  border-radius: 4.3em;
  background: #0b0b0a;
  box-shadow: inset 0 0 0 .12em #2c2b29, 0 3.4em 6em -2.4em rgba(30, 29, 27, .55), 0 1.2em 2.4em -1.2em rgba(30, 29, 27, .35);
  font: 400 calc(var(--w) / 25.2)/1.3 var(--sans);
  color: #fff;
}
/* clip-path além do overflow: sem ele, peça com desfoque (ou em movimento) escapava do canto
   arredondado quando o celular ficava dentro de outro bloco com overflow: hidden. */
.phone__screen { position: relative; height: 100%; border-radius: 3.6em; background: #101312; overflow: hidden; isolation: isolate; clip-path: inset(0 round 3.6em); }

.app { position: absolute; inset: 0; display: flex; flex-direction: column; }
.app__photo { position: absolute; inset: 0 0 auto 0; z-index: -2; width: 100%; height: 62%; object-fit: cover; object-position: 50% 28%; }
.app--home { padding-bottom: 5.9em; }
.app--home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 19, 18, .38) 0%, rgba(16, 19, 18, 0) 17%, rgba(16, 19, 18, 0) 28%, rgba(16, 19, 18, .86) 51%, #101312 62%);
}

.app__status { display: flex; justify-content: space-between; align-items: flex-start; flex: none; height: 4.5em; padding: 1.45em 2.3em 0; }
.app__status > span:first-child { font-size: 1.1em; font-weight: 600; }
.app__island { position: absolute; left: 50%; top: 1em; width: 7.6em; height: 2.2em; margin-left: -3.8em; border-radius: 2em; background: #000; }
.app__sig { display: flex; align-items: flex-end; gap: .18em; height: 1em; margin-top: .25em; }
.app__sig i { width: .26em; border-radius: .1em; background: #fff; }
.app__sig i:nth-child(1) { height: .45em; }
.app__sig i:nth-child(2) { height: .7em; }
.app__sig i:nth-child(3) { height: 1em; }
.app__sig b { width: 1.9em; height: .95em; margin-left: .4em; border-radius: .3em; background: #fff; }

.phone .mono { width: 2.75em; height: 2.75em; border-radius: .8em; font-size: .95em; }
.mono--brand { background: var(--brand); color: var(--on-brand, #fff); }
.mono--badge { background: #fff; color: var(--badge-ink, var(--brand)); }

.app__notice {
  display: flex;
  align-items: flex-start;
  gap: .9em;
  margin: .1em 1em 0;
  padding: .9em 1em;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 1.5em;
  background: rgba(22, 27, 25, .58);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.app__notice > div { min-width: 0; }
.app__notice small {
  display: block;
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app__notice p { margin-top: .2em; font-size: 1em; line-height: 1.3; }

.app__head { margin-top: auto; padding: 0 1.6em; }
.app__head small { font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.app__head b { display: block; margin-top: .12em; font: 400 3.1em/1.05 var(--serif); }
.app__head p { display: flex; align-items: center; gap: .8em; margin-top: .7em; font-size: .95em; opacity: .94; }
.app__head p span { padding: .25em .8em; border: 1px solid rgba(255, 255, 255, .15); border-radius: 99em; background: rgba(255, 255, 255, .16); font-weight: 600; }

.flight { flex: none; margin: 1.3em 1em 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.7em; background: #1a1f1d; overflow: hidden; }
.flight__top { display: flex; justify-content: space-between; align-items: center; padding: 1.2em 1.5em 0; font-size: .86em; font-weight: 600; opacity: .92; }
.flight__top i { display: inline-block; width: 1.5em; height: 1.5em; margin-right: .6em; border-radius: .45em; background: var(--brand); vertical-align: -.35em; }
.flight__route { display: flex; align-items: center; gap: .9em; padding: .7em 1.3em 0; }
.flight__route b { font: 400 2.7em/1 var(--serif); letter-spacing: .02em; }
.flight__route .ic { width: 2em; height: 2em; color: var(--brand-bright); }
.flight__cities { display: flex; justify-content: space-between; padding: .4em 1.55em 1.2em; font-size: .85em; opacity: .6; }
.flight__foot { display: flex; justify-content: space-between; align-items: center; padding: .85em .95em .85em 1.25em; background: #fff; color: #141816; font-size: 1.05em; font-weight: 700; }
.flight__foot span { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--brand); color: var(--on-brand, #fff); }
.flight__foot .ic { width: 1.1em; height: 1.1em; stroke-width: 2.4; }

.ready { flex: none; margin: 1em 1em 0; padding: 1.1em 1.3em 1.3em; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.7em; background: #1a1f1d; }
.ready__top { display: flex; justify-content: space-between; align-items: baseline; }
.ready__top small { font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.ready__top small + small { font-size: .82em; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ready p { margin-top: .25em; font: 400 2em/1.1 var(--serif); }
.ready p b { font-weight: 400; color: var(--brand-bright); }
.segs { display: grid; grid-template-columns: repeat(13, 1fr); gap: .3em; margin-top: .8em; }
.segs i { height: .45em; border-radius: 1em; background: rgba(255, 255, 255, .14); }
.segs i.on { background: var(--brand-bright); }

.app__tabs {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 5.9em;
  padding: .9em .6em 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #121514;   /* sem desfoque: era ele que escapava do canto do celular */
}
.app__tabs span { display: flex; flex-direction: column; align-items: center; gap: .35em; font-size: .72em; font-weight: 500; opacity: .58; }
.app__tabs .ic { width: 2.3em; height: 2.3em; stroke-width: 1.7; }
.app__tabs .is-on { opacity: 1; color: var(--brand-bright); }

/* Tela de documentos: a cliente toca num documento e ele abre numa folha */
.app--docs { padding-bottom: 5.9em; }
.app--docs .app__photo { height: 38%; object-position: 50% 30%; }
.app--docs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 19, 18, .4) 0%, rgba(16, 19, 18, .08) 12%, rgba(16, 19, 18, .55) 22%, rgba(16, 19, 18, .92) 33%, #101312 39%);
}
.app__top { margin-top: 3.2em; padding: 0 1.5em; }
.app__top small { font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.app__top b { display: block; margin-top: .1em; font: 400 2.5em/1.05 var(--serif); }
.app__top p { margin-top: .5em; font-size: .88em; opacity: .66; }
.app__docs { display: flex; flex-direction: column; gap: .6em; margin: 1.2em 1em 0; }
.app__docs li {
  display: flex;
  align-items: center;
  gap: .85em;
  padding: 1.2em .8em 1.2em .85em;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25em;
  background: #1a1f1d;
  transition: transform .25s var(--ease), background-color .25s;
}
.app__docs li > div { flex: 1; min-width: 0; }
.app__docs b { display: block; font-size: 1em; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app__docs small { display: block; margin-top: .1em; font-size: .78em; opacity: .58; }
.app__dic { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: .85em; background: rgba(255, 255, 255, .08); color: var(--brand-bright); }
.app__dic .ic { width: 1.35em; height: 1.35em; }
.app__chev { width: 1.2em; height: 1.2em; opacity: .38; }
.app__docs li.is-tap { transform: scale(.965); background: #2a302d; }
.app__dim { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .4s; pointer-events: none; }
.app__sheet {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: .6em 1.1em 1.2em;
  border-radius: 2em 2em 0 0;
  background: #fff;
  color: #141816;
  box-shadow: 0 -1em 3em rgba(0, 0, 0, .4);
  transform: translateY(104%);
  transition: transform .55s var(--spring);
}
.app__sheet::before { content: ""; display: block; width: 3em; height: .35em; margin: 0 auto 1em; border-radius: 1em; background: #D8D4CD; }
.app__sheet small { display: block; font-size: .74em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.app__sheet b { display: block; margin-top: .1em; font: 400 2em/1.1 var(--serif); }
.app__page {
  position: relative;
  height: 9em;
  margin-top: 1em;
  border: 1px solid var(--line);
  border-radius: 1em;
  background: repeating-linear-gradient(180deg, transparent 0 1em, rgba(30, 29, 27, .12) 1em 1.22em) no-repeat 1.2em 1.4em / 62% 4.2em, #F7F6F3;
}
.app__page::after {
  content: "";
  position: absolute;
  left: 1.2em;
  bottom: 1.1em;
  width: 58%;
  height: 2.1em;
  background: repeating-linear-gradient(90deg, #1E1D1B 0 2px, transparent 2px 4px, #1E1D1B 4px 5px, transparent 5px 8px, #1E1D1B 8px 11px, transparent 11px 13px);
}
.app__saved { display: flex; align-items: center; justify-content: center; gap: .5em; height: 3.3em; margin-top: 1em; border-radius: 1.1em; background: var(--brand); color: var(--on-brand, #fff); font-size: 1em; font-weight: 700; }
.app__saved .ic { width: 1.3em; height: 1.3em; stroke-width: 2.4; }
.app--docs.is-sheet .app__sheet { transform: none; }
.app--docs.is-sheet .app__dim { opacity: 1; }

/* Tela do convite */
.app--invite .app__photo { height: 100%; object-position: 50% 50%; }
.app--invite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 12, 11, .32) 0%, rgba(10, 12, 11, 0) 20%, rgba(10, 12, 11, .12) 44%, rgba(10, 12, 11, .86) 76%, rgba(10, 12, 11, .96) 100%);
}
.invite { display: flex; flex-direction: column; align-items: center; margin-top: auto; padding: 0 1.6em 2.2em; text-align: center; }
.phone .invite .mono { width: 3.5em; height: 3.5em; border-radius: 1em; font-size: 1.25em; }
.invite small { margin-top: 1.2em; font-size: .92em; opacity: .86; }
.invite strong { max-width: 100%; margin-top: .15em; font-size: 1.25em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite b { margin-top: .45em; font: 400 2.9em/1.05 var(--serif); white-space: nowrap; }
.invite p { margin-top: .7em; font-size: .88em; opacity: .8; }
.invite__btn { display: grid; place-items: center; width: 100%; height: 3.9em; margin-top: 1.6em; border-radius: 1.4em; background: #fff; color: #141816; font-size: 1.08em; font-weight: 700; }

.mono--brand, .mono--badge, .flight__top i, .flight__foot span, .flight__route .ic, .segs i, .ready p b, .app__tabs .is-on {
  transition: background-color .45s var(--ease), color .45s var(--ease);
}

/* ---------- Quatro fatos, logo abaixo do palco ---------- */

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 108px; text-align: left; }
.facts li { padding: 4px 24px 4px 28px; border-left: 1px solid var(--line); }
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts .ic { width: 24px; height: 24px; color: var(--orange); }
.facts b { display: block; margin-top: 14px; font-size: 18px; font-weight: 600; }
.facts span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* ==========================================================================
   Seções
   ========================================================================== */

.sec { padding: 148px 0; }
.sec--tight { padding-top: 0; }

.sec-head { max-width: 780px; }
.sec-head--center { max-width: 940px; margin-inline: auto; text-align: center; }
.sec-head--center .lead { max-width: 700px; margin-inline: auto; }

.stop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stop i { width: 11px; height: 11px; border: 2.5px solid var(--orange); border-radius: 50%; }

.h2 {
  margin-top: 18px;
  font: 400 clamp(33px, 4.5vw, 58px)/1.07 var(--serif);
  letter-spacing: -.012em;
  text-wrap: balance;
}

.lead { max-width: 620px; margin-top: 20px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* ---------- O problema ---------- */

.problem { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center; margin-top: 68px; }

.chat { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.phone--chat { --w: 330px; }
.chat__cap { font-size: 14px; color: var(--ink-3); text-align: center; }

/* A tela do WhatsApp, em em para escalar com o celular */
.wa { position: absolute; inset: 0; display: flex; flex-direction: column; background: #ECE5DD; color: #111B21; }
.wa .app__status { background: #008069; }
.wa__head { display: flex; align-items: center; gap: .7em; padding: .35em 1em .85em .7em; background: #008069; color: #fff; }
.wa__head .av { width: 2.9em; height: 2.9em; background: #DFE5E7; color: #54656F; font-size: 1em; }
.wa__head > div { flex: 1; min-width: 0; }
.wa__head b { display: block; font-size: 1.1em; font-weight: 600; line-height: 1.2; }
.wa__head small { display: block; font-size: .78em; opacity: .85; }
.wa__head .ic { width: 1.55em; height: 1.55em; stroke-width: 1.9; }
.wa__acts { display: flex; gap: 1em; }
.wa__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .35em;
  padding: .9em .75em;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .035) 0 .9em, transparent 1em),
    radial-gradient(circle at 70% 75%, rgba(0, 0, 0, .03) 0 1.2em, transparent 1.3em),
    #ECE5DD;
}
.wa__day { align-self: center; margin: .3em 0 .5em; padding: .35em .8em; border-radius: .6em; background: #fff; box-shadow: 0 1px .5px rgba(0, 0, 0, .12); font-size: .76em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #54656F; }
.wa__day--alert { margin-top: .9em; background: var(--orange); color: #fff; }
.wa__msg { position: relative; max-width: 88%; padding: .4em .45em .25em; border-radius: .75em; background: #fff; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); font-size: 1em; line-height: 1.35; }
.wa__msg--out { align-self: flex-end; border-top-right-radius: 0; background: #DCF8C6; }
.wa__msg--in { align-self: flex-start; border-top-left-radius: 0; }
.wa__msg--out::after, .wa__msg--in::after { content: ""; position: absolute; top: 0; width: 0; height: 0; border-top: .7em solid #DCF8C6; }
.wa__msg--out::after { right: -.5em; border-right: .55em solid transparent; }
.wa__msg--in::after { left: -.5em; border-top-color: #fff; border-left: .55em solid transparent; }
.wa__msg + .wa__msg--out, .wa__msg--in + .wa__msg--in { border-top-right-radius: .75em; border-top-left-radius: .75em; }
.wa__msg + .wa__msg--out::after, .wa__msg--in + .wa__msg--in::after { display: none; }
.wa__msg p { padding: .15em .4em .05em; }
.wa__msg time { display: flex; justify-content: flex-end; align-items: center; gap: .25em; margin-top: -.05em; padding-right: .15em; font-size: .72em; color: #667781; }
.wa__msg time .ic { width: 1.5em; height: 1.5em; color: #53BDEB; stroke-width: 2.2; }
.wa__file { display: flex; align-items: center; gap: .7em; min-width: 15.5em; padding: .55em .6em; border-radius: .55em; background: rgba(0, 0, 0, .055); }
.wa__file i { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.6em; border-radius: .35em; background: #E5392F; color: #fff; font-size: .68em; font-weight: 700; letter-spacing: .04em; }
.wa__file > div { flex: 1; min-width: 0; }
.wa__file b { display: block; font-size: .95em; font-weight: 500; line-height: 1.25; }
.wa__file small { display: block; font-size: .74em; color: #667781; }
.wa__file > .ic { width: 1.5em; height: 1.5em; color: #8696A0; }
.wa__foot { display: flex; align-items: center; gap: .6em; padding: .6em .8em 1.9em; background: #F0F2F5; }
.wa__foot .ic { width: 1.6em; height: 1.6em; color: #54656F; stroke-width: 1.9; }
.wa__input { display: flex; flex: 1; align-items: center; height: 2.6em; padding: 0 1em; border-radius: 1.3em; background: #fff; color: #8696A0; font-size: .98em; }
.wa__mic { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #00A884; }
.wa__mic .ic { color: #fff; }

.compare { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow-1); overflow: hidden; }
.compare__head, .compare__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.compare__row { flex: 1; }
.compare__head > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}
.compare__head svg { width: 22px; height: 22px; color: var(--orange); }
.compare__row > div { display: flex; align-items: center; padding: 20px 28px; font-size: 16.5px; line-height: 1.4; }
.compare__row + .compare__row > div { border-top: 1px solid var(--line); }
.compare__head > div:first-child, .compare__row > div:first-child { background: var(--stage); color: var(--ink-2); }
.compare__row > div:last-child { font-weight: 600; }
.compare__ok { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-right: 13px; border-radius: 50%; background: var(--orange-wash); color: var(--orange); }
.compare__ok .ic { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---------- Como funciona ---------- */

/* Desenho de base: três cartões em grade (vale sem JavaScript, em tela baixa e no celular). */

.flow__stage { margin: 0 16px; padding: 124px 0 132px; border-radius: 48px; background: var(--stage); }
.flow__track { position: relative; width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.flow__hint, .flow__dot, .flow__end { display: none; }

.flow__lane { position: relative; margin-top: 40px; padding-top: 70px; }
.flow__road { position: absolute; left: 0; top: 0; width: 100%; height: 70px; overflow: visible; pointer-events: none; }
.route__plan { fill: none; stroke: #CFCBC4; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .1 8; }
.route__done { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .2, 1) .3s; }
.flow__track.is-in .route__done { stroke-dashoffset: 0; }

.flow__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Os três cartões têm a mesma estrutura: número, título e texto em cima; etiquetas; e o quadro
   com a tela do painel embaixo, sempre do mesmo tamanho. Assim ficam alinhados em qualquer largura. */
.step { position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 0; padding: 26px; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.step__stop {
  position: absolute;
  left: 30px;
  top: -50px;
  width: 18px;
  height: 18px;
  border: 2.5px solid #CFCBC4;
  border-radius: 50%;
  background: var(--stage);
  transition: border-color .4s, background-color .4s, transform .6s var(--spring);
}
.step__stop::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .5s var(--spring); }
.flow:not(.is-h) .flow__track.is-in .step__stop, .flow.is-h .is-on > .step__stop { border-color: var(--orange); background: #fff; transform: scale(1.1); }
.flow:not(.is-h) .flow__track.is-in .step__stop::after, .flow.is-h .is-on > .step__stop::after { transform: scale(1); }
.flow:not(.is-h) .flow__track.is-in .step:nth-child(1) .step__stop, .flow:not(.is-h) .flow__track.is-in .step:nth-child(1) .step__stop::after { transition-delay: .3s; }
.flow:not(.is-h) .flow__track.is-in .step:nth-child(2) .step__stop, .flow:not(.is-h) .flow__track.is-in .step:nth-child(2) .step__stop::after { transition-delay: 1.15s; }
.flow:not(.is-h) .flow__track.is-in .step:nth-child(3) .step__stop, .flow:not(.is-h) .flow__track.is-in .step:nth-child(3) .step__stop::after { transition-delay: 1.9s; }

.step__text { display: flex; flex: 1; flex-direction: column; }
.step__n { display: block; font: 400 54px/1 var(--serif); letter-spacing: -.01em; }
.step h3 { margin-top: 18px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.step__copy p { margin-top: 8px; font-size: 16.5px; color: var(--ink-2); }
.step__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; }
.step__tags li { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.step > .cena { flex: none; }

/* Em tela larga: a seção prende na tela e os passos correm na horizontal conforme a rolagem.
   O js/site.js põe a classe .is-h, mede a largura da trilha e move tudo a cada rolagem. */

.flow.is-h { scroll-margin-top: -104px; --gap: clamp(40px, 5vw, 80px); --lado: max(48px, calc((100vw - var(--wrap)) / 2 - 16px)); --borda: clamp(24px, min(3.2vw, 4.4vh), 48px); }
.flow.is-h .flow__pin { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 16px; }
.flow.is-h .flow__stage { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.flow.is-h .flow__track { display: flex; align-items: center; gap: var(--gap); width: max-content; margin: 0; padding: 52px max(40px, 5vw) 0 var(--lado); will-change: transform; }

.flow.is-h .flow__intro { flex: none; width: clamp(340px, 31vw, 480px); }
.flow.is-h .flow__intro .h2 { font-size: clamp(34px, min(3.7vw, 6.4vh), 56px); }
.flow.is-h .flow__intro .lead { font-size: clamp(16px, 1.25vw, 18.5px); }
.flow.is-h .flow__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.flow.is-h .flow__hint .ic { color: var(--orange); animation: empurra 1.6s var(--ease) infinite; }
@keyframes empurra {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

.flow.is-h .flow__lane { display: flex; flex: none; gap: var(--gap); margin: 0; padding-top: 84px; }
.flow.is-h .flow__road { height: 84px; }
.flow.is-h .route__done { transition: none; }
.flow.is-h .flow__dot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: block;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--orange) 24%, transparent);
  will-change: transform;
}

.flow.is-h .flow__steps { display: flex; gap: var(--gap); }
/* Na horizontal: o texto ocupa a esquerda de cima a baixo (número no alto, etiquetas no pé)
   e o quadro com a tela do painel ocupa a direita inteira. */
.flow.is-h { --ch: clamp(360px, 56vh, 500px); }
.flow.is-h .step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: clamp(20px, 2.6vw, 40px);
  flex: none;
  width: clamp(640px, 60vw, 900px);
  height: var(--ch);
  min-height: 0;
  padding: 16px 16px 16px var(--borda);
  border-radius: 36px;
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), box-shadow .6s var(--ease);
}
.flow.is-h .step:not(.is-on) { opacity: .6; }
.flow.is-h .step.is-on { box-shadow: var(--shadow-2); }
.flow.is-h .step__stop { left: var(--borda); top: -63px; }

.flow.is-h .step__text { justify-content: space-between; padding-block: calc(var(--borda) - 16px); transition: transform .8s var(--ease); }
.flow.is-h .step:not(.is-on) .step__text { transform: translateY(12px); }
.flow.is-h .step__n { font-size: clamp(56px, min(7.4vw, 12vh), 108px); line-height: .9; transition: color .6s var(--ease); }
.flow.is-h .step:not(.is-on) .step__n { color: #D8D4CD; }
.flow.is-h .step h3 { margin-top: 0; font: 400 clamp(24px, min(2.5vw, 4vh), 36px)/1.12 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.flow.is-h .step__copy p { margin-top: 12px; font-size: clamp(15.5px, 1.25vw, 18.5px); }
.flow.is-h .step__tags { margin-top: 0; padding-top: 0; }
.flow.is-h .step > .cena { width: calc((var(--ch) - 32px) / 1.14); height: calc(var(--ch) - 32px); aspect-ratio: auto; }

/* A tela do painel se monta quando o ponto da estrada chega na parada */
.flow.is-h .step:not(.is-on) .pm__body > * { opacity: 0; transform: translateY(1.2em); }

.flow.is-h .flow__end { position: relative; display: flex; flex: none; flex-direction: column; align-items: flex-start; justify-content: center; width: clamp(300px, 27vw, 420px); }
.flow.is-h .flow__end .step__stop { left: 0; }
.flow__fim { font: 400 clamp(30px, 3vw, 46px)/1.08 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.flow__cta { margin-top: 30px; }
.flow.is-h .flow__end > p { transition: opacity .6s var(--ease), transform .8s var(--spring); }
.flow.is-h .flow__end:not(.is-on) > p { opacity: 0; transform: translateY(18px); }
.flow.is-h .flow__end.is-on .flow__cta { transition-delay: .18s; }

/* ---------- Telas do painel em miniatura ----------
   .cena é o quadro: mede a própria largura. .pm é a janela do painel dentro dele, desenhada em
   HTML com as mesmas peças do painel de verdade. Tudo em em: a janela inteira cresce e encolhe
   junto com o quadro, e nada fica cortado. */

.cena { position: relative; container: cena / inline-size; min-width: 0; }

/* quadro com fundo, usado nos passos: a janela fica inteira lá dentro, com a mesma folga em volta */
/* min-height e overflow: o quadro nunca cresce por causa do que tem dentro; os três ficam do mesmo tamanho */
.cena--poco { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 1 / 1.14; min-height: 0; border-radius: 22px; background: var(--stage); overflow: hidden; }
.cena--poco > .pm { margin: 14px; margin: 5cqw; }

/* quadro sem fundo, usado nos cartões de recursos: a janela ocupa o espaço que sobra no cartão */
.cena--nua { display: flex; flex: 1; min-height: 0; }
.cena--nua > .pm { flex: 1; }

.pm {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 1.9em;
  background: #fff;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  font-size: 7.7px;
  font-size: 2.72cqw;
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
}
.pm__bar { display: flex; align-items: center; gap: .65em; flex: none; height: 3.5em; padding: 0 1.5em; border-bottom: 1px solid var(--line); background: #FBFAF8; }
.pm__bar i { flex: none; width: .9em; height: .9em; border-radius: 50%; background: #E3E0DA; }
.pm__bar span { margin-left: .5em; font-size: 1.3em; color: var(--ink-3); white-space: nowrap; }
.pm__bar b { font-weight: 600; color: var(--ink-2); }
.pm__body { display: flex; flex: 1; flex-direction: column; gap: 1.1em; min-height: 0; padding: 1.7em 1.8em; }
.pm__body > * { transition: opacity .5s var(--ease), transform .7s var(--ease); }
.pm__body > :nth-child(1) { transition-delay: .1s; }
.pm__body > :nth-child(2) { transition-delay: .22s; }
.pm__body > :nth-child(3) { transition-delay: .34s; }
.pm__body > :nth-child(4) { transition-delay: .46s; }
.pm__body > :nth-child(5) { transition-delay: .58s; }
.js .reveal:not(.is-in) .pm__body > * { opacity: 0; transform: translateY(1.2em); }

.pm__t { display: block; font-size: 1.65em; font-weight: 600; line-height: 1.2; }
.pm__s { display: block; font-size: 1.3em; line-height: 1.35; color: var(--ink-3); }
.pm__ic { display: grid; place-items: center; flex: none; width: 3em; height: 3em; border: 1px solid var(--line); border-radius: .9em; background: #fff; color: var(--orange); }
.pm__ic .ic { width: 1.7em; height: 1.7em; }
.pm__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; flex: none; height: 2.5em; padding: 0 1.1em; border: 1px solid var(--line-2); border-radius: 99em; background: #fff; font-size: 1.3em; font-weight: 600; white-space: nowrap; }
.pm__btn .ic { width: 1.2em; height: 1.2em; }
.pm__btn--pri { border-color: transparent; background: var(--orange); color: #fff; }
.pm .chip { height: 2.2em; padding: 0 .85em; gap: .4em; font-size: 1.25em; }
.pm .chip--seen { padding-left: .6em; }
.pm .chip .ic { width: 1.25em; height: 1.25em; }
.pm .chip small { display: none; font-size: .95em; }
.pm .meter { width: 100%; height: .6em; }
.pm__largo { display: none !important; }   /* só aparece quando o quadro é largo (regra lá embaixo) */
.pm__largo-txt { display: none; }          /* idem, para um pedaço de texto no meio da frase */

/* Roteiro: cidades, dias e atividades */
.pm__cidades { display: flex; gap: .5em; }
.pm__cidades span { display: inline-flex; align-items: center; gap: .3em; flex: none; height: 2.3em; padding: 0 .9em; border: 1px solid var(--line); border-radius: 99em; font-size: 1.3em; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.pm__cidades .is-on { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 600; }
.pm__cidades .pm__mais { border-style: dashed; border-color: var(--line-2); color: var(--ink-3); }
.pm__cidades .ic { width: 1.05em; height: 1.05em; }
.pm__cidades em { font-style: normal; }
.pm__dia { display: flex; align-items: baseline; gap: .7em; margin-top: .2em; }
.pm__dia b { font-size: 1.5em; font-weight: 700; }
.pm__dia small { font-size: 1.3em; color: var(--ink-3); }
.pm__dia span { display: inline-flex; align-items: center; gap: .3em; margin-left: auto; font-size: 1.3em; font-weight: 600; color: var(--ink-2); }
.pm__dia .ic { width: 1.1em; height: 1.1em; color: var(--orange); }
.pm__acts { display: flex; flex-direction: column; margin-top: -.5em; }
.pm__acts li { display: flex; align-items: center; gap: 1.1em; min-height: 4em; padding: .45em .9em; border-top: 1px solid var(--line); }
.pm__acts li:first-child { border-top-color: transparent; }
.pm__acts time { flex: none; width: 3.1em; font-size: 1.35em; font-weight: 700; font-variant-numeric: tabular-nums; }
.pm__acts b { display: block; font-size: 1.45em; font-weight: 500; line-height: 1.25; }
.pm__acts small { display: block; font-size: 1.25em; line-height: 1.3; color: var(--ink-3); }
.pm__acts .is-nova { border-top-color: transparent; border-radius: 1em; background: var(--orange-wash); }

.pm__novo { display: flex; align-items: center; justify-content: center; gap: .4em; height: 2.7em; margin-top: auto; border: 1px dashed var(--line-2); border-radius: 1em; font-size: 1.3em; font-weight: 600; color: var(--ink-3); }
.pm__novo .ic { width: 1.1em; height: 1.1em; color: var(--orange); }
.pm__acts .is-branco { border-top-color: transparent; border-radius: 1em; background: #FDF1DF; }
.pm__acts .is-branco time { font-weight: 500; color: #9A7B45; }
.pm__acts .is-branco small { color: #8A6A2E; }
.pm__acts .is-branco + li { border-top-color: transparent; }

/* Publicação: o link de convite e o que abre no celular do cliente */
.pm__duas { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.4em; }
.pm__col { display: flex; flex-direction: column; align-items: flex-start; gap: .7em; min-width: 0; }
.pm__pill { display: inline-flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .9em; border-radius: 99em; background: var(--orange-wash); font-size: 1.25em; font-weight: 600; }
.pm__pill i { width: .55em; height: .55em; border-radius: 50%; background: var(--orange); }
.pm__col .pm__btn { margin-top: .5em; }
.pm__passos { display: flex; flex-direction: column; gap: .6em; margin-top: .8em; }
.pm__passos li { display: flex; align-items: center; gap: .7em; font-size: 1.3em; line-height: 1.3; color: var(--ink-2); }
.pm__passos i { display: grid; place-items: center; flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--orange-wash); font-size: .88em; font-weight: 700; color: var(--ink); }
.pm__fone { display: flex; flex-direction: column; align-items: center; gap: .9em; }
.pm__fone .phone { --w: 96px; --w: 32cqw; box-shadow: inset 0 0 0 .12em #2c2b29, 0 2.4em 4em -2em rgba(30, 29, 27, .5); }
.pm__fone > small { max-width: 13em; font-size: 1.1em; line-height: 1.3; text-align: center; color: var(--ink-3); }

/* Leitura: o aviso e a lista de itens com o Visto */
.pm__alerta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9em 1.1em; padding: 1.2em; border-radius: 1.3em; background: var(--stage); }
.pm__alerta p { font-size: 1.4em; line-height: 1.3; color: var(--ink-2); }
.pm__alerta p b { font-weight: 700; color: var(--ink); }
.pm__alerta .pm__btn { grid-column: 1 / -1; justify-self: start; }
.pm__itens { display: flex; flex-direction: column; margin-top: -.4em; }
.pm__itens li { display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: 3.5em; padding: .3em .3em; border-top: 1px solid var(--line); }
.pm__itens li:first-child { border-top-color: transparent; }
.pm__itens li > span:first-child { min-width: 0; font-size: 1.45em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm__soma { align-items: center; gap: 1.1em; margin-top: auto; padding: .9em 1.2em; border: 1px solid var(--line); border-radius: 1.3em; }
.pm__soma svg { flex: none; width: 4.2em; height: 4.2em; }

/* Início: o que precisa de você e as viagens, com quanto já foi aberto */
.pm__precisa { display: flex; flex-direction: column; gap: 1em; padding: 1.3em; border-radius: 1.5em; background: var(--stage); }
.pm__cab { display: flex; align-items: center; gap: 1em; }
.pm__pend { display: flex; flex-direction: column; gap: .7em; }
.pm__pend li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7em 1em; padding: 1em; border: 1px solid var(--line); border-radius: 1.2em; background: #fff; }
.pm__pend li > .ic { width: 1.7em; height: 1.7em; margin-top: .1em; color: var(--orange); }
.pm__pend p { min-width: 0; font-size: 1.35em; line-height: 1.35; color: var(--ink-2); }
.pm__pend .pm__btn { grid-column: 2; justify-self: start; }
.pm__pend p b { font-weight: 600; color: var(--ink); }
.pm__viagens { display: flex; flex-direction: column; gap: .7em; }
.pm__viagens li { display: flex; align-items: center; gap: 1.1em; padding: .8em 1.2em .8em .8em; border: 1px solid var(--line); border-radius: 1.3em; }
.pm__viagens img { flex: none; width: 4.6em; height: 3.5em; border-radius: .8em; object-fit: cover; }
.pm__viagens li > div:first-of-type { flex: 1; min-width: 0; }
.pm__viagens b { display: block; font: 400 1.9em/1.15 var(--serif); white-space: nowrap; }
.pm__viagens small { display: block; font-size: 1.25em; line-height: 1.3; color: var(--ink-3); }
.pm__prog { flex: none; width: 9em; }
.pm__prog small { margin-top: .45em; }

/* Leitura de PDF: o arquivo, as etapas e o que ficou para conferir */
.pm__arquivo { display: flex; align-items: center; gap: 1em; padding: .9em 1.1em .9em .9em; border-radius: 1.2em; background: var(--stage); }
.pm__arquivo i { display: grid; place-items: center; flex: none; width: 2.9em; height: 3.5em; border-radius: .5em; background: #E5392F; font-size: .95em; font-weight: 700; letter-spacing: .04em; color: #fff; }
.pm__arquivo div { min-width: 0; }
.pm__arquivo b { display: block; font-size: 1.45em; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm__arquivo small { font-size: 1.25em; color: var(--ink-3); }
.pm__etapas { display: flex; flex-direction: column; gap: .65em; padding-inline: .3em; }
.pm__etapas li { display: flex; align-items: center; gap: .8em; font-size: 1.4em; font-weight: 500; }
.pm__etapas li span { display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--orange-wash); color: var(--orange); }
.pm__etapas .ic { width: .95em; height: .95em; stroke-width: 2.8; }
.pm__resumo { display: flex; flex-wrap: wrap; gap: .5em; }
.pm__resumo span { display: inline-flex; align-items: center; height: 2.2em; padding: 0 .9em; border-radius: 99em; background: var(--orange-wash); font-size: 1.3em; font-weight: 600; }
.pm__conferir { display: flex; align-items: flex-start; gap: .7em; margin-top: auto !important; padding: 1em 1.1em; border: 1px solid #EAD9B8; border-radius: 1.1em; background: #FDF1DF; font-size: 1.3em !important; line-height: 1.35; color: #6B4A12 !important; }
.pm__conferir .ic { flex: none; width: 1.25em; height: 1.25em; margin-top: .1em; }
.pm__conferir b { font-weight: 700; }

/* Quadro largo (computador): entra o que não cabia no pequeno */
@container cena (min-width: 360px) {
  .pm { font-size: min(2.117cqw, 10px); }
  span.pm__largo, em.pm__largo { display: inline-flex !important; }
  small.pm__largo { display: block !important; }
  .pm__largo-txt { display: inline; }
  .pm__prog { width: 13.5em; }
  div.pm__largo, ul.pm__largo, ol.pm__largo, li.pm__largo { display: flex !important; }
  .pm__estreito { display: none !important; }
  .pm .chip small { display: inline; }
  .pm__fone .phone { --w: 36cqw; }
  .pm__pend li { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .pm__pend li > .ic { margin-top: 0; }
  .pm__pend .pm__btn { grid-column: auto; }
}

.vrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.vrow > div { flex: 1; min-width: 0; }
.vrow b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.vrow small { font-size: 12.5px; color: var(--ink-3); }

/* ---------- O painel por dentro: a visita guiada (seção #recursos) ----------
   Um cartão largo: à esquerda os capítulos, à direita a janela do painel (.pm--tour), que tem
   barra lateral e troca de tela. As peças da janela medem em em, como as outras .pm. */

.pontos { display: none; }

/* o cartão fica na coluna central e tem de caber na tela: a janela mede em em, e a letra é a menor
   entre a que a largura permite e a que a altura da tela permite */
.tour { display: flex; flex-direction: column; gap: 12px; margin: 56px 0 0; padding: 22px 28px 30px; border-radius: 40px; background: var(--stage); }

/* a faixa dos capítulos: pílulas; quando não cabem, deslizam, e a acesa vem para o meio */
.tour__list { display: flex; gap: 8px; margin-inline: -28px; padding: 6px 28px; overflow-x: auto; scroll-padding-inline: 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tour__list::-webkit-scrollbar { display: none; }
.tour__item { position: relative; flex: none; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; transition: background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.tour__item.is-on { border-color: transparent; background: #fff; box-shadow: var(--shadow-1); }
.tour__item:not(.is-on):hover { border-color: var(--line-2); }
.tour__btn { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 9px 18px 9px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.tour__btn:focus-visible { outline-offset: -3px; }
.tour__n { flex: none; font: 400 13px/1 var(--serif); letter-spacing: .02em; color: var(--ink-3); transition: color .3s; }
.tour__item.is-on .tour__n { color: var(--orange); }
.tour__tx { min-width: 0; }
.tour__tx b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.25; color: var(--ink-2); white-space: nowrap; transition: color .3s; }
.tour__item.is-on .tour__tx b { color: var(--ink); }
.tour__desc { display: none; }   /* o texto do capítulo aparece embaixo da faixa, em .tour__now */
/* a barrinha mostra quanto falta para a próxima tela */
.tour__bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s; }
.tour__bar::after { content: ""; display: block; width: 100%; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.tour__item.is-on .tour__bar { opacity: 1; }
.tour.is-auto .tour__item.is-on .tour__bar::after { animation: tour-enche var(--dura, 8s) linear forwards; }
.tour.is-paused .tour__bar::after { animation-play-state: paused; }
@keyframes tour-enche { to { transform: scaleX(1); } }

/* o texto do capítulo aceso (preenchido pelo script com a descrição da pílula) */
.tour__now { min-height: 0; margin: 0 0 2px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.tour__now b { font-weight: 600; color: var(--ink); }

/* O notebook, centrado e com proporções de notebook: a moldura escura com a câmera em volta da tela,
   e a base embaixo, mais larga, com o rebaixo do trackpad. As medidas são proporcionais à largura dele (cqw). */
.tour__stage { min-width: 0; padding: 0 clamp(16px, 5%, 56px); }
.tela { container: tela / inline-size; position: relative; width: min(100%, 1000px); margin: 0 auto; }
.tela__moldura { position: relative; padding: 2.2cqw 2.2cqw 2.8cqw; border-radius: 2.4cqw 2.4cqw 1.1cqw 1.1cqw; background: #1C1C1E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .6); }
.tela__moldura::before { content: ""; position: absolute; left: 50%; top: .85cqw; width: .55cqw; height: .55cqw; border-radius: 50%; background: #0a0a0a; box-shadow: inset 0 0 0 1px #3a3a3c, 0 0 0 .2cqw #242426; transform: translateX(-50%); }
.tela__base { position: relative; height: 2.5cqw; margin: 0 -5.5cqw; border-radius: 0 0 1.5cqw 1.5cqw; background: linear-gradient(180deg, #EDEBE6 0%, #DAD7D1 55%, #C3C0B9 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .12), 0 26px 44px -24px rgba(30, 29, 27, .6); }
.tela__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14cqw; height: .75cqw; border-radius: 0 0 .7cqw .7cqw; background: #B3B0A9; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5); transform: translateX(-50%); }
.cena--tour { display: block; border-radius: .7cqw; overflow: hidden; background: #fff; }
.tela .pm--tour { border: 0; border-radius: 0; box-shadow: none; }

/* A janela: barra lateral + conteúdo. A altura é fixa em em (o conteúdo mais alto cabe em 55 em) e a
   letra é a menor entre 1% da largura da tela do notebook (10 px) e o que sobra da altura da tela,
   entre 9 e 12 px: assim o cartão inteiro cabe na tela, em qualquer monitor. (O conteúdo mais alto,
   o Início, ocupa 58 em com a barra de cima.) */
.pm--tour { width: 100%; height: 58em; font-size: clamp(9px, min(1.1cqw, calc((100vh - 290px) / 58)), 12px); }
.pm__shell { display: grid; grid-template-columns: 16.5em minmax(0, 1fr); flex: 1; min-height: 0; }
.pm__side { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 1.5em 1em 1.3em; border-right: 1px solid var(--line); background: #FBFAF8; }
.pm__ag { display: flex; align-items: center; gap: .9em; padding: 0 .5em 1.3em; }
.pm__ag .mono { width: 3.2em; height: 3.2em; border-radius: .95em; font-size: 1em; }
.pm__ag b { display: block; font-size: 1.3em; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.pm__ag small { display: block; font-size: 1.1em; color: var(--ink-3); }
.pm__nav { position: absolute; left: 1em; right: 1em; top: 6.4em; display: flex; flex-direction: column; gap: .3em; opacity: 0; transform: translateX(-.6em); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.pm--tour[data-lado="ag"] .pm__nav[data-lado="ag"], .pm--tour[data-lado="viagem"] .pm__nav[data-lado="viagem"] { opacity: 1; transform: none; transition-delay: .2s; }
.pm__it { display: flex; align-items: center; gap: .75em; padding: .7em .85em; border: 1px solid transparent; border-radius: .9em; font-size: 1.3em; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.pm__it .ic { width: 1.25em; height: 1.25em; }
.pm__it.is-on { border-color: var(--line); background: #fff; color: var(--ink); font-weight: 600; }
.pm__it i { display: grid; place-items: center; min-width: 1.5em; height: 1.5em; margin-left: auto; padding: 0 .3em; border-radius: 99em; background: var(--orange-wash); font-size: .82em; font-weight: 700; color: var(--ink); }
.pm__lbl { display: block; padding: 1.3em 1em .45em; font-size: 1.05em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pm__lbl--sec { padding: .2em .2em 0; }
.pm__lbl--sec span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.pm__volta { display: flex; align-items: center; gap: .4em; padding: .4em .5em; font-size: 1.2em; font-weight: 600; color: var(--ink-2); }
.pm__volta .ic { width: 1.1em; height: 1.1em; }
.pm__trip { display: flex; align-items: center; gap: .8em; margin: .4em 0 .2em; padding: .7em; border: 1px solid var(--line); border-radius: 1.1em; background: #fff; }
.pm__trip img { flex: none; width: 3.6em; height: 2.7em; border-radius: .6em; object-fit: cover; }
.pm__trip > div { min-width: 0; }
.pm__trip b { display: block; font-size: 1.3em; font-weight: 600; line-height: 1.2; }
.pm__trip small { display: block; font-size: 1.05em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm__eu { display: flex; align-items: center; gap: .8em; margin-top: auto; padding: 1em .4em 0; border-top: 1px solid var(--line); }
.pm .av { width: 2.7em; height: 2.7em; font-size: 1.2em; }
.pm__eu b { display: block; font-size: 1.3em; font-weight: 600; line-height: 1.2; }
.pm__eu small { display: block; font-size: 1.1em; color: var(--ink-3); white-space: nowrap; }

.pm__main { position: relative; container: main / inline-size; min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.tour__scene { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.1em; padding: 1.8em 1.8em 1.6em; opacity: 0; transform: translateY(1em); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.tour__scene.is-on { opacity: 1; transform: none; transition-delay: .25s; }
/* as peças de cada tela entram na hora marcada (data-t); sem JavaScript, ou sem movimento, já estão lá */
.tour__scene [data-t] { transition: opacity .45s var(--ease), transform .6s var(--ease); }
.js .is-auto .tour__scene [data-t]:not(.is-on) { opacity: 0; transform: translateY(.8em); }
.js .is-auto .tour__scene [data-t]:not(.is-on) .meter i { width: 0; }
.tour__scene .pm__btn[data-press] { transition: transform .2s var(--ease), background-color .2s; }
.tour__scene .pm__btn[data-press].is-pressed { animation: pm-aperta .5s var(--ease); }
@keyframes pm-aperta {
  0% { transform: scale(1); }
  40% { transform: scale(.94); background-color: var(--orange-deep); }
  100% { transform: scale(1); }
}

/* cabeçalho da tela: caminho, título, uma linha de contexto e o botão da ação principal */
.pm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5em; }
.pm__head > div { min-width: 0; }
.pm__crumb { display: block; font-size: 1.15em; color: var(--ink-3); }
.pm__crumb span { margin: 0 .35em; }
.pm__h1 { display: block; margin-top: .1em; font: 400 2.3em/1.15 var(--serif); letter-spacing: -.005em; }
.pm__sub { display: block; margin-top: .35em; font-size: 1.25em; line-height: 1.35; color: var(--ink-2); }
.pm__sub b { font-weight: 600; color: var(--ink); }
.pm__head .pm__btn { margin-top: 1.9em; }

/* os quatro números da página inicial */
.pm__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9em; }
.pm__kpi { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: .9em .9em .9em; border: 1px solid var(--line); border-radius: 1.5em; background: #fff; box-shadow: var(--shadow-1); }
.pm__kh { display: flex; align-items: center; gap: .5em; max-width: 100%; margin-bottom: .7em; font-size: 1.05em; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm__kh i { display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: .6em; background: var(--orange-wash); color: var(--orange); }
.pm__kh .ic { width: 1.15em; height: 1.15em; }
.pm__kpi--sub .pm__kh i { background: var(--stage); color: var(--ink-2); }
.pm__ring { width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 4; }
.pm__ring circle:first-child { stroke-opacity: .18; }
.pm__ring circle:last-child { stroke-linecap: round; stroke-dasharray: 81.7; stroke-dashoffset: 81.7; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s var(--ease) .3s; }
.pm__kpi.is-on .pm__ring circle:last-child { stroke-dashoffset: var(--off, 81.7); }
.pm__kpi > b { font-size: 2.8em; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pm__kpi > em { max-width: 100%; margin-top: .4em; font-size: 1.1em; font-style: normal; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pm__row { display: flex; align-items: center; gap: .6em; min-width: 0; }
.pm__row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pm__pill--off { background: var(--stage); color: var(--ink-2); }
.pm__viagens .pm__pill { height: 1.9em; padding: 0 .7em; font-size: 1.05em; }
.pm__viagens .pm__prog .meter { height: .55em; }
.tour__scene .pm__precisa { gap: .8em; padding: 1.1em; }
.tour__scene .pm__pend li { padding: .75em .9em; }
.tour__scene .pm__viagens li { padding: .6em 1em .6em .6em; }

/* duas colunas dentro da tela (roteiro, avisos, equipe) */
.pm__duas--pdf, .pm__duas--avisos, .pm__duas--equipe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1.6em; }
.pm__duas--pdf .pm__col, .pm__duas--avisos .pm__col, .pm__duas--equipe .pm__col { align-items: stretch; gap: .9em; }
.pm__duas--pdf .pm__etapas { padding-inline: .2em; }
.pm__duas--pdf .pm__conferir { margin-top: .2em !important; }
.pm__duas--pdf .pm__acts { margin-top: -.2em; }
.pm__duas--pdf .pm__cidades { flex-wrap: wrap; }

/* documentos */
.pm__drop { display: flex; align-items: center; gap: 1em; padding: .9em 1.2em; border: 1.5px dashed color-mix(in srgb, var(--orange) 45%, transparent); border-radius: 1.3em; background: var(--orange-wash); }
.pm__drop > .ic { flex: none; width: 2em; height: 2em; color: var(--orange); }
.pm__drop b { display: block; font-size: 1.35em; font-weight: 600; line-height: 1.25; }
.pm__drop small { display: block; font-size: 1.15em; color: var(--ink-2); }
.pm__docs { display: flex; flex-direction: column; }
.pm__docs li { display: flex; align-items: center; gap: 1em; padding: .7em .2em; border-top: 1px solid var(--line); }
.pm__docs li:first-child { border-top: 0; }
.pm__docs .pm__ic { width: 3.1em; height: 3.1em; border: 0; border-radius: .9em; background: var(--stage); color: var(--ink-2); }
.pm__docs .pm__ic .ic { width: 1.55em; height: 1.55em; }
.pm__docs li > div { flex: 1; min-width: 0; }
.pm__docs b { display: block; font-size: 1.4em; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm__docs small { display: block; margin-top: .15em; font-size: 1.15em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm__up { flex: none; width: 9em; }
.pm__up i { display: block; height: .55em; border-radius: 99em; background: rgba(30, 29, 27, .08); overflow: hidden; }
.pm__up i::after { content: ""; display: block; width: 0; height: 100%; border-radius: inherit; background: var(--orange); }
.pm__docs li.is-on .pm__up i::after { width: 100%; transition: width 1.3s var(--ease) .2s; }
.pm__up small { margin-top: .4em; font-size: 1.05em; text-align: right; }
.pm__docs--mini li { padding: .45em .2em; }
.pm__docs--mini .pm__ic { width: 2.7em; height: 2.7em; }
.pm__env { display: none; }
.pm__docs li.is-done .pm__up { display: none; }
.pm__docs li.is-done .pm__env { display: inline-flex; }
.pm__doc--nova.is-done { animation: acende 1.6s var(--ease); border-radius: .8em; }

/* avisos */
.pm__compose { display: flex; flex-direction: column; align-items: flex-start; gap: .7em; padding: 1.1em 1.2em 1.2em; border: 1px solid var(--line); border-radius: 1.4em; background: #fff; box-shadow: var(--shadow-1); }
.pm__compose > small { font-size: 1.1em; font-weight: 600; color: var(--ink-2); }
.pm__typed { align-self: stretch; min-height: 4.8em; padding: .8em 1em; border: 1.5px solid var(--line-2); border-radius: 1em; font-size: 1.35em; line-height: 1.4; color: var(--ink); }
.pm__typed.is-typing { border-color: var(--ink); }
.pm__typed.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; background: var(--ink); vertical-align: -.15em; animation: pisca .9s steps(2) infinite; }
@keyframes pisca { to { opacity: 0; } }
.pm__radios { display: flex; gap: 1.4em; font-size: 1.25em; font-weight: 500; color: var(--ink-2); }
.pm__radios span { display: flex; align-items: center; gap: .45em; }
.pm__radios i { width: 1.1em; height: 1.1em; border: 1.5px solid var(--line-2); border-radius: 50%; background: #fff; }
.pm__radios .is-on { color: var(--ink); }
.pm__radios .is-on i { border: .32em solid var(--orange); }
.pm__msgs { display: flex; flex-direction: column; gap: .7em; }
.pm__msg { padding: .9em 1.1em 1em; border: 1px solid var(--line); border-radius: 1.2em; background: #fff; }
.pm__mh { display: flex; align-items: center; gap: .7em; font-size: 1.2em; }
.pm__mh b { font-weight: 600; }
.pm__mh time { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.pm__msg .pm__pill { height: 1.9em; padding: 0 .7em; font-size: .9em; }
.pm__msg p { margin-top: .45em; font-size: 1.3em; line-height: 1.4; color: var(--ink-2); }
.pm__msg--nova { border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: var(--orange-wash); }
.pm__msg--prog { border-style: dashed; }
.pm__duas--avisos, .pm__duas--equipe, .pm__duas--docs { align-items: stretch; }
.pm__duas--docs { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 1.6em; }
.pm__duas--docs .pm__col { align-items: stretch; gap: .9em; }
.pm__col--fone { gap: .6em; }
.pm__col--fone .pm__tela { flex: 1; }
.pm__tela { display: flex; flex-direction: column; gap: 1.6em; min-height: 17em; padding: 1.1em 1em; border-radius: 1.8em; background: linear-gradient(170deg, #2B3140, #15181F); color: #fff; box-shadow: var(--shadow-2); }
.pm__tela > small { font-size: 1.05em; font-weight: 600; text-align: center; opacity: .75; }
.pm__apptop { display: flex; flex-direction: column; gap: .15em; padding: 0 .3em; }
.pm__apptop small { font-size: .95em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.pm__apptop b { font: 400 2.2em/1.1 var(--serif); }
.pm__apptop span { font-size: 1.15em; opacity: .65; }
.pm__appdocs { display: flex; flex-direction: column; gap: .5em; }
.pm__appdocs li { display: flex; align-items: center; gap: .8em; padding: .7em .9em; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1.1em; background: rgba(255, 255, 255, .07); }
.pm__appdocs .pm__ic { width: 2.6em; height: 2.6em; border: 0; border-radius: .8em; background: rgba(255, 255, 255, .1); color: color-mix(in oklab, var(--orange) 56%, #fff); }
.pm__appdocs .pm__ic .ic { width: 1.35em; height: 1.35em; }
.pm__appdocs li > div { flex: 1; min-width: 0; }
.pm__appdocs b { display: block; font-size: 1.3em; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm__appdocs small { display: block; font-size: 1.05em; opacity: .6; }
.pm__salvo { display: inline-flex; align-items: center; gap: .3em; flex: none; font-size: 1em; font-weight: 600; color: color-mix(in oklab, var(--orange) 56%, #fff); white-space: nowrap; }
.pm__salvo .ic { width: 1.1em; height: 1.1em; stroke-width: 2.4; }
.pm__push { display: flex; gap: .9em; align-items: flex-start; padding: 1em 1.1em; border-radius: 1.4em; background: rgba(255, 255, 255, .96); color: var(--ink); }
.pm__push .mono { width: 3em; height: 3em; border-radius: .85em; font-size: 1em; }
.pm__push > div { min-width: 0; }
.pm__push b { display: flex; align-items: baseline; gap: .6em; font-size: 1.25em; font-weight: 600; }
.pm__push b small { margin-left: auto; font-size: .85em; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.pm__push p { margin-top: .25em; font-size: 1.25em; line-height: 1.35; color: var(--ink-2); }

/* equipe */
.pm__members { display: flex; flex-direction: column; gap: .7em; }
.pm__members li { display: flex; align-items: center; gap: .9em; padding: .85em 1.1em; border: 1px solid var(--line); border-radius: 1.3em; background: #fff; box-shadow: var(--shadow-1); }
.pm__members li > div { min-width: 0; }
.pm__members b { display: flex; align-items: center; gap: .6em; font-size: 1.4em; font-weight: 600; line-height: 1.2; }
.pm__members b .pm__pill { height: 1.7em; padding: 0 .6em; font-size: .78em; }
.pm__members small { display: block; margin-top: .2em; font-size: 1.15em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm__member--nova { border-style: dashed !important; }
.av--nova { background: var(--orange-wash); color: var(--orange); }
.pm__form { display: flex; flex-direction: column; align-items: flex-start; gap: .8em; padding: 1.2em; border: 1px solid var(--line); border-radius: 1.4em; background: #fff; box-shadow: var(--shadow-1); }
.pm__form .pm__s { margin-top: -.5em; }
.pm__form label { display: flex; flex-direction: column; gap: .35em; align-self: stretch; }
.pm__form label small { font-size: 1.1em; font-weight: 600; color: var(--ink-2); }
.pm__input { display: flex; align-items: center; min-height: 3.1em; padding: 0 1em; border: 1.5px solid var(--line-2); border-radius: .9em; font-size: 1.3em; white-space: nowrap; overflow: hidden; }
.pm__input.is-typing { border-color: var(--ink); }
.pm__input.is-typing::after { content: ""; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--ink); animation: pisca .9s steps(2) infinite; }
.pm__input--sel .ic { width: 1.2em; height: 1.2em; margin-left: auto; color: var(--ink-3); }
.pm__form .pm__btn { margin-top: .2em; }

/* o que cada papel pode (equipe) */
.pm__papeis { display: flex; flex-direction: column; gap: .7em; padding: 1.1em 1.2em; border-radius: 1.4em; background: var(--stage); }
.pm__papeis ul { display: flex; flex-direction: column; gap: .5em; }
.pm__papeis li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .6em; font-size: 1.25em; line-height: 1.35; color: var(--ink-2); }
.pm__papeis li b { font-weight: 600; color: var(--ink); }

/* modelos */
.pm__tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em; }
.pm__tpl { display: flex; gap: 1em; align-items: flex-start; padding: 1.1em; border: 1px solid var(--line); border-radius: 1.5em; background: #fff; box-shadow: var(--shadow-1); }
.pm__tpl img, .pm__tpl > i { flex: none; width: 4.4em; height: 4.4em; border-radius: 1.1em; object-fit: cover; }
.pm__tpl > i { display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--orange); }
.pm__tpl > i .ic { width: 2em; height: 2em; }
.pm__tpl > div { flex: 1; min-width: 0; }
.pm__tpl b { display: block; font-size: 1.4em; font-weight: 600; line-height: 1.2; }
.pm__tpl small { display: block; margin-top: .2em; font-size: 1.15em; line-height: 1.35; color: var(--ink-3); }
.pm__tags { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .7em; }
.pm__tags span { padding: .25em .7em; border-radius: 99em; background: var(--stage); font-size: 1.05em; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.pm__tpl--add { border-style: dashed; background: var(--stage); box-shadow: none; }
.pm__tpl { transition: border-color .3s, box-shadow .3s; }
.pm__tpl.is-pressed { animation: pm-toca .55s var(--ease); border-color: color-mix(in srgb, var(--orange) 55%, transparent); box-shadow: 0 0 0 .3em var(--orange-wash); }
@keyframes pm-toca {
  40% { transform: scale(.965); }
}
.pm__toast { position: absolute; left: 50%; bottom: 1.6em; display: flex; align-items: center; gap: .9em; padding: .8em 1.3em .8em .9em; border: 1px solid var(--line); border-radius: 1.5em; background: #fff; box-shadow: var(--shadow-2); white-space: nowrap; translate: -50% 0; }
.pm__toast b { display: block; font-size: 1.3em; font-weight: 600; line-height: 1.2; }
.pm__toast small { display: block; font-size: 1.15em; color: var(--ink-3); }

/* Duas medidas decidem o desenho: a largura da janela (cena) diz se a barra lateral cabe;
   a largura do conteúdo (main) diz quantas colunas o conteúdo tem. */

/* Janela média (tablet, ou o site numa coluna estreita): sai a barra lateral; a letra não desce de 9 px */
@container cena (max-width: 899px) {
  .cena--tour .pm--tour { height: 58em; font-size: max(1.25cqw, 9px); }
  .pm__shell { grid-template-columns: minmax(0, 1fr); }
  .pm__side { display: none; }
}

/* Janela estreita (celular): mais alta, e a letra mede pela largura */
@container cena (max-width: 619px) {
  .cena--tour .pm--tour { height: 58em; font-size: clamp(8.4px, 2.65cqw, 10px); }
}

/* Conteúdo bem largo (a janela de uma borda à outra): três modelos por linha e as colunas de apoio com teto */
@container main (min-width: 880px) {
  .tour__scene { padding: 2em 2.4em 1.8em; }
  .pm__tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm__duas--docs { grid-template-columns: minmax(0, 1fr) minmax(0, 38em); }
  .pm__duas--avisos { grid-template-columns: minmax(0, 1fr) minmax(0, 40em); }
  .pm__duas--equipe { grid-template-columns: minmax(0, 1fr) minmax(0, 46em); }
}

/* Conteúdo estreito: uma coluna só, números de dois em dois, sem as peças que não cabem (.pm__amplo) */
@container main (max-width: 479px) {
  .pm__amplo { display: none !important; }
  .tour__scene { padding: 1.5em 1.5em 1.3em; gap: 1em; }
  .pm__head .pm__btn { display: none; }
  .pm__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }
  .pm__kpi { padding: .8em; }
  .pm__kh { margin-bottom: .5em; }
  .pm__kpi > b { font-size: 2.5em; }
  .pm__duas--pdf, .pm__duas--avisos, .pm__duas--equipe, .pm__duas--docs { grid-template-columns: minmax(0, 1fr); }
  .pm__col--fone { display: none; }
  .pm__tpls { grid-template-columns: minmax(0, 1fr); }
  .pm__tpl--add { display: none; }
}

/* ---------- Sua marca ---------- */

.lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }

.lab__form { display: flex; flex-direction: column; gap: 22px; max-width: 480px; margin-top: 32px; }

.field { display: block; }
.field > span, .swatches legend { display: block; margin-bottom: 9px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field input {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1.5px solid var(--line-2);
  border-radius: 16px;
  background: #fff;
  font-size: 19px;
  font-weight: 500;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #B5B0A8; }
.field input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(30, 29, 27, .08); }

.swatches { margin: 0; padding: 0; border: 0; min-width: 0; }
.swatches__row { display: flex; flex-wrap: wrap; gap: 13px; }
.swatches label { position: relative; display: block; width: 40px; height: 40px; cursor: pointer; }
.swatches input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatches label i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--c); color: var(--ink-2); transition: transform .3s var(--spring), box-shadow .25s; }
.swatches label:hover i { transform: scale(1.08); }
.swatches input:checked + i, .swatches__livre.is-on i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.swatches input:focus-visible + i { outline: 2.5px solid var(--ink); outline-offset: 7px; }
.swatches__livre i { border: 1.5px dashed var(--line-2); background: #fff; }
.swatches__livre.is-on i { border: 0; background: var(--c); color: #fff; }

.lab__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 30px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.lab__list li { display: flex; gap: 12px; }
.lab__list .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--orange); }
.lab__list b { display: block; font-size: 16px; font-weight: 600; }
.lab__list span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lab__note { margin-top: 28px; font-size: 14px; color: var(--ink-3); }

.lab__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 56px) 20px;
  border-radius: 40px;
  background: color-mix(in srgb, var(--brand) 7%, var(--stage));
  overflow: hidden;
  transition: background-color .6s var(--ease);
}
.lab__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  opacity: .14;
  filter: blur(70px);
  transform: translate(-50%, -50%);
  transition: background-color .6s var(--ease);
}
/* os dois celulares medem pela largura do bloco (cqw): nunca saem dele */
.lab__phones { position: relative; width: min(100%, 488px); aspect-ratio: 488 / 566; container-type: inline-size; }
.phone--a { position: absolute; left: 0; top: 8.2%; --w: 46.7cqw; transform: rotate(-6deg); transform-origin: 60% 60%; }
.phone--b { position: absolute; right: 0; top: 0; --w: 54.1cqw; }

/* ---------- Planos ---------- */
/* Dois desenhos para os mesmos planos: "tabela" (.pt) e "cartoes" (.pc).
   O atributo data-modelo da seção #planos escolhe qual aparece. */

.plans__top { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; }

.cycle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; }
.cycle button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 28px; border: 0; border-radius: 999px; background: none; font-size: 15.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: color .3s; }
.cycle button[aria-checked="true"], .cycle button[aria-selected="true"] { color: #fff; }
.cycle > i { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); transition: transform .45s var(--ease); }
.cycle[data-pos="1"] > i { transform: translateX(100%); }
.cycle__tag { white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: var(--orange-wash); font-size: 12px; font-weight: 700; color: var(--ink); transition: background-color .3s, color .3s; }
.cycle button[aria-checked="true"] .cycle__tag { background: rgba(255, 255, 255, .18); color: #fff; }

#planos[data-modelo="tabela"] .pc, #planos[data-modelo="cartoes"] .pt { display: none; }

/* Peças comuns aos dois desenhos */
.plan__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.plan__for { margin-top: 5px; font-size: 15px; color: var(--ink-2); }
.price { display: flex; align-items: flex-end; gap: 8px; margin: 20px 0 0; }
.price > span { padding-bottom: 5px; font-size: 17px; font-weight: 600; color: var(--ink-2); }
.price b { font: 600 48px/1 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.price small { padding-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.price__nota { margin: 7px 0 18px; font-size: 13.5px; color: var(--ink-3); }

.incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 22px; font-size: 15px; font-weight: 500; }
.incl li, .pay li { display: flex; align-items: center; gap: 9px; }
.incl .ic { width: 18px; height: 18px; color: var(--orange); stroke-width: 2.4; }
.pay { display: flex; flex-wrap: wrap; gap: 8px; }
.pay li { height: 38px; padding: 0 15px 0 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; }
.pay .ic { width: 18px; height: 18px; color: var(--ink-2); }

.plans__mais { margin-top: 24px; text-align: center; font-size: 15.5px; color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Desenho "tabela": uma peça só, os três planos em colunas --- */

.pt { max-width: 1100px; margin: 34px auto 0; border: 1px solid var(--line-2); border-radius: 30px; background: #fff; box-shadow: var(--shadow-1); }
.pt__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); padding: 14px 14px 16px; }
.pt__rotulos, .pt__plano { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; }
.pt__rotulos { grid-column: 1; }
.pt__dica { align-self: end; max-width: 250px; padding: 0 20px 30px 18px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.pt__rotulos span { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 18px; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 500; }
.pt__rotulos .ic { width: 19px; height: 19px; color: var(--orange); }

.pt__plano { position: relative; z-index: 1; text-align: center; }
.pt__plano:nth-of-type(1) { grid-column: 2; }
.pt__plano:nth-of-type(2) { grid-column: 3; }
.pt__plano:nth-of-type(3) { grid-column: 4; }
.pt__topo { display: flex; flex-direction: column; align-items: center; padding: 30px 16px 26px; }
.pt__topo h3 { font: 400 32px/1.1 var(--serif); }
.pt__topo .btn { width: min(100%, 210px); }
.pt__valor { display: flex; align-items: center; justify-content: center; min-height: 58px; border-top: 1px solid var(--line); font-size: 18px; }
.pt__valor b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pt__rot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a moldura do plano recomendado abraça a coluna inteira */
.pt__destaque { grid-column: 3; grid-row: 1 / span 4; border: 1.5px solid var(--ink); border-radius: 22px; background: #fff; box-shadow: var(--shadow-2); pointer-events: none; }
.pt__plano--top .plan__tag { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); }
.pt__plano--top .pt__valor { margin-inline: 1.5px; }

.pt__todos { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 3fr); align-items: center; padding: 22px 32px; border-top: 1px solid var(--line); }
.pt__todos > b { font-size: 15.5px; font-weight: 600; }
.pt__todos--pag { border-radius: 0 0 29px 29px; background: var(--stage); }

/* --- Desenho "cartoes": três cartões enxutos e uma faixa comum --- */

.pc { max-width: 1100px; margin: 34px auto 0; }
.pc__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border: 1px solid var(--line-2); border-radius: 26px; background: #fff; }
.plan--top { border: 1.5px solid var(--ink); box-shadow: var(--shadow-2); }
.plan > .plan__tag { position: absolute; left: 26px; top: -13px; }
.plan h3 { font: 400 30px/1.1 var(--serif); }
.plan__specs { display: flex; flex-direction: column; margin-bottom: 20px; padding: 3px 16px; border-radius: 16px; background: var(--stage); }
.plan__specs li { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: 15px; }
.plan__specs li + li { border-top: 1px solid var(--line); }
.plan__specs .ic { width: 18px; height: 18px; color: var(--orange); }
.plan__specs span { flex: 1; color: var(--ink-2); }
.plan__specs b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan .btn { width: 100%; margin-top: auto; }
.pc__todos { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 34px; margin-top: 16px; padding: 20px 26px; border-radius: 22px; background: var(--stage); }
.pc__todos > b { font-size: 15px; font-weight: 600; }

/* ---------- Dúvidas ---------- */

.faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.faq-wrap .sec-head { position: sticky; top: 124px; }

.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item button { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 24px 4px; border: 0; background: none; text-align: left; font-size: 19px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.faq__item button .ic { width: 22px; height: 22px; color: var(--ink-2); transition: transform .45s var(--ease), color .2s; }
.faq__item.is-open button .ic { transform: rotate(45deg); color: var(--orange); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s .45s; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }
.faq__a p { max-width: 620px; padding: 0 44px 26px 4px; color: var(--ink-2); }

html:not(.js) .faq__a { grid-template-rows: 1fr; }
html:not(.js) .faq__a > div { visibility: visible; }

/* ---------- Chegada ---------- */

.cta { display: flex; flex-direction: column; align-items: center; margin-top: 148px; padding: 92px 32px 100px; border-radius: 48px; background: var(--stage); text-align: center; }
.cta__mark { width: 150px; height: 150px; overflow: visible; }
.cta__mark path { fill: none; stroke: var(--orange); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
/* O símbolo se desenha, fica um tempo inteiro, segue viagem e recomeça, sem parar */
.js .cta__mark path { stroke-dashoffset: 1.1; }
.js .cta.is-in .cta__mark path { animation: desenha 6.4s cubic-bezier(.5, 0, .2, 1) .35s infinite both; }
@keyframes desenha {
  0% { stroke-dashoffset: 1.1; }
  36% { stroke-dashoffset: 0; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1.1; }
}
/* a frase do logo, embaixo do símbolo */
.cta__frase { margin-top: 6px; font: 400 clamp(20px, 2vw, 26px)/1.2 var(--serif); letter-spacing: .06em; color: var(--ink-2); }
.js .cta__frase { opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease) 1.6s, transform .8s var(--ease) 1.6s; }
.js .cta.is-in .cta__frase { opacity: 1; transform: none; }
.cta .h2 { max-width: 15em; margin-top: 40px; }
.cta .hero__cta { margin-top: 38px; }

/* ---------- Rodapé ---------- */

.foot { padding: 76px 0 44px; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px 40px; }
.foot__brand p { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 15.5px; font-weight: 500; }
.foot__nav a { padding: 6px 0; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.foot__nav a:hover { color: var(--ink); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }

/* ==========================================================================
   Telas de conta (entrar.html) e página provisória do painel (painel.html)
   ========================================================================== */

.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 100vh; min-height: 100dvh; }

.auth__form { display: flex; flex-direction: column; padding: 34px clamp(24px, 6vw, 88px) 34px; }
.auth__box { width: 100%; max-width: 440px; margin: auto; padding: 48px 0; }

.auth__tabs { margin-bottom: 36px; }
.auth__tabs[hidden], .auth__back[hidden] { display: none; }
.auth__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.auth__back:hover { color: var(--ink); }
.auth__back .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.auth__back:hover .ic { transform: translateX(-3px); }

/* Cada tela entra com um leve movimento quando aparece */
.view { animation: entra .5s var(--ease) both; }
.view[hidden], [data-passo][hidden] { display: none; }
[data-passo] { animation: entra .5s var(--ease) both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(12px); }
}
.view h1 { font: 400 clamp(34px, 3.6vw, 44px)/1.08 var(--serif); letter-spacing: -.01em; }
.view h1:focus { outline: none; }
.auth__sub { margin-top: 10px; color: var(--ink-2); }
.auth__sub b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

.view form { display: flex; flex-direction: column; gap: 16px; }
.view form > .field:first-of-type { margin-top: 26px; }
.view form .btn { width: 100%; margin-top: 8px; }

.field > label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.view .field input { height: 56px; font-size: 17px; }
.field__wrap { position: relative; }
.field__wrap input { padding-right: 58px; }
.field__olho { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--ink-3); transform: translateY(-50%); cursor: pointer; transition: color .2s, background-color .2s; }
.field__olho:hover { background: var(--stage); color: var(--ink); }
.field__olho .ic { width: 21px; height: 21px; }

.field__dica, .field__erro { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.4; }
.field__dica { color: var(--ink-3); }
.field__erro { font-weight: 500; color: #B4391F; }
.field__erro:empty { display: none; }
.field.is-erro input { border-color: #B4391F; }
.field.is-erro input:focus { box-shadow: 0 0 0 4px rgba(180, 57, 31, .12); }
.field.is-erro .field__dica { display: none; }

.forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.forca i { height: 4px; border-radius: 4px; background: rgba(30, 29, 27, .1); transition: background-color .3s; }
.forca[data-n="1"] i:nth-child(-n+1), .forca[data-n="2"] i:nth-child(-n+2), .forca[data-n="3"] i:nth-child(-n+3), .forca[data-n="4"] i { background: var(--orange); }

.auth__row { margin-top: -4px; text-align: right; font-size: 14.5px; }
.auth__row a, .auth__link { font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.auth__row a:hover, .auth__link:hover { color: var(--ink); }
.auth__link { font-size: 15px; }
.auth__msg { min-height: 22px; margin-top: 16px; font-size: 14.5px; color: var(--ink-2); }

/* Botão enquanto "envia" */
.btn.is-busy { pointer-events: none; }
.btn.is-busy .ic { display: none; }
.btn.is-busy::after { content: ""; width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira {
  to { transform: rotate(360deg); }
}
.btn:disabled { cursor: default; }
.btn--line:disabled { color: var(--ink-3); }

/* Escolha do plano ao criar a conta */
.pick { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.pick legend { margin-bottom: 9px; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pick label { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick__planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pick__planos span { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 13px; border: 1.5px solid var(--line-2); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.pick__planos b { font: 400 21px/1.1 var(--serif); }
.pick__planos small { font-size: 13px; color: var(--ink-2); }
.pick__planos small i { font-weight: 600; color: var(--ink); }
.pick__planos input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pick input:focus-visible + span { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.pick__ciclo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pick__ciclo span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s; }
.pick__ciclo input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.pick__ciclo a { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-underline-offset: 4px; }
.pick__ciclo a:hover { color: var(--ink); }

/* Telas de aviso: e-mail enviado, senha alterada */
.view__ic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 24px; border-radius: 20px; background: var(--orange-wash); color: var(--orange); }
.view__ic .ic { width: 28px; height: 28px; }
.view__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }

/* Convite da equipe */
.convite { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; }
.convite > span:nth-child(2) { flex: 1; min-width: 0; }
.convite b { display: block; font-size: 15px; line-height: 1.25; }
.convite small { font-size: 13px; color: var(--ink-3); }

.auth__demo { display: flex; gap: 10px; margin-top: 34px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 16px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.auth__demo > .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--orange); }
.auth__telas { margin-top: 8px; }
.auth__telas a { margin-right: 10px; font-weight: 600; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
.auth__foot { font-size: 14px; color: var(--ink-3); }

.auth__side { position: sticky; top: 16px; align-self: start; height: calc(100vh - 32px); height: calc(100dvh - 32px); display: flex; flex-direction: column; justify-content: center; margin: 16px; padding: 64px clamp(32px, 5vw, 84px); border-radius: 40px; background: var(--stage); overflow: hidden; }
.auth__mark { width: 84px; height: 84px; color: var(--orange); }
.auth__side blockquote { margin: 26px 0 0; font: 400 clamp(40px, 4.6vw, 68px)/1.04 var(--serif); letter-spacing: -.015em; }
.auth__side p { max-width: 420px; margin-top: 20px; font-size: 18px; color: var(--ink-2); }
.auth__card { display: flex; flex-direction: column; gap: 9px; max-width: 420px; margin-top: 48px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-2); font-size: 14px; line-height: 1.35; }
.auth__card .vrow { border-color: transparent; background: var(--stage); }
.auth__wm { position: absolute; right: -90px; bottom: -110px; width: 460px; height: 460px; color: rgba(30, 29, 27, .045); pointer-events: none; }

/* Página provisória do painel */
.soon { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 34px clamp(24px, 6vw, 88px); }
.soon__box { max-width: 720px; margin: auto 0; padding: 64px 0 96px; }
.soon__box .hero__cta { justify-content: flex-start; margin-top: 36px; }

/* ==========================================================================
   Computador: tudo 7% menor, como um "zoom out" do navegador
   ========================================================================== */

/* O zoom vale para a página inteira. O que mede a tela (100vh, 100vw) é corrigido para
   continuar do tamanho da tela; o js/site.js faz o mesmo para a rolagem horizontal. */
@media (min-width: 961px) {
  body { zoom: var(--zoom); }
  .flow.is-h { --lado: max(48px, calc((100vw / var(--zoom) - var(--wrap)) / 2 - 16px)); }
  .flow.is-h .flow__pin { height: calc(100vh / var(--zoom)); height: calc(100dvh / var(--zoom)); }
  .auth { min-height: calc(100vh / var(--zoom)); min-height: calc(100dvh / var(--zoom)); }
  .auth__side { height: calc((100vh - 32px) / var(--zoom)); height: calc((100dvh - 32px) / var(--zoom)); }
  .soon { min-height: calc(100vh / var(--zoom)); min-height: calc(100dvh / var(--zoom)); }
}

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

@media (max-width: 1100px) {
  /* janela mais estreita: sai a barra lateral, a lista continua inteira */
  .stage { gap: 28px; padding: 36px; }
  .side { display: none; }
  .win__body { grid-template-columns: minmax(0, 1fr); }
  .tour { padding: 20px 24px 24px; border-radius: 32px; }
  .tour__list { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
  .tour__stage { padding: 0 clamp(12px, 4%, 40px); }
  .lab { gap: 40px; }
  .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__toggle { display: grid; }
  .nav.is-open .nav__sheet { display: flex; }

  .sec { padding: 108px 0; }
  .sec--tight { padding-top: 0; }
  .flow__stage { padding: 96px 0 100px; }

  .problem { grid-template-columns: minmax(0, 1fr); }
  .chat { max-width: 520px; width: 100%; margin-inline: auto; }

  .flow__lane { padding-top: 0; }
  .flow__road, .step__stop { display: none; }
  .flow__steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

  .lab { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lab__text { display: contents; }
  .lab__text > * { order: 1; }
  .lab__stage { order: 2; margin-top: 40px; }
  .lab__text > .lab__list { order: 3; margin-top: 40px; }
  .lab__text > .lab__note { order: 4; }

  /* tabela: cada plano vira um bloco, com o nome de cada limite ao lado do valor */
  .pt { max-width: 560px; }
  .pt__grid { display: block; padding: 10px; }
  .pt__rotulos, .pt__destaque { display: none; }
  .pt__plano { display: block; padding: 4px 6px 8px; border: 1px solid transparent; border-radius: 20px; text-align: left; }
  .pt__plano--top { margin-block: 8px; border-color: var(--ink); box-shadow: var(--shadow-2); }
  .pt__plano--top .plan__tag { left: 20px; transform: none; }
  .pt__topo { align-items: flex-start; padding: 22px 14px 16px; }
  .pt__topo .btn { width: 100%; }
  .pt__valor { justify-content: space-between; min-height: 48px; margin-inline: 14px; font-size: 16px; }
  .pt__plano--top .pt__valor { margin-inline: 14px; }
  .pt__rot { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; font-size: 15px; color: var(--ink-2); }
  .pt__todos { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 24px; }

  .pc { max-width: 560px; }
  .pc__cards { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pc__todos { grid-template-columns: minmax(0, 1fr); }

  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faq-wrap .sec-head { position: static; }

  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
  .facts li:nth-child(odd) { padding-left: 0; border-left: 0; }

  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__side { display: none; }
}

/* Tablet e janela estreita (641 a 960 px): em cada passo, o texto à esquerda e o quadro à direita */
@media (min-width: 641px) and (max-width: 960px) {
  .flow__steps { max-width: none; }
  .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: center; gap: 28px; padding: 26px 26px 26px 30px; }
  .step__text { align-self: stretch; }
}

@media (max-width: 860px) {
  /* a janela em cima e o celular inteiro embaixo, apoiado na borda dela */
  .stage { display: block; margin-top: 56px; padding: 20px 20px 40px; border-radius: 30px; overflow: hidden; }
  .win { height: auto; border-radius: 16px; }
  .win__body { height: auto; }
  .trip__read { display: none; }
  .main { padding: 18px 18px 48px; }
  .stage .phone--hero { margin: -40px auto 0; --w: 232px; }
  .facts { margin-top: 64px; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { width: min(100% - 40px, var(--wrap)); }
  .nav__criar { display: none; }
  .cycle button { padding: 0 16px; }
  .nav__bar { padding-left: 18px; }

  .hero { padding-top: 124px; }
  .hero__cta .btn { width: 100%; }

  /* menos branco entre as seções: a página fica bem mais curta no celular */
  .sec { padding: 64px 0; }
  .sec--tight { padding-top: 0; }
  .flow__stage { margin: 0 8px; padding: 56px 0 44px; border-radius: 34px; }
  .facts { margin-top: 48px; gap: 28px 0; }
  .sec-head .lead { margin-top: 16px; }

  /* faixa que desliza de lado, com o dedo: "Como funciona" */
  .flow__steps {
    display: flex;
    align-items: stretch;
    gap: 14px;
    max-width: none;
    padding-block: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .flow__steps::-webkit-scrollbar { display: none; }
  .flow__steps { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
  .flow__steps > .step { flex: none; width: min(84vw, 340px); scroll-snap-align: center; }
  .pontos { display: flex; justify-content: center; gap: 7px; margin-top: 20px; }
  .pontos i { width: 7px; height: 7px; border-radius: 99px; background: rgba(30, 29, 27, .16); transition: width .35s var(--ease), background-color .35s; }
  .pontos i.is-on { width: 22px; background: var(--orange); }

  .trip__img { width: 48px; height: 48px; }
  .trip__t b { font-size: 23px; }
  .tabs { gap: 16px; }
  .tabs span:nth-child(n+4) { display: none; }
  .doc__t small { display: none; }
  .chip--seen small { display: none; }

  .problem { margin-top: 36px; }
  .phone--chat { --w: min(300px, 100vw - 72px); }
  .compare__head { display: none; }
  .compare__row { grid-template-columns: minmax(0, 1fr); }
  .compare__row > div { padding: 14px 20px; font-size: 15.5px; }
  .compare__row > div:first-child { align-items: flex-start; padding-bottom: 12px; font-size: 14.5px; }
  .compare__row > div:first-child::before { content: "Hoje: "; margin-right: 5px; font-weight: 700; }
  .compare__row + .compare__row > div:last-child { border-top: 0; }

  .step { gap: 20px; padding: 22px; }
  .step__n { font-size: 46px; }
  .step h3 { margin-top: 14px; }
  .cena--poco { border-radius: 18px; }
  .tour { gap: 12px; margin: 40px -12px 0; padding: 16px 14px 16px; border-radius: 30px; }   /* sai 12 px da coluna, para a janela ter mais largura */
  .tour__stage { padding: 0; }
  .tela__moldura { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .tela__moldura::before, .tela__base { display: none; }
  .cena--tour { border-radius: 1.9em; overflow: visible; background: none; }
  .tela .pm--tour { border: 1px solid var(--line); border-radius: 1.9em; box-shadow: var(--shadow-1); }
  .tour__list { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .tour__btn { gap: 8px; padding: 9px 15px 9px 12px; }
  .tour__n { font-size: 13px; }
  .tour__tx b { font-size: 15px; }
  .tour__now { min-height: 0; font-size: 15.5px; }

  .lab__list { grid-template-columns: minmax(0, 1fr); }
  .lab__stage { padding: 28px 16px; border-radius: 30px; }
  .lab__phones { width: min(100%, 320px); }

  .incl { grid-template-columns: minmax(0, 1fr); }

  .faq__item button { padding: 20px 2px; font-size: 17.5px; }
  .faq__a p { padding-right: 8px; }

  .cta { margin-top: 64px; padding: 52px 22px 58px; border-radius: 34px; }
  .cta__mark { width: 118px; height: 118px; }
  .cta .h2 { margin-top: 30px; }
  .foot__legal { flex-direction: column; }
}

/* selos de pagamento: os dois na mesma linha até em tela de 360 */
@media (max-width: 400px) {
  .pay { gap: 6px; }
  .pay li { gap: 7px; padding: 0 12px 0 9px; font-size: 13.5px; }
  .pay .ic { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta__mark path { animation: none !important; stroke-dashoffset: 0 !important; }
  .tour__bar { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}