/* ==========================================================================
   PROGRAMA LUIZA.IA — Estilos
   Mobile-first: tudo é desenhado para celular; ajustes de desktop no final.
   --------------------------------------------------------------------------
   Paleta:
   --creme   fundo geral          #FBF6F0
   --roxo    marca Luiza          #7C3AED
   --laranja CTAs                 #E8734A
   --verde   garantia/confiança   #2E9E5B
   ========================================================================== */

:root {
  --creme: #FBF6F0;
  --creme-escuro: #F3EAE0;
  --roxo: #7C3AED;
  --roxo-escuro: #5B21B6;
  --roxo-claro: #F1E9FE;
  --laranja: #E8734A;
  --laranja-escuro: #D4572E;
  --verde: #2E9E5B;
  --verde-claro: #E7F6EC;
  --vermelho: #D64545;
  --texto: #33254A;
  --texto-suave: #6E6383;
  --branco: #FFFFFF;
  --sombra: 0 4px 16px rgba(51, 37, 74, 0.10);
  --fonte-titulo: "Fraunces", Georgia, serif;
  --fonte-texto: "Karla", -apple-system, sans-serif;
}

/* ---------- Reset básico ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte-texto);
  background: var(--creme);
  color: var(--texto);
  line-height: 1.55;
  font-size: 16px;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.2; }

button { font-family: inherit; cursor: pointer; border: none; }

/* ---------- Sistema de telas (SPA) ---------- */
.tela { display: none; min-height: 100dvh; }
.tela.ativa { display: block; }

/* A tela do chat usa layout de coluna cheia */
.tela-chat.ativa { display: flex; flex-direction: column; height: 100dvh; }

/* A tela de análise centraliza o conteúdo */
.tela-analise.ativa { display: flex; align-items: center; justify-content: center; }

.container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ==========================================================================
   BOTÃO CTA (laranja, com pulso sutil)
   ========================================================================== */
.btn-cta {
  display: block;
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(180deg, var(--laranja), var(--laranja-escuro));
  color: var(--branco);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(232, 115, 74, 0.45);
  transition: transform 0.15s ease;
}
.btn-cta:active { transform: scale(0.97); }

/* Pulso sutil e contínuo */
@keyframes pulso {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px rgba(232, 115, 74, 0.45); }
  50% { transform: scale(1.025); box-shadow: 0 8px 26px rgba(232, 115, 74, 0.6); }
}
.btn-pulso { animation: pulso 2.2s ease-in-out infinite; }

.cta-subtexto {
  text-align: center;
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 10px;
}

/* ==========================================================================
   TELA 1 — LANDING
   ========================================================================== */
.hero { padding-top: 8px; }

/* Avatar + balão de fala */
.hero-luiza {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.hero-avatar {
  width: 210px;
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(124, 58, 237, 0.20));
  /* Esfuma a base da ilustração pra não terminar num corte reto */
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

.balao-fala {
  position: relative;
  background: var(--branco);
  border: 2px solid var(--roxo-claro);
  border-radius: 20px;
  padding: 14px 18px;
  font-size: 15px;
  box-shadow: var(--sombra);
  margin-bottom: 14px;
  animation: entrada-balao 0.5s ease both;
}
/* Rabinho do balão apontando para a Luiza */
.balao-fala::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: var(--branco);
  border-right: 2px solid var(--roxo-claro);
  border-bottom: 2px solid var(--roxo-claro);
}
.balao-fala strong { color: var(--roxo); }

.headline {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}
.headline em { color: var(--roxo); font-style: normal; }

.subheadline {
  font-size: 16px;
  color: var(--texto-suave);
  text-align: center;
  margin-bottom: 22px;
}

/* Bullets com check */
.bullets {
  list-style: none;
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
}
.bullets .check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* Faixa de credibilidade */
.faixa-credibilidade {
  margin: 36px -20px;
  padding: 16px 20px;
  background: var(--roxo);
  color: var(--branco);
  text-align: center;
  font-size: 15px;
}
.faixa-credibilidade strong { font-size: 18px; }

