/* ============================================================
   MEU FILHO PISA CERTO? — Imersão Online | Instituto de Saúde DM
   Identidade própria do evento, ancorada na marca DM.
   ============================================================ */

:root {
  /* Marca DM */
  --dm-vinho: #9b1c3b;
  --dm-vinho-escuro: #6e1329;
  --dm-vinho-claro: #f7e8eb;
  --dm-laranja: #e0913f;
  --dm-laranja-escuro: #c7752a;

  /* Identidade do evento (infantil, mas séria) */
  --ev-azul: #2a6f97;
  --ev-azul-claro: #eaf3f8;
  --ev-azul-escuro: #1b4d6b;
  --ev-verde: #2f9e6f;

  --txt: #1e1a1b;
  --txt-suave: #5f5457;
  --bg: #ffffff;
  --bg-alt: #faf7f8;
  --borda: #e9e0e2;

  --fonte-titulo: "Poppins", "Segoe UI", sans-serif;
  --fonte-texto: "Inter", "Segoe UI", sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --sombra: 0 10px 30px rgba(110, 19, 41, 0.12);
  --sombra-forte: 0 18px 48px rgba(110, 19, 41, 0.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--txt);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 76px; /* espaço da barra fixa do celular */
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  color: var(--dm-vinho-escuro);
  letter-spacing: -0.02em;
}
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0 0 1em; padding-left: 1.2em; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.container-estreito { max-width: 780px; }

section { padding: 76px 0; }
@media (max-width: 640px) { section { padding: 52px 0; } }

.secao-alt { background: var(--bg-alt); }
.secao-azul { background: var(--ev-azul-claro); }

.selo {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-azul);
  background: var(--ev-azul-claro);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 18px;
}
.secao-azul .selo { background: #fff; }

.titulo-secao { font-size: clamp(1.65rem, 4.2vw, 2.35rem); margin-bottom: 14px; }
.sub-secao { font-size: 1.06rem; color: var(--txt-suave); max-width: 640px; }
.centro { text-align: center; }
.centro .sub-secao { margin-left: auto; margin-right: auto; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 17px 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  line-height: 1.25;
}
.btn-principal {
  background: linear-gradient(135deg, var(--dm-laranja) 0%, var(--dm-laranja-escuro) 100%);
  color: #fff;
  box-shadow: 0 10px 26px rgba(199, 117, 42, 0.4);
}
.btn-principal:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(199, 117, 42, 0.5); }
.btn-vinho { background: var(--dm-vinho); color: #fff; box-shadow: var(--sombra); }
.btn-vinho:hover { transform: translateY(-2px); background: var(--dm-vinho-escuro); }
.btn-contorno { background: transparent; color: var(--dm-vinho); border: 2px solid var(--dm-vinho); }
.btn-contorno:hover { background: var(--dm-vinho); color: #fff; }
.btn-grande { font-size: 1.14rem; padding: 20px 44px; }
.btn-bloco { display: flex; width: 100%; }

.apoio-btn { font-size: 0.88rem; color: var(--txt-suave); margin-top: 12px; }

/* ---------- Topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topo-interno { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; max-width: 1080px; margin: 0 auto; }
.topo-logo { height: 42px; width: auto; }
.topo .btn { padding: 12px 26px; font-size: 0.92rem; }
@media (max-width: 560px) { .topo .btn { padding: 11px 20px; font-size: 0.86rem; } .topo-logo { height: 34px; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--dm-vinho-escuro) 0%, var(--dm-vinho) 55%, #b03050 100%);
  color: #fff;
  padding: 68px 0 82px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -22%;
  width: 62%;
  padding-bottom: 62%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
}
.hero .container { position: relative; z-index: 2; }
.hero h1, .hero h2 { color: #fff; }

.hero-tarja {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 { font-size: clamp(2.1rem, 6.6vw, 3.8rem); margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: #ffd9a3; }
.hero-texto { font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: rgba(255, 255, 255, 0.93); max-width: 620px; margin-bottom: 30px; }

.hero-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}
.hero-dado {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 600;
}
.hero-dado svg { flex-shrink: 0; }

.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 560px) { .hero-acoes .btn { width: 100%; } }

/* ---------- Contagem regressiva ---------- */
.contagem { margin: 34px 0 0; }
.contagem-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 12px;
}
.contagem-caixas { display: flex; gap: 10px; flex-wrap: wrap; }
.contagem-caixa {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  padding: 12px 6px;
  min-width: 74px;
  text-align: center;
}
.contagem-num { font-family: var(--fonte-titulo); font-size: 1.85rem; font-weight: 700; line-height: 1; display: block; }
.contagem-rot { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); margin-top: 6px; display: block; }

/* ---------- Identificação (dores) ---------- */
.grade-dores { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; margin-top: 34px; }
.dor {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--dm-laranja);
  border-radius: var(--r-sm);
  padding: 17px 19px;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(110, 19, 41, 0.05);
}
.dor svg { flex-shrink: 0; margin-top: 3px; }
.dores-fecho {
  margin-top: 34px;
  background: var(--dm-vinho-claro);
  border-radius: var(--r-md);
  padding: 26px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dm-vinho-escuro);
  text-align: center;
}

