/* ============================================
   Tudo no Precinho — sistema de design
   Regras invioláveis:
   - verde (--whatsapp) SOMENTE em CTA
   - --amarelo NUNCA como cor de texto
   - --coral nunca em texto corrido

   Versionamento (sem build step, sem hash automático):
   este arquivo é referenciado com ?v=AAAA-MM-DD nas 3 páginas HTML.
   Ao editar este CSS, BUMPE a data na query string dos 3 <link> —
   senão quem já visitou o site fica até 1 ano sem ver o ajuste
   (ExpiresByType text/css "access plus 1 year" no .htaccess).
   ============================================ */
@font-face{font-family:Archivo;src:url(../fonts/archivo-800.woff2)format("woff2");font-weight:800;font-display:swap;font-style:normal}
@font-face{font-family:Archivo;src:url(../fonts/archivo-900.woff2)format("woff2");font-weight:900;font-display:swap;font-style:normal}
@font-face{font-family:Figtree;src:url(../fonts/figtree-400.woff2)format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Figtree;src:url(../fonts/figtree-600.woff2)format("woff2");font-weight:600;font-display:swap;font-style:normal}

:root{
  --coral:#FF4746; --amarelo:#E8D45E;
  --vermelho:#F82222; /* token de marca reservado (spec §5, contorno do wordmark) —
                          não usado em nenhuma regra hoje; não remover por engano */
  --ink:#101014; --branco:#FFFFFF; --whatsapp:#25D366;
  --ink-suave:#4A4A52;      /* texto secundário, contraste AA sobre branco */
  --linha:#E6E6EA;          /* bordas */
  --fundo-suave:#FAF8F5;    /* faixas alternadas */
  --raio:14px;
  --largura:1120px;
  --passo:clamp(3rem,8vw,5.5rem);  /* espaçamento vertical entre seções */
  --fonte-titulo:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-corpo:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--branco); color:var(--ink);
  font-family:var(--fonte-corpo); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.container{width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:1.25rem}
.secao{padding-block:var(--passo)}
.secao--destaque{background:var(--fundo-suave); border-block:1px solid var(--linha)}

.cabecalho{padding-top:1.5rem}
.cabecalho__logo{width:min(200px,52vw)}

.pular-para-conteudo{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--branco);
  padding:.75rem 1rem; z-index:100; border-radius:0 0 var(--raio) 0;
}
.pular-para-conteudo:focus{left:0}

:where(a,button,summary):focus-visible{
  outline:3px solid var(--ink); outline-offset:3px; border-radius:6px;
}
/* dentro do rodapé o fundo é --ink: outline da mesma cor fica invisível
   (contraste 1:1, falha WCAG 2.4.7) — usa branco só ali */
.rodape :where(a,button,summary):focus-visible{
  outline-color:var(--branco);
}

.titulo-h1{
  font-family:var(--fonte-titulo); font-weight:900;
  font-size:clamp(2.1rem,7vw,3.9rem); line-height:1.04;
  letter-spacing:-.03em; margin:0 0 1rem;
}
.titulo-h2{
  font-family:var(--fonte-titulo); font-weight:800;
  font-size:clamp(1.6rem,4.4vw,2.6rem); line-height:1.12;
  letter-spacing:-.02em; margin:0 0 .75rem;
}
.texto-apoio{
  font-size:clamp(1.05rem,2.4vw,1.25rem); color:var(--ink-suave);
  max-width:56ch; margin:0 0 1.75rem;
}
/* acento coral permitido: título grande */
.destaque-coral{color:var(--coral)}

/* ---- CTA: único elemento verde da página ---- */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--whatsapp); color:#04310F; text-decoration:none;
  font-family:var(--fonte-titulo); font-weight:800; font-size:1.05rem;
  padding:1.05rem 1.6rem; border-radius:var(--raio); border:0;
  min-height:56px;  /* alvo de toque confortável no mobile */
  box-shadow:0 2px 0 #128C7E, 0 10px 24px rgba(37,211,102,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 2px 0 #128C7E, 0 14px 30px rgba(37,211,102,.34)}
