/* =========================================================
   Fixme! — pré-cadastro de profissionais
   Mobile-first · CSS puro · tokens em :root
   ========================================================= */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Fallbacks com largura ajustada (medida) para a troca de fonte não empurrar o layout (CLS) */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 700 800;
  size-adjust: 97%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular");
  font-weight: 400 600;
  size-adjust: 99.5%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 700;
  size-adjust: 95%;
}

:root {
  --azul: #0A4BAF;
  --azul-escuro: #083C8C;
  --azul-claro: #E3ECFA;
  --azul-num: #5E86D0;
  --noite: #0E2A5A;
  --noite-fundo: #0B2149;
  --laranja: #F7782A;
  --laranja-hover: #FF8A3D;
  --laranja-sombra: #C2581A;
  --fundo: #F5F7FB;
  --papel: #FFFFFF;
  --texto: #13213A;
  --suave: #4A5872;
  --claro-sobre-noite: #C5D3EA;
  --linha: #E1E7F0;
  --tracejado: #BFCADB;
  --campo: #B9C5D8;
  --erro: #B42318;
  --erro-fundo: #FDECEA;
  --aviso: #7A4100;
  --aviso-fundo: #FFF3E3;

  --f-titulo: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
  --f-texto: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --raio: 16px;
  --sombra: 0 1px 0 rgba(14, 42, 90, .05), 0 12px 28px -16px rgba(14, 42, 90, .35);
  --wrap: 1200px;
  --gutter: 16px;
  --topo-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --topo-h: 72px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1rem/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: .15em; }
h1, h2, h3 { font-family: var(--f-titulo); margin: 0; font-optical-sizing: auto; }
p { margin: 0; }
[hidden] { display: none !important; }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.pro :focus-visible, .cta :focus-visible, .rodape :focus-visible { outline-color: var(--laranja); }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

.skip {
  position: absolute; left: 8px; top: -80px; z-index: 100;
  background: var(--noite); color: #fff; padding: 12px 16px; border-radius: 8px; font-weight: 700;
}
.skip:focus { top: 8px; }

/* ---------- tipografia de seção ---------- */
.sec { padding: 72px 0; }
@media (min-width: 960px) { .sec { padding: 120px 0; } }

