/* D'Gosto — LP "Onde encontrar"
   Paleta e escala vindas do Guia de Identidade Visual 2026. */

:root{
  /* Paleta institucional (guia, p.05) */
  --bordo-800:#5c131c;   /* primária — cor de superfície */
  --bordo-900:#3a0c12;   /* profundo */
  --vermelho:#c0392b;    /* acento */
  --ambar:#f2a733;       /* acento */
  --neutro-50:#efefef;
  --branco:#ffffff;
  --tinta:#211313;
  --cinza:#7d7d7d;

  /* Escala base 4px (guia, p.07) */
  --e1:4px; --e2:8px; --e3:16px; --e4:32px; --e5:64px;
  --r-card:18px; --r-cardg:22px; --r-pill:999px;

  --max:1160px;
  --sombra:0 2px 4px rgba(33,19,19,.06), 0 12px 28px rgba(33,19,19,.08);
  --sombra-f:0 8px 24px rgba(92,19,28,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font:400 17px/1.65 Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
[hidden]{display:none !important}
h1,h2,h3{margin:0 0 var(--e3); line-height:1.15; letter-spacing:-.02em}
h1{font-weight:800; font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-weight:800; font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-weight:700; font-size:1.12rem}
p{margin:0 0 var(--e3)}
a{color:inherit}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--e4)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:0;background:var(--ambar);color:var(--tinta);padding:var(--e3);z-index:99;border-radius:0 0 var(--r-card) 0}
.pular:focus{left:0}
:focus-visible{outline:3px solid var(--ambar); outline-offset:3px; border-radius:var(--e1)}

/* ---------- Botões (pill, guia p.07) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  padding:14px 28px; border:2px solid transparent; border-radius:var(--r-pill);
  font-weight:700; font-size:1rem; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--amb{background:var(--ambar); color:var(--tinta); box-shadow:0 6px 18px rgba(242,167,51,.35)}
.btn--amb:hover{background:#ffb648}
.btn--verm{background:var(--vermelho); color:var(--branco); box-shadow:0 6px 18px rgba(192,57,43,.3)}
.btn--fant{background:transparent; color:currentColor; border-color:currentColor}
.btn--fant:hover{background:rgba(255,255,255,.12)}
.btn--sm{padding:10px 20px; font-size:.92rem}
.btn--lg{padding:17px 36px; font-size:1.06rem}

.selo{
  display:inline-block; margin-bottom:var(--e3); padding:7px 18px;
  border-radius:var(--r-pill); background:rgba(242,167,51,.18); color:var(--ambar);
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

/* ---------- Topo ---------- */
.topo{position:sticky; top:0; z-index:50; background:var(--bordo-900)}
.topo__i{display:flex; align-items:center; justify-content:space-between; gap:var(--e3); padding-block:12px}
.topo__logo img{width:104px; height:auto}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--bordo-800); color:var(--branco); padding-block:var(--e5) calc(var(--e5) + var(--e4)); overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(680px 420px at 78% 18%, rgba(242,167,51,.20), transparent 62%);
  pointer-events:none;
}
.hero__i{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:var(--e5); align-items:center}
.hero h1 em{font-style:normal; color:var(--ambar)}
.lead{font-size:1.12rem; color:rgba(255,255,255,.9); max-width:56ch}
.lead strong{color:var(--ambar)}
.hero__acoes{display:flex; flex-wrap:wrap; gap:var(--e3); margin-bottom:var(--e4)}
.hero__chips{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); list-style:none; margin:0; padding:0}
.hero__chips li{
  padding:6px 16px; border-radius:var(--r-pill); font-size:.86rem; font-weight:500;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.hero__img img{width:min(100%,420px); margin-inline:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.3))}
.hero__onda{position:absolute; left:0; right:0; bottom:-1px; height:56px; background:var(--branco); border-radius:50% 50% 0 0 / 100% 100% 0 0}

/* ---------- Seções ---------- */
.sec{padding-block:var(--e5)}
.sec--claro{background:var(--neutro-50)}
.sec--bordo{background:var(--bordo-900); color:var(--branco)}
.sec__cab{max-width:62ch; margin-bottom:var(--e4)}
.sec__cab p{color:var(--cinza); font-size:1.06rem; margin:0}
.sec--bordo .sec__cab p{color:rgba(255,255,255,.78)}

