/* Layout de desktop (≥ 1024 px). O site é mobile-first; aqui cada página
   ganha composição de verdade em vez de uma coluna esticada. Carregado por
   último em todas as páginas. */

@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  .topo { padding-inline: max(var(--gutter), calc((100vw - 1200px) / 2)); }

  /* ---------- LP ---------- */
  .dentro { max-width: 1200px; }
  .hero { padding: 64px var(--gutter) 32px; }
  .hero-grade { gap: 48px; }
  .lead { font-size: 1.2rem; }
  .secao { padding: 112px var(--gutter); }
  .secao h2 { font-size: clamp(2.6rem, 3.4vw, 3.4rem); max-width: 18ch; }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .passo-card { padding: 32px; }
  .duas-col { grid-template-columns: 1fr 1fr; gap: 72px; }
  .areas { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .areas article { padding: 28px; }
  /* preço: texto à esquerda, os dois planos lado a lado ocupando a linha */
  #preco .dentro { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
  #preco .dentro > h2, #preco .dentro > p { grid-column: 1; }
  #preco .planos { grid-column: 2; grid-row: 1 / span 3; max-width: none; margin-top: 0; }
  .faq { max-width: 1200px; display: grid; grid-template-columns: 1fr 1.6fr; column-gap: 64px; row-gap: 0; align-items: start; }
  .faq > h2 { grid-row: 1 / span 10; position: sticky; top: 96px; }
  .faq > .t-acc { grid-column: 2; }
  .cta-final { padding: 120px var(--gutter); }
  .cta-final h2 { max-width: none; font-size: 3.6rem; }

  /* ---------- quiz ---------- */
  .palco { max-width: 560px; padding-top: 48px; }
  /* Todas as telas do quiz no mesmo eixo: centradas na altura útil. Sem isso
     a tela curta (recordar dígitos) ficava grudada no header com a metade de
     baixo vazia, e a de matriz, que enche a altura, parecia centrada. */
  body:has(> #app > #palco-slide) { min-height: 100dvh; display: flex; flex-direction: column; }
  body:has(> #app > #palco-slide) > #app { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; padding-block: 40px 72px; }
  .palco h1 { font-size: 1.5rem; }
  /* A5: questão de imagem com figura à esquerda e as 6 opções à direita,
     tudo acima da dobra */
  .palco:has(.q-imagem) { max-width: 1040px; }
  .q-imagem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .q-imagem .figura { margin: 0; max-height: calc(100vh - 230px); aspect-ratio: 1; justify-self: end; width: 100%; max-width: calc(100vh - 230px); }
  .q-imagem .figura img, .q-imagem .figura svg { width: 100%; height: 100%; object-fit: contain; }
  .q-imagem .grade-alt.seis, .q-imagem .grade-alt { grid-template-columns: repeat(3, 1fr); }
  .q-imagem .rotulo-grade { text-align: left; }

  /* ---------- checkout (docs/cro.md §1.2): à direita a compra (B–E), fixa;
     à esquerda o que libera (F) e as dúvidas (G) ---------- */
  .checkout {
    max-width: 1080px; grid-template-columns: 1.05fr 1fr; column-gap: 56px; row-gap: 28px; align-items: start;
    grid-template-areas: "topo topo" "previa form" "faq form" "rodape form";
  }
  .checkout:has(> .aviso-checkout) { grid-template-areas: "topo topo" "aviso aviso" "previa form" "faq form" "rodape form"; }

  /* curiosidade das figuras (checkout.js montarCuriosidade): coluna esquerda,
     abaixo do Incluído. Acima dele, a inserção pelo JS empurrava o Incluído na
     1ª dobra (CLS medido 0,35 → 0,47); aqui ela nasce fora da tela. */
  .checkout:has(> .ck-figuras) { grid-template-areas: "topo topo" "previa form" "figuras form" "faq form" "rodape form"; }
  .checkout > .ck-figuras { grid-area: figuras; }
  /* a linha legal fica na coluna esquerda: o cartão fixo pode descer até o fim
     do grid e passaria por cima dela se ela ocupasse a largura toda */
  .checkout > .topo-checkout { grid-area: topo; }
  .checkout > .previa { grid-area: previa; }
  /* no desktop o cartão de compra fica sempre à vista: o CTA repetido é do celular */
  .checkout > .cta-fim { display: none; }
  .checkout > .faq-checkout { grid-area: faq; }
  .checkout > .rodape-checkout { grid-area: rodape; }
  /* O cartão de compra fica fixo abaixo do header (65 px + respiro) e nunca
     passa da altura da janela: se não couber, rola por dentro. O padding de
     24 px é maior que a sombra do botão de pagar, que por isso não é cortada. */
  /* v2: sem rolagem por dentro (o botão de pagar ficava escondido no fim do
     cartão); fixo só quando a janela é alta o bastante para ele caber */
  .checkout > form {
    grid-area: form; align-self: start;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 24px 24px 28px; box-shadow: var(--sombra);
  }
  /* Aviso de "pouco confiável": vem ANTES da decisão de pagar, então ocupa a
     largura cheia no topo, acima das duas colunas. */
  .checkout > .aviso-checkout { grid-area: aviso; margin: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: center; }
  .checkout > .aviso-checkout > p { grid-column: 1; margin: 0; }
  .checkout > .aviso-checkout > .btn { grid-column: 2; grid-row: 1 / span 2; width: auto; }

  /* ---------- resultado ---------- */
  .dentro-estreito { max-width: 880px; }
  .res-hero { padding: 64px var(--gutter) 72px; text-align: left; }
  .res-hero .dentro-estreito { max-width: 1100px; display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 64px; align-items: center; }
  .res-hero .dentro-estreito > .curva { grid-column: 2; grid-row: 1 / span 6; }
  .res-hero .dentro-estreito > :not(.curva) { grid-column: 1; }
  .qi-grande.t-reel { justify-content: flex-start; }
  .res-fatos { grid-template-columns: repeat(3, 1fr); }
  .res-secao .dominios { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  #autopercepcao { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  #autopercepcao .auto-card { margin: 0; }
  .grade-respostas { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }

  /* ---------- área de membro ---------- */
  /* área de membro: o layout do app (nav lateral) está em paginas.css */
}

@media (min-width: 1280px) {
  .hero-grade { gap: 96px; }
}
/* v2: o cartão de compra acompanha a rolagem quando cabe inteiro na janela */
@media (min-width: 1024px) and (min-height: 1200px) {
  .checkout > form { position: sticky; top: 88px; }
}
@media (min-width: 1024px) {
  .checkout > .aviso-checkout--compacto { grid-template-columns: 1fr auto; }
  .checkout > .aviso-checkout--compacto > .btn { grid-row: 1; align-self: center; }
}
/* v2 (03/nov): a comparação sai do cartão de compra e vai para a coluna
   esquerda, abaixo da prévia; a direita fica só com a compra. Fica no fim do
   arquivo (e com :has() a mais) para valer sobre as regras de aviso/figuras;
   a última linha (1fr) absorve a sobra e a coluna esquerda não abre buracos. */
@media (min-width: 1024px) {
  .checkout > .comparacao-secao { grid-area: comp; }
  .checkout:has(> .comparacao-secao) { grid-template-areas: "topo topo" "previa form" "comp form" "faq form" "rodape form"; grid-template-rows: auto auto auto auto 1fr; }
  .checkout:has(> .comparacao-secao):has(> .ck-figuras) { grid-template-areas: "topo topo" "previa form" "comp form" "figuras form" "faq form" "rodape form"; grid-template-rows: auto auto auto auto auto 1fr; }
  .checkout:has(> .comparacao-secao):has(> .aviso-checkout) { grid-template-areas: "topo topo" "aviso aviso" "previa form" "comp form" "faq form" "rodape form"; grid-template-rows: auto auto auto auto auto 1fr; }
}
/* checkout limpo (04/nov): uma coluna central também no desktop, como o MyIQ.
   Fica no FIM e com mais especificidade que as regras de grade da v2
   (.checkout:has(> …) sobrescrevia qualquer grid-template declarado antes). */
@media (min-width: 1024px) {
  .palco.checkout.ck-limpo { display: grid; max-width: 560px; grid-template-columns: 1fr; grid-template-areas: none; grid-template-rows: none; row-gap: 22px; }
  .palco.checkout.ck-limpo > * { grid-area: auto; grid-column: 1; }
  .palco.checkout.ck-limpo > form { position: static; }
}