.cta:active{transform:translateY(1px); box-shadow:0 1px 0 #128C7E}
.cta--grande{font-size:1.15rem; padding:1.2rem 2rem; width:100%; max-width:420px}
.cta[data-indisponivel]{background:var(--linha); color:var(--ink-suave); box-shadow:none; cursor:not-allowed; pointer-events:none}

.selo{display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.95rem; color:var(--ink-suave); margin-top:1rem; padding:0; list-style:none}
.selo li{display:flex; align-items:center}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

.lista-beneficios{display:grid; gap:1rem; grid-template-columns:1fr; padding:0; margin:0; list-style:none}
.beneficio{
  border:1px solid var(--linha); border-radius:var(--raio); padding:1.4rem;
  background:var(--branco);
}
.beneficio h3{font-family:var(--fonte-titulo); font-weight:800; font-size:1.15rem; margin:.15rem 0 .4rem}
.beneficio p{margin:0; color:var(--ink-suave); font-size:1rem}
.beneficio__icone{width:34px; height:24px}

.passos{display:grid; gap:1.5rem; grid-template-columns:1fr; padding:0; margin:0 0 2rem; list-style:none; counter-reset:passo}
.passo{counter-increment:passo; display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start}
.passo::before{
  content:counter(passo); background:var(--coral); color:var(--branco);
  font-family:var(--fonte-titulo); font-weight:900; font-size:1.2rem;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
}
.passo h3{font-family:var(--fonte-titulo); font-weight:800; font-size:1.2rem; margin:.4rem 0 .3rem}
.passo p{margin:0; color:var(--ink-suave)}

.chips,.categorias{display:flex; flex-wrap:wrap; gap:.6rem; padding:0; margin:0; list-style:none}
.chip{
  border:1px solid var(--linha); border-radius:999px; padding:.6rem 1.1rem;
  font-weight:600; font-size:1rem; background:var(--branco);
}
.categorias .chip{border-left:4px solid var(--amarelo)}

.faq{margin:0}
.faq__item{border-bottom:1px solid var(--linha)}
.faq__item summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative;
  font-family:var(--fonte-titulo); font-weight:800; font-size:1.08rem;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+"; position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  font-size:1.6rem; color:var(--coral); line-height:1;
}
.faq__item[open] summary::after{content:"−"}
.faq__item p{margin:0 0 1.15rem; color:var(--ink-suave); max-width:66ch}

.rodape{background:var(--ink); color:var(--branco); padding-block:3rem 6.5rem}
.rodape a{color:var(--branco)}
.rodape__logo{width:190px; margin-bottom:1.25rem}
.rodape__nav a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.5rem .6rem; margin-inline:-.1rem;
}
.aviso-afiliados{font-size:.9rem; color:#B8B8C0; max-width:62ch; margin:1.5rem 0}
.rodape__creditos{font-size:.9rem; color:#B8B8C0; border-top:1px solid #2A2A32; padding-top:1.5rem; margin-top:1.5rem}

/* barra fixa mobile — não aparece no desktop */
.cta--fixo{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  margin:0; border-radius:0; width:100%; max-width:none;
  padding-bottom:calc(1.05rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(0,0,0,.16);
}
/* a barra fixa só deve sumir quando a tela tem largura E altura de
   desktop — sem o min-height, um celular deitado (ex.: 812x375) também
   cai nesta regra por largura e perde o CTA fixo */
@media (min-width:768px) and (min-height:768px){
  .cta--fixo{display:none}
  .rodape{padding-bottom:3rem}
}
@media (min-width:768px){
  .lista-beneficios{grid-template-columns:repeat(3,1fr)}
  .passos{grid-template-columns:repeat(3,1fr)}
  .cta--grande{width:auto}
}
@media (min-width:1024px){
  .lista-beneficios{grid-template-columns:repeat(5,1fr)}
}