/* Layout do site e das páginas de cliente (assinar, obrigado, minha, pedir, regras).
   Cor, fonte, espaço e tempo vêm do design system (tokens.css + granja.css). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main [id] { scroll-margin-top: 76px; }
body { min-height: 100vh; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--titulo); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.miolo { max-width: 1200px; margin: 0 auto; padding-left: max(var(--esp-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--esp-4), env(safe-area-inset-right, 0px)); }
.secao { padding-block: var(--esp-16); background: var(--chao); }
.secao__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-4) var(--esp-8); margin-bottom: var(--esp-8); }
.secao__apoio { margin-top: var(--esp-2); color: var(--texto-2); max-width: 46ch; }
@media (max-width: 640px) { .secao { padding-block: var(--esp-12); } }
[hidden] { display: none !important; }

/* faixa do topo */
.faixa { background: var(--chao); }
.faixa .miolo { display: flex; align-items: center; justify-content: center; gap: var(--esp-3); min-height: 44px; font-size: 14px; font-weight: 600; }

/* cabeçalho claro, grudado; ganha sombra quando a página rola */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--chao); border-bottom: 1px solid var(--linha); transition: box-shadow var(--dur-media) var(--curva-saida); }
.topo[data-rolou] { box-shadow: var(--sombra-recorte); }
.topo .gf-cabecalho { max-width: 1200px; margin: 0 auto; border-bottom: 0; padding-left: max(var(--esp-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--esp-4), env(safe-area-inset-right, 0px)); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 11; background: var(--chao); }

/* banner (tema musgo) */
.banner { overflow: hidden; background: var(--chao); }
.banner__grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: var(--esp-8); }
.banner__texto { display: grid; justify-items: start; gap: var(--esp-5); padding-block: var(--esp-16); }
.banner__texto h1 { max-width: 13ch; }
.banner__apoio { color: var(--texto-2); font-size: 18px; line-height: 28px; max-width: 40ch; }
.banner__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.banner__arte { position: relative; height: 420px; display: grid; justify-items: center; align-items: end; }
.banner__arco { position: absolute; left: 50%; bottom: -300px; width: 600px; aspect-ratio: 1; border-radius: 50%; background: var(--broto); transform: translateX(-50%); }
.banner__ovo { --t: 280px; --giro: 9deg; width: var(--t); margin-bottom: 60px; }
@media (max-width: 860px) {
  .banner__grade { grid-template-columns: 1fr; gap: 0; }
  .banner__texto { padding-block: var(--esp-12) var(--esp-6); }
  .banner__arte { height: 290px; }
  .banner__arco { width: 420px; bottom: -220px; }
  .banner__ovo { --t: 180px; margin-bottom: 40px; }
}

.beneficios { padding-block: var(--esp-8); }
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-6); }
@media (max-width: 960px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .passos { grid-template-columns: 1fr; } .passos .gf-passo { min-height: 200px; } }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); }
@media (max-width: 900px) { .planos { grid-template-columns: minmax(0, 440px); justify-content: center; } }
.planos__avulso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-6); margin-top: var(--esp-8); padding: var(--esp-5) var(--esp-6); border: 1px dashed var(--linha-forte); border-radius: var(--raio-2); }
.planos__avulso p { color: var(--texto-2); }
.planos__avulso b { color: var(--texto); }

.entrega { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-8) var(--esp-12); align-items: center; padding: var(--esp-12); border-radius: var(--raio-2); background: var(--chao); }
.entrega::before { content: ""; position: absolute; right: -150px; bottom: -240px; width: 460px; aspect-ratio: 1; border-radius: 50%; background: var(--painel); }
.entrega > * { position: relative; }
.entrega__texto { display: grid; justify-items: start; gap: var(--esp-3); }
.entrega .gf-cep { max-width: none; }
@media (max-width: 860px) { .entrega { grid-template-columns: minmax(0, 1fr); padding: var(--esp-8) var(--esp-5); } }
.faq { background: var(--painel); }