/* ---------- Programação ---------- */
.linha-tempo { margin-top: 40px; position: relative; }
.linha-tempo::before {
  content: "";
  position: absolute;
  left: 92px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--ev-azul) 0%, var(--dm-laranja) 100%);
  opacity: 0.35;
}
.bloco-horario { display: flex; gap: 26px; padding: 15px 0; position: relative; }
.hora {
  flex-shrink: 0;
  width: 74px;
  text-align: right;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ev-azul);
  padding-top: 2px;
}
.bloco-horario::before {
  content: "";
  position: absolute;
  left: 87px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ev-azul);
  z-index: 2;
}
.bloco-conteudo { padding-left: 12px; }
.bloco-conteudo h3 { font-size: 1.08rem; margin-bottom: 4px; }
.bloco-conteudo p { font-size: 0.95rem; color: var(--txt-suave); margin: 0; }
.bloco-horario.intervalo .hora, .bloco-horario.intervalo::before { color: var(--dm-laranja); border-color: var(--dm-laranja); }
.bloco-horario.intervalo .bloco-conteudo h3 { color: var(--dm-laranja-escuro); }

@media (max-width: 640px) {
  .linha-tempo::before { left: 7px; }
  .bloco-horario { flex-direction: column; gap: 3px; padding-left: 30px; }
  .bloco-horario::before { left: 2px; top: 20px; }
  .hora { width: auto; text-align: left; }
  .bloco-conteudo { padding-left: 0; }
}

/* ---------- Aprendizados ---------- */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 38px; }
.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  padding: 28px 26px;
  box-shadow: 0 3px 14px rgba(110, 19, 41, 0.055);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.cartao h3 { font-size: 1.1rem; margin-bottom: 8px; }
.cartao p { font-size: 0.95rem; color: var(--txt-suave); margin: 0; }
.cartao-icone {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--ev-azul-claro);
  color: var(--ev-azul);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 17px;
}