.cta-final-landing { margin-top: 8px; }
.cta-final-texto {
  text-align: center;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ==========================================================================
   TELA 2 — CHAT
   ========================================================================== */

/* Barra de progresso fina no topo */
.chat-progresso {
  height: 4px;
  background: var(--creme-escuro);
  flex-shrink: 0;
}
.chat-progresso-barra {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--roxo), var(--laranja));
  transition: width 0.5s ease;
}

/* Header estilo WhatsApp */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--roxo);
  color: var(--branco);
  flex-shrink: 0;
}

.chat-header-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.chat-header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: var(--branco);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

/* Pontinho verde pulsando */
.ponto-online {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4ADE80;
  border: 2px solid var(--roxo);
  animation: pulso-online 1.6s ease-in-out infinite;
}
@keyframes pulso-online {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  60% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}

.chat-header-info { display: flex; flex-direction: column; }
.chat-header-info strong { font-size: 16px; }
.status-online {
  font-size: 12px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ponto-mini {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  animation: pulso-online 1.6s ease-in-out infinite;
}

/* Área de mensagens */
.chat-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

/* Linhas do chat */
.chat-linha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: entrada-balao 0.35s ease both;
}
.chat-linha-usuaria { justify-content: flex-end; }
.chat-linha-insight { justify-content: center; }

@keyframes entrada-balao {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mini avatar ao lado dos balões da Luiza */
.chat-mini-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background: var(--branco);
  border: 1.5px solid var(--roxo-claro);
  flex-shrink: 0;
}

/* Balões */
.balao {
  max-width: 82%;
  padding: 11px 15px;
  font-size: 15px;
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(51, 37, 74, 0.08);
  white-space: pre-line;
}
.balao-luiza {
  background: var(--branco);
  border-bottom-left-radius: 6px;
}
.balao-usuaria {
  background: var(--roxo);
  color: var(--branco);
  border-bottom-right-radius: 6px;
}

/* Card de insight (destaque diferente dos balões) */
.balao-insight {
  max-width: 94%;
  background: linear-gradient(135deg, var(--roxo-claro), #FDF3E7);
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  border-radius: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 15px;
}
.insight-icone { font-size: 18px; flex-shrink: 0; }
.balao-insight p { font-size: 14.5px; font-weight: 500; }

/* Indicador "digitando..." — 3 pontinhos animados */
.digitando {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 15px 18px;
}
.digitando span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B9A8DB;
  animation: pulinho 1.2s ease-in-out infinite;
}
.digitando span:nth-child(2) { animation-delay: 0.15s; }
.digitando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulinho {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Área dos botões de resposta */
.chat-opcoes {
  flex-shrink: 0;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: linear-gradient(180deg, rgba(251, 246, 240, 0), var(--creme) 30%);
}

.btn-opcao {
  width: 100%;
  padding: 14px 18px;
  background: var(--branco);
  border: 2px solid var(--roxo);
  color: var(--roxo-escuro);
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
  animation: entrada-balao 0.35s ease both;
}
.btn-opcao:active {
  transform: scale(0.96);
  background: var(--roxo);
  color: var(--branco);
}

/* ==========================================================================
   TRANSIÇÃO — TELA DE ANÁLISE
   ========================================================================== */
.analise-conteudo {
  width: 100%;
  max-width: 380px;
  padding: 32px 24px;
  text-align: center;
}

.analise-avatar {
  width: 150px;
  margin: 0 auto 22px;
  filter: drop-shadow(0 8px 20px rgba(124, 58, 237, 0.2));
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

.analise-texto {
  font-size: 16px;
  font-weight: 700;
  color: var(--roxo-escuro);
  min-height: 48px;
  margin-bottom: 14px;
}

.analise-barra {
  height: 12px;
  border-radius: 999px;
  background: var(--creme-escuro);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(51, 37, 74, 0.1);
}
.analise-barra-preenchimento {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--roxo), var(--laranja));
}

.analise-percentual {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-suave);
}

/* ==========================================================================
   TELA 3 — RELATÓRIO + OFERTA
   ========================================================================== */
.relatorio { padding-top: 32px; }

