/* ============================================================================
   Páginas de apoio no computador (downsell, desafio, entregas, aguardando,
   privacidade, termos). Só vale com body.pag-larga.
   Mesmo desenho da home: faixas de ponta a ponta com fundo alternado,
   conteúdo centralizado, topo em 2 colunas a partir de 960px.
   No celular muda pouco: só as faixas de fundo.
   ============================================================================ */
.pag-larga { --larg: 1080px; --leitura: 720px; }
.pag-larga main > .envelope { max-width: none; padding: 0; }

/* Faixas: cada seção é uma faixa; o conteúdo fica numa coluna de leitura no meio */
.pag-larga main > .envelope > section { padding: 34px max(18px, calc((100% - var(--leitura)) / 2)) 22px; }
.pag-larga main > .envelope > section:nth-of-type(even) { background: var(--verde-claro); }
.pag-larga main > .envelope > :not(section) { max-width: var(--leitura); margin: 18px auto; padding: 0 18px; }
.pag-larga .rodape { margin-top: 0; }

/* Juca extra do topo: só aparece no computador (no celular o topo continua igual) */
.pag-larga .juca-figura.so-desktop { display: none; }
@media (min-width: 640px) {
  .pag-larga .heroi .envelope:has(> .so-desktop) { grid-template-columns: minmax(0, 1fr); }
}