.kicker {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul); margin-bottom: 14px;
}
.kicker::before { content: ""; width: 28px; height: 3px; background: var(--laranja); }
.kicker--claro { color: #A9C4F2; }

.titulo {
  font-weight: 800;
  font-size: clamp(2.05rem, 4.2vw + 1rem, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--noite);
  text-wrap: balance;
}
.lead { margin-top: 16px; font-size: clamp(1.0625rem, .5vw + .95rem, 1.25rem); color: var(--suave); max-width: 52ch; }

/* Risco laranja que se desenha (caneta). Sem JS ele aparece desenhado. */
.risco { position: relative; display: inline-block; white-space: nowrap; }
.risco__svg { position: absolute; left: -2%; bottom: -.2em; width: 104%; height: .34em; overflow: visible; pointer-events: none; }
.risco__svg path {
  fill: none; stroke: var(--laranja); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 1 2;
  animation: desenhar 1s cubic-bezier(.65, 0, .35, 1) .35s both;
}
.risco--rolagem.aguarda .risco__svg path { animation-play-state: paused; }
@keyframes desenhar {
  from { stroke-dashoffset: 1.01; }
  to { stroke-dashoffset: 0; }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 10px; cursor: pointer;
  font: 700 1.0625rem/1.1 var(--f-titulo); letter-spacing: -.01em; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn--cta { background: var(--laranja); color: var(--noite); box-shadow: 0 3px 0 var(--laranja-sombra); }
.btn--cta:hover { background: var(--laranja-hover); transform: translateY(-1px); box-shadow: 0 4px 0 var(--laranja-sombra); }
.btn--cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--laranja-sombra); }
.btn--azul { background: var(--azul); color: #fff; }
.btn--azul:hover { background: var(--azul-escuro); }
.btn--ghost { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px var(--campo); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--suave); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.btn--bloco { width: 100%; min-height: 56px; font-size: 1.125rem; }
.btn--grande { min-height: 60px; padding: 0 28px; font-size: 1.25rem; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .ico { display: none; }
.spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.btn-link {
  display: block; width: 100%; min-height: 44px; margin-top: 6px;
  background: none; border: 0; cursor: pointer;
  font: 600 .9375rem var(--f-texto); color: var(--azul); text-decoration: underline; text-underline-offset: .15em;
}

/* ---------- header ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--topo-h); }
.topo__nav { display: none; }
@media (min-width: 820px) {
  .topo__nav { display: flex; gap: 28px; margin-left: auto; }
  .topo__nav a {
    color: var(--texto); font-weight: 600; text-decoration: none;
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .topo__nav a:hover { color: var(--azul); text-decoration: underline; }
}

.logo { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; }
.logo__txt { font: 800 1.625rem/1 var(--f-titulo); letter-spacing: -.045em; color: var(--azul); }
.logo__bang {
  display: inline-grid; place-items: center;
  width: .62em; height: .86em; margin-left: .06em;
  background: var(--laranja); color: var(--noite);
  border-radius: .14em; font-size: .9em; transform: rotate(7deg) translateY(-.04em);
}
.logo--claro .logo__txt { color: #fff; }

/* ---------- placeholders de imagem ---------- */
.r-4x5 { aspect-ratio: 4 / 5; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-tela { aspect-ratio: 9 / 19.5; }
.r-1x1 { aspect-ratio: 1; }
img.r-4x5, img.r-3x2, img.r-tela, img.r-1x1 { width: 100%; object-fit: cover; }

.ph {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px; text-align: center;
  background-color: rgba(255, 255, 255, .7);
  background-image: repeating-linear-gradient(-45deg, rgba(14, 42, 90, .07) 0 10px, transparent 10px 20px);
  border: 2px dashed rgba(14, 42, 90, .35);
  border-radius: 12px;
  color: var(--noite);
}
.ph__nome { font: 700 .875rem/1.2 ui-monospace, Consolas, monospace; word-break: break-all; }
.ph__ratio { font-size: .75rem; color: var(--suave); }

/* ---------- etiqueta "exemplo" ---------- */
.etq-exemplo {
  position: absolute; top: -11px; left: 14px; z-index: 2;
  padding: 2px 9px; border-radius: 999px;
  background: var(--papel); border: 1.5px dashed var(--suave);
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave);
}
.etq-exemplo--canto { top: 18px; right: 18px; left: auto; }

/* ---------- card de pedido (igual ao app) ---------- */
.pedido {
  position: relative;
  width: 260px; padding: 16px 16px 14px;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: 16px;
  box-shadow: var(--sombra);
  font-size: .875rem; color: var(--texto);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pedido__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pedido__tipo { font: 700 1.125rem/1.1 var(--f-titulo); letter-spacing: -.02em; }
.pedido__valor { font: 800 1.125rem/1.1 var(--f-titulo); color: var(--azul); white-space: nowrap; }
.pedido__linha { display: flex; align-items: center; gap: 6px; color: var(--suave); margin-top: 3px; }
.pedido__linha .ico { color: var(--azul); width: 16px; height: 16px; }
.pedido__desc { margin-top: 8px; color: var(--texto); font-size: .84rem; line-height: 1.4; }
.pedido__btn {
  display: block; margin-top: 12px; padding: 11px;
  background: var(--azul); color: #fff; border-radius: 10px;
  text-align: center; font-weight: 700; font-size: .9375rem;
}
.pedido__pular { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; color: var(--suave); }

/* ---------- HERO ---------- */
.hero {
  padding: 28px 0 64px;
  background-color: var(--fundo);
  overflow: clip; /* clip (e não hidden) para não quebrar o sticky do formulário */
}
.hero__copy { position: relative; z-index: 1; }
.hero__form { position: relative; z-index: 2; }

/* Fundo do hero: faixa suave + traço paralelo + rota pontilhada até o pin */
.hero__fundo { position: absolute; z-index: -1; pointer-events: none; }
.hero__fundo--mob { left: calc(-1 * var(--gutter)); width: 100vw; bottom: -40px; height: calc(100% + 100px); }
.hero__fundo--desk { display: none; }
.hero__faixa { fill: var(--azul-claro); }
.hero__traco { fill: none; stroke: #C9D8F2; stroke-width: 2; }
.hero__rota { fill: none; stroke: var(--azul); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 14; opacity: .55; }
.hero__pin { fill: var(--azul); }
.hero__pulso { fill: var(--azul); opacity: .2; transform-box: fill-box; transform-origin: center; animation: pulso 2.4s ease-out infinite; }
@keyframes pulso {
  0% { transform: scale(.6); opacity: .35; }
  100% { transform: scale(1.8); opacity: 0; }
}
.hero__grid { display: grid; gap: 32px; }

.selo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 12px; margin-bottom: 20px;
  background: var(--papel); border: 1.5px solid var(--noite); border-radius: 999px;
  font-weight: 700; font-size: .875rem; color: var(--noite);
}
.selo__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 3px rgba(247, 120, 42, .25); }

.hero__titulo {
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw + 1rem, 5.25rem);
  line-height: .98;
  letter-spacing: -.038em;
  color: var(--noite);
  text-wrap: balance;
}
.hero__sub { margin-top: 18px; font-size: clamp(1.0625rem, .6vw + .95rem, 1.3125rem); color: var(--suave); max-width: 40ch; }

.hero__foto { position: relative; isolation: isolate; padding-bottom: 24px; }
.hero__forma {
  position: absolute; left: 0; bottom: 24px;
  width: 76%; height: 86%;
  background: var(--azul);
  border-radius: 999px 999px 18px 18px;
}
.hero__foto > .hero__img, .hero__foto > .ph { position: relative; width: 76%; }
.hero__foto > .ph { background-color: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); border-radius: 999px 999px 18px 18px; }