/* ---------- Para quem é / não é ---------- */
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 38px; }
.painel { border-radius: var(--r-md); padding: 30px 28px; }
.painel h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; }
.painel-sim { background: #eef8f3; border: 1px solid #cfe9dd; }
.painel-sim h3 { color: #1d7a55; }
.painel-nao { background: #fdf2f4; border: 1px solid #f3d9df; }
.painel-nao h3 { color: var(--dm-vinho); }
.painel ul { list-style: none; padding: 0; margin: 0; }
.painel li { padding: 9px 0 9px 28px; position: relative; font-size: 0.96rem; border-bottom: 1px dashed rgba(0, 0, 0, 0.07); }
.painel li:last-child { border-bottom: none; }
.painel-sim li::before { content: "✓"; position: absolute; left: 0; color: #2f9e6f; font-weight: 700; }
.painel-nao li::before { content: "×"; position: absolute; left: 3px; color: var(--dm-vinho); font-weight: 700; font-size: 1.15rem; }

/* ---------- Bônus ---------- */
.bonus {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  padding: 26px;
  margin-bottom: 16px;
  box-shadow: 0 3px 14px rgba(110, 19, 41, 0.05);
}
.bonus-num {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dm-laranja), var(--dm-laranja-escuro));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.2rem;
}
.bonus h3 { font-size: 1.08rem; margin-bottom: 5px; }
.bonus p { font-size: 0.95rem; color: var(--txt-suave); margin: 0 0 8px; }
.bonus-valor { font-size: 0.86rem; font-weight: 700; color: var(--ev-verde); }
@media (max-width: 560px) { .bonus { flex-direction: column; gap: 14px; } }

/* ---------- Sobre a DM ---------- */
.sobre-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 34px; }
@media (max-width: 800px) { .sobre-grade { grid-template-columns: 1fr; gap: 30px; } }
.sobre-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sobre-fotos img { border-radius: var(--r-md); height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.numeros { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 26px; }
.numero strong { display: block; font-family: var(--fonte-titulo); font-size: 2rem; color: var(--dm-vinho); line-height: 1; }
.numero span { font-size: 0.86rem; color: var(--txt-suave); }

/* ---------- Depoimentos ---------- */
.grade-depoimentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 38px; }
.depoimento {
  background: #fff;
  border-radius: var(--r-md);
  padding: 28px 26px;
  border: 1px solid var(--borda);
  box-shadow: 0 3px 14px rgba(110, 19, 41, 0.05);
  display: flex; flex-direction: column;
}
.aspas { font-family: Georgia, serif; font-size: 3rem; color: var(--dm-laranja); line-height: 0.6; margin-bottom: 14px; opacity: 0.55; }
.depoimento p { font-size: 0.98rem; font-style: italic; color: var(--txt); flex: 1; }
.depoimento-autor { font-weight: 700; font-size: 0.92rem; color: var(--dm-vinho); margin-top: 12px; }
.depoimento-autor span { display: block; font-weight: 400; font-size: 0.83rem; color: var(--txt-suave); }

/* ---------- Oferta / ingresso ---------- */
.oferta { background: linear-gradient(160deg, var(--dm-vinho-escuro) 0%, var(--dm-vinho) 100%); color: #fff; }
.oferta h2, .oferta h3 { color: #fff; }
.oferta .sub-secao { color: rgba(255, 255, 255, 0.85); }

.caixa-ingresso {
  background: #fff;
  color: var(--txt);
  border-radius: var(--r-lg);
  padding: 44px 38px;
  max-width: 560px;
  margin: 40px auto 0;
  box-shadow: var(--sombra-forte);
  text-align: center;
}
.caixa-ingresso h3 { color: var(--dm-vinho-escuro); font-size: 1.35rem; }

.lote-atual {
  display: inline-block;
  background: var(--ev-verde);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.preco-de { font-size: 0.95rem; color: var(--txt-suave); text-decoration: line-through; margin: 0; }
.preco { font-family: var(--fonte-titulo); font-weight: 700; color: var(--dm-vinho); line-height: 1; margin: 6px 0 4px; }
.preco .cifrao { font-size: 1.5rem; vertical-align: super; }
.preco .valor { font-size: 4rem; letter-spacing: -0.03em; }
.preco-parcela { font-size: 0.95rem; color: var(--txt-suave); margin-bottom: 26px; }

.inclui { text-align: left; list-style: none; padding: 0; margin: 26px 0; border-top: 1px solid var(--borda); padding-top: 24px; }
.inclui li { padding: 8px 0 8px 30px; position: relative; font-size: 0.95rem; }
.inclui li::before {
  content: "✓";
  position: absolute; left: 0; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ev-verde); color: #fff;
  font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.lotes { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.lote {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-sm);
  padding: 13px 20px;
  font-size: 0.9rem;
  text-align: center;
}
.lote strong { display: block; font-family: var(--fonte-titulo); font-size: 1.15rem; }
.lote.esgotado { opacity: 0.45; text-decoration: line-through; }
.lote.ativo { background: var(--dm-laranja); border-color: var(--dm-laranja); }

.garantia {
  display: flex; align-items: center; gap: 14px;
  max-width: 560px; margin: 26px auto 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-md);
  padding: 18px 22px;
  font-size: 0.92rem;
}
.garantia svg { flex-shrink: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 38px auto 0; }
.faq-item { border-bottom: 1px solid var(--borda); }
.faq-pergunta {
  width: 100%;
  background: none; border: none;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--dm-vinho-escuro);
  padding: 21px 44px 21px 0;
  cursor: pointer;
  position: relative;
  line-height: 1.4;
}
.faq-pergunta::after {
  content: "+";
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; color: var(--dm-laranja);
  transition: transform 0.25s ease;
  line-height: 1;
}
.faq-item.aberto .faq-pergunta::after { transform: translateY(-50%) rotate(45deg); }
.faq-resposta { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-resposta p { padding: 0 20px 20px 0; font-size: 0.97rem; color: var(--txt-suave); margin: 0; }

/* ---------- Aviso legal ---------- */
.aviso {
  background: var(--bg-alt);
  border: 1px dashed var(--borda);
  border-radius: var(--r-md);
  padding: 22px 26px;
  font-size: 0.88rem;
  color: var(--txt-suave);
  max-width: 780px;
  margin: 0 auto;
}
.aviso strong { color: var(--txt); }

/* ---------- Rodapé ---------- */
.rodape { background: #241a1d; color: rgba(255, 255, 255, 0.72); padding: 52px 0 32px; font-size: 0.9rem; }
.rodape-logo { height: 46px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: 0.9; }
.rodape a { color: #fff; text-decoration: underline; }
.rodape-base { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 26px; padding-top: 22px; font-size: 0.82rem; }

/* ---------- Barra fixa (só no celular) ---------- */
.barra-fixa { display: none; }

@media (max-width: 768px) {
.barra-fixa {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 70;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--borda);
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07);
}
.barra-fixa-info { flex: 1; min-width: 0; line-height: 1.25; }
.barra-fixa-info strong { display: block; font-family: var(--fonte-titulo); font-size: 1.02rem; color: var(--dm-vinho); }
.barra-fixa-info span { font-size: 0.76rem; color: var(--txt-suave); }
.barra-fixa .btn { padding: 14px 26px; font-size: 0.95rem; white-space: nowrap; }
}
@media (max-width: 380px) { .barra-fixa .btn { padding: 13px 18px; font-size: 0.88rem; } }

/* no computador o cabeçalho já tem o botão — a barra de baixo some */
@media (min-width: 769px) { body { padding-bottom: 0; } }

/* ============================================================
   PLACEHOLDERS — trechos que Murilo ainda precisa preencher.
   Para tirar o destaque amarelo do ar, apague as 6 linhas abaixo.
   ============================================================ */
.preencher {
  background: #fff3c4 !important;
  color: #6b4e00 !important;
  outline: 2px dashed #d99f00;
  outline-offset: 2px;
  border-radius: 4px;
}
.preencher::before, .preencher::after { color: #6b4e00 !important; }