/* ============================================================
   Casa do Mentor, páginas de venda com aplicação em popup.
   Consome tokens.css + skins.css (.skin-casa). Zero hex literal.
   Estrutura: dobras alternando creme e verde, do começo ao fim.
   Usado por casa-do-mentor.php, casa-do-mentor-medicos.php,
             casa-do-mentor-agendamento.php
   ============================================================ */

/* ── Headline com negrito parcial: o pedaço que decide fica mais
      pesado e muda de cor, o resto respira. ─────────────────── */
/* break-word como rede de segurança: em 320px uma palavra longa da headline
   não cabe entre as margens e empurra a página inteira pro lado. Inerte acima
   disso, porque só age quando a palavra realmente não cabe. */
.display, .h2, .h3 { overflow-wrap: break-word; }
.display, .h2 { font-weight: 500; }
.display strong, .h2 strong { font-weight: 600; color: var(--destaque); }

/* ── Botão ──────────────────────────────────────────────── */
.btn-lg { min-height: 58px; padding: 0 var(--sp-12); font-size: var(--fs-lead); }

/* ── Logo, dentro do herói, acima da headline ───────────── */
.hero-logo { display: block; height: 46px; width: auto; margin-bottom: var(--sp-12); }

/* ── Dobras ─────────────────────────────────────────────── */
.dobra { padding: var(--section-pad) 0; }
.dobra--curta { padding: var(--sp-16) 0; }

/* ── Olho de seção: rótulo com traço, como na referência ── */
.olho { display: flex; align-items: center; gap: var(--sp-3); }
.olho::before { content: ""; flex-shrink: 0; width: 28px; height: 2px; background: var(--destaque); }

/* ── Cabeça de dobra ──────────────────────────────────────
   Rótulo em cima ocupando a linha inteira, título à esquerda e descrição
   à direita alinhada pela base do título. Descrição colada no topo deixava
   um buraco embaixo do título em toda dobra. */
.dobra-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-6) var(--sp-12); margin-bottom: var(--sp-16); }
.dobra-head .olho { grid-column: 1 / -1; }
.dobra-head h2 { grid-column: 1 / span 7; }
.dobra-head .desc { grid-column: 8 / span 5; align-self: end; color: var(--text-2); max-width: 42ch; }
.dobra .container > p.small, .mapa + p.small { max-width: 72ch; }

/* ── 01 Hero: a foto é o fundo da dobra e sangra até a borda ── */
.hero {
  background-color: var(--bg-base);
  background-image: url('assets/bg-desk-casa.webp');
  background-repeat: no-repeat;
  /* cover, e não 100% auto: com a largura fixa a imagem acabava antes do fim
     da dobra e deixava uma faixa de creme chapado, com emenda visível. */
  background-position: 60% top;
  background-size: cover;
  min-height: clamp(560px, 51.6vw, 920px);
  display: flex;
  align-items: center;
  padding: var(--sp-16) 0;
}
.hero-grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.hero-content { max-width: 560px; }
.hero h1 { margin: var(--sp-4) 0 var(--sp-6); }
.hero-sub { max-width: 42ch; }
.hero-acao { margin-top: var(--sp-8); max-width: 440px; }
.hero-acao .btn { width: 100%; }
.hero-progresso { margin-top: var(--sp-6); }
.hero-progresso-label { text-align: center; }
.hero-progresso-trilho { height: 6px; margin-top: var(--sp-2); background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.hero-progresso-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.hero-nota { margin-top: var(--sp-3); }
/* No desktop a foto vive no fundo. No celular ela volta como imagem. */
.hero-foto { display: none; border-radius: var(--radius-panel); overflow: hidden; }
.hero-foto img { width: 100%; height: auto; }

/* ── 02 Prova em número ─────────────────────────────────── */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.numeros > div { padding: 0 var(--sp-8); border-left: 1px solid var(--border); }
.numeros > div:first-child { border-left: none; padding-left: 0; }
.numeros .n {
  display: block; font-family: var(--font-display); font-size: var(--fs-h2);
  font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}
.numeros p { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--sp-3); max-width: 24ch; }

/* ── 02 Transformação: pares lado a lado ────────────────
   Cada linha compara o MESMO ponto, hoje contra em 6 meses. Duas listas
   soltas obrigavam o leitor a parear na cabeça. */