.pedido--flutua { position: absolute; right: 0; top: 50%; width: min(232px, 66%); transform: rotate(-3deg); z-index: 3; }
.pedido--flutua:hover { transform: rotate(-1deg) translateY(-4px); }

.carimbo {
  position: absolute; right: 2%; top: 6%; z-index: 2;
  padding: 8px 12px;
  border: 4px double var(--azul); border-radius: 8px;
  background: rgba(245, 247, 251, .92);
  font: 800 .8125rem/1.1 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: var(--azul);
  transform: rotate(-11deg);
}

/* card do formulário */
.form-card {
  position: relative;
  padding: 32px 20px 22px;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(14, 42, 90, .05), 0 24px 40px -28px rgba(14, 42, 90, .45);
}
.form-card__fita {
  position: absolute; top: -15px; left: 18px;
  padding: 6px 14px;
  background: var(--laranja); color: var(--noite);
  font: 800 .8125rem/1.2 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 0 2px 0 rgba(14, 42, 90, .12);
}

@media (min-width: 600px) {
  .form-card { padding: 36px 28px 26px; }
}

@media (min-width: 960px) {
  .hero { padding: 56px 0 104px; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .hero__copy { grid-column: 1 / 8; grid-row: 1; }
  .hero__foto { grid-column: 1 / 8; grid-row: 2; }
  .hero__form { grid-column: 8 / 13; grid-row: 1 / 3; align-self: start; position: sticky; top: calc(var(--topo-h) + 24px); }
  .hero__fundo--mob { display: none; }
  .hero__fundo--desk { display: block; left: -600px; bottom: -104px; width: 2400px; height: 1000px; }
  .hero__forma, .hero__foto > .hero__img, .hero__foto > .ph { width: 56%; }
  .pedido--flutua { left: 47%; right: auto; top: 20%; width: 270px; }
  .carimbo { left: 64%; right: auto; top: auto; bottom: 18%; font-size: .9375rem; padding: 10px 16px; }
}

/* ---------- formulário ---------- */
.etapa { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__titulo { padding: 0; font: 800 1.5rem/1.1 var(--f-titulo); letter-spacing: -.025em; color: var(--noite); }
.form__desc { margin: 6px 0 20px; color: var(--suave); font-size: .9375rem; }

.campo { margin-bottom: 16px; }
.campo > label, .grupo > legend { display: block; margin-bottom: 6px; padding: 0; font-weight: 700; font-size: .9375rem; color: var(--texto); }
.opcional { font-weight: 400; color: var(--suave); }

.campo input[type="text"],
.campo input[type="tel"],
.campo select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--papel); color: var(--texto);
  border: 2px solid var(--campo); border-radius: 10px;
  font: 400 1.0625rem/1.3 var(--f-texto);
  transition: border-color .15s ease;
}
.campo select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230E2A5A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.campo input:hover, .campo select:hover { border-color: var(--suave); }
.campo input:focus-visible, .campo select:focus-visible { border-color: var(--azul); outline-offset: 1px; }
.campo [aria-invalid="true"] { border-color: var(--erro); }

.campo__erro { margin-top: 6px; color: var(--erro); font-size: .875rem; font-weight: 600; }
.campo__erro:empty { display: none; }
.campo__aviso { margin-top: 8px; padding: 8px 12px; background: var(--aviso-fundo); color: var(--aviso); border-radius: 8px; font-size: .875rem; }

.grupo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px;
  background: var(--papel); border: 2px solid var(--campo); border-radius: 999px;
  font-weight: 600; font-size: .9375rem; cursor: pointer; user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.chip span:hover { border-color: var(--suave); }
.chip input:checked + span { background: var(--azul-claro); border-color: var(--azul); color: var(--azul-escuro); }
.chip input:checked + span::before {
  content: ""; width: 7px; height: 12px; margin: -3px 2px 0 0;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.chip input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; }

.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; min-height: 44px; font-size: .9375rem; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--azul); cursor: pointer; }