/* ---------- Busca ---------- */
.busca{margin-bottom:var(--e3)}
.busca__campo{position:relative; display:flex; align-items:center; max-width:520px}
.busca__lupa{position:absolute; left:20px; width:22px; height:22px; fill:var(--cinza); pointer-events:none}
#q{
  width:100%; padding:16px 48px 16px 54px; font:inherit; font-size:1rem;
  color:var(--tinta); background:var(--branco);
  border:2px solid #e2dcdc; border-radius:var(--r-pill); appearance:none;
}
#q::-webkit-search-cancel-button{display:none}
#q:focus{border-color:var(--bordo-800); outline:none; box-shadow:0 0 0 4px rgba(92,19,28,.1)}
.busca__x{
  position:absolute; right:16px; width:28px; height:28px; display:grid; place-items:center;
  border:0; border-radius:50%; background:var(--neutro-50); color:var(--cinza);
  font-size:20px; line-height:1; cursor:pointer;
}
.busca__x:hover{background:var(--vermelho); color:var(--branco)}

.filtros{display:flex; flex-wrap:wrap; gap:var(--e2); margin-bottom:var(--e3)}
.fchip{
  padding:9px 20px; border:2px solid #e2dcdc; border-radius:var(--r-pill);
  background:var(--branco); color:var(--tinta); font:600 .92rem Poppins,sans-serif; cursor:pointer;
  transition:.15s ease;
}
.fchip:hover{border-color:var(--bordo-800)}
.fchip[aria-pressed="true"]{background:var(--bordo-800); border-color:var(--bordo-800); color:var(--branco)}
.fchip__n{opacity:.6; font-weight:500; margin-left:6px}

.contagem{color:var(--cinza); font-size:.94rem; margin-bottom:var(--e4)}
.contagem b{color:var(--bordo-800)}

/* ---------- Grade de parceiros ---------- */
.grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--e3); list-style:none; margin:0 0 var(--e4); padding:0;
}
.card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:var(--e4) var(--e3); background:var(--branco);
  border:1px solid #ece6e6; border-radius:var(--r-cardg);
  text-align:center; box-shadow:var(--sombra); transition:.18s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--ambar); box-shadow:var(--sombra-f)}
.card__logo{height:76px; display:grid; place-items:center; width:100%}
.card__logo img{max-height:76px; width:auto; object-fit:contain; mix-blend-mode:multiply}
.card__nome{font-weight:700; font-size:.98rem; line-height:1.3}
.card__ufs{display:flex; flex-wrap:wrap; gap:5px; justify-content:center}
.card__uf{
  padding:3px 11px; border-radius:var(--r-pill); background:var(--neutro-50);
  color:var(--cinza); font-size:.72rem; font-weight:600; letter-spacing:.05em;
}

.vazio{text-align:center; max-width:44ch; margin:0 auto var(--e4); padding:var(--e4) 0}
.vazio img{margin:0 auto var(--e3); opacity:.9}
.vazio p{color:var(--cinza)}
.nota{font-size:.88rem; color:var(--cinza); max-width:70ch; margin:0}