.virada { border-top: 1px solid var(--border); }
.virada-cab, .virada-par {
  display: grid; grid-template-columns: 1fr 56px 1fr; gap: var(--sp-6);
  align-items: center; padding: var(--sp-6) 0; border-bottom: 1px solid var(--border);
}
.virada-cab { padding: var(--sp-4) 0; }
.virada-par .hoje { color: var(--text-3); font-size: var(--fs-lead); line-height: 1.4; }
.virada-par .depois { color: var(--text-1); font-size: var(--fs-lead); font-weight: 500; line-height: 1.4; }
.virada-par .seta { color: var(--destaque); text-align: center; font-size: var(--fs-h3); }
.ganhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-16); }
.ganhos > div { padding-top: var(--sp-6); border-top: 2px solid var(--destaque); }
.ganhos h3 { font-size: var(--fs-h3); font-weight: 600; }
.ganhos p { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--sp-2); }

/* ── 04 Promessa: uma frase só ──────────────────────────── */
.promessa { text-align: center; }
.promessa .olho, .fecho .olho { justify-content: center; }
.promessa .frase { max-width: 22ch; margin: var(--sp-6) auto 0; }
.promessa .assinatura { margin-top: var(--sp-8); }

/* ── 05 Mapa da jornada ─────────────────────────────────── */
.mapa { margin-top: var(--sp-8); }
.mapa svg { width: 100%; height: auto; display: block; overflow: visible; }
.mapa .trilha { fill: none; stroke: var(--border-hover); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.mapa .no { fill: var(--accent); }
.mapa .no--inicio { fill: var(--text-2); }
.mapa .no--fim { fill: var(--cta); }
.mapa .rot { font-family: var(--font-display); font-weight: 600; fill: var(--text-1); }
.mapa .val { font-family: var(--font-sans); fill: var(--text-2); }
.mapa-lista { display: none; }

/* ── 06 Três movimentos ─────────────────────────────────── */
.movimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: mov; }
.movimentos > div { padding: 0 var(--sp-8); border-left: 1px solid var(--border); }
.movimentos > div:first-child { padding-left: 0; border-left: none; }
.movimentos .passo { counter-increment: mov; display: block; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; color: var(--cta); line-height: 1; }
.movimentos .passo::before { content: "0" counter(mov); }
.movimentos h3 { margin: var(--sp-4) 0 var(--sp-3); }
.movimentos p { font-size: var(--fs-small); color: var(--text-2); }

/* ── 07 Grid do que entra ───────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-12); }
.bento-item {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-card); padding: var(--sp-6);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4);
  min-height: 128px;
}
.bento-item .rot { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.bento-item .obs { font-size: var(--fs-small); opacity: .78; }
.bento-item--largo { grid-column: span 2; }
.bento-marca {
  grid-column: span 2; grid-row: span 2;
  /* minmax(0,...) e não 1fr: 1fr trava no min-content e a palavra mais longa
     do título estourava o card em tela estreita. */
  background: var(--text-2); color: var(--accent-ink);
  border-radius: var(--radius-card); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
}
.bento-marca-texto { padding: var(--sp-8); align-self: center; min-width: 0; }
.bento-marca-texto .rot { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; display: block; overflow-wrap: break-word; }
.bento-marca-texto p { font-size: var(--fs-small); opacity: .85; margin-top: var(--sp-3); }
.bento-marca img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bento-nota { margin-top: var(--sp-8); }

/* ── 08 Quem entra ──────────────────────────────────────── */
.filtro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.filtro ul { list-style: none; display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.filtro li { font-size: var(--fs-lead); line-height: 1.4; padding-left: var(--sp-8); position: relative; }
.filtro .marca { position: absolute; left: 0; top: 2px; font-weight: 600; }
.filtro--sim .marca { color: var(--cta); }
.filtro--nao li { color: var(--text-2); }
.filtro--nao .marca { color: var(--text-3); }

/* ── 09 Fundadores ──────────────────────────────────────── */
.fundador { display: grid; grid-template-columns: 300px 1fr; gap: var(--sp-12); align-items: center; }
.fundador + .fundador { margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--border); }
.fundador--espelho { grid-template-columns: 1fr 300px; }
.fundador--espelho .fundador-foto { order: 2; }
.fundador-foto { border-radius: var(--radius-card); overflow: hidden; background: var(--accent-dim); }
.fundador-foto img { width: 100%; height: auto; }
.fundador h3 { margin: var(--sp-3) 0 var(--sp-4); }
.fundador ul { list-style: none; margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.fundador ul li { font-size: var(--fs-small); color: var(--text-2); padding-left: var(--sp-6); position: relative; }
.fundador ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--cta); }

/* ── Mosaico: com quem já trabalhamos ───────────────────── */
.mosaico { margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--border); }
.mosaico-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
.mosaico-card .foto { aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; background: var(--accent-dim); }
.mosaico-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.mosaico-card .nome { display: block; margin-top: var(--sp-3); font-weight: 600; line-height: 1.3; }
.mosaico-card .papel { display: block; margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--text-2); line-height: 1.4; }

