/* =========================================================================
   REVISÃO 2 (25/10): fonte com tamanho óptico, tudo centralizado,
   celular com a conversa, movimento mais forte. Carrega depois de estilo.css.
   ========================================================================= */
body { font-optical-sizing: auto; font-feature-settings: "cv11", "ss01"; letter-spacing: -0.006em; }
.titulo { font-weight: 600; font-size: clamp(32px, 3.9vw, 52px); letter-spacing: -0.034em; line-height: 1.08; font-variation-settings: "opsz" 32; }
.titulo--xl { font-size: clamp(36px, 4.4vw, 60px); letter-spacing: -0.04em; }
.lead { font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.6; }
.selo { font-size: 12.5px; letter-spacing: .12em; }
.fim__cartao h2 { font-weight: 600; letter-spacing: -0.05em; font-variation-settings: "opsz" 32; }
.prova b, .resultado b, .hora time, .c-kpis b { font-weight: 600; }

/* palavras dos títulos sobem de dentro de uma máscara */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .14em; margin: 0 -.03em -.14em; }
.palavra > span { display: inline-block; will-change: transform; }

/* tudo centralizado; o elemento visual vem embaixo */
.produto { padding-top: 140px; }
.produto__grade { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.produto__texto { max-width: 880px; display: flex; flex-direction: column; align-items: center; }
.produto__texto .lead { margin-left: auto; margin-right: auto; max-width: 640px; }
.produto__acoes { justify-content: center; }
.produto__garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.produto__palco { width: min(1040px, 100%); margin-top: 48px; }
.produto__luz { left: 50%; right: auto; top: 40%; width: 110%; transform: translateX(-50%); }
.flutua--a { left: -46px; top: 30%; }
.flutua--b { right: -40px; bottom: 16%; }
.cabeca--lado { display: block; text-align: center; max-width: 860px; margin: 0 auto 56px; }
.cabeca--lado .lead { margin: 20px auto 0; }
.seguro__grade, .quem__grade, .duvidas__grade { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 48px; }
.seguro__grade > div:first-child, .duvidas__grade > div:first-child { max-width: 960px; }
.seguro__grade .lead { margin-left: auto; margin-right: auto; }
.seguro__lista { width: 100%; grid-template-columns: repeat(2, 1fr); text-align: left; }
.seguro__lista li:last-child { grid-column: 1 / -1; max-width: 600px; justify-self: center; width: 100%; }
.quem__grade > div { order: 1; max-width: 820px; }
.quem__foto { order: 2; width: min(520px, 100%); aspect-ratio: 4 / 3; }
.lista-duvidas { width: min(820px, 100%); text-align: left; }

/* ---------- celular com a conversa ---------- */
.conversa { padding: 120px 0 130px; overflow: hidden; }
.conversa__luz { position: absolute; left: 50%; top: 62%; width: 900px; height: 900px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(61, 91, 255, .38), rgba(6, 38, 196, .14) 50%, transparent 75%); filter: blur(10px); pointer-events: none; }
.cel-palco { position: relative; display: grid; grid-template-columns: 1fr 340px 1fr; gap: 48px; align-items: center; max-width: 1080px; margin: 0 auto; }
.cel-passos { display: grid; gap: 18px; }
.cel-passos:first-child .passo { margin-left: auto; }
.passo { width: min(300px, 100%); background: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: var(--sombra-card); display: grid; gap: 4px; text-align: left; transition: transform .5s var(--curva), box-shadow .5s var(--curva), background .5s, color .5s; }
.passo span { font-family: var(--num); font-size: 13px; color: var(--azul); }
.passo b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.passo small { font-size: 14px; color: var(--suave); }
.passo.aceso { background: linear-gradient(135deg, var(--azul), var(--azul-meio)); color: #fff; transform: scale(1.05); box-shadow: var(--sombra-azul); }
.passo.aceso span, .passo.aceso small { color: rgba(255, 255, 255, .85); }
.cel { position: relative; width: 340px; height: 680px; border-radius: 54px; background: #0B0F24; padding: 14px; box-shadow: 0 60px 120px -40px rgba(11, 16, 51, .7), inset 0 0 0 2px #2A3050, 0 0 0 1px rgba(255, 255, 255, .06); display: flex; flex-direction: column; overflow: hidden; }
.cel::before { content: ""; position: absolute; inset: 14px; border-radius: 42px; background: #EEF0F6; z-index: 0; }
.cel > * { position: relative; z-index: 1; }
.cel__ilha { position: absolute; left: 50%; top: 24px; width: 104px; height: 30px; transform: translateX(-50%); border-radius: 99px; background: #0B0F24; z-index: 3; }
.cel__topo { display: flex; align-items: center; gap: 10px; padding: 62px 20px 12px; background: #fff; border-radius: 42px 42px 0 0; box-shadow: 0 1px 0 #E3E6EF; }
.cel__ava { width: 38px; height: 38px; border-radius: 12px; background: var(--tinta); display: grid; place-items: center; }
.cel__ava i { width: 13px; height: 13px; background: var(--azul); box-shadow: 0 0 10px 2px rgba(61, 91, 255, .9); }
.cel__topo p { line-height: 1.2; font-size: 15px; text-align: left; }
.cel__topo b { font-weight: 600; }
.cel__topo small { display: block; font-size: 12px; color: var(--ok); }
.cel__corpo { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 14px 10px; text-align: left; }
.cel__dia { align-self: center; font-size: 11.5px; color: var(--apagado); background: #fff; padding: 4px 10px; border-radius: 99px; margin-bottom: 4px; }
.cel-msg { max-width: 84%; font-size: 13.5px; line-height: 1.42; padding: 9px 12px; border-radius: 14px; animation: cel-entra .45s var(--curva); }
.cel-msg--in { align-self: flex-end; background: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 10px -6px rgba(11, 16, 51, .3); }
.cel-msg--out { align-self: flex-start; background: var(--azul); color: #fff; border-bottom-left-radius: 4px; box-shadow: 0 8px 18px -8px rgba(6, 38, 196, .8); }
.cel-msg--card { align-self: center; background: var(--tinta); color: #fff; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.cel-msg--card::before { content: ""; width: 10px; height: 10px; background: var(--azul-vivo); box-shadow: 0 0 10px 2px rgba(61, 91, 255, .9); }
.cel-msg--sis { align-self: center; font-size: 11.5px; color: var(--suave); background: transparent; padding: 2px; }
.cel-slots { display: flex; gap: 6px; margin-top: 7px; }
.cel-slots i { font-style: normal; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .18); padding: 5px 9px; border-radius: 9px; transition: background .3s, color .3s; }
.cel-slots i.pega { background: #fff; color: var(--azul); }
.cel-digita { display: flex; gap: 4px; padding: 12px 13px; }
.cel-digita span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .85); animation: pisca 1.2s ease-in-out infinite; }
.cel-digita span:nth-child(2) { animation-delay: .15s; } .cel-digita span:nth-child(3) { animation-delay: .3s; }
.cel__barra { display: flex; align-items: center; gap: 10px; margin: 0 12px 14px; padding: 10px 10px 10px 16px; background: #fff; border-radius: 99px; font-size: 13px; color: var(--apagado); }
.cel__barra span { flex: 1; text-align: left; }
.cel__barra i { width: 32px; height: 32px; border-radius: 50%; background: #25D366; }
.flutua--c { left: 24%; top: 4%; }
.flutua--d { right: 23%; bottom: 6%; animation-delay: -2s; }
@keyframes cel-entra { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* com GSAP ligado, quem anima as entradas é ele */
html.gsap .revela { opacity: 0; transform: none; transition: none; }

@media (max-width: 1000px) {
  .cel-palco { grid-template-columns: 1fr; justify-items: center; }
  .cel-passos { grid-template-columns: 1fr 1fr; width: 100%; }
  .cel-passos:first-child .passo { margin-left: 0; }
  .flutua--c, .flutua--d { display: none; }
  .seguro__lista { grid-template-columns: 1fr; }
  .flutua--a { left: 8px; top: -30px; } .flutua--b { right: 8px; bottom: -30px; }
}
@media (max-width: 600px) {
  .cel { width: 300px; height: 600px; }
  .cel-passos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.gsap .revela { opacity: 1; }
}

/* boia por translate, pra não brigar com o transform do GSAP (parallax) */
@keyframes boia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.cel__corpo.limpa > * { transition: opacity .5s; opacity: 0; }
.cel-palco { perspective: 1400px; }