.rel-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.rel-avatar {
  width: 130px;
  filter: drop-shadow(0 8px 20px rgba(124, 58, 237, 0.2));
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.rel-tag {
  background: var(--roxo);
  color: var(--branco);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 7px 16px;
  border-radius: 999px;
}

.rel-headline {
  font-size: 26px;
  text-align: center;
  margin-bottom: 16px;
}
.destaque-vermelho { color: var(--vermelho); }

.rel-paragrafo {
  font-size: 16px;
  color: var(--texto-suave);
  margin-bottom: 22px;
}

/* Medidor "capacidade de queima" */
.medidor {
  background: var(--branco);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--sombra);
  margin-bottom: 22px;
}
.medidor-rotulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 10px;
}
.medidor-status { color: var(--vermelho); letter-spacing: 0.04em; }
.medidor-trilha {
  height: 14px;
  border-radius: 999px;
  background: var(--creme-escuro);
  overflow: hidden;
}
.medidor-barra {
  height: 100%;
  width: 0%; /* animada via JS até 23% */
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vermelho), #E8894A);
  transition: width 1.4s ease;
}

.rel-virada { font-size: 16px; margin-bottom: 28px; }

/* Card da estimativa — momento mais importante da página */
.card-estimativa {
  background: linear-gradient(150deg, var(--roxo), var(--roxo-escuro));
  color: var(--branco);
  border-radius: 20px;
  padding: 26px 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.35);
  margin-bottom: 36px;
}
.estimativa-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  background: rgba(255, 255, 255, 0.16);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.estimativa-texto { font-size: 18px; line-height: 1.5; }
.estimativa-numero {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  color: #FFD9A8;
}
.estimativa-subtexto {
  font-size: 12.5px;
  opacity: 0.75;
  margin-top: 12px;
}

/* Títulos de seção do relatório */
.rel-titulo-secao {
  font-size: 22px;
  text-align: center;
  margin-bottom: 20px;
}

/* Cards do programa */
.programa-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.programa-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--branco);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--sombra);
}
.programa-icone { font-size: 26px; flex-shrink: 0; }
.programa-card strong { display: block; margin-bottom: 3px; font-size: 15.5px; }
.programa-card p { font-size: 14px; color: var(--texto-suave); }

/* Card que rebate a objeção da P4 */
.card-objecao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--roxo-claro);
  border: 1.5px solid rgba(124, 58, 237, 0.3);
  border-radius: 16px;
  padding: 16px;
  font-size: 15px;
  margin-bottom: 36px;
}
.objecao-icone { font-size: 22px; flex-shrink: 0; }

/* Comparação */
.comparacao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}
.comparacao-col {
  border-radius: 16px;
  padding: 18px;
}
.comparacao-col h3 { font-size: 17px; margin-bottom: 10px; }
.comparacao-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.comparacao-col li { display: flex; gap: 9px; font-size: 14.5px; align-items: flex-start; }
.comparacao-generica {
  background: #FBEDED;
  border: 1.5px solid rgba(214, 69, 69, 0.25);
  color: #7A4040;
}
.comparacao-generica .x { color: var(--vermelho); font-weight: 800; }
.comparacao-luiza {
  background: var(--verde-claro);
  border: 1.5px solid rgba(46, 158, 91, 0.3);
}
.comparacao-luiza .v { color: var(--verde); font-weight: 800; }

/* Oferta */
.card-oferta {
  background: var(--branco);
  border-radius: 20px;
  padding: 26px 20px;
  box-shadow: var(--sombra);
  text-align: center;
  margin-bottom: 24px;
}
.oferta-titulo {
  font-size: 22px;
  margin-bottom: 12px;
}
.oferta-recap {
  font-size: 14.5px;
  margin-bottom: 14px;
}
.oferta-ancoragem {
  font-size: 14.5px;
  color: var(--texto-suave);
  margin-bottom: 18px;
}
.oferta-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.preco-de { font-size: 15px; color: var(--texto-suave); }
.preco-de s { color: var(--vermelho); }
.preco-por {
  font-family: var(--fonte-titulo);
  font-size: 40px;
  font-weight: 700;
  color: var(--verde);
  line-height: 1.15;
}
.preco-avista {
  font-size: 17px;
  margin-bottom: 4px;
}
.preco-avista strong { color: var(--verde); font-size: 20px; }
.preco-condicao { font-size: 12.5px; color: var(--texto-suave); }
.oferta-selos {
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 14px;
}