/* ── 10 Ancoragem e garantia ────────────────────────────── */
.degraus { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-12); }
.degraus > div { padding: var(--sp-8); border: 1px solid var(--border); border-radius: var(--radius-card); }
.degraus > div:last-child { border-color: var(--cta); }
.degraus .valor { display: block; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.degraus > div:last-child .valor { color: var(--cta); }
.degraus p { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--sp-3); }
.garantia { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-8); align-items: center; margin-top: var(--sp-12); padding: var(--sp-8); border: 1px solid var(--cta); border-radius: var(--radius-panel); }
.garantia .selo { width: 96px; height: 96px; border-radius: var(--radius-pill); background: var(--cta); color: var(--cta-ink); display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.05; text-align: center; }

/* ── 11 Dúvidas ─────────────────────────────────────────── */
.faq { border-top: 1px solid var(--border); margin-top: var(--sp-12); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: var(--sp-6) var(--sp-12) var(--sp-6) 0; font-size: var(--fs-h3); font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--cta); font-size: var(--fs-h2); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); border-radius: var(--radius-control); }
.faq details p { padding-bottom: var(--sp-6); color: var(--text-2); }

/* ── 12 Fecho ───────────────────────────────────────────── */
.fecho { text-align: center; }
.fecho .frase { max-width: 20ch; margin: var(--sp-6) auto var(--sp-8); }
.fecho .passos { display: flex; justify-content: center; gap: var(--sp-8); flex-wrap: wrap; margin-top: var(--sp-12); }

/* ── Rodapé ─────────────────────────────────────────────── */
.rodape { padding: var(--sp-12) 0; border-top: 1px solid var(--border); }
.rodape-in { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.rodape img { height: 28px; width: auto; }

/* ── Popup da aplicação ─────────────────────────────────── */
.modal {
  /* O reset global zera margin em tudo, o que mata a centralização nativa do dialog. */
  margin: auto;
  width: min(640px, calc(100vw - 32px));
  max-height: min(88vh, 880px);
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius-panel);
  background: var(--bg-base); color: var(--text-1);
  box-shadow: var(--shadow-md);
}
.modal::backdrop { background: var(--accent); opacity: .92; }
.modal-topo {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  background: var(--bg-base); border-bottom: 1px solid var(--border);
}
.modal-topo h2 { font-size: var(--fs-h3); font-weight: 600; }
.modal-topo p { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--sp-2); }
.modal-fechar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent; color: var(--text-1);
  font-family: inherit; font-size: var(--fs-h3); line-height: 1; cursor: pointer;
  transition: border-color var(--t), background-color var(--t);
}
.modal-fechar:hover { border-color: var(--border-hover); }
.modal-fechar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }
.modal-corpo { padding: var(--sp-8); overflow-y: auto; }
.form-bloco { margin-bottom: var(--sp-8); }
.form-bloco > .micro { display: block; margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.form-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.modal-corpo .btn { width: 100%; }
.form-erro { display: none; margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--red); border-radius: var(--radius-control); color: var(--red); font-size: var(--fs-small); }
.form-erro.on { display: block; }
.form-nota { margin-top: var(--sp-4); text-align: center; }

/* ── Barra fixa de CTA no celular ───────────────────────── */
/* Só acompanha a pessoa quando não há nenhum outro botão na tela. */
.cta-fixo { display: none; }
/* Deslocamento em px, e não em %: porcentagem em transform depende do
   layout resolvido e falha silenciosamente quando a aba não está renderizando. */
.cta-fixo.oculto { transform: translateY(160px); pointer-events: none; }

/* ── Página de agendamento ──────────────────────────────── */
.barra-passo { border-bottom: 1px solid var(--border); }
.barra-passo-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; }
.barra-passo-trilho { height: 3px; background: var(--border); }
.barra-passo-preenche { height: 100%; background: var(--cta); }
.calendario { border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden; background: var(--bg-surface); }

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  /* Tela mais estreita aproxima os sócios do texto: a coluna encolhe junto. */
  .hero-content { max-width: 440px; }
  .dobra-head h2 { grid-column: 1 / span 8; }
  .dobra-head .desc { grid-column: 1 / span 7; align-self: start; }
  /* O card marrom empilha texto sobre foto: lado a lado nesta faixa a coluna
     de texto fica menor que a palavra mais longa do título. */
  .bento-marca { grid-template-columns: minmax(0, 1fr); }
  .bento-marca-texto { padding: var(--sp-6); }
  .bento-marca-texto .rot { font-size: var(--fs-h3); }
  .bento-marca img { max-height: 240px; object-position: center 15%; }
}

