/* Figtree variável: um arquivo cobre os pesos 500 a 900. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/fontes/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/fontes/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body { overflow-x: clip }
body { margin: 0; background: #F6F5F1; font-family: 'Figtree', system-ui, sans-serif; color: #1E2A44; -webkit-font-smoothing: antialiased }
a { color: #1E2A44 } a:hover { color: #C2410C }
* { box-sizing: border-box }
input::placeholder { color: #8A919B }
html { scroll-behavior: smooth }
[hidden] { display: none !important }

@keyframes ncIn { 0% { opacity: 0; transform: perspective(900px) rotateY(75deg) scale(.7) } 60% { opacity: 1; transform: perspective(900px) rotateY(-8deg) scale(1.04) } 100% { opacity: 1; transform: none } }
@keyframes ncSwipe { 0% { transform: translate(-70px,0) scale(.9) } 25% { transform: translate(-20px,-14px) scale(1) } 50% { transform: translate(30px,6px) scale(1) } 75% { transform: translate(70px,-10px) scale(.95) } 100% { transform: translate(-70px,0) scale(.9) } }
@keyframes ncPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(242,107,15,.55) } 50% { box-shadow: 0 0 0 8px rgba(242,107,15,0) } }
@keyframes ncSweep { to { transform: rotate(360deg) } }
@keyframes ncBlip { 0% { transform: scale(1.7); opacity: 1; box-shadow: 0 0 0 0 currentColor } 100% { transform: scale(1); opacity: .25; box-shadow: 0 0 0 16px transparent } }
@keyframes ncPulseG { 0%,100% { box-shadow: 0 0 0 0 rgba(31,168,85,.7) } 50% { box-shadow: 0 0 0 6px rgba(31,168,85,0) } }
@keyframes ncCheck { 0% { transform: scale(.6) } 60% { transform: scale(1.18) } 100% { transform: scale(1) } }
@keyframes ncShine { 0% { left: -40% } 35% { left: 110% } 100% { left: 110% } }
@keyframes ncArrow { 0%,100% { transform: translateX(0) } 50% { transform: translateX(5px) } }
@keyframes ncWiggle { 0%,100% { transform: rotate(-6deg) } 50% { transform: rotate(6deg) } }
@keyframes ncGlow { 0% { opacity: 0 } 35% { opacity: 1 } 100% { opacity: .4 } }
@keyframes ncPop { 0% { opacity: 0; transform: translateY(14px) scale(.96) } 100% { opacity: 1; transform: none } }
@keyframes ncS1 { 0% { opacity: 1; transform: translate(0,0) } 100% { opacity: 0; transform: translate(-150px,-110px) scale(.2) } }
@keyframes ncS2 { 0% { opacity: 1; transform: translate(0,0) } 100% { opacity: 0; transform: translate(150px,-120px) scale(.2) } }
@keyframes ncS3 { 0% { opacity: 1; transform: translate(0,0) } 100% { opacity: 0; transform: translate(-170px,30px) scale(.2) } }
@keyframes ncS4 { 0% { opacity: 1; transform: translate(0,0) } 100% { opacity: 0; transform: translate(170px,40px) scale(.2) } }
@keyframes ncS5 { 0% { opacity: 1; transform: translate(0,0) } 100% { opacity: 0; transform: translate(-60px,-150px) scale(.2) } }
@keyframes ncS6 { 0% { opacity: 1; transform: translate(0,0) } 100% { opacity: 0; transform: translate(70px,-160px) scale(.2) } }
@keyframes ncS7 { 0% { opacity: 1; transform: translate(0,0) } 100% { opacity: 0; transform: translate(-110px,120px) scale(.2) } }
@keyframes ncS8 { 0% { opacity: 1; transform: translate(0,0) } 100% { opacity: 0; transform: translate(120px,110px) scale(.2) } }
@keyframes ncFloat { 0%,100% { translate: 0 0; rotate: 0deg } 50% { translate: 0 -4px; rotate: var(--fr,0deg) } }

/* Botões laranja: no hover escurecem e o texto continua branco. */
.btn-l:hover { background: #E25F08 !important; color: #FFFFFF !important }
.btn-v:hover { background: #178F48 !important; color: #FFFFFF !important }

/* ---------- Partes que mudam entre tela larga e celular (corte em 760 px, igual ao protótipo) ---------- */
.topo { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px clamp(20px,5vw,64px); background: #1E2A44 }
.topo-logo { height: 30px; width: auto; display: block }
.topo-cta { font-weight: 800; font-size: 15px; text-decoration: none; background: #F26B0F; color: #FFFFFF; padding: 13px 18px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap }

.hero { background: #1E2A44; color: #FFFFFF; padding: clamp(32px,6vw,88px) clamp(20px,5vw,64px) clamp(40px,6vw,88px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px clamp(36px,6vw,80px); align-items: center; overflow: hidden }
.hero-txt { display: flex; flex-direction: column; gap: 24px }
.kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 8px; font-size: clamp(13px,1.5vw,15px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #B9C2D3 }
.kicker-palavra { background: transparent; color: #FF8A3D; box-shadow: inset 0 0 0 1.5px #F26B0F; padding: 4px 10px; border-radius: 8px; letter-spacing: 0.04em; min-width: 7ch; text-align: center }
.hero h1 { margin: 0; font-weight: 900; font-size: clamp(40px,10.4vw,92px); line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; text-align: left }
.hero h1 .linha { display: inline; white-space: normal; margin: 0 auto }
.hero-sub { display: none; margin: 12px auto 0; max-width: 34ch; font-size: 16px; line-height: 1.45; font-weight: 500; color: #E8ECF3; text-align: center; text-wrap: pretty }
.chat { grid-column: 2; grid-row: 1 / span 2; justify-self: center; width: min(100%,360px); background: #E7DED3; border-radius: 28px; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 440px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); cursor: pointer; user-select: none; position: relative; overflow: hidden }
.bolha-linha { display: flex; transition: opacity 350ms cubic-bezier(.2,.7,.25,1), transform 350ms cubic-bezier(.2,.7,.25,1) }
.hero-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: min(100%,380px); margin: 0; order: 0 }

.passos { justify-self: center; display: flex; flex-direction: row; align-items: center; gap: 14px; pointer-events: none; user-select: none; max-width: 100% }
.seta { display: inline-block; transform: none }
.passo-icone { width: 64px; height: 64px }
.passo-icone-txt { font-size: 12px }
.story { width: min(44vw,200px) }

.rodape { background: #1E2A44; color: #B9C2D3; padding: 24px clamp(20px,5vw,64px) 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 14px; font-weight: 500 }
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; flex-direction: column; gap: 6px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid #E2E0DA; box-shadow: 0 -8px 24px rgba(30,42,68,.10); transform: translateY(110%); transition: transform 300ms cubic-bezier(.2,.7,.25,1) }
.barra.mostrar { transform: translateY(0) }

.so-estreito { display: none !important }

@media (max-width: 759.98px) {
  .topo { position: relative; padding-top: 10px; padding-bottom: 10px }
  .topo-logo { height: 22px }
  .topo-cta { display: none }
  .hero { padding-top: 4px; grid-template-columns: minmax(0,1fr); gap: 20px }
  .hero-txt { gap: 12px }
  .kicker { justify-content: center }
  .kicker-cauda { display: none }
  .hero h1 { font-size: clamp(20px,6.3vw,30px); text-align: center }
  .hero h1 .linha { display: table; white-space: nowrap }
  .hero-sub { display: block }
  .chat { grid-column: 1; grid-row: auto; min-height: 380px }
  .hero-cta { margin: 0 auto; order: -1 }
  .so-largo { display: none !important }
  .so-estreito { display: block !important }
  .passos { flex-direction: column }
  .seta { transform: rotate(90deg) }
  .passo-icone { width: 84px; height: 84px }
  .passo-icone-txt { font-size: 15px }
  .story { width: min(72vw,280px) }
  .rodape { padding-bottom: 96px }
  .barra { display: flex }
}

/* ---------- Qual dessas situações você já passou? ---------- */
.dor { font: inherit; text-align: left; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 14px; align-items: center; padding: 16px 18px; min-height: 64px; border-radius: 16px; border: 1px solid #E2E0DA; background: #FFFFFF; color: #1E2A44; cursor: pointer; transition: background 200ms, border-color 200ms }
.dor-marca { width: 30px; height: 30px; border-radius: 9px; border: 2px solid #8E96A0; background: transparent; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; transition: background 200ms }
.dor-texto { font-size: 18px; font-weight: 700; line-height: 1.3 }
.dor.on { border-color: #1E2A44; background: #E8ECF3 }
.dor.on .dor-marca { border-color: #1E2A44; background: #1E2A44; animation: ncCheck .4s cubic-bezier(.3,1.6,.5,1) }
.dor.on .dor-marca::after { content: '✓' }
.dor.pulsa .dor-marca { animation: ncPulse 1.6s ease-in-out infinite }

/* ---------- Questionário depois do cadastro ---------- */
.opcao { font: inherit; font-size: 15px; font-weight: 700; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid #E2E0DA; background: #FFFFFF; color: #1E2A44; cursor: pointer; transition: background 150ms, border-color 150ms }
.opcao.on { border-color: #1E2A44; background: #1E2A44; color: #FFFFFF }

button:disabled { opacity: .7; cursor: wait }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important }
}