.form__micro { margin-top: 12px; text-align: center; font-weight: 700; font-size: .875rem; color: var(--noite); letter-spacing: .01em; }
.form__legal { margin-top: 6px; text-align: center; font-size: .8125rem; color: var(--suave); }
.form__status { margin-top: 14px; padding: 10px 12px; background: var(--erro-fundo); color: var(--erro); border-radius: 8px; font-size: .9375rem; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- faixa laranja (marquee) ---------- */
.faixa {
  position: relative; z-index: 3;
  width: 104%; margin-left: -2%;
  padding: 14px 0;
  background: var(--laranja); color: var(--noite);
  border-block: 2px solid var(--noite);
  transform: rotate(-1.4deg);
  overflow: hidden;
}
.faixa__trilho { display: flex; width: max-content; animation: faixa 45s linear infinite; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
.faixa__lista { display: flex; list-style: none; margin: 0; padding: 0; }
.faixa__lista li {
  display: flex; align-items: center; white-space: nowrap;
  font: 800 clamp(1.25rem, 2.2vw + .6rem, 1.875rem)/1.1 var(--f-titulo); letter-spacing: -.02em;
}
.faixa__lista li::after { content: ""; width: 10px; height: 10px; margin: 0 22px; background: var(--noite); transform: rotate(45deg); }
@keyframes faixa { to { transform: translateX(-50%); } }

/* ---------- dores ---------- */
.dores__grid { display: grid; gap: 40px; }
.dores__img, .dores__cab > .ph { margin-top: 32px; border-radius: 14px; }

.folha {
  position: relative;
  padding: 22px 20px 28px;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: 6px;
  box-shadow: var(--sombra);
}
.folha__cab {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: 2px solid var(--noite);
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave);
}
.folha__lista { list-style: none; margin: 0; padding: 0; }
.folha__lista li {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 16px 0; border-bottom: 2px dashed var(--tracejado);
  font: 700 clamp(1.1875rem, 1.2vw + .85rem, 1.5rem)/1.22 var(--f-titulo); letter-spacing: -.018em; color: var(--noite);
}
.folha__n {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px;
  border: 1.5px solid var(--suave); border-radius: 50%;
  font: 700 .8125rem/1 var(--f-texto); color: var(--suave);
}
.folha__fecho { margin-top: 24px; font: 800 clamp(1.625rem, 2vw + 1rem, 2.25rem)/1.08 var(--f-titulo); letter-spacing: -.03em; color: var(--azul); }

@media (min-width: 960px) {
  .dores__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .dores__cab { grid-column: 1 / 6; }
  .folha { grid-column: 7 / 13; margin-top: 96px; padding: 32px 36px 36px; transform: rotate(.6deg); }
}

/* ---------- como funciona ---------- */
.passos { background: var(--papel); }
.passos__cab { max-width: 720px; }
.passos__lista { list-style: none; margin: 48px 0 0; padding: 0; }
.passo { display: grid; gap: 28px; padding: 40px 0; border-top: 2px dashed var(--tracejado); }
.passo__num {
  display: block; margin-bottom: 10px;
  font: 800 clamp(4.5rem, 8vw + 2rem, 9rem)/.8 var(--f-titulo); letter-spacing: -.06em;
  color: var(--azul-num);
}
.passo h3 { font-weight: 800; font-size: clamp(1.625rem, 2.2vw + 1rem, 2.5rem); line-height: 1.05; letter-spacing: -.03em; color: var(--noite); max-width: 16ch; }
.passo p { margin-top: 14px; font-size: 1.0625rem; color: var(--suave); max-width: 44ch; }
.passo p strong { color: var(--texto); }
.passo__vis { display: flex; justify-content: center; }

.passo__vis--cards { position: relative; min-height: 330px; width: 100%; max-width: 380px; margin: 0 auto; }
.pedido--atras { position: absolute; left: 0; top: 0; width: 76%; transform: rotate(-6deg); background: #EEF2F8; box-shadow: none; }
.pedido--atras .pedido__tipo, .pedido--atras .pedido__valor { color: var(--suave); }
.pedido--frente { position: absolute; right: 0; top: 70px; width: 82%; transform: rotate(2deg); }
.passo:hover .pedido--frente { transform: rotate(0) translateY(-4px); }

@media (min-width: 960px) {
  .passo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 64px 0; }
  .passo__txt { grid-column: 1 / 6; grid-row: 1; }
  .passo__vis { grid-column: 7 / 12; grid-row: 1; }
  .passo--inv .passo__txt { grid-column: 8 / 13; }
  .passo--inv .passo__vis { grid-column: 2 / 7; }
}

/* ---------- celular em CSS ---------- */
.phone {
  position: relative;
  width: min(228px, 58vw);
  padding: 10px;
  background: var(--noite);
  border-radius: 40px;
  box-shadow: inset 0 0 0 2px #2B4C86, 0 30px 50px -32px rgba(14, 42, 90, .6);
}
.phone::before {
  content: ""; position: absolute; z-index: 2; top: 18px; left: 50%;
  width: 28%; height: 20px; transform: translateX(-50%);
  background: var(--noite); border-radius: 999px;
}
.phone__screen { overflow: hidden; border-radius: 30px; background: var(--papel); }
.phone__screen img, .phone__screen .ph { width: 100%; object-fit: cover; object-position: top; border-radius: 0; border: 0; }

/* ---------- telas ilustrativas dentro do celular (somem quando o print existir) ---------- */
.app {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 7px;
  padding: 44px 10px 10px; background: var(--fundo); color: var(--texto);
  font-size: .75rem; line-height: 1.3; text-align: left;
}
.app .ico { width: 12px; height: 12px; color: var(--azul); }
.app__exemplo {
  position: absolute; top: 44px; right: 10px; padding: 1px 6px; border-radius: 999px;
  background: var(--papel); border: 1px dashed var(--suave); color: var(--suave);
  font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.app__titulo { font: 800 1.125rem/1.1 var(--f-titulo); letter-spacing: -.02em; color: var(--noite); }
.app__sub { margin-top: -5px; color: var(--suave); }
.app__card { display: flex; flex-direction: column; gap: 3px; padding: 9px; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; }
.app__linha { display: flex; justify-content: space-between; gap: 6px; }
.app__linha strong { font: 700 .8125rem/1.2 var(--f-titulo); }
.app__linha b { font: 800 .8125rem/1.2 var(--f-titulo); color: var(--azul); white-space: nowrap; }
.app__info { display: flex; align-items: center; gap: 4px; color: var(--suave); }
.app__desc { margin-top: 2px; }
.app__btn { display: block; margin-top: 5px; padding: 7px; background: var(--azul); color: #fff; border-radius: 7px; text-align: center; font-weight: 700; }
.app__rotulo { margin-top: 3px; font-weight: 700; }
.app__caixa { padding: 8px; min-height: 58px; background: var(--papel); border: 1px solid var(--campo); border-radius: 8px; }
.app__check { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.app__check i { display: grid; place-items: center; width: 16px; height: 16px; background: var(--azul); border-radius: 4px; }
.app__check .ico { color: #fff; }
.app__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.app__fotos i { display: grid; place-items: center; aspect-ratio: 1; background: var(--papel); border: 1px dashed var(--campo); border-radius: 7px; }
.app__ganhos { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--azul); color: #fff; border-radius: 10px; }
.app__ganhos strong { font: 800 1.375rem/1.1 var(--f-titulo); }
.app__nivel { display: grid; grid-template-columns: 26px 1fr; align-items: center; column-gap: 8px; padding: 8px; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; }
.app__nivel i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--m, #C9D2DE); }
.app__nivel strong { font: 700 .8125rem/1.2 var(--f-titulo); color: var(--noite); }
.app__nivel span { color: var(--suave); }
.app__nivel--ouro { --m: #F2C14E; }
.app__nivel--diamante { --m: #8ED8F2; }
.app__nivel--senior { --m: var(--laranja); }
.app__nota { margin-top: 3px; padding: 7px; border: 1px dashed var(--campo); border-radius: 8px; color: var(--suave); }

/* ---------- bento ---------- */
.recursos__cab { max-width: 640px; }
.bento { display: grid; gap: 16px; margin-top: 40px; }

.bloco {
  position: relative; overflow: hidden;
  padding: 24px;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: 20px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bloco:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.bloco h3 { font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.025em; color: var(--noite); }
.bloco > p, .bloco__txt > p { margin-top: 6px; color: var(--suave); max-width: 42ch; }

.agenda { list-style: none; margin: 24px 0 0 6px; padding: 0; border-left: 2px dashed var(--tracejado); }
.agenda__item { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 4px 12px; padding: 14px 0 14px 18px; }
.agenda__item + .agenda__item { border-top: 1px solid var(--linha); }
.agenda__item::before {
  content: ""; position: absolute; left: -7px; top: 20px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--papel); border: 2px solid var(--azul);
}
.agenda__item--agora::before { background: var(--laranja); border-color: var(--laranja); }
.agenda__hora { font: 800 1.25rem/1.2 var(--f-titulo); color: var(--noite); letter-spacing: -.02em; }
.agenda__info { display: flex; flex-direction: column; color: var(--suave); font-size: .9375rem; }
.agenda__info strong { color: var(--texto); font-size: 1rem; }
.agenda__btn {
  grid-column: 2; justify-self: start; margin-top: 8px; padding: 9px 14px;
  background: var(--azul); color: #fff; border-radius: 8px; font-weight: 700; font-size: .875rem;
}

.bloco--cartao { background: var(--azul-claro); border-color: #CFDDF5; display: grid; gap: 22px; }
.cartao {
  position: relative; width: 100%; max-width: 300px; padding: 20px;
  background: var(--azul); color: #fff; border-radius: 18px;
  outline: 1.5px dashed rgba(255, 255, 255, .35); outline-offset: -9px;
  box-shadow: 0 18px 30px -20px rgba(14, 42, 90, .7);
  transform: rotate(-3deg);
  transition: transform .25s ease;
}
.bloco--cartao:hover .cartao { transform: rotate(-1deg) scale(1.02); }
.cartao__topo { display: flex; justify-content: space-between; align-items: center; }
.cartao__marca { font: 800 1.25rem/1 var(--f-titulo); letter-spacing: -.04em; }
.cartao__pro { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .75rem; font-weight: 700; }
.cartao__foto { width: 56px; height: 56px; margin: 18px 0 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 2px solid #fff; }
.cartao__nome { font: 800 1.375rem/1.1 var(--f-titulo); letter-spacing: -.02em; }
.cartao__esp { margin-top: 2px; font-size: .875rem; color: #DCE6F7; }
.cartao__share {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 8px 14px;
  background: #fff; color: var(--azul); border-radius: 999px; font-weight: 700; font-size: .875rem;
}

.estrelas { display: flex; gap: 4px; margin-bottom: 16px; color: var(--laranja); }
.estrelas .ico { width: 30px; height: 30px; }

.bloco--fotos { background: var(--fundo); border: 2px dashed var(--tracejado); }
.fotos3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.fotos3 span {
  display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 1;
  background: var(--papel); border: 1.5px solid var(--linha); border-radius: 10px;
  font-size: .75rem; color: var(--suave);
}
.fotos3 .ico { width: 24px; height: 24px; color: var(--azul); }
.checkline { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 700; }
.bloco .checkline { color: var(--texto); }
.checkline__box { display: grid; place-items: center; width: 24px; height: 24px; background: var(--azul); color: #fff; border-radius: 6px; }
.checkline__box .ico { width: 16px; height: 16px; }

.bloco--painel { background: var(--azul); border-color: var(--azul); color: #fff; }
.bloco--painel h3 { color: #fff; }
.bloco--painel .bloco__txt > p { color: #DCE6F7; }
.bloco__tela { display: flex; justify-content: center; height: 250px; margin: 24px -24px -24px; overflow: hidden; }
.bloco__tela .phone { width: 220px; height: max-content; box-shadow: inset 0 0 0 2px #2B4C86; }

@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloco--agenda, .bloco--cartao, .bloco--painel { grid-column: 1 / -1; }
  .bloco--cartao { grid-template-columns: auto 1fr; align-items: center; }
  .bloco--painel { display: grid; grid-template-columns: 1fr 240px; column-gap: 24px; }
  .bloco--painel .bloco__tela { margin: -24px -24px -24px 0; height: 300px; align-items: flex-start; padding-top: 28px; }
}
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .bloco { padding: 32px; }
  .bloco--agenda { grid-column: 1 / 8; grid-row: 1 / 3; }
  .bloco--cartao { grid-column: 8 / 13; grid-row: 1; grid-template-columns: 1fr; }
  .bloco--aval { grid-column: 8 / 13; grid-row: 2; }
  .bloco--fotos { grid-column: 1 / 6; grid-row: 3; }
  .bloco--painel { grid-column: 6 / 13; grid-row: 3; }
  .bloco--painel .bloco__tela { margin: -32px -32px -32px 0; }
  .bloco--agenda .agenda__item { grid-template-columns: 80px 1fr; padding-block: 20px; }
  .bloco--agenda .agenda__hora { font-size: 1.5rem; }
}

/* ---------- Fixme! Pro (azul-noite) ---------- */
.pro { background: var(--noite); color: #fff; }
.pro .titulo { color: #fff; }
.pro .lead { color: var(--claro-sobre-noite); }
.pro__grid { display: grid; gap: 48px; }
.pro__tela { display: flex; justify-content: center; }
.pro .phone { background: #061633; box-shadow: inset 0 0 0 2px #2B4C86, 0 40px 60px -30px rgba(0, 0, 0, .6); }
.pro .phone::before { background: #061633; }

.trilha { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 44px 0 24px; padding: 0; }
.trilha::before {
  content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%;
  border-top: 2px dashed rgba(255, 255, 255, .35);
}
.trilha__nivel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.trilha__nivel strong { margin-top: 10px; font: 800 clamp(.9375rem, 1vw + .6rem, 1.25rem)/1.1 var(--f-titulo); letter-spacing: -.02em; }
.trilha__nivel span:last-child { font-size: .8125rem; color: var(--claro-sobre-noite); }
.trilha__medalha {
  --m: #C9D2DE; --t: 38px;
  display: grid; place-items: center;
  width: 56px; height: 56px;
}
.trilha__medalha::before {
  content: ""; width: var(--t); height: var(--t); border-radius: 50%;
  background: var(--m);
  box-shadow: 0 0 0 5px var(--noite), inset 0 0 0 4px rgba(255, 255, 255, .35), inset 0 -5px 0 rgba(0, 0, 0, .18);
}
.trilha__nivel--ouro .trilha__medalha { --m: #F2C14E; --t: 42px; }
.trilha__nivel--diamante .trilha__medalha { --m: #8ED8F2; --t: 48px; }
.trilha__nivel--senior .trilha__medalha { --m: var(--laranja); --t: 56px; }
.trilha__nivel:hover .trilha__medalha::before { transform: translateY(-3px); transition: transform .2s ease; }

.pro__nota {
  display: inline-block; padding: 12px 16px;
  border: 1.5px dashed rgba(255, 255, 255, .35); border-radius: 10px;
  font-size: .9375rem; color: var(--claro-sobre-noite);
}

@media (min-width: 960px) {
  .pro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .pro__txt { grid-column: 1 / 8; }
  .pro__tela { grid-column: 9 / 13; }
}

/* ---------- por que agora (ticket) ---------- */
.agora__grid { display: grid; gap: 40px; }
.agora__img, .agora__cab > .ph { max-width: 260px; margin-top: 32px; border-radius: 14px; }
@media (min-width: 960px) { .agora__img, .agora__cab > .ph { max-width: 340px; } .phone { width: 260px; } }

.ticket {
  position: relative;
  padding: 24px 22px 26px;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: 18px;
  box-shadow: var(--sombra);
}
.ticket__cab {
  position: relative;
  display: flex; justify-content: space-between;
  padding-bottom: 16px; margin: 0 -22px; padding-inline: 22px;
  border-bottom: 2px dashed var(--tracejado);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave);
}
.ticket__cab::before, .ticket__cab::after {
  content: ""; position: absolute; bottom: -12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--fundo); border: 1px solid var(--linha);
}
.ticket__cab::before { left: -11px; clip-path: inset(0 0 0 50%); }
.ticket__cab::after { right: -11px; clip-path: inset(0 50% 0 0); }
.ticket__lista { list-style: none; margin: 10px 0 18px; padding: 0; }
.ticket__lista li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px dashed var(--tracejado); color: var(--suave); }
.ticket__lista strong { display: block; margin-bottom: 4px; font: 700 1.25rem/1.2 var(--f-titulo); letter-spacing: -.02em; color: var(--noite); }
.ticket__n { font: 800 2rem/1 var(--f-titulo); color: var(--azul); }
.ticket__rodape { margin-bottom: 20px; font-size: .875rem; color: var(--suave); }

@media (min-width: 960px) {
  .agora__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .agora__cab { grid-column: 1 / 6; }
  .ticket { grid-column: 7 / 13; margin-top: 72px; padding: 32px 36px 36px; }
  .ticket__cab { margin: 0 -36px; padding-inline: 36px; }
}

/* ---------- para quem é ---------- */
.quem { background: var(--papel); }
.quem__grid { display: grid; gap: 48px; }
.quem__lista { display: flex; flex-wrap: wrap; list-style: none; margin: 32px 0; padding: 0; }
.quem__lista li {
  font: 800 clamp(1.375rem, 1.6vw + .9rem, 2rem)/1.3 var(--f-titulo); letter-spacing: -.025em; color: var(--noite);
  transition: color .15s ease;
}
.quem__lista li:hover { color: var(--azul); }
.quem__lista li:not(:last-child)::after { content: "/"; margin: 0 .3em; color: var(--tracejado); font-weight: 700; }
.quem__tipo { padding: 14px 18px; background: var(--fundo); border-left: 4px solid var(--laranja); border-radius: 0 10px 10px 0; font-size: 1.0625rem; }

.colagem { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.colagem > * { border-radius: 12px; }
.colagem__a { grid-column: 1 / 6; grid-row: 1; }
.colagem__b { grid-column: 3 / 7; grid-row: 2; margin-top: -28%; z-index: 2; box-shadow: 0 0 0 6px var(--papel); transform: rotate(2deg); }
.colagem__c { grid-column: 1 / 5; grid-row: 3; margin-top: -14%; z-index: 3; box-shadow: 0 0 0 6px var(--papel); transform: rotate(-2deg); }

@media (min-width: 960px) {
  .quem__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .quem__txt { grid-column: 1 / 7; }
  .colagem { grid-column: 8 / 13; }
}

/* ---------- CTA final (azul-noite) ---------- */
.cta { background: var(--noite); color: #fff; }
.cta__grid { display: grid; gap: 40px; align-items: center; }
.cta__foto { position: relative; max-width: 380px; width: 82%; }
.cta__forma { position: absolute; left: 6%; right: 6%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: var(--laranja); }
.cta__img, .cta__foto > .ph { position: relative; }
.cta__foto > .ph { background-color: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .8); }
.cta .titulo { color: #fff; max-width: 18ch; }
.cta .lead { color: var(--claro-sobre-noite); margin-bottom: 28px; }

@media (min-width: 960px) {
  .cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .cta__foto { grid-column: 1 / 6; width: 100%; }
  .cta__txt { grid-column: 7 / 13; }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 32px; }
.faq__lista details { border-bottom: 2px dashed var(--tracejado); }
.faq__lista details:first-child { border-top: 2px dashed var(--tracejado); }
.faq__lista summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px; padding: 20px 0;
  font: 700 clamp(1.1875rem, .8vw + .95rem, 1.4375rem)/1.2 var(--f-titulo); letter-spacing: -.02em; color: var(--noite);
  cursor: pointer; list-style: none;
}
.faq__lista summary::-webkit-details-marker { display: none; }
.faq__lista summary:hover { color: var(--azul); }
.faq__lista summary .ico { width: 26px; height: 26px; color: var(--azul); transition: transform .2s ease; }
.faq__lista details[open] summary .ico { transform: rotate(45deg); }
.faq__lista details p { margin: 0 0 22px; max-width: 62ch; font-size: 1.0625rem; color: var(--suave); }

@media (min-width: 960px) {
  .faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .faq__cab { grid-column: 1 / 5; position: sticky; top: calc(var(--topo-h) + 32px); }
  .faq__lista { grid-column: 6 / 13; }
}

/* ---------- rodapé ---------- */
.rodape { padding: 56px 0 28px; background: var(--noite-fundo); color: var(--claro-sobre-noite); }
.rodape__in { display: grid; gap: 28px; }
.rodape__marca p { margin-top: 12px; max-width: 40ch; font-size: .9375rem; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 4px 28px; list-style: none; margin: 0; padding: 0; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  margin-top: 36px; padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, .22);
  font-size: .875rem;
}
@media (min-width: 768px) {
  .rodape__in { grid-template-columns: 1fr auto; align-items: start; }
}

/* ---------- banner de cookies ---------- */
.cookies {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  max-width: 560px; padding: 14px 16px;
  background: var(--papel); border: 2px solid var(--noite); border-radius: 14px;
  box-shadow: 0 16px 32px -16px rgba(14, 42, 90, .5);
}
.cookies p { flex: 1 1 240px; font-size: .9375rem; }
.cookies__acoes { display: flex; gap: 8px; }

/* ---------- reveal no scroll ----------
   Aditivo: o conteúdo é visível por padrão; o JS só adiciona .is-in quando o bloco
   entra na tela. Usa "translate" (e não transform) para somar com rotações existentes. */
.reveal.is-in { animation: surgir .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes surgir {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal.is-in { animation: none; }
  .hero__pulso { animation: none; }
  .risco__svg path { animation: none !important; }
  .faixa__trilho { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .faixa__lista[aria-hidden] { display: none; }
  .faixa__lista { flex-wrap: wrap; justify-content: center; }
  .spin { animation: girar 1.4s linear infinite !important; }
}

/* =========================================================
   Páginas internas (obrigado, privacidade)
   ========================================================= */
.pagina { padding: 48px 0 88px; }
.obrigado { min-height: calc(100vh - var(--topo-h)); display: flex; align-items: center; }
.obrigado__card {
  position: relative; max-width: 640px; margin: 0 auto; padding: 40px 18px 28px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra);
}
.obrigado__card .form-card__fita { left: 24px; }
.obrigado h1 { font-weight: 800; font-size: clamp(2rem, 4vw + 1rem, 3rem); line-height: 1.04; letter-spacing: -.035em; color: var(--noite); }
.obrigado__txt { margin-top: 14px; font-size: 1.125rem; color: var(--suave); }
.obrigado__passos { list-style: none; margin: 24px 0; padding: 0; border-top: 2px dashed var(--tracejado); }
.obrigado__passos li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 2px dashed var(--tracejado); }
.obrigado__passos .checkline__box { flex: none; margin-top: 1px; }
.obrigado__txt--convite { margin-bottom: 16px; font-size: 1rem; }
.obrigado .btn { width: 100%; }
.etapa:focus { outline: none; }
.obrigado__ref { margin-top: 12px; font-size: .875rem; color: var(--suave); text-align: center; word-break: break-all; }
.btn--whats { padding-inline: 14px; gap: 8px; font-size: 1rem; text-align: center; }
.btn--whats .ico { width: 22px; height: 22px; }
.obrigado .btn-link { display: flex; align-items: center; justify-content: center; }
@media (min-width: 600px) {
  .obrigado__card { padding: 48px 44px 40px; }
  .btn--whats { font-size: 1.125rem; }
}

.prose { max-width: 72ch; }
.prose h1 { font-weight: 800; font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1.05; letter-spacing: -.035em; color: var(--noite); }
.prose h2 { margin-top: 40px; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: var(--noite); }
.prose p, .prose li { margin-top: 12px; font-size: 1.0625rem; color: var(--texto); }
.prose .atualizado { margin-top: 10px; color: var(--suave); }
.prose ul { padding-left: 1.2em; }