@media (max-width: 900px) {
  /* ── No celular a página inteira roda centralizada. Só o miolo das listas
     fica alinhado à esquerda, porque frase longa centralizada perde a régua
     de leitura e o olho se perde na volta da linha. ── */
  .hero-content, .dobra-head, .promessa, .fecho, .ganhos > div,
  .movimentos > div, .filtro > div, .virada-cab, .degraus > div,
  .fundador > div:not(.fundador-foto), .bento-nota, .mapa > p, .container > p.small,
  .mosaico, .mosaico-card, .bento-item, .bento-marca-texto {
    text-align: center;
  }
  /* Uma coluna só: o card fica largo e o min-height abria um vão entre o
     título e a legenda. Passa a acompanhar o conteúdo. */
  .bento-item { min-height: 0; align-items: center; gap: var(--sp-2); }
  .olho { justify-content: center; }
  .hero-logo { margin-left: auto; margin-right: auto; }
  .dobra-head .desc, .hero-sub { margin-left: auto; margin-right: auto; }
  .fundador ul, .filtro ul, .mapa-lista { text-align: left; display: inline-grid; }
  .fundador-foto { margin-left: auto; margin-right: auto; }
  .garantia { justify-items: center; text-align: center; }
  .virada-par { text-align: center; }
  .movimentos .passo, .degraus .valor { display: block; }

  /* No celular o fundo some e a foto volta como imagem, sangrando de ponta a ponta. */
  .hero { background-image: none; min-height: auto; display: block; padding: var(--sp-8) 0 0; }
  .hero-content { max-width: 100%; }
  .hero-acao { max-width: 100%; }
  .hero-foto { display: block; margin-top: var(--sp-12); width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
  .hero-foto img { width: 100%; max-height: 62vh; object-fit: cover; object-position: center 12%; }
  .dobra-head { grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-12); }
  .dobra-head h2, .dobra-head .desc { grid-column: 1 / -1; }
  .virada, .filtro, .movimentos, .degraus { grid-template-columns: 1fr; gap: var(--sp-8); }
  .movimentos > div { padding: var(--sp-6) 0; border-left: none; border-top: 1px solid var(--border); }
  .movimentos > div:first-child { border-top: none; padding-top: 0; }
  .virada-seta { transform: rotate(90deg); padding: var(--sp-4) 0; }
  .numeros { grid-template-columns: 1fr 1fr; gap: var(--sp-8) 0; }
  .numeros > div:nth-child(odd) { border-left: none; padding-left: 0; }
  .ganhos { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-marca { grid-column: span 2; grid-row: auto; grid-template-columns: 1fr; }
  .bento-marca img { max-height: 280px; object-position: center 15%; }
  .mosaico-grid { grid-template-columns: repeat(3, 1fr); }
  .fundador, .fundador--espelho { grid-template-columns: 1fr; gap: var(--sp-6); }
  .fundador--espelho .fundador-foto { order: 0; }
  .fundador-foto { max-width: 280px; }
  /* O mapa vira lista: no celular a trilha em diagonal fica ilegível. */
  .mapa svg { display: none; }
  .mapa-lista { display: grid; gap: 0; }
  .mapa-lista li { list-style: none; position: relative; padding: 0 0 var(--sp-8) var(--sp-8); border-left: 2px dotted var(--border-hover); }
  .mapa-lista li:last-child { border-left-color: transparent; padding-bottom: 0; }
  .mapa-lista li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--accent); }
  .mapa-lista li:last-child::before { background: var(--cta); }
  .mapa-lista .rot { display: block; font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
  .mapa-lista .val { display: block; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; margin-top: var(--sp-1); }
}

@media (max-width: 600px) {
  .ganhos, .bento, .form-dupla { grid-template-columns: 1fr; }
  .mosaico-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  /* Numa coluna só, qualquer item com span 2 cria uma segunda coluna implícita
     e desmonta o grid inteiro. Todos passam a ocupar uma coluna. */
  .bento-marca, .bento-item--largo { grid-column: span 1; }
  .hero-logo { height: 36px; margin-bottom: var(--sp-8); }
  .garantia { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero-acao .btn { width: 100%; }
  /* Padding de 48px de cada lado quebrava o texto do botão em duas linhas no 375. */
  .btn-lg { padding: 0 var(--sp-6); }
  .modal { margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; }
  .modal-topo, .modal-corpo { padding-left: var(--sp-6); padding-right: var(--sp-6); }

  /* Barra fixa: no celular o botão principal sai da tela cedo demais. */
  .cta-fixo {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--bg-base); border-top: 1px solid var(--border);
    transition: transform var(--t);
  }
  .cta-fixo .btn { width: 100%; }
  body { padding-bottom: 84px; }
}