/* rodapé (tema musgo) */
.rodape { background: var(--chao-fundo); color: var(--texto-2); padding-block: var(--esp-12) var(--esp-6); font-size: 15px; }
.rodape__colunas { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--esp-8); }
.rodape__colunas p { margin-top: var(--esp-3); max-width: 32ch; }
.rodape h3 { margin-bottom: var(--esp-3); color: var(--texto); }
.rodape ul { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.rodape a { text-decoration: none; transition: color var(--dur-curta); }
.rodape a:hover { color: var(--titulo); }
.rodape__fim { margin-top: var(--esp-12); padding-top: var(--esp-4); border-top: 1px solid var(--linha); font-size: 13px; }
.rodape--curto { padding-block: var(--esp-8) var(--esp-6); }
.rodape--curto .rodape__fim { margin-top: var(--esp-6); }
@media (max-width: 760px) { .rodape__colunas { grid-template-columns: 1fr 1fr; } .rodape__colunas > :first-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ páginas de cliente */
.pagina { padding-block: var(--esp-12) var(--esp-16); }
.pagina__cabeca { display: grid; gap: var(--esp-2); margin-bottom: var(--esp-8); }
.pagina__cabeca p { color: var(--texto-2); max-width: 56ch; }
.pagina--estreita { max-width: 760px; }

/* compra: etapas à esquerda, resumo grudado à direita */
.compra { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--esp-8); align-items: start; }
@media (max-width: 960px) { .compra { grid-template-columns: minmax(0, 1fr); } .compra .resumo { order: -1; position: static; } }
.etapa { padding: var(--esp-6); border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--chao); transition: opacity var(--dur-media); }
.etapa + .etapa { margin-top: var(--esp-4); }
.etapa[data-bloqueada] { opacity: .45; pointer-events: none; }
.etapa__cabeca { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-5); }
.etapa__cabeca h2 { font-size: 22px; line-height: 26px; }
.etapa__feito { margin-left: auto; color: var(--ok); }
@media (max-width: 640px) { .etapa { padding: var(--esp-5) var(--esp-4); } }

.escolhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
@media (max-width: 640px) { .escolhas { grid-template-columns: 1fr; } }
.escolha { position: relative; display: grid; gap: 2px; padding: var(--esp-4); border: 2px solid var(--linha); border-radius: var(--raio-2); background: var(--chao); cursor: pointer; transition: border-color var(--dur-curta), background-color var(--dur-curta); }
.escolha:hover { border-color: var(--linha-forte); }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha:has(input:checked) { border-color: var(--acao); background: var(--painel); }
.escolha:has(input:focus-visible) { box-shadow: var(--foco-anel); }
.escolha:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.escolha__nome { font-weight: 700; color: var(--titulo); }
.escolha__apoio { color: var(--texto-2); font-size: 14px; line-height: 20px; }
.escolha__preco { margin-top: var(--esp-2); font-family: var(--font-titulo); font-size: 22px; line-height: 26px; font-weight: 800; color: var(--titulo); }
.escolha__preco small { font-family: var(--font-texto); font-size: 13px; font-weight: 400; color: var(--texto-2); }
.escolhas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .escolhas--2 { grid-template-columns: 1fr; } }

.campos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--esp-4); }
.campo { display: grid; gap: 6px; grid-column: span 6; }
.campo--3 { grid-column: span 3; } .campo--2 { grid-column: span 2; } .campo--4 { grid-column: span 4; }
@media (max-width: 640px) { .campo--3, .campo--2, .campo--4 { grid-column: span 6; } }
.campo label, .rotulo-campo { color: var(--texto-2); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.campo .gf-campo { height: 46px; font-size: 16px; letter-spacing: 0; }
.campo small { color: var(--texto-2); font-size: 13px; line-height: 18px; }
.gf-campo:disabled { background: var(--painel); color: var(--texto-2); }
select.gf-campo { appearance: auto; }
textarea.gf-campo { height: auto; min-height: 88px; padding-block: var(--esp-3); resize: vertical; }
.isca { position: absolute !important; left: -5000px !important; width: 1px; height: 1px; overflow: hidden; }

.aviso { display: flex; gap: var(--esp-2); align-items: flex-start; margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-1); background: var(--painel); color: var(--texto); animation: gf-surge var(--dur-media) var(--curva-saida) both; }
.aviso .gf-icone { margin-top: 2px; }
.aviso--ok .gf-icone { color: var(--ok); }
.aviso--erro { color: var(--alerta); }
.aviso--erro .gf-icone { color: var(--alerta); }
.aviso b { color: var(--titulo); }
.aceite { display: flex; gap: var(--esp-3); align-items: flex-start; margin-top: var(--esp-5); color: var(--texto); cursor: pointer; }
.aceite input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--acao); flex: none; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-5); }

