/* ══════════════════════════════════════════════════════════════
   DESAFIO SUPERCASO · base
   Tokens do canvas "Desafio Supercaso" (canvas-hero, PaginaV4), que usa
   a paleta oficial Reconecta. Fonte de display: Big Shoulders Display
   (Google Fonts), substituta da TT Modernoir enquanto a licença comercial
   não sai (nota-fonte do canvas). Inter no corpo, Space Mono nos rótulos.
   Larguras: mobile-first, media queries reais (nada de .pg/.pg.m).
   ══════════════════════════════════════════════════════════════ */
:root{
  /* paleta oficial */
  --cream:#EED9BD;
  --gold:#EECE66;
  --red:#D3111A;
  --oxblood:#6B0F0F;
  --ink:#161616;
  --ink-deep:#0C0B0B;

  --cream-88:rgba(238,217,189,.88);
  --cream-85:rgba(238,217,189,.85);
  --cream-80:rgba(238,217,189,.8);
  --cream-78:rgba(238,217,189,.78);
  --cream-75:rgba(238,217,189,.75);
  --cream-72:rgba(238,217,189,.72);
  --cream-62:rgba(238,217,189,.62);
  --cream-55:rgba(238,217,189,.55);
  --cream-50:rgba(238,217,189,.5);
  --cream-45:rgba(238,217,189,.45);
  --cream-38:rgba(238,217,189,.38);
  --cream-32:rgba(238,217,189,.32);
  --cream-28:rgba(238,217,189,.28);
  --line:rgba(238,217,189,.14);
  --line-16:rgba(238,217,189,.16);
  --line-18:rgba(238,217,189,.18);
  --line-22:rgba(238,217,189,.22);
  --fill-04:rgba(238,217,189,.04);
  --gold-07:rgba(238,206,102,.07);
  --gold-08:rgba(238,206,102,.08);
  --gold-12:rgba(238,206,102,.12);
  --gold-14:rgba(238,206,102,.14);
  --red-06:rgba(211,17,26,.06);

  /* mural claro (forma do customer-reviews da casa) */
  --wall-bg:#F6F3EE;
  --wall-ink:#0B0202;
  --wall-ink-72:rgba(11,2,2,.72);
  --wall-card:#EFEDE0;
  --wall-card-line:#DEDAC3;

  /* gradientes */
  --grad-btn:linear-gradient(180deg,#E2151F 0%,#B00D15 100%);
  --grad-band:linear-gradient(100deg,#6B0F0F 0%,#D3111A 100%);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,.24),0 10px 28px rgba(211,17,26,.36);

  /* tipografia */
  --font-display:"Big Shoulders Display",Impact,"Haettenschweiler",sans-serif;
  --font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --fs-h1:clamp(37px,33px + .8vw,44px);
  --fs-h2:clamp(38px,30px + 2.4vw,64px);
  --fs-h3:clamp(24px,22px + .6vw,30px);
  --fs-p:clamp(15.5px,14.5px + .25vw,18px);
  --fs-li:clamp(15.5px,15px + .15vw,17px);

  --sp-sec:clamp(52px,40px + 4vw,96px);
  --wrap:1160px;
  --pad-lateral:24px;
}

/* tokens que o componente customer-reviews lê por fallback */
:root{
  --color-cream:var(--wall-bg);
  --color-cream-2:var(--wall-card);
  --color-cream-3:var(--wall-card-line);
  --color-black:var(--wall-ink);
  --color-red-light:var(--red);
  --color-red-reconecta:var(--oxblood);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink);color:var(--cream);
  font-size:16px;line-height:1.5;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{text-decoration:none;color:inherit}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ── layout ── */
.sec{padding:var(--sp-sec) 0}
.sec--alt{background:var(--ink-deep)}
.wrap{width:min(var(--wrap),calc(100% - (var(--pad-lateral) * 2)));margin:0 auto}

/* ── tipografia ── */
.kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px;
}
.h2{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-h2);
  line-height:.94;text-transform:uppercase;margin:0 0 22px;color:var(--cream);max-width:880px;
}
.h3{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-h3);
  line-height:.95;text-transform:uppercase;margin:0 0 10px;color:var(--cream);
}
.p{font-size:var(--fs-p);line-height:1.5;color:var(--cream-80);margin:0 0 14px;max-width:720px}
.p strong{color:var(--cream);font-weight:600}
.p--16{font-size:16px}
.mono{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-50);
}
.mark{
  background-image:linear-gradient(180deg,transparent 12%,var(--gold) 12%,var(--gold) 88%,transparent 88%);
  color:var(--ink);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* marcador de decisão pendente (tracejado dourado, como no canvas) */
.ph{
  border:1px dashed rgba(238,206,102,.55);color:var(--gold);
  font-family:var(--font-mono);font-size:11.5px;line-height:1.5;
  padding:10px 14px;border-radius:10px;display:inline-block;
}

/* ── botão ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:62px;padding:0 34px;border-radius:13px;
  background:var(--grad-btn);color:#FFFFFF;font-weight:700;font-size:18px;
  text-decoration:none;box-shadow:var(--shadow-btn);margin-top:8px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn svg{flex:0 0 auto}
.btn--full{width:100%}
.btn--sm{
  height:auto;gap:8px;padding:11px 20px;border-radius:10px;font-size:13px;margin:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(211,17,26,.3);
}

/* ── grids ── */
.g2,.g3,.g4{display:grid;grid-template-columns:1fr;gap:14px}

/* ── lista com check ── */
.li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-li);line-height:1.45;color:var(--cream-88);margin-bottom:12px}
.li strong{color:var(--cream)}
.chk{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--gold-14);
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}

/* ── visibilidade por dispositivo (canvas: desktop 1440 × celular 390) ── */
@media (max-width:767px){.only-d{display:none !important}}
@media (min-width:768px){.only-m{display:none !important}}

/* ── estados do lote (um arquivo, três estados: ?ver=pre | aberto | fechado) ── */
[hidden]{display:none !important}

@media (min-width:768px){
  .mark{white-space:nowrap}
  .g2{grid-template-columns:1fr 1fr;gap:22px}
  .g3{grid-template-columns:1fr 1fr;gap:18px}
  .g4{grid-template-columns:1fr 1fr;gap:16px}
}
@media (min-width:1024px){
  .g3{grid-template-columns:1fr 1fr 1fr}
  .g4{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:767px){
  .btn{height:54px;font-size:16px;padding:0 20px;width:100%}
  .btn--sm{width:auto;height:auto;padding:10px 14px;font-size:12px}
  .h2{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}