/* Grades em cartões: o número de colunas segue o número de itens, sem cartão sobrando */
.pag-larga section > .passos:not(.grande) li { margin: 0; background: #fff; border: 3px solid var(--tinta); border-radius: 16px; box-shadow: 0 4px 0 var(--tinta); padding: 14px 14px 14px 64px; min-height: 0; }
.pag-larga section > .passos:not(.grande) li::before { left: 12px; top: 12px; }
.pag-larga section > .passos:not(.grande) { display: grid; gap: 12px; margin: 8px auto 18px; }
.pag-larga main > .envelope > section:nth-of-type(odd) .cartao:not(.amarelo) { background: #fff; }

@media (min-width: 760px) {
  /* Dois cartões lado a lado (Android/iPhone, Pix/Boleto) */
  .pag-larga section:has(> .cartao + .cartao) { display: grid; grid-template-columns: repeat(2, minmax(0, calc(var(--leitura) / 2 - 8px))); justify-content: center; column-gap: 16px; align-content: start; }
  .pag-larga section:has(> .cartao + .cartao) > * { grid-column: 1 / -1; width: 100%; }
  .pag-larga section:has(> .cartao + .cartao) > .cartao { grid-column: auto; margin: 4px 0 16px; }

  /* Preço ao lado da garantia, botão embaixo */
  .pag-larga section:has(> .cartao.centro + .selo) { display: grid; grid-template-columns: repeat(2, minmax(0, calc(var(--leitura) / 2 - 8px))); justify-content: center; column-gap: 16px; }
  .pag-larga section:has(> .cartao.centro + .selo) > * { grid-column: 1 / -1; width: 100%; }
  .pag-larga section:has(> .cartao.centro + .selo) > :is(.cartao, .selo) { grid-column: auto; margin: 4px 0 8px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  .pag-larga section:has(> .cartao.centro + .selo) > .selo { flex-direction: row; }
  .pag-larga section:has(> .cartao.centro + .selo) > .botao { width: fit-content; }
}

@media (min-width: 960px) {
  /* Faixas mais altas e mais largas, como na home */
  .pag-larga main > .envelope > section { padding: 60px max(24px, calc((100% - var(--larg)) / 2)) 50px; }
  .pag-larga main > .envelope > section > * { max-width: var(--leitura); margin-left: auto; margin-right: auto; }
  .pag-larga :is(.topo-site, .faixa-aprovada) > .envelope { max-width: 960px; }
  .pag-larga main section h2 { font-size: clamp(2rem, 1rem + 1.8vw, 2.7rem); line-height: 1.05; text-align: center; text-wrap: balance; color: var(--tinta); margin-bottom: .6em; }
  .pag-larga.doc main section h2 { text-align: left; }
  .pag-larga main section p:not(.destaque-num), .pag-larga main section li { font-size: 1.06rem; }
  .pag-larga main section .pequeno { font-size: .92rem; }

  /* Topo em 2 colunas: texto e botão à esquerda, Juca à direita */
  .pag-larga .heroi { padding: 56px 0 60px; }
  .pag-larga .heroi .envelope, .pag-larga .heroi .envelope:has(> .so-desktop) { max-width: 960px; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 64px; align-items: center; }
  .pag-larga .heroi .juca-figura, .pag-larga .heroi .juca-figura.so-desktop { display: block; width: 230px; margin: 0; }
  .pag-larga .heroi h1 { font-size: clamp(2.6rem, 1rem + 2.6vw, 3.5rem); line-height: 1.04; }
  .pag-larga .heroi .sub { font-size: 1.2rem; max-width: 560px; }
  .pag-larga .heroi .botao { margin-top: 18px; }

  /* Topo das entregas: alinhado à esquerda, o selo de aprovado ao lado do texto */
  .pag-larga .heroi-entrega { text-align: left; }
  .pag-larga .heroi-entrega .aprovada { flex-direction: row; align-items: center; gap: 16px; font-size: 3.2rem; }
  .pag-larga .heroi-entrega h1 { font-size: 2rem; }

  /* Passos pequenos em cartões: 3 lado a lado, ou 2 por linha quando são 2 ou 4 */
  .pag-larga main > .envelope > section > .passos:not(.grande) { max-width: 900px; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pag-larga main > .envelope > section > .passos:not(.grande):has(> li:nth-child(3):last-child) { max-width: var(--larg); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pag-larga main > .envelope > section > .passos:not(.grande) > li:last-child:nth-child(odd):not(:nth-child(3)) { grid-column: 1 / -1; }
  .pag-larga section > .passos:not(.grande) li { padding: 16px 18px 16px 66px; }

  /* Passos grandes fora do passo a passo principal: grade de cartões, número em cima */
  .pag-larga section:not([aria-labelledby="h-passos"]) > .passos.grande { max-width: var(--larg); gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pag-larga section:not([aria-labelledby="h-passos"]) > .passos.grande:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pag-larga section:not([aria-labelledby="h-passos"]) > .passos.grande:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pag-larga section:not([aria-labelledby="h-passos"]) > .passos.grande li { padding: 80px 20px 20px; }
  .pag-larga section:not([aria-labelledby="h-passos"]) > .passos.grande li::before { left: 18px; top: 18px; }

  /* Os 5 pontos do Desafio: 3 em cima e 2 centralizados embaixo */
  .pag-larga main > .envelope > section > .dias { max-width: var(--larg); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .pag-larga section > .dias li { grid-column: span 2; background: #fff; border: 3px solid var(--tinta); border-radius: 16px; box-shadow: 0 4px 0 var(--tinta); padding: 16px 18px; }
  .pag-larga section > .dias li:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .pag-larga section > .dias li:only-child { grid-column: 1 / -1; }

  /* Downsell: a lista dos 7 dias à esquerda e a caixa de compra à direita */
  .pag-larga section.oferta > .oferta-colunas { max-width: 960px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: start; }
  .pag-larga .oferta-texto > :first-child { margin-top: 0; }
  .pag-larga .oferta-texto .dias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pag-larga .oferta-texto .dias li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pag-larga .oferta-caixa { position: sticky; top: 20px; background: #fff; border: 3px solid var(--tinta); border-radius: var(--raio); box-shadow: 0 5px 0 var(--tinta); padding: 18px 20px 16px; }
  .pag-larga .oferta-caixa .cartao.preco { margin-top: 0; }
  .pag-larga .oferta-caixa .link-fraco { display: block; text-align: center; }
  .pag-larga section.oferta h2 { margin-bottom: .8em; }
}
@media (min-width: 960px) {
  /* Downsell: topo mais curto, a oferta aparece antes */
  .pag-larga.pagina-oferta .heroi { padding: 40px 0 44px; }
  .pag-larga.pagina-oferta .heroi .juca-figura.so-desktop { width: 180px; }
  .pag-larga.pagina-oferta .heroi .envelope { grid-template-columns: minmax(0, 1fr) 180px; }
}