.resumo { position: sticky; top: 88px; display: grid; gap: var(--esp-4); padding: var(--esp-6); border-radius: var(--raio-2); background: var(--painel); }
.resumo h2 { font-size: 20px; line-height: 24px; }
.resumo dl { display: grid; gap: var(--esp-3); margin: 0; }
.resumo dl > div { display: flex; justify-content: space-between; gap: var(--esp-3); }
.resumo dt { color: var(--texto-2); }
.resumo dd { margin: 0; text-align: right; color: var(--texto); font-weight: 600; }
.resumo__total { padding-top: var(--esp-3); border-top: 1px solid var(--linha); }
.resumo__total dd { font-family: var(--font-titulo); font-size: 24px; font-weight: 800; color: var(--titulo); }
.resumo .gf-bandeja { --ovo-l: 18px; gap: 6px 8px; justify-content: start; }

/* quantidade do avulso */
.qtd { display: inline-flex; align-items: center; border: 2px solid var(--linha-forte); border-radius: var(--raio-1); }
.qtd button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--texto); font-size: 20px; font-weight: 700; cursor: pointer; }
.qtd button:disabled { opacity: .35; cursor: not-allowed; }
.qtd output { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.item-avulso { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-4) 0; border-bottom: 1px solid var(--linha); }
.item-avulso:first-child { padding-top: 0; }

/* caixas do link pessoal e do obrigado */
.caixa { padding: var(--esp-6); border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--chao); }
.caixa + .caixa { margin-top: var(--esp-4); }
.caixa h2 { font-size: 22px; line-height: 26px; margin-bottom: var(--esp-3); }
.caixa > p + p { margin-top: var(--esp-2); }
.caixa--destaque { border: 0; background: var(--chao); }
.link-pessoal { display: flex; gap: var(--esp-2); margin-top: var(--esp-3); }
.link-pessoal input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--esp-3); border: 2px solid var(--linha-forte); border-radius: var(--raio-1); background: var(--chao); color: var(--texto); font: 14px var(--font-texto); }
@media (max-width: 520px) { .link-pessoal { flex-direction: column; } }

.proxima { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-4); }
.proxima__data { display: grid; gap: var(--esp-2); justify-items: start; }
.lista-entregas { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); }
.lista-entregas li { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px solid var(--linha); }
.lista-entregas .estado { color: var(--texto-2); font-size: 14px; }
.lista-entregas .estado--pulada { color: var(--destaque); font-weight: 600; }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela-simples th, .tabela-simples td { padding: var(--esp-2) var(--esp-3) var(--esp-2) 0; border-bottom: 1px solid var(--linha); text-align: left; }
.tabela-simples th:last-child, .tabela-simples td:last-child { padding-right: 0; }
.tabela-simples th { color: var(--texto-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.tabela-simples td:last-child, .tabela-simples th:last-child { text-align: right; }
.selo { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--painel); color: var(--texto); font-size: 13px; font-weight: 700; }
.selo--ok { background: var(--broto); color: var(--tinta); }
.selo--alerta { background: var(--alerta); color: var(--clara); }
.grade-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
@media (max-width: 760px) { .grade-acoes { grid-template-columns: 1fr; } }
details.caixa > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); font-weight: 700; color: var(--titulo); }
details.caixa > summary::-webkit-details-marker { display: none; }
details.caixa > summary::after { content: "+"; font-size: 22px; color: var(--texto-2); }
details.caixa[open] > summary::after { content: "−"; }
details.caixa[open] > summary { margin-bottom: var(--esp-4); }
.carregando { padding: var(--esp-16) 0; color: var(--texto-2); text-align: center; }
#acoes-assinatura { margin-top: var(--esp-4); }
.regras { display: grid; gap: var(--esp-6); }
.regras section { display: grid; gap: var(--esp-2); }
.regras h2 { font-size: 22px; line-height: 26px; }
.regras p, .regras li { color: var(--texto-2); max-width: 64ch; }
.regras ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--esp-1); }