/* ---------- Produtos ---------- */
.prods{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--e3); list-style:none; margin:0; padding:0}
.prod{
  display:flex; flex-direction:column; align-items:center;
  background:var(--branco); border-radius:var(--r-cardg); padding:var(--e3) var(--e3) 20px;
  text-align:center; box-shadow:var(--sombra); transition:.18s ease;
}
.prod:hover{transform:translateY(-4px); box-shadow:var(--sombra-f)}
.prod__foto{
  width:100%; aspect-ratio:4/5; display:grid; place-items:center;
  margin-bottom:12px; border-radius:var(--r-card);
  background:radial-gradient(circle at 50% 62%, rgba(242,167,51,.16), transparent 68%);
}
.prod__foto img{max-width:100%; max-height:100%; width:auto; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(33,19,19,.16))}
.prod h3{font-size:1rem; line-height:1.28; margin:0 0 10px; text-wrap:balance}
.prod__meta{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:auto 0 0 !important}
.prod__meta span{
  padding:4px 12px; border-radius:var(--r-pill); background:var(--neutro-50);
  color:var(--cinza); font-size:.74rem; font-weight:600; white-space:nowrap;
}
.prod__meta span:last-child{background:rgba(242,167,51,.2); color:#8a5a08}

/* ---------- Rodapé ---------- */
.rodape{background:var(--bordo-900); color:rgba(255,255,255,.78); padding-block:var(--e5) var(--e4); font-size:.92rem}
.rodape__i{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--e4)}
.rodape h3{color:var(--branco); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px}
.rodape a{color:var(--ambar); text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape__slogan{color:var(--ambar); font-weight:600; margin-top:12px}
.rodape__fim{text-align:center; margin:var(--e4) 0 0; padding-top:var(--e3); border-top:1px solid rgba(255,255,255,.12); font-size:.84rem; color:rgba(255,255,255,.55)}

/* ---------- LGPD ---------- */
.lgpd{
  position:fixed; left:20px; bottom:20px; z-index:70; max-width:380px;
  padding:var(--e3) 20px; background:var(--branco); color:var(--tinta);
  border-radius:var(--r-card); box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.lgpd p{font-size:.88rem; margin-bottom:12px}
.lgpd__btns{display:flex; gap:var(--e2); justify-content:flex-end}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .hero__i{grid-template-columns:1fr; gap:var(--e4); text-align:center}
  .hero__acoes,.hero__chips{justify-content:center}
  .lead{margin-inline:auto}
  .hero__img{order:-1}
  .hero__img img{width:auto; max-height:240px}
  .busca__campo{max-width:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .sec,.hero{padding-block:var(--e4)}
  .hero{padding-bottom:var(--e5)}
  .hero__img img{max-height:180px}
  .lead{font-size:1rem}
  .hero__acoes .btn{width:100%}
  .topo__logo img{width:88px}
  .grade{grid-template-columns:repeat(2,1fr); gap:12px}
  .prods{grid-template-columns:repeat(2,1fr); gap:12px}
  .prod{padding:12px 10px 16px}
  .prod h3{font-size:.88rem}
  .prod__meta span{font-size:.68rem; padding:3px 9px}
  .card{padding:20px 12px}
  .card__logo,.card__logo img{height:56px; max-height:56px}
  .card__nome{font-size:.86rem}
  .lgpd{left:12px; right:12px; bottom:12px; max-width:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important; animation:none!important}
}

/* ---------- Jogo da memória ---------- */
.jogo{max-width:560px; margin-inline:auto}
.jogo__centro{text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--e3)}
.jogo__intro{color:rgba(255,255,255,.82); margin:0; max-width:44ch}
.jogo__rec{margin:0; font-size:.9rem; color:var(--ambar)}
.jogo__aviso{
  margin:0 0 var(--e3); text-align:center; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-size:.82rem; color:var(--ambar);
}
.jogo__placar{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--e2) var(--e3);
  margin-bottom:var(--e3); padding:10px var(--e3);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill); font-size:.84rem; font-variant-numeric:tabular-nums;
}
.jogo__placar b{color:rgba(255,255,255,.55); font-weight:500; margin-right:5px}
.jogo__placar i{font-style:normal; font-weight:700}
.jogo__pontos{
  margin:0; font-size:3.2rem; font-weight:800; line-height:1; color:var(--ambar);
  font-variant-numeric:tabular-nums;
}
.jogo__pontos span{display:block; font-size:.78rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:8px}

/* tabuleiro: 3 colunas, como pedido */
.memoria{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  list-style:none; margin:0 auto; padding:0; max-width:400px;
}
.carta{
  position:relative; width:100%; aspect-ratio:3/4; padding:0; border:0; cursor:pointer;
  background:transparent; border-radius:var(--r-card); perspective:800px;
}
.carta__verso,.carta__frente{
  position:absolute; inset:0; border-radius:var(--r-card);
  display:grid; place-items:center; backface-visibility:hidden;
  transition:transform .32s ease;
}
.carta__verso{
  background:var(--vermelho); border:3px solid rgba(255,255,255,.22);
  background-image:radial-gradient(circle at 50% 45%, rgba(255,255,255,.22), transparent 62%);
  transform:rotateY(0deg);
}
.carta__verso::after{
  content:""; width:52%; height:52%;
  background:url("../assets/marca/dgosto-logo-bege.png") center/contain no-repeat;
  opacity:.85;
}
.carta__frente{
  background:var(--branco); border:3px solid transparent; padding:7px;
  transform:rotateY(180deg);
}
.carta__frente img{max-width:100%; max-height:100%; object-fit:contain}
.carta.virada .carta__verso{transform:rotateY(-180deg)}
.carta.virada .carta__frente{transform:rotateY(0deg)}
.carta:hover:not(.certa) .carta__verso{border-color:var(--ambar)}
.carta.certa{cursor:default}
.carta.certa .carta__frente{border-color:#2f8a4d; background:#eaf7ee}

@media (max-width:560px){
  .memoria{gap:8px; max-width:none}
  .carta__verso,.carta__frente{border-width:2px}
  .carta__frente{padding:4px}
  .jogo__placar{font-size:.74rem; gap:6px 10px; padding:9px 14px}
  .jogo__pontos{font-size:2.6rem}
}
@media (prefers-reduced-motion:reduce){
  .carta__verso,.carta__frente{transition:none}
}