/* Garantia */
.card-garantia {
  background: var(--verde-claro);
  border: 1.5px solid rgba(46, 158, 91, 0.35);
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 36px;
}
.garantia-icone { font-size: 34px; display: block; margin-bottom: 8px; }
.card-garantia h3 { color: var(--verde); font-size: 19px; margin-bottom: 8px; }
.card-garantia p { font-size: 14.5px; }

/* Depoimentos — carrossel de fotos antes/depois */
.depoimentos-intro {
  text-align: center;
  font-size: 17px;
  margin-bottom: 20px;
}
.depoimentos-intro strong {
  color: var(--roxo);
  font-size: 20px;
}

/* A "moldura" do carrossel */
.carrossel {
  background: var(--branco);
  border: 2px solid var(--roxo-claro);
  border-radius: 20px;
  padding: 10px 10px 14px;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.18);
  margin-bottom: 36px;
  overflow: hidden;
}

/* Trilho que desliza para o lado (translateX via JS).
   ATENÇÃO: nada de overflow:hidden aqui — os slides 2+ ficam além da
   largura do trilho e seriam recortados para sempre (só a 1ª foto
   apareceria). Quem recorta é o .carrossel, o pai. */
.carrossel-trilho {
  display: flex;
  transition: transform 0.6s ease;
}

.carrossel-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  /* Altura explícita: a forma mais compatível que existe — nada de
     aspect-ratio ou padding calculado, que colapsavam em navegadores
     antigos e deixavam o slide em branco. A 1ª linha é o fallback. */
  /* Fotos atuais são retrato (700x800) — altura acompanha */
  height: 380px;
  height: min(100vw, 500px);
  background: var(--creme);
  border-radius: 12px;
  overflow: hidden; /* só pro canto arredondado recortar a foto */
}
.carrossel-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* mostra a foto inteira, sem cortar cabeças */
}

/* Pontinhos indicadores */
.carrossel-pontos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.carrossel-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--roxo-claro);
  border: 1px solid rgba(124, 58, 237, 0.35);
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}
.carrossel-ponto.ativo {
  background: var(--roxo);
  transform: scale(1.25);
}

/* FAQ (accordion nativo com <details>) */
.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}
.faq details {
  background: var(--branco);
  border-radius: 14px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 44px 16px 18px;
  font-weight: 700;
  font-size: 15px;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--roxo);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p {
  padding: 0 18px 16px;
  font-size: 14.5px;
  color: var(--texto-suave);
}

/* Rodapé */
.rodape-cta { text-align: center; margin-bottom: 36px; }
.rodape-chamada { font-weight: 700; font-size: 17px; margin-bottom: 16px; }

.disclaimer {
  border-top: 1px solid var(--creme-escuro);
  padding-top: 20px;
  font-size: 12px;
  color: var(--texto-suave);
  text-align: center;
}

/* ==========================================================================
   ACESSIBILIDADE — respeita quem desativa animações no sistema
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-pulso, .ponto-online, .ponto-mini, .digitando span { animation: none; }
  .chat-linha, .btn-opcao, .balao-fala { animation-duration: 0.01s; }
}

/* ==========================================================================
   DESKTOP (secundário) — só alarga e respira mais
   ========================================================================== */
@media (min-width: 700px) {
  .container { padding: 48px 24px 64px; }
  .headline { font-size: 36px; }
  .subheadline { font-size: 18px; }
  .hero-avatar { width: 260px; }
  .balao-fala { max-width: 460px; }
  .bullets { max-width: 420px; margin-left: auto; margin-right: auto; margin-bottom: 30px; }
  .btn-cta { max-width: 480px; margin-left: auto; margin-right: auto; }
  .faixa-credibilidade { margin: 44px -24px; border-radius: 0; }

  /* Chat vira uma "janela" centralizada */
  .tela-chat.ativa {
    max-width: 480px;
    margin: 0 auto;
    height: 100dvh;
    box-shadow: 0 0 40px rgba(51, 37, 74, 0.12);
  }

  .rel-headline { font-size: 32px; }
  .comparacao { flex-direction: row; }
  .comparacao-col { flex: 1; }
  .carrossel { max-width: 560px; margin-left: auto; margin-right: auto; }
}