:root {
  --rosa: #DD578D;
  --rosa-claro: #fff3f7;
  --rosa-fundo: #fdecf3;
  --rosa-borda: #fda1c0;
  --rosa-nome: #ec4899;
  --titulo: #020617;
  --texto: #6b7280;
  --verde: #16a34a;
  --verde-vivo: #00cc52;
  --verde-fundo: #c9fbd1;
  --verde-borda: #86efac;
  --azul-fundo: #e0efff;
  --azul-texto: #2563eb;
  --lilas: #8b5cf6;
  --borda: #e5e7eb;
  --raio: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #fff; }
body {
  margin: 0;
  background: #fff;
  color: var(--titulo);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.topo {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
  padding: 10px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.logo { display: block; height: 34px; width: auto; }
.voltar {
  position: fixed;
  top: 10px;
  left: 8px;
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.voltar.on { display: flex; }
.barra { width: calc(100% - 96px); max-width: 448px; height: 8px; border-radius: 99px; background: #fce7f0; overflow: hidden; }
.barra-fill { height: 100%; width: 0; border-radius: 99px; background: var(--rosa); transition: width .35s ease; }

#app {
  max-width: 34rem;
  margin: 0 auto;
  padding: 20px 16px 40px;
  animation: entra .25s ease;
}
#app.troca { animation: none; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1, h2, h3 { font-family: Sora, Montserrat, system-ui, sans-serif; font-weight: 700; margin: 0; color: var(--titulo); }
h1 { font-size: 26px; line-height: 1.2; text-align: center; }
h2 { font-size: 24px; line-height: 1.2; text-align: center; }
h3 { font-size: 20px; line-height: 1.25; text-align: center; }
.rosa { color: var(--rosa); }
.sub { color: var(--texto); text-align: center; margin: 10px 0 0; font-size: 15px; }
.sub strong, .par strong { color: #374151; font-weight: 700; }
.par { color: var(--texto); text-align: center; margin: 10px 0 0; font-size: 15px; }
.foto { margin: 18px auto 0; width: 100%; height: auto; }
.foto-arredondada { border-radius: var(--raio); }
.legal { color: var(--texto); font-size: 12px; text-align: center; margin: 16px 0 0; }

/* Opções */
.opcoes { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.op {
  position: relative;
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 15px;
  color: var(--titulo);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
  transition: border-color .15s, background .15s;
}
.op:active, .op.marcada { border-color: var(--rosa); background: var(--rosa-claro); }
.op .txt { flex: 1; min-width: 0; }
.op .desc { display: block; margin-top: 6px; font-weight: 500; font-size: 14px; color: var(--texto); }
.op .emo { font-size: 26px; line-height: 1; flex: none; }
.op .thumb { width: 44px; height: 56px; object-fit: contain; flex: none; }
.op .thumb-comida { width: 48px; height: 48px; }
.op .thumb-dir { width: 72px; height: 72px; object-fit: contain; object-position: right center; margin: -8px -14px -8px 0; flex: none; border-radius: 0 var(--raio) var(--raio) 0; }
.radio, .check {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radio { border-radius: 50%; }
.check { border-radius: 6px; }
.op.marcada .radio, .op.marcada .check { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.op.marcada .check::after { content: "✓"; font-size: 15px; line-height: 1; }
.seta { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }

.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade .op { font-weight: 500; }

.grade-idade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.card-idade {
  display: block;
  width: 100%;
  background: var(--rosa-fundo);
  border: 1px solid #f3a8c6;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
}
.card-idade img { width: 100%; aspect-ratio: 1 / .78; object-fit: contain; object-position: center bottom; margin-top: 2px; }
.card-idade span { display: block; padding: 16px 14px; font-weight: 700; font-size: 15px; color: var(--titulo); }

.secao { margin: 22px 0 8px; font-family: Sora, sans-serif; font-weight: 700; color: var(--texto); text-align: center; text-decoration: underline; }

/* Botões */
.btn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--raio);
  background: var(--rosa);
  color: #fff;
  font-family: Sora, Montserrat, sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.btn[disabled] { opacity: .7; background: #e77ea8; cursor: default; }
.btn-verde { background: var(--verde); }

/* Caixas */
.aviso { margin-top: 16px; padding: 14px 16px; border-radius: var(--raio); background: var(--azul-fundo); text-align: center; }
.aviso b { display: block; color: var(--azul-texto); font-weight: 700; font-size: 14px; }
.aviso p { margin: 8px 0 0; font-size: 14px; color: #3b6fb5; }
.caixa-verde { margin-top: 20px; padding: 14px 18px 16px; border-radius: var(--raio); background: var(--verde-fundo); border: 1px solid var(--verde-borda); text-align: center; color: #15803d; }
.caixa-verde h3 { color: var(--verde); font-size: 22px; font-weight: 800; }
.caixa-verde p { margin: 8px 0 0; font-size: 15px; }

/* Régua */
.unidades { display: flex; width: 116px; margin: 16px auto 0; padding: 3px; border-radius: 99px; background: #eceef1; }
.unidades button { flex: 1; padding: 3px 0; border-radius: 99px; color: #9ca3af; font-weight: 600; font-size: 14px; }
.unidades button.on { background: var(--rosa); color: #fff; }
.valor { margin-top: 16px; text-align: center; font-family: Sora, sans-serif; font-weight: 800; font-size: 36px; line-height: 1; }
.valor small { font-size: 16px; font-weight: 700; margin-left: 2px; }
.regua-wrap { position: relative; margin-top: 18px; height: 96px; overflow: hidden; border-bottom: 1px solid var(--borda); }
.regua-wrap::before, .regua-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 2; pointer-events: none; }
.regua-wrap::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.regua-wrap::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.regua { height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; cursor: grab; }
.regua::-webkit-scrollbar { display: none; }
.regua-fita { position: relative; height: 100%; }
.tick { position: absolute; top: 0; width: 1px; height: 14px; background: #cbd5e1; }
.tick.meio { height: 22px; }
.tick.dez { height: 30px; background: #94a3b8; }
.tick-num { position: absolute; top: 44px; transform: translateX(-50%); color: var(--texto); font-size: 13px; }
.ponteiro { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--rosa); z-index: 3; pointer-events: none; }
.ponteiro::after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -9px; border: 9px solid transparent; border-bottom: 13px solid var(--rosa); border-top: 0; }
.arraste { margin-top: 8px; color: #9ca3af; font-size: 12px; text-align: center; }
.campo {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
  font: inherit;
  text-align: center;
  color: var(--titulo);
  outline: none;
}
.campo:focus { border-color: var(--rosa); }
.campo::placeholder { font-style: italic; color: #9ca3af; }
.nome-tela { padding-top: 34px; }

/* Carregamento */
.carga-topo { display: flex; justify-content: flex-end; font-size: 13px; font-weight: 700; color: var(--titulo); margin-top: 6px; }
.carga-barra { height: 12px; margin-top: 4px; border-radius: 99px; background: #e9e9ec; overflow: hidden; }
.carga-fill { height: 100%; width: 0; border-radius: 99px; background: var(--rosa); }
.carga-tit { margin: 10px 0 0; font-weight: 700; font-size: 14px; text-align: center; color: #374151; }
.carga-sub { margin: 10px 0 0; font-size: 14px; color: var(--texto); text-align: center; }
.verde-grande { color: var(--verde); }
.prova-grande { margin-top: 22px; text-align: center; font-family: Sora, sans-serif; font-weight: 700; font-size: 26px; color: var(--rosa); }
.prova-menor { margin: 10px 0 0; text-align: center; font-weight: 700; font-size: 14px; color: var(--rosa); }
.carrossel { position: relative; margin: 22px -16px 0; overflow: hidden; padding-bottom: 4px; }
.carrossel-fita { display: flex; align-items: flex-start; gap: 10px; padding: 0 44px; transition: transform .5s ease; }
.depo { flex: 0 0 calc(100% - 88px); padding: 14px 16px; background: #fff; border: 1px solid #eef0f3; border-radius: var(--raio); box-shadow: 0 1px 4px rgba(15, 23, 42, .05); }
.depo-topo { display: flex; align-items: center; gap: 10px; }
.depo-topo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.estrelas { color: #facc15; font-size: 14px; letter-spacing: 1px; line-height: 1; }
.depo-nome { font-weight: 700; font-size: 15px; line-height: 1.2; }
.depo-data { font-size: 11px; color: var(--texto); }
.depo p { margin: 10px 0 0; font-size: 14px; color: #4b5563; }

/* Gráficos */
.previsao-sub { margin: 18px 0 0; text-align: center; color: var(--texto); font-size: 14px; }
.previsao-tit { margin-top: 4px; font-family: Sora, sans-serif; font-weight: 700; font-size: 26px; text-align: center; }
.previsao-tit em { font-style: normal; color: var(--verde); }
.grafico { position: relative; width: 100%; margin-top: 20px; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.nota { margin: 16px 0 0; color: var(--texto); font-size: 12px; text-align: center; }
.nome-rosa { color: var(--rosa-nome); }

/* Oferta */
.comparador { position: relative; width: 100%; aspect-ratio: 800 / 894; overflow: hidden; border-radius: var(--raio); user-select: none; touch-action: pan-y; }
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparador .depois { clip-path: inset(0 0 0 50%); }
.comparador .divisor { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .85); }
.comparador .pega { position: absolute; top: 56%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #374151; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); letter-spacing: 2px; }
.bloco { margin-top: 40px; }
.lista-check { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-weight: 700; font-size: 15px; }
.beneficio { margin-top: 28px; }
.beneficio img { width: 100%; border-radius: var(--raio); }
.beneficio h3 { margin-top: 14px; font-size: 19px; }
.resultado { margin-top: 26px; text-align: center; }
.resultado .nome { font-family: Sora, sans-serif; color: var(--lilas); font-weight: 700; font-size: 18px; line-height: 1.2; }
.resultado .perda { margin-top: 2px; font-family: Sora, sans-serif; font-weight: 700; font-size: 18px; }
.resultado .perda u { text-underline-offset: 2px; }
.resultado img { width: 75%; margin: 14px auto 0; border-radius: var(--raio); }
.bonus-tit { font-size: 22px; }
.lista-bonus { margin: 26px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 30px; font-weight: 500; font-size: 15px; }
.lista-bonus b { color: var(--verde); font-weight: 700; }
.selo { width: 58%; margin: 20px auto 0; }

@media (max-width: 380px) {
  h1 { font-size: 23px; }
  h2 { font-size: 22px; }
}

/* ===== Foto junto do texto (celular: empilhado) ===== */
#app.layout-foto { display: flex; flex-direction: column; }
.col-texto { display: contents; }
.col-texto > * { order: 0; }
.col-texto > .btn { order: 2; }
#app.layout-foto > .foto { order: 1; }

/* ===== Oferta: base ===== */
.of-topo h1 { margin-top: 32px; }
.of-gif { width: 100%; margin-top: 32px; border-radius: var(--raio); }
.of-fim .caixa-verde { margin-top: 40px; }
.grafico { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* ===== Celular pequeno ===== */
@media (max-width: 340px) {
  #app { padding-left: 12px; padding-right: 12px; }
  .carrossel { margin-left: -12px; margin-right: -12px; }
  h1 { font-size: 21px; }
  .grade-idade { gap: 10px; }
  .card-idade span { padding: 12px 10px; font-size: 14px; }
  .op { font-size: 14px; }
}

/* ===== Celular deitado (pouca altura) ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .foto { max-height: 70vh; width: auto; }
}

/* ===== Tablet ===== */
@media (min-width: 640px) {
  .topo { max-width: 44rem; }
  #app { max-width: 40rem; padding: 28px 24px 56px; }
  h1 { font-size: 30px; }
  h2 { font-size: 27px; }
  .sub, .par { font-size: 16px; }
  .op { font-size: 16px; }
  .foto { max-width: 480px; }
  .carrossel { margin-left: 0; margin-right: 0; }

  #app[data-tipo="oferta"] { max-width: 48rem; }
  .grade-beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .grade-resultados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .resultado img { width: 100%; }
  .resultado .nome, .resultado .perda { font-size: 16px; }
  .of-meio { max-width: 34rem; margin-left: auto; margin-right: auto; }
  .of-gif { display: block; max-width: 520px; margin-left: auto; margin-right: auto; }
  .selo { width: 240px; }
}

/* ===== Computador e tablet deitado ===== */
@media (min-width: 960px) {
  .topo { max-width: 72rem; }
  .barra { max-width: 640px; }
  #app { padding-top: 36px; }
  h1 { font-size: 34px; }

  /* Faixas de idade em duas linhas */
  #app[data-tipo="idade"] { max-width: 36rem; padding-top: 20px; }
  #app[data-tipo="idade"] h1 { font-size: 30px; }
  .grade-idade { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
  .card-idade { transition: transform .15s, box-shadow .15s; }
  .card-idade:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(221, 87, 141, .22); }
  .op:hover { border-color: var(--rosa); }
  .btn:not([disabled]):hover { filter: brightness(.94); }

  /* Texto de um lado, foto do outro */
  #app.layout-foto { flex-direction: row; align-items: center; gap: 56px; max-width: 68rem; }
  #app.layout-foto .col-texto { display: block; flex: 1 1 0; min-width: 0; }
  #app.layout-foto > .foto { flex: 1 1 0; min-width: 0; width: 0; max-width: none; height: auto; max-height: calc(100vh - 110px); object-fit: contain; margin: 0; }
  #app.layout-foto h1, #app.layout-foto .sub, #app.layout-foto .par { text-align: left; }

  /* Depoimentos todos visíveis, sem carrossel */
  #app[data-tipo="carga"] { max-width: 68rem; }
  .carga-barra, .carga-topo, .carga-tit, .carga-sub { max-width: 40rem; margin-left: auto; margin-right: auto; }
  .carrossel-fita { padding: 0; transform: none !important; align-items: stretch; }
  .depo { flex: 1 1 0; }

  /* Oferta em colunas */
  #app[data-tipo="oferta"] { max-width: 72rem; }
  .of-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .of-duas.of-fim { align-items: start; }
  .of-topo h1 { margin-top: 0; text-align: left; }
  .of-recebe h2, .of-fim h2, .of-fim .par { text-align: left; }
  .of-gif { margin-top: 0; max-width: none; }
  .of-fim .caixa-verde { margin-top: 0; }
  .comparador { max-height: calc(100vh - 110px); }
  .bloco { margin-top: 72px; }
  .grade-beneficios { grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
  .beneficio .par { font-size: 15px; }
  .grade-resultados { max-width: 60rem; margin: 0 auto; gap: 32px; }
}

/* Fundo branco das fotos de idade some sobre o card rosa */
.card-idade img { mix-blend-mode: multiply; }


/* Benefícios sem foto */
.beneficio h3 { margin-top: 0; }

/* Resumo das respostas na tela do plano */
.resumo-plano { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.resumo-plano span { padding: 7px 12px; border-radius: 99px; background: var(--rosa-claro); border: 1px solid #f8cfe0; color: #374151; font-size: 13px; font-weight: 600; opacity: 0; animation: surge .4s ease forwards; }
@keyframes surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .resumo-plano span { animation-duration: .01s; animation-delay: 0s !important; } }

/* Card de valores da oferta */
.oc { margin-top: 20px; border-radius: 20px; background: #fff; border: 2px solid var(--verde); box-shadow: 0 14px 34px rgba(22, 163, 74, .18); overflow: hidden; }
.oc-faixa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; background: linear-gradient(90deg, #15803d, var(--verde-vivo)); color: #fff; font-family: Sora, Montserrat, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .3px; text-align: center; }
.oc-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: oc-pisca 1.4s ease-in-out infinite; }
@keyframes oc-pisca { 50% { opacity: .35; transform: scale(.7); } }
.oc-corpo { padding: 18px 16px 16px; }
.oc-topo { display: flex; align-items: center; gap: 12px; }
.oc-selo { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #dcfce7; color: var(--verde); font-weight: 800; font-size: 18px; }
.oc-nome { font-family: Sora, Montserrat, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--titulo); }
.oc-sub { margin-top: 2px; font-size: 13px; color: var(--texto); }
.oc-valores { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 16px; background: #f0fdf4; }
.oc-de { font-size: 14px; font-weight: 500; color: var(--texto); }
.oc-de s { color: #dc2626; font-weight: 600; }
.oc-por { margin-top: 2px; font-family: Sora, sans-serif; font-weight: 800; font-size: 40px; line-height: 1; color: var(--verde); white-space: nowrap; }
.oc-por small { margin-right: 3px; font-size: 18px; font-weight: 700; }
.oc-dia { flex: none; padding: 8px 12px; border-radius: 12px; background: var(--verde); color: #fff; text-align: center; }
.oc-dia b { display: block; font-family: Sora, sans-serif; font-weight: 800; font-size: 16px; line-height: 1.15; white-space: nowrap; }
.oc-dia span { display: block; font-size: 12px; }
.oc-itens { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 14px 0 0; padding: 0; font-size: 13px; font-weight: 600; color: #166534; }
.oc-itens li::before { content: "✓ "; font-weight: 800; color: var(--verde); }
.oc .btn { margin-top: 14px; box-shadow: 0 8px 18px rgba(22, 163, 74, .32); }
@media (max-width: 340px) {
  .oc-corpo { padding: 14px 12px; }
  .oc-por { font-size: 32px; }
  .oc-dia { padding: 6px 8px; }
  .oc-dia b { font-size: 14px; }
}

/* Selo acima da caixa de garantia */
.of-fim .selo { margin: 32px auto 0; }
.of-fim .selo + .caixa-verde { margin-top: 16px; }
@media (min-width: 960px) {
  .of-fim .selo { margin-top: 0; }
  .logo { height: 38px; }
}