/* INKD Games — estilos públicos. Cores, fontes e formas do tema original (Hitboox). */
:root{
  --primario:#44BBA4; --primario-hover:#3B9E8C; --texto:#596B70; --texto-claro:#8C99A6; --acento:#99E2B4;
  --borda:#D9DEE1; --fundo:#fff; --fundo-claro:#F0F9F7; --escuro:#040C1E; --lavanda:#F2F0FB;
  --fonte-titulo:"Realce","Arial Narrow",Impact,sans-serif; --fonte-texto:"General Sans","Helvetica Neue",Arial,sans-serif;
  --raio:18px; --corte:14px; --container:1480px; --margem:8px; --site-w:1435px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 16px/1.6 var(--fonte-texto);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--fonte-titulo);font-weight:900;text-transform:uppercase;line-height:1}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:3px solid var(--primario);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.pular{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;z-index:999}.pular:focus{left:8px}

/* ---------- Botões (canto cortado em cima à esquerda e embaixo à direita) ---------- */
.btn{--c:var(--corte);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 26px;
  font:900 16px/1 var(--fonte-titulo);text-transform:uppercase;letter-spacing:.02em;border:0;cursor:pointer;color:#fff;
  background:var(--primario);transition:background .25s,color .25s;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.btn--branco{background:#fff;color:#05140f}.btn--fantasma{background:var(--fundo-claro);color:#05140f;box-shadow:inset 0 0 0 1px var(--borda)}
.btn--fantasma:hover{background:#fff}
.btn--vidro{background:rgba(7,20,28,.62);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.btn--vidro:hover{background:var(--primario)}
.btn--pequeno{min-height:38px;padding:0 20px;font-size:14px}
.hover-text{display:inline-block;overflow:hidden;position:relative;vertical-align:middle}
.hover-text>span{display:block;transition:transform .3s}
.hover-text::after{content:attr(data-name);position:absolute;left:0;top:100%;white-space:nowrap}
a:hover>.hover-text>span,.btn:hover .hover-text>span{transform:translateY(-100%)}
a:hover>.hover-text::after,.btn:hover .hover-text::after{transform:translateY(-100%);transition:transform .3s}
.hover-text::after{transition:transform .3s}

/* ---------- Cabeçalho ---------- */
.cab{position:absolute;left:0;right:0;top:0;z-index:50;padding:14px 0}
.cab__in{display:flex;align-items:center;gap:32px;max-width:var(--container);margin:0 auto;padding:0 24px}
.cab__logo img{width:78px;height:auto}
.cab__nav{margin-left:auto}
.cab__nav ul{display:flex;gap:34px;align-items:center}
.cab__nav a{font:900 15px/1 var(--fonte-titulo);text-transform:uppercase;color:#fff;letter-spacing:.03em}
.cab__nav a[aria-current="page"] .hover-text>span{color:var(--acento)}
.cab__burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;padding:8px}
.menu-mobile{position:fixed;inset:0;z-index:100;background:rgba(4,12,30,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.menu-mobile[hidden]{display:none}
.menu-mobile a{font:900 38px/1 var(--fonte-titulo);text-transform:uppercase;color:#fff}
.menu-mobile__fechar{position:absolute;top:18px;right:20px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;padding:8px}

/* ---------- Herói ---------- */
.hero{position:relative;margin:var(--margem) var(--margem) 0;border-radius:var(--raio);min-height:clamp(520px,80vh,740px);
  background:#0c2220 url("/assets/img/hero.webp?v=3") center/cover no-repeat;color:#fff;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(4,12,24,.55),rgba(4,12,24,0) 28%,rgba(4,12,24,0) 70%,rgba(4,12,24,.25))}
.hero::after{content:"";position:absolute;left:92px;right:92px;bottom:-24px;height:25px;background:#0d2321;
  clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,24px 100%)}
.hero h1{position:relative;z-index:2;font-size:clamp(60px,8vw,118px);line-height:.92;max-width:8ch;padding-top:60px}
.hero__in{position:relative;z-index:2;width:100%}
.hero-cards{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1fr 2fr;margin-top:-34px;border-radius:14px}
.hero-card{padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px;min-height:238px}
.hero-card:first-child{border-radius:14px 0 0 14px}
.hero-card:last-child{border-radius:0 14px 14px 0}
.hero-card .ico{font-size:34px;color:var(--primario)}
.hero-card h5{font-size:22px;text-transform:none}
.hero-card p{font-size:14px;line-height:1.55}
.hero-card .btn{margin-top:auto;align-self:flex-start}
.hero-card--verde{background:var(--acento)}.hero-card--verde h5{color:#fff}.hero-card--verde p{color:#4d8d7a}
.hero-card--claro{background:var(--fundo-claro)}.hero-card--claro h5{color:var(--acento)}.hero-card--claro p{color:var(--texto-claro)}
.hero-card--claro .ico{color:var(--primario)}
.hero-card--destaque{position:relative;background:var(--primario);color:#fff;overflow:visible}
.hero-card--destaque h3{position:relative;z-index:2;font-size:clamp(28px,3vw,40px);text-transform:none;line-height:1.02;max-width:11ch;margin-top:6px}
.hero-card--destaque .btn{position:relative;z-index:2}
.hero-card--destaque img{position:absolute;right:0;bottom:0;width:100%;max-width:520px;z-index:1;pointer-events:none}

/* ---------- Seções ---------- */
.rotulo-v{writing-mode:vertical-rl;transform:rotate(180deg);font:900 14px/1 var(--fonte-titulo);text-transform:uppercase;color:var(--primario);letter-spacing:.04em}
.titulo-secao{font-size:clamp(44px,5.4vw,72px);color:var(--acento)}
.cabeca-secao{display:grid;grid-template-columns:auto 1fr;column-gap:30px;align-items:start}
.cabeca-secao .rotulo-v{margin-top:14px}
.cabeca-secao__linha{display:flex;align-items:center;gap:24px;margin-top:26px;flex-wrap:wrap}
.cabeca-secao__linha p{max-width:46ch;color:var(--texto)}

.projeto{position:relative;padding:110px 0 100px}
.projeto__img{position:absolute;left:-3%;top:50%;transform:translateY(-52%);width:min(30vw,420px);pointer-events:none}
.projeto__conteudo{padding-left:clamp(0px,36%,520px)}
.pilares{display:grid;grid-template-columns:1fr 1fr;gap:34px 20px;margin-top:56px}
.pilar{--c:34px;padding:26px 24px 30px;background:linear-gradient(180deg,var(--fundo-claro),rgba(240,249,247,0));
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);border-radius:12px 0 0 0}
.pilar__topo{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pilar__topo .ico{font-size:40px;color:var(--primario)}
.pilar h5{font-size:22px;text-transform:none;color:var(--acento)}
.pilar p{font-size:14px;line-height:1.6;color:var(--texto)}

.destaques{position:relative;margin:0 var(--margem);padding:80px 0 90px;background:var(--fundo-claro);border-radius:var(--raio);
  --c:34px;clip-path:polygon(0 0,100% 0,100% 100%,110px 100%,calc(110px - var(--c)) calc(100% - var(--c)),0 calc(100% - var(--c)))}
.grade-jogos{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:56px}
.jogo-card{position:relative;aspect-ratio:410/520;border-radius:var(--raio);overflow:hidden;background:#07142a;color:#fff;isolation:isolate}
.jogo-card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transition:transform .6s}
.jogo-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,8,24,.2) 30%,rgba(2,8,24,.82));transition:background .4s}
.jogo-card:hover .jogo-card__bg,.jogo-card:focus-within .jogo-card__bg{transform:scale(1.05)}
.jogo-card:hover::before,.jogo-card:focus-within::before{background:linear-gradient(180deg,rgba(2,8,24,.55),rgba(2,8,24,.9))}
.jogo-card__link{position:absolute;inset:0;z-index:3}
.jogo-card__corpo{position:absolute;left:0;right:0;bottom:0;padding:34px 36px 38px;display:flex;flex-direction:column;gap:12px;z-index:2}
.jogo-card__icone{width:min(144px,40%);aspect-ratio:1;border-radius:14px;object-fit:cover}
.jogo-card__titulo{font-size:clamp(34px,3.2vw,46px);text-transform:none;color:#fff;line-height:1}
.jogo-card__extra{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s,opacity .35s}
.jogo-card__extra>div{overflow:hidden;display:flex;flex-direction:column;gap:18px}
.jogo-card:hover .jogo-card__extra,.jogo-card:focus-within .jogo-card__extra{grid-template-rows:1fr;opacity:1;margin-top:6px}
.jogo-card__icone-box{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s}
.jogo-card__icone-box>div{overflow:hidden}
.jogo-card:hover .jogo-card__icone-box,.jogo-card:focus-within .jogo-card__icone-box{grid-template-rows:1fr}
.jogo-card__resumo{font-size:16px;line-height:1.45;font-weight:500;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.jogo-card .btn{align-self:flex-start;position:relative;z-index:4}
@media (hover:none){.jogo-card__extra{grid-template-rows:1fr;opacity:1;margin-top:6px}.jogo-card__icone-box{grid-template-rows:1fr}.jogo-card::before{background:linear-gradient(180deg,rgba(2,8,24,.55),rgba(2,8,24,.9))}}

/* Pílulas de gênero (canto cortado em cima à esquerda) */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{--c:7px;display:inline-flex;align-items:center;height:22px;padding:0 12px;font:600 11px/1 var(--fonte-texto);text-transform:uppercase;letter-spacing:.03em;color:#fff;
  background:var(--cor,var(--primario));clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));position:relative;z-index:4}
.pill--escuro-texto{color:#06231c}

.equipe{padding:100px 0 60px}
.equipe__lista{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(30px,8vw,120px);margin-top:50px;align-items:center}
.equipe__foto{position:relative;aspect-ratio:450/570;max-width:340px;margin-left:26px}
.equipe__foto::before{content:"";position:absolute;inset:18px -26px -22px 26px;background:var(--primario);border-radius:16px;transform:rotate(3deg);z-index:0;opacity:.9}
.equipe__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;z-index:1;opacity:0;transition:opacity .35s}
.equipe__foto img.ativa{opacity:1}
.membro{display:grid;grid-template-columns:110px 1fr;align-items:center;padding:26px 0;border-bottom:1px solid var(--borda);cursor:default}
.membro small{font-size:13px;color:var(--texto-claro)}
.membro h4{font-size:clamp(26px,2.8vw,36px);color:var(--acento);text-transform:none;transition:color .25s}
.membro:hover h4,.membro:focus-within h4{color:var(--primario)}

.contato{position:relative;margin:150px var(--margem) 0;border-radius:var(--raio);padding:80px 0 90px;
  background:radial-gradient(ellipse 38% 55% at 34% 86%,#6EA0E5 0%,rgba(110,160,229,0) 100%),linear-gradient(115deg,#98DFB4 0%,#9CD9C4 40%,#82C5D6 100%);
  --c:30px;clip-path:polygon(0 0,calc(100% - 120px) 0,calc(100% - 120px + var(--c)) var(--c),100% var(--c),100% 100%,110px 100%,calc(110px - var(--c)) calc(100% - var(--c)),0 calc(100% - var(--c)))}
.contato__mascote{position:absolute;right:max(0px,calc((100% - var(--container))/2 - 40px));bottom:0;width:min(42vw,560px);z-index:4;pointer-events:none}
.contato__grade{display:grid;grid-template-columns:auto minmax(220px,1fr) minmax(300px,1.5fr);gap:30px;align-items:start;position:relative;z-index:3}
.contato h2{color:#fff;font-size:clamp(40px,4.6vw,60px);max-width:8ch}
.contato .rotulo-v{color:var(--primario);margin-top:36px}
.form-vidro{--c:36px;padding:44px 40px 40px;max-width:560px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);
  border-radius:16px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.form-vidro>p{color:#fff;font-size:15px;line-height:1.25;margin-bottom:34px}
.campo{display:block;position:relative;margin-bottom:22px}
.campo span{display:block;font:600 13px/1 var(--fonte-texto);color:#fff;margin-bottom:10px}
.campo input,.campo textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.6);color:#fff;font:400 15px/1.4 var(--fonte-texto);padding:4px 0 10px;border-radius:0}
.campo input:focus,.campo textarea:focus{outline:0;border-bottom-color:#fff;box-shadow:0 1px 0 #fff}
.campo textarea{min-height:90px;resize:vertical}
.campos2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-vidro .btn{display:flex;margin:14px auto 0}
.honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso-form{margin-top:16px;font-size:14px;min-height:20px;color:#fff;text-align:center}
.aviso-form--erro{color:#7a1020;font-weight:600}

.faixa-blog{position:relative;margin:90px 0 70px;overflow:hidden;white-space:nowrap}
.faixa-blog__trilho{display:inline-flex;animation:marquee 38s linear infinite}
.faixa-blog__trilho span{font:900 clamp(90px,13vw,190px)/1 var(--fonte-titulo);color:transparent;-webkit-text-stroke:2px rgba(153,226,180,.55);padding:0 .3em;text-transform:uppercase}
.faixa-blog__texto{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 14px/1 var(--fonte-titulo);color:var(--primario);background:#fff;padding:8px 14px;text-transform:uppercase;z-index:2;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Rodapé ---------- */
.rodape{position:relative;margin:60px var(--margem) var(--margem);border-radius:var(--raio);padding:96px 0 28px;color:#fff;
  background:linear-gradient(110deg,#6fb08c 0%,#8fd0a8 55%,#99E2B4 100%);
  --c:34px;clip-path:polygon(0 0,calc(100% - 130px) 0,calc(100% - 130px + var(--c)) var(--c),100% var(--c),100% 100%,0 100%)}
.rodape__grade{display:grid;grid-template-columns:1.1fr 1fr;gap:40px}
.rodape__grande a{display:block;font:900 clamp(40px,5vw,64px)/1.05 var(--fonte-titulo);text-transform:none;color:#fff;transition:color .25s}
.rodape__grande a:hover{color:#06312a}
.rodape__cols{display:grid;grid-template-columns:1fr 1fr;gap:34px 30px}
.rodape h6{font:600 11px/1 var(--fonte-texto);text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.7);margin-bottom:16px}
.rodape__cols li{margin-bottom:10px;font-size:14px}.rodape__cols a:hover{text-decoration:underline}
.rodape__social{display:flex;gap:14px}.rodape__social svg{width:20px;height:20px;fill:#fff}
.newsletter{position:relative;margin-top:80px;padding:24px 28px 24px 200px;border:1px solid rgba(255,255,255,.28);border-radius:14px;display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center}
.newsletter img{position:absolute;left:28px;bottom:6px;width:150px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
.newsletter p{font:600 16px/1.2 var(--fonte-texto)}
.newsletter form{position:relative;display:flex;background:rgba(255,255,255,.18);border-radius:8px}
.newsletter input{flex:1;background:transparent;border:0;color:#fff;font:400 14px var(--fonte-texto);padding:16px 18px;min-width:0}
.newsletter input::placeholder{color:rgba(255,255,255,.85)}
.newsletter button{background:none;border:0;color:#fff;padding:0 18px;cursor:pointer;font-size:16px}
.newsletter .aviso-form{grid-column:1/-1;text-align:left;margin:0}
.rodape__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:13px}
.rodape__base a{text-decoration:underline}
.rodape__base ul{display:flex;gap:18px;color:rgba(255,255,255,.6)}
.topo-btn{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--primario);color:#fff;border:0;cursor:pointer;font-size:18px;z-index:40;opacity:0;pointer-events:none;transition:opacity .3s}
.topo-btn.visivel{opacity:1;pointer-events:auto}

/* ---------- Página do jogo ---------- */
.jogo-hero{position:relative;margin:var(--margem);border-radius:var(--raio);min-height:clamp(420px,62vh,560px);color:#fff;background:var(--escuro);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  --c:40px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - 60px) calc(100% - var(--c)),calc(100% - 60px - var(--c)) 100%,0 100%)}
.jogo-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.88}
.jogo-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,12,30,.78),rgba(4,12,30,0) 45%,rgba(4,12,30,.45))}
.jogo-hero__in{position:relative;z-index:2;padding-bottom:30px}
.jogo-hero__topo{position:absolute;z-index:2;left:max(24px,calc((100% - var(--container))/2 + 24px));top:clamp(96px,16vh,150px)}
.jogo-hero__topo h1{position:static;max-width:9ch}
.disponivel{margin-top:12px;font:900 14px/1 var(--fonte-titulo);text-transform:none;color:#fff}
.disponivel ul{display:flex;gap:10px;margin-top:12px}
.disponivel a{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);transition:background .25s}
.disponivel a:hover{background:var(--primario)}
.disponivel img{width:22px;height:22px;filter:invert(1)}
.migalhas{display:flex;gap:10px;font-size:13px;color:rgba(255,255,255,.75);padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}
.migalhas a:hover{color:#fff}
.faixa-premio{margin:46px auto 0;max-width:var(--container);padding:0 24px}
.faixa-premio img{width:100%;max-width:820px;margin:0 auto;border-radius:6px}
.jogo-corpo{display:grid;grid-template-columns:1fr 300px;gap:40px;margin:64px auto 0;align-items:start}
.jogo-corpo h2{font-size:clamp(40px,4.4vw,56px);color:var(--acento);margin-bottom:26px}
.sobre{position:relative;display:flex;align-items:center;gap:20px;background:#0a1233;color:#fff;border-radius:12px;padding:20px 24px;min-height:128px}
.sobre>img:first-child{width:78px;height:78px;border-radius:10px;border:2px dashed rgba(255,255,255,.5);flex:none;object-fit:cover}
.sobre__txt{max-width:280px}
.sobre__txt p{font:600 15px/1.25 var(--fonte-texto)}
.sobre__trailer{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:900 12px/1 var(--fonte-titulo);text-transform:uppercase;color:#fff}
.sobre__trailer .ico{color:var(--primario);font-size:12px}
.sobre__trailer:hover{color:var(--acento)}
.sobre__deco{position:absolute;right:20px;bottom:0;height:150%;max-height:200px;width:auto;pointer-events:none}
.jogo-corpo h4{font-size:26px;color:var(--acento);text-transform:none;margin:26px 0 10px}
.jogo-corpo .texto p{font-size:14px;line-height:1.65;color:var(--texto);margin-bottom:6px}
.jogo-corpo .texto strong{color:#3c4e53}
.cards-recursos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.recurso{padding:22px 20px 24px;border:1px solid var(--borda);border-radius:12px;background:#fff}
.recurso img{width:56px;height:auto;margin-bottom:12px}
.recurso h3{font-size:19px;text-transform:none;color:var(--acento);margin-bottom:8px}
.recurso p{font-size:13px;line-height:1.5;color:var(--texto)}
.detalhes{--c:34px;background:var(--lavanda);padding:30px 26px 34px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);border-radius:12px 0 0 12px}
.detalhes h4{font-size:19px;color:var(--acento);text-transform:none;margin:0 0 22px}
.detalhes dt{font:900 14px/1 var(--fonte-titulo);text-transform:none;color:var(--acento);margin-top:20px}
.detalhes dd{margin:7px 0 0;font-size:13px;line-height:1.5;color:#3f4650}
.detalhes dd a{color:var(--acento);word-break:break-all}.detalhes dd a:hover{text-decoration:underline}
.talvez{margin-top:90px}
.talvez__topo{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}
.talvez__topo h2{font-size:clamp(40px,4.4vw,56px);color:var(--acento)}

/* Cartão de lista (página de jogos e "você pode gostar") */
.grade-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cartao{position:relative;display:flex;flex-direction:column;border:1px solid var(--borda);border-radius:12px;background:#fff;overflow:hidden}
.cartao__img{aspect-ratio:16/9;width:100%;object-fit:cover;background:#07142a}
.cartao__painel{--c:46px;position:relative;margin-top:-46px;padding:22px 22px 22px;background:#fff;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);flex:1;display:flex;flex-direction:column}
.cartao__id{display:flex;gap:14px;align-items:flex-start}
.cartao__icone{width:72px;height:72px;border-radius:10px;object-fit:cover;flex:none;margin-top:-4px;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.cartao h3{font-size:24px;text-transform:none;color:var(--acento);margin-bottom:8px}
.cartao h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.cartao__rodape{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid var(--borda)}
.cartao__rodape a.detalhes-link{font:900 13px/1 var(--fonte-titulo);text-transform:uppercase;color:var(--primario);text-decoration:underline;position:relative;z-index:2}
.cartao__rodape ul{display:flex;gap:6px;position:relative;z-index:2}
.cartao__rodape ul a{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--fundo-claro)}
.cartao__rodape ul img{width:15px;height:15px;opacity:.55}
.cartao .pills{margin-bottom:6px}.cartao .pill{z-index:2}
.cartao__rodape{margin-top:18px}

/* Cabeçalho das páginas internas */
.pagina-topo{position:relative;margin:var(--margem);border-radius:var(--raio);background:var(--escuro) url("/assets/img/h4-bg.webp") center/cover;color:#fff;padding:170px 0 80px;overflow:hidden}
.pagina-topo::before{content:"";position:absolute;inset:0;background:rgba(4,12,30,.55)}
.pagina-topo .container{position:relative}
.pagina-topo h1{font-size:clamp(54px,8vw,104px);line-height:.9}
.pagina-topo p{margin-top:16px;max-width:52ch;color:rgba(255,255,255,.85)}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin:50px 0 34px}
.filtro{--c:9px;border:0;cursor:pointer;height:36px;padding:0 20px;font:900 14px/1 var(--fonte-titulo);text-transform:uppercase;background:var(--fundo-claro);color:#05140f;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.filtro[aria-pressed="true"]{background:var(--primario);color:#fff}
.estado-vazio{padding:60px 0;text-align:center;color:var(--texto-claro)}
.esqueleto{background:linear-gradient(90deg,#eef4f3,#f7fbfa,#eef4f3);background-size:200% 100%;animation:brilho 1.4s infinite;border-radius:var(--raio);aspect-ratio:410/520}
@keyframes brilho{to{background-position:-200% 0}}

/* Manutenção e cookies */
.manutencao{position:fixed;inset:0;z-index:1000;background:var(--escuro);color:#fff;display:grid;place-items:center;text-align:center;padding:30px}
.manutencao h1{font-size:clamp(44px,8vw,90px);color:var(--acento);margin-bottom:18px}
.manutencao img{width:96px;margin:0 auto 22px}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:560px;background:var(--escuro);color:#fff;padding:18px 24px;border-radius:0;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);font-size:14px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.cookies p{flex:1 1 240px}

@media (max-width:1100px){
  .cab__nav,.cab__in>.btn{display:none}.cab__burger{display:block}
  .grade-jogos,.grade-lista{grid-template-columns:1fr 1fr}
  .contato__grade{grid-template-columns:1fr}.contato .rotulo-v{display:none}.contato__mascote{opacity:.35;width:70vw}
  .jogo-corpo{grid-template-columns:1fr}
  .projeto__img{opacity:.22;width:60vw}.projeto__conteudo{padding-left:0}
}
@media (max-width:760px){
  .hero-cards{grid-template-columns:1fr;margin-top:-30px}
  .hero-card:first-child{border-radius:14px 14px 0 0}.hero-card:last-child{border-radius:0 0 14px 14px;min-height:300px}
  .hero::after{display:none}
  .pilares,.cards-recursos{grid-template-columns:1fr}
  .grade-jogos,.grade-lista{grid-template-columns:1fr}
  .equipe__lista{grid-template-columns:1fr}.equipe__foto{margin:0 auto 20px 26px}
  .rodape__grade,.newsletter{grid-template-columns:1fr}.newsletter{padding:24px 24px 120px}.newsletter img{top:auto;bottom:-10px;left:50%;transform:translateX(-50%)}
  .campos2{grid-template-columns:1fr}
  .cabeca-secao{grid-template-columns:1fr}.cabeca-secao .rotulo-v{writing-mode:horizontal-tb;transform:none;margin:0 0 8px}
  .sobre{flex-direction:column;align-items:flex-start;padding-bottom:150px}
  .contato,.destaques,.rodape{clip-path:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.conteudo-lista{padding-bottom:20px}

.jogo-hero{padding-top:0}
.jogo-hero__in{width:100%}
.disponivel h5{font:900 14px/1 var(--fonte-titulo);text-transform:none}
.cartao__rodape ul{list-style:none}
@media (max-width:760px){.jogo-hero__topo{left:24px;right:24px}}
/* ajustes após conferência visual */
.hero h1{max-width:none}
.jogo-hero__topo h1{font-size:clamp(54px,8vw,104px);line-height:.9;max-width:9ch}
.contato__mascote{width:min(36vw,480px);right:max(0px,calc((100% - var(--container))/2 - 90px))}
.form-vidro{position:relative;z-index:3}
@media (max-width:1100px){.contato__mascote{width:60vw}}

/* ===== Ajuste de escala (conferido contra o original, mesma largura de tela) ===== */
body{font-size:17px}
.container{padding:0 48px}
.cab{padding:22px 0}.cab__in{gap:40px}
.cab__logo img{width:112px}
.cab__nav ul{gap:40px}.cab__nav a{font-size:19px}
.cab__in>.btn{min-height:56px;padding:0 46px;font-size:19px}
.btn{min-height:52px;padding:0 34px;font-size:19px;--c:16px}
.btn--pequeno{min-height:48px;padding:0 30px;font-size:17px}
.hero{min-height:clamp(560px,48.5vw,980px)}
.hero h1{font-size:clamp(64px,7.2vw,150px);padding-top:0;margin-left:clamp(0px,4.6vw,92px)}
.hero::after{left:clamp(60px,7vw,130px);right:clamp(60px,7vw,130px)}
.hero-cards{max-width:1400px;margin-left:auto;margin-right:auto;margin-top:-90px;grid-template-columns:1fr 1fr 1.55fr}
.hero-card{padding:36px 34px 38px;min-height:clamp(300px,19vw,380px);gap:16px}
.hero-card .ico{font-size:48px}
.hero-card h5{font-size:27px}
.hero-card p{font-size:17px;line-height:1.5}
.hero-card--destaque h3{font-size:clamp(34px,3vw,56px);max-width:9.5ch}
.hero-card--destaque img{width:125%;max-width:none;right:-6%;bottom:-3%}
.hero-card--destaque{overflow:visible}
.hero-cards{position:relative}
.hero-card .btn{margin-top:auto}
.container .hero-cards{padding:0}
.titulo-secao{font-size:clamp(50px,5.6vw,108px)}
.rotulo-v{font-size:18px}
.cabeca-secao{column-gap:40px}
.cabeca-secao__linha{gap:30px;margin-top:34px}.cabeca-secao__linha p{font-size:19px;max-width:44ch}
.btn--fantasma{border-radius:6px}
.projeto{padding:130px 0 120px}
.projeto__img{left:-2%;width:min(31vw,640px)}
.projeto__conteudo{padding-left:clamp(0px,35%,720px)}
.pilares{gap:34px 30px;margin-top:70px}
.pilar{padding:34px 34px 44px}
.pilar__topo{gap:18px;margin-bottom:20px}.pilar__topo .ico{font-size:58px}
.pilar h5{font-size:30px}.pilar p{font-size:17px;line-height:1.6;color:#4b5c62}
.destaques{padding:100px 0 120px}
.grade-jogos{gap:34px;margin-top:70px}
.jogo-card__titulo{font-size:clamp(38px,3.4vw,62px)}
.jogo-card__corpo{padding:40px 42px 46px}
.pill{height:26px;font-size:13px;padding:0 15px}
.jogo-card__resumo{font-size:19px}
.equipe{padding:120px 0 80px}
.membro h4{font-size:clamp(30px,3.2vw,52px)}.membro small{font-size:16px}
.membro{grid-template-columns:150px 1fr;padding:34px 0}
.equipe__foto{max-width:420px}
.contato{padding:110px 0 120px}
.contato h2{font-size:clamp(46px,5vw,86px)}
.form-vidro{max-width:680px;padding:56px 54px 50px}
.form-vidro>p{font-size:19px}
.campo span{font-size:16px}.campo input,.campo textarea{font-size:18px}
.contato__mascote{width:min(40vw,720px)}
.faixa-blog__texto{font-size:18px}
.rodape{padding:120px 0 34px}
.rodape__grande a{font-size:clamp(46px,5vw,86px)}
.rodape h6{font-size:14px}.rodape__cols li{font-size:17px}
.newsletter p{font-size:21px}.newsletter input{font-size:17px}
.newsletter img{width:190px}
.rodape__base{font-size:15px}
@media (max-width:1100px){.container{padding:0 24px}.hero-cards{margin-top:-60px}.hero-card--destaque img{width:100%;right:0}.projeto__img{width:60vw}}
@media (max-width:760px){body{font-size:16px}.hero{min-height:560px}.hero-card--destaque img{width:90%}.hero h1{margin-left:0}}
.cab__in{max-width:1320px}
.cab__logo img{width:100px}
.cab__nav a[aria-current="page"] .hover-text>span{color:inherit}
.hero-card--destaque h3{font-size:clamp(32px,2.7vw,52px);max-width:12ch}
.hero-card--destaque img{width:108%;right:-4%;bottom:0}
.titulo-secao{font-size:clamp(42px,4.1vw,80px)}
.cabeca-secao__linha p{font-size:17px}
.projeto__img{width:min(39vw,800px);left:-3%}
.projeto__conteudo{padding-left:clamp(0px,37%,760px);padding-right:5%}
.pilar h5{font-size:27px}.pilar p{font-size:16px}.pilar{padding:30px 30px 40px}
.contato h2{font-size:clamp(40px,4vw,72px);max-width:11ch}
.contato__grade{grid-template-columns:auto minmax(260px,.9fr) minmax(320px,1fr)}
.form-vidro{max-width:600px;padding:44px 44px 40px}
.form-vidro>p{font-size:17px;margin-bottom:30px}
.campo{margin-bottom:18px}.campo span{font-size:14px}.campo input,.campo textarea{font-size:16px}
.contato__mascote{width:min(36vw,640px);right:max(0px,calc((100% - var(--container))/2 - 30px))}
.destaques .container,.equipe .container,.rodape .container,.contato .container{max-width:1315px}
.rodape{padding:100px 0 30px}
.rodape__grande a{font-size:clamp(40px,3.9vw,72px)}
.rodape h6{font-size:12px}.rodape__cols li{font-size:15px}
.newsletter{padding:22px 28px 22px 320px;margin-top:70px}
.newsletter img{width:250px;left:40px;bottom:0}
.newsletter p{font-size:18px}.newsletter input{font-size:15px}
.rodape__base{font-size:13px}
@media (max-width:760px){.newsletter{padding:24px 24px 150px}.newsletter img{width:180px}}
.membro{opacity:.35;transition:opacity .3s}.membro.ativo{opacity:1}
.membro h4{font-size:clamp(28px,2.6vw,44px)}
.equipe__foto{max-width:460px}
.equipe__foto::before{inset:22px 30px -26px -30px;transform:rotate(-4deg);opacity:1}
.btn--fantasma{background:#fff;padding:0 54px}
.destaques .btn--fantasma{background:#fff}
/* contato: o recorte do fundo fica num pseudo-elemento, para o mascote poder passar por cima da borda */
.contato{background:none;clip-path:none;border-radius:0}
.contato::before{content:"";position:absolute;inset:0;z-index:0;border-radius:var(--raio);
  background:radial-gradient(ellipse 40% 60% at 36% 88%,#6EA0E5 0%,rgba(110,160,229,0) 100%),linear-gradient(115deg,#98DFB4 0%,#9CD9C4 40%,#82C5D6 100%);
  --c:30px;clip-path:polygon(0 0,calc(100% - 120px) 0,calc(100% - 120px + var(--c)) var(--c),100% var(--c),100% 100%,110px 100%,calc(110px - var(--c)) calc(100% - var(--c)),0 calc(100% - var(--c)))}
.contato__grade{grid-template-columns:auto minmax(240px,.8fr) minmax(380px,1fr)}
.form-vidro{max-width:560px;margin-right:auto}
.contato__mascote{width:min(33vw,600px);right:-1%;bottom:0;z-index:4}
@media (max-width:1100px){.contato__grade{grid-template-columns:1fr}.contato__mascote{width:70vw;opacity:.35;right:-10%}}
.contato__mascote{width:min(37vw,690px);right:-5%}
/* ===== Herói: ajuste pela comparação com o original ===== */
html,body{overflow-x:clip}
main{overflow-x:clip}
.cab__in{max-width:1220px;padding:0}
.cab__logo img{width:115px}
.hero{min-height:clamp(560px,47.9vw,980px)}
.hero__in{max-width:1220px;margin:0 auto;padding:0}
.hero h1{margin-left:0;font-size:clamp(64px,6.85vw,140px)}
.hero-cards{max-width:1390px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.55fr);margin-top:-6vw}
.hero-card{padding:34px 34px 36px}
.hero-card h5{font-size:24px}
.hero-card p{font-size:15px;line-height:1.55}
.hero-card .btn{min-height:40px;padding:0 26px;font-size:15px}
.hero-card--destaque h3{font-size:clamp(30px,2.5vw,48px);max-width:none}
.hero-card--destaque img{width:92%;right:2%;bottom:0}
@media (max-width:1100px){.cab__in{padding:0 24px}.hero__in{padding:0 24px}.hero-cards{margin-top:-60px}}
.cab__nav ul{gap:32px}.cab__in{gap:28px}
.hero-card--destaque h3{max-width:11ch}
/* ===== Herói: imagem fixa com película preta, aba inferior com a mesma imagem, cartões mais baixos ===== */
.hero{
  background:linear-gradient(rgba(2,8,14,.50),rgba(2,8,14,.50)),#0c2220 url("/assets/img/hero.webp?v=3") center/cover no-repeat fixed;
}
.hero::before{display:none}
.hero::after{
  background:linear-gradient(rgba(2,8,14,.50),rgba(2,8,14,.50)),#0c2220 url("/assets/img/hero.webp?v=3") center/cover no-repeat fixed;
  bottom:-24px;height:25px;
}
@media (hover:none),(max-width:760px){
  .hero,.hero::after{background-attachment:scroll}
}
.hero-card{min-height:clamp(250px,15.2vw,330px);padding:30px 32px 32px;gap:12px}
.hero-card .ico{font-size:44px}
.hero-card--destaque img{height:215%;width:auto;max-width:none;right:-3%;bottom:0}
.hero-card--destaque h3{position:relative;z-index:2}
@media (max-width:760px){.hero-card--destaque img{height:auto;width:85%;right:0}.hero-card{min-height:0}}
/* ===== Cartões do herói: tudo proporcional à largura da tela (valor máximo = tamanho em tela de ~1900px) ===== */
.hero-card{min-height:clamp(250px,18.4vw,348px);padding:clamp(22px,1.8vw,34px);gap:clamp(10px,.8vw,16px)}
.hero-card .ico{font-size:clamp(34px,2.43vw,46px)}
.hero-card h5{font-size:clamp(20px,1.48vw,28px)}
.hero-card p{font-size:clamp(14px,.95vw,18px);line-height:1.5}
.hero-card .btn{min-height:clamp(42px,2.96vw,56px);padding:0 clamp(26px,2.1vw,40px);font-size:clamp(14px,.95vw,18px)}
.hero-card--destaque h3{font-size:clamp(28px,2.75vw,52px);max-width:11ch}
/* polvo: sempre dentro da largura do cartão (só sobe para fora pelo topo, como no original) */
.hero-card--destaque img{width:92%;height:auto;max-width:92%;right:3%;left:auto;bottom:0}
@media (max-width:1100px){
  .hero-card{min-height:0;padding:26px 24px}
  .hero-card h5{font-size:22px}.hero-card p{font-size:15px}
  .hero-card .btn{min-height:44px;font-size:15px;padding:0 26px}
  .hero-card--destaque{min-height:300px}.hero-card--destaque h3{font-size:34px}
}
@media (max-width:760px){
  .hero-card--destaque{min-height:380px}
  .hero-card--destaque img{width:80%;max-width:80%;right:2%}
}
/* Celulares: cartões empilhados */
@media (max-width:767px){
  .hero-cards{grid-template-columns:minmax(0,1fr);margin-top:-50px;max-width:560px}
  .hero-card:first-child{border-radius:14px 14px 0 0}.hero-card:last-child{border-radius:0 0 14px 14px}
  .hero-card{min-height:0}
  .hero-card--destaque{min-height:360px}
  .hero-card--destaque img{width:62%;max-width:62%;right:2%}
  .hero-card--destaque h3{font-size:34px;max-width:9ch}
  .hero h1{font-size:clamp(48px,13vw,84px)}
  .hero{min-height:clamp(480px,110vw,640px)}
  .hero::after{display:none}
}
/* Texto dos 2 primeiros cartões do herói (valores definidos pela Scarllett) */
.hero-card--verde p,.hero-card--claro p{font-size:16px;line-height:24px;color:#8C99A6}
/* Título branco do 3º cartão (mesmo CSS do .elementor-heading-title do original) */
.hero-card--destaque h3{color:#fff;line-height:1;margin:0;padding:0}
/* ===== 3º cartão: igual ao original (polvo maior, cortado na base; título em 3 linhas, mais abaixo) ===== */
.hero-card--destaque{clip-path:inset(-100vh 0 0 0)}  /* sobe livre pelo topo; nunca passa dos lados nem da base */
.hero-card--destaque img{width:106%;max-width:none;height:auto;right:-6%;left:auto;bottom:-5%}
.hero-card--destaque h3{font-size:clamp(28px,2.5vw,47px);max-width:48%;margin-top:clamp(24px,2.6vw,50px)}
@media (max-width:900px){
  .hero-card--destaque img{width:80%;right:-4%;bottom:-3%}
  .hero-card--destaque h3{font-size:34px;max-width:55%;margin-top:10px}
}
/* ===== Efeito dos botões (igual ao tema original) ===== */
.btn{transition:background-color .3s ease,color .3s ease}
.hover-text>span,.hover-text::after{transition:transform .4s ease}
.hover-text{vertical-align:top}
.hover-text::after{height:100%;display:block}
/* "About us" (e demais botões verdes dos cartões): vira branco, texto novo entra preto */
/* "Our games" (botão branco): vira verde-claro, texto preto */

/* ===== Efeito 1 dos botões (copiado do tema: dois triângulos que crescem dos cantos cortados + texto que rola) ===== */
.btn{position:relative;overflow:hidden;--bg-hover:var(--acento);transition:background-color .3s ease,color .3s ease}
.btn::before{content:"";position:absolute;height:calc(100% + 130px);width:100%;top:50%;left:50%;
  background:linear-gradient(to top left,var(--bg-hover) 50%,#0000 50.1%) bottom right,linear-gradient(to bottom right,var(--bg-hover) 50%,#0000 50.1%) top left;
  background-size:0 0;background-repeat:no-repeat;transition:all .3s ease;z-index:-1;transform:translate(-50%,-50%)}
.btn:hover::before{background-size:100% 100%}
.btn:hover{background-color:var(--primario)}
.hover-text{position:relative;z-index:1}
/* "About us": varre em branco, o botão vira branco e o texto novo entra preto */
.hero-card--verde .btn{--bg-hover:#fff}
.hero-card--verde .btn:hover{background-color:#fff}
.hero-card--verde .btn .hover-text::after{color:#000}
/* "Our games" (botão branco): varre e fica verde-claro; texto novo entra branco (como no CSS do tema) */
.btn--branco{background:#fff}
.btn--branco:hover{background-color:var(--acento)}
.btn--branco .hover-text::after{color:#fff}
.btn--branco .hover-text>span{color:#000}
/* Botões "outline" (Our goals, View all games, Meet the team): varrem em verde-claro; texto novo entra branco */
.btn--fantasma{--bg-hover:var(--acento)}
.btn--fantasma:hover{background-color:#fff}
.btn--fantasma .hover-text::after{color:#fff}
/* Botão "Details" dos cards de jogo: varre em verde-água */
.btn--vidro{--bg-hover:var(--primario)}
/* "Blog": varre e fica #99E2B4 */
.hero-card--claro .btn{--bg-hover:var(--acento)}
.hero-card--claro .btn:hover{background-color:var(--acento)}

/* ===================== RESPONSIVIDADE DO HERÓI (referência: prints do original) ===================== */
/* Laptop / zoom maior (≈1025–1366px): tudo ocupa a largura da tela; colunas dos cartões 1 : 1 : 2 */
@media (max-width:1366px){
  .cab{padding:16px 0}
  .cab__in{max-width:none;padding:0 14px;gap:clamp(14px,2vw,28px)}
  .cab__logo img{width:clamp(72px,8vw,100px)}
  .cab__nav ul{gap:clamp(14px,2.2vw,32px)}
  .cab__nav a{font-size:clamp(12px,1.3vw,17px)}
  .cab__in>.btn{min-height:clamp(40px,3.8vw,52px);padding:0 clamp(22px,2.4vw,38px);font-size:clamp(14px,1.3vw,18px)}
  .hero{min-height:clamp(520px,57vw,820px);align-items:flex-end;padding-bottom:15vw}
  .hero__in{max-width:none;padding:0 20px}
  .hero h1{font-size:clamp(52px,7.4vw,100px);margin-left:0}
  .container--cheio{padding:0;max-width:none}
  .hero-cards{max-width:none;margin:-4vw 8px 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
  .hero-card{min-height:300px;padding:24px 24px 26px}
  .hero-card .btn{min-height:50px;padding:0 32px;font-size:16px}
  .hero-card--destaque h3{font-size:clamp(34px,3.9vw,50px);max-width:78%;margin-top:clamp(20px,3vw,44px)}
}
/* Tablet (≤1024px): menu hambúrguer à esquerda, logo no centro, Play à direita; 3 colunas continuam */
@media (max-width:1024px){
  .cab__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px}
  .cab__nav{display:none}
  .cab__burger{display:block;grid-column:1;grid-row:1;justify-self:start;margin:0}
  .cab__logo{grid-column:2;grid-row:1}
  .cab__in>.btn{display:inline-flex;grid-column:3;grid-row:1;justify-self:end}
  .cab__logo img{width:clamp(84px,11vw,110px)}
  .hero{min-height:64vw;padding-bottom:16vw}
  .hero h1{font-size:clamp(46px,7.4vw,76px)}
  .hero-card--destaque h3{font-size:clamp(30px,4.7vw,48px);max-width:80%}
  .hero-card--destaque img{width:78%;max-width:78%;right:2%;bottom:0}
}
@media (min-width:1025px){
  .cab__nav{display:block}.cab__burger{display:none}.cab__in>.btn{display:inline-flex}
}
/* Celular (<768px) */
@media (max-width:767px){
  .hero{min-height:clamp(480px,110vw,640px);padding-bottom:32vw}
  .hero h1{font-size:clamp(44px,12vw,72px)}
  .hero-cards{grid-template-columns:minmax(0,1fr);max-width:none}
  .hero-card--destaque h3{max-width:60%}
}
/* título do 3º cartão em 3 linhas nas telas médias, como no original */
@media (max-width:1366px){.hero-card--destaque h3{max-width:64%}}
@media (max-width:1024px){.hero-card--destaque h3{max-width:66%}}
@media (max-width:767px){.hero-card--destaque h3{max-width:62%}}

/* ===== Seção "The project": ajuste pela comparação com o original ===== */
.projeto{padding:162px 0 120px}
.projeto__img{width:min(40.4vw,830px);left:-8.1%;margin-top:-1.4vw}
.projeto__conteudo{padding-left:clamp(0px,34.2%,720px);padding-right:7.4%}
.projeto .cabeca-secao{column-gap:44px;padding-left:14px}
.projeto .cabeca-secao__linha{margin-top:47px;gap:26px}
.projeto .cabeca-secao__linha p{font-size:19.5px;line-height:1.75;max-width:540px}
.projeto .btn--fantasma{min-height:55px;padding:0 40px}
.pilares{margin-top:70px;gap:34px 29px}
.pilar{padding:40px 37px 67px}
.pilar__topo{gap:15px;margin-bottom:28px}
.pilar h5{font-size:30px}
.pilar p{font-size:16.3px;line-height:1.4}
@media (max-width:1366px){
  .projeto{padding:110px 0 100px}
  .projeto__img{width:min(46vw,640px);left:-6%;margin-top:0;opacity:1}
  .projeto__conteudo{padding-left:clamp(0px,36%,520px);padding-right:3%}
  .projeto .cabeca-secao{padding-left:0}
  .pilar{padding:28px 26px 40px}.pilar h5{font-size:24px}.pilar p{font-size:15px}
  .projeto .cabeca-secao__linha p{font-size:17px}
}
@media (max-width:1024px){
  .projeto__img{opacity:.22;width:62vw}.projeto__conteudo{padding-left:0;padding-right:0}
}
@media (max-width:767px){.pilares{grid-template-columns:minmax(0,1fr)}}
/* refinos da comparação */
.projeto__img{width:min(38.6vw,790px);left:-8.4%}
.projeto__conteudo{padding-left:clamp(0px,35.3%,740px)}
.projeto .titulo-secao{margin-top:17px}
.projeto .cabeca-secao__linha{margin-top:30px}
.projeto .cabeca-secao__linha p{font-size:18.4px;line-height:1.7}
.pilar{padding:40px 28px 59px 37px}
.pilar p{font-size:16px}
@media (max-width:1366px){.projeto__img{width:min(46vw,640px);left:-6%}.projeto__conteudo{padding-left:clamp(0px,36%,520px)}.projeto .titulo-secao{margin-top:0}.projeto .cabeca-secao__linha{margin-top:34px}.projeto .cabeca-secao__linha p{font-size:17px}.pilar{padding:28px 26px 40px}.pilar p{font-size:15px}}
@media (max-width:1024px){.projeto__img{width:62vw}.projeto__conteudo{padding-left:0}}

/* ===== The project: mais espaço no topo + botão "outline" com borda que acompanha os cantos chanfrados ===== */
.projeto{padding-top:230px}
.projeto__img{margin-top:1.4vw}
.pilares{margin-top:78px}
.projeto .btn--fantasma{min-height:61px;padding:0 50px}
/* borda desenhada por camadas: fundo do botão = cor da borda; ::after = preenchimento 1px para dentro, com o mesmo recorte */
.btn--fantasma,.destaques .btn--fantasma{background-color:var(--borda);box-shadow:none}
.btn--fantasma::after{content:"";position:absolute;inset:1px;z-index:-2;background:#fff;
  clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px));transition:background-color .3s ease}
.btn--fantasma:hover,.destaques .btn--fantasma:hover{background-color:var(--acento)}
.btn--fantasma:hover::after{background:transparent}
@media (max-width:1366px){.projeto{padding-top:130px}.projeto__img{margin-top:0}.pilares{margin-top:60px}}

/* ===== The project: respiro acima e abaixo do cavalo-marinho; botão com borda inteira ===== */
.projeto{--sea-w:min(38.6vw,790px);padding-top:230px;min-height:calc(var(--sea-w)*1.2835 + 8.4vw)}
.projeto__img{width:var(--sea-w);top:4.2vw;transform:none;margin-top:0}
.projeto .cabeca-secao__linha{margin-top:37px}
.pilares{margin-top:74px}
@media (max-width:1366px){.projeto{--sea-w:min(46vw,640px);padding-top:150px}.projeto .cabeca-secao__linha{margin-top:34px}.pilares{margin-top:60px}}
@media (max-width:1024px){.projeto{--sea-w:62vw}}
@media (max-width:767px){.projeto{min-height:0;padding-top:110px}}
/* botão "outline": a borda segue o recorte dos cantos (filtro no invólucro, porque o clip-path corta borda normal) */
.btn-borda{display:inline-flex;filter:drop-shadow(1px 0 0 #D9DEE1) drop-shadow(-1px 0 0 #D9DEE1) drop-shadow(0 1px 0 #D9DEE1) drop-shadow(0 -1px 0 #D9DEE1);transition:filter .3s}
.btn-borda:hover{filter:none}
.btn--fantasma{box-shadow:none;border-radius:6px}
/* ajuste fino pela 2ª comparação */
.projeto{padding-top:213px}
.projeto__img{top:3.9vw}
.projeto .titulo-secao{font-size:clamp(42px,4vw,78px)}
.projeto .cabeca-secao{padding-left:0}
.projeto .cabeca-secao__linha{flex-wrap:nowrap;align-items:center}
.projeto .cabeca-secao__linha p{flex:1;min-width:0;max-width:505px}
.projeto .btn--fantasma{min-height:51px;padding:0 38px}
.btn-borda{flex:none;filter:drop-shadow(.6px 0 0 #DDE2E5) drop-shadow(-.6px 0 0 #DDE2E5) drop-shadow(0 .6px 0 #DDE2E5) drop-shadow(0 -.6px 0 #DDE2E5)}
@media (max-width:1366px){.projeto{padding-top:150px}.projeto .cabeca-secao__linha{flex-wrap:wrap}}

/* ===== Botão "outline" (Our goals, View all games, Meet the team): contorno fino de 1px que acompanha o recorte ===== */
.btn-borda{filter:none!important}
.btn--fantasma{
  --c:15px;--borda:#DDE2E5;
  background-color:var(--borda);border-radius:8px;box-shadow:none;
  min-height:61px;padding:0 52px;
}
/* preenchimento branco 1px para dentro (o recorte interno é 0,59px menor por causa do ângulo de 45°) */
.btn--fantasma::after{
  content:"";position:absolute;inset:1px;z-index:-2;background:#fff;border-radius:7px;
  clip-path:polygon(0 calc(var(--c) - .59px),calc(var(--c) - .59px) 0,100% 0,100% calc(100% - var(--c) + .59px),calc(100% - var(--c) + .59px) 100%,0 100%);
}
.btn--fantasma:hover{background-color:var(--acento)}
.btn--fantasma:hover::after{background:transparent}
.btn--fantasma .hover-text>span{color:#05140f}
.projeto .btn--fantasma{min-height:61px;padding:0 52px}
@media (max-width:1366px){.btn--fantasma,.projeto .btn--fantasma{min-height:54px;padding:0 40px}}

/* ===== Botões outline: cantos menos arredondados (o tema usa raio ≈ 5) ===== */
.btn--fantasma{border-radius:4px}
.btn--fantasma::after{border-radius:3px}

/* ===== Cards de jogo da home: tudo proporcional à largura do card (cqw), medidas do original ===== */
.jogo-card{container-type:inline-size}
.jogo-card__corpo{padding:0 12.7cqw 12.3cqw;gap:0}
.jogo-card__icone-box>div{padding-bottom:1cqw}
.jogo-card__icone{width:35.1cqw;max-width:none;border-radius:2.8cqw}
.jogo-card__titulo{font-size:9.6cqw;line-height:1}
.jogo-card .pills{margin-top:4cqw;gap:1cqw}
.jogo-card .pill{height:4.7cqw;padding:0 3cqw;font-size:2.2cqw;--c:1.4cqw}
.jogo-card__extra>div{gap:0}
.jogo-card__resumo{font-size:3.55cqw;line-height:5.7cqw;margin-top:5.2cqw;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.jogo-card__extra .btn{margin-top:6.8cqw;min-height:14cqw;padding:0 10cqw;font-size:3.7cqw;--c:3.3cqw}
.jogo-card:hover .jogo-card__extra,.jogo-card:focus-within .jogo-card__extra{margin-top:0}
/* botão "Details": vidro escuro com contorno fino que acompanha o recorte; no hover varre em verde-água (#44BBA4) */
.btn--vidro{background-color:rgba(255,255,255,.26);box-shadow:none;--bg-hover:var(--primario)}
.btn--vidro::after{content:"";position:absolute;inset:1px;z-index:-2;background:rgba(9,15,27,.86);
  clip-path:polygon(0 calc(var(--c) - .59px),calc(var(--c) - .59px) 0,100% 0,100% calc(100% - var(--c) + .59px),calc(100% - var(--c) + .59px) 100%,0 100%)}
.btn--vidro:hover{background-color:var(--primario)}
.btn--vidro:hover::after{background:transparent}
.jogo-card .pill{padding:0 4.5cqw}
.jogo-card__extra .btn{padding:0 15.3cqw;margin-top:6cqw}
.jogo-card .pills{margin-top:3.2cqw}
.jogo-card__resumo{margin-top:4.4cqw}
.jogo-card__icone-box>div{padding-bottom:0}
/* o link do card inteiro ficava por cima do botão e das pílulas; agora só eles recebem o mouse */
.jogo-card__corpo{z-index:4;pointer-events:none}
.jogo-card__corpo .btn,.jogo-card__corpo .pill{pointer-events:auto}
.btn--vidro{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ===== Equipe: foto maior, fundo verde inclinado que "balança" na troca, nomes como no original ===== */
.equipe__lista{grid-template-columns:minmax(220px,372px) 1fr;gap:clamp(40px,5.9vw,113px);margin-top:65px;align-items:center}
.equipe__foto{position:relative;aspect-ratio:495/628;max-width:372px;margin:0;width:100%}
.equipe__foto::before{content:"";position:absolute;inset:0;background:var(--primario);border-radius:6.7%;transform:rotate(-9.5deg);opacity:1;z-index:0}
.equipe__foto.girando::before{animation:giro .75s ease}
@keyframes giro{0%{transform:rotate(-9.5deg)}45%{transform:rotate(-2deg)}100%{transform:rotate(-9.5deg)}}
.equipe__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6.7%;z-index:1;opacity:0;transition:opacity .45s ease}
.equipe__foto img.ativa{opacity:1;z-index:2}
.membro{opacity:1;transition:none}
.membro h4{color:var(--acento);font-size:clamp(28px,2.1vw,40px);opacity:.3;transition:opacity .35s ease}
.membro small{color:var(--texto-claro);opacity:.3;transition:opacity .35s ease}
.membro.ativo h4,.membro.ativo small{opacity:1}
.membro:hover h4{color:var(--acento)}
@media (prefers-reduced-motion:reduce){.equipe__foto.girando::before{animation:none}}
@media (max-width:760px){.equipe__lista{grid-template-columns:1fr}.equipe__foto{max-width:300px;margin:0 auto 20px}}

/* ===== Contato: mascote maior ATRÁS do vidro (o card desfoca o que passa por trás), gradiente mais forte, formulário como no original ===== */
.contato::before{background:
  radial-gradient(ellipse 34% 64% at 36% 94%,#6E9EE5 0%,rgba(110,158,229,0) 100%),
  radial-gradient(ellipse 42% 80% at 76% 108%,#8DE3EA 0%,rgba(141,227,234,0) 100%),
  linear-gradient(115deg,#98DFB4 0%,#92CCC4 45%,#82B4D0 100%)}
.contato__mascote{width:min(47vw,880px);right:-13%;bottom:0;z-index:2}
.contato__grade{grid-template-columns:auto minmax(230px,.75fr) minmax(430px,1fr)}
.form-vidro{max-width:722px;padding:70px 76px 64px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.form-vidro>p{text-align:center;font-size:19px;line-height:1.15;margin:0 auto 78px;max-width:560px}
.campo{margin-bottom:26px}
.campo span{font-size:15px;margin-bottom:6px}
.campo input{height:34px;padding:0 0 8px}
.campo textarea{min-height:113px;padding:0 0 8px}
.form-vidro .btn{margin-top:26px}
@media (max-width:1366px){.contato__mascote{width:min(52vw,720px);right:-16%}.form-vidro{padding:48px 44px 44px}.form-vidro>p{margin-bottom:46px;font-size:17px}}
@media (max-width:1100px){.contato__grade{grid-template-columns:1fr}.contato__mascote{width:70vw;opacity:.35;right:-10%}}

/* ===== Contato: posição do mascote e do vidro medidas no original (frações da largura da tela) ===== */
.contato{--mw:min(44.5vw,1100px)}
.contato__mascote{width:var(--mw);right:auto;left:calc(90.45vw - 8px - .627 * var(--mw));bottom:0}
.contato__grade{padding-left:.7vw}
.contato h2{margin-left:2.2vw}
.form-vidro{margin-left:1.1vw;
  background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (max-width:1366px){.contato__mascote{left:calc(100% - var(--mw) * .62);width:min(52vw,720px)}.contato__grade{padding-left:0}.contato h2{margin-left:0}.form-vidro{margin-left:0}}
@media (max-width:1100px){.contato__mascote{left:auto;right:-10%;width:70vw}}
@media (min-width:1367px){.contato__grade{padding-left:1.9vw}.contato h2{margin-left:1.6vw}.form-vidro{margin-left:-1.8vw;max-width:750px}}

/* ===== Contato (≥1367px): tudo em função do tamanho do título (--hw = largura de "LET'S TALK"), medido no original ===== */
@media (min-width:1367px){
  .contato{--fs:clamp(40px,4vw,72px);--hw:calc(var(--fs) * 3.403);--mw:calc(var(--hw) * 2.8);
    padding:calc(var(--hw) * .378) 0 calc(var(--hw) * .33)}
  .contato .container{max-width:none;padding:0}
  .contato__grade{display:grid;grid-template-columns:calc(var(--hw) * .294) calc(var(--hw) * 1.64) calc(var(--hw) * 2.42);
    column-gap:0;padding-left:0;margin-left:calc(50% - var(--hw) * 2.49);align-items:start}
  .contato h2{font-size:var(--fs);margin-left:0;max-width:none}
  .form-vidro{margin-left:0;max-width:none;width:100%;min-height:calc(var(--hw) * 2.4);padding:calc(var(--hw) * .2) calc(var(--hw) * .22) calc(var(--hw) * .15)}
  .form-vidro>p{font-size:clamp(15px,1.0vw,19px);margin:0 auto calc(var(--hw) * .26)}
  .contato__mascote{width:var(--mw);left:calc(50% + var(--hw) * 2.444 - var(--mw) * .506);right:auto;top:calc(var(--hw) * -.547);bottom:auto}
}
@media (max-width:1366px) and (min-width:1101px){.contato__mascote{left:calc(100% - var(--mw) * .62)}}
@media (min-width:1367px){
  .form-vidro{padding:calc(var(--hw) * .17) calc(var(--hw) * .22) calc(var(--hw) * .1)}
  .form-vidro>p{margin-bottom:calc(var(--hw) * .2)}
  .contato .campo{margin-bottom:18px}
  .contato .campo textarea{min-height:90px}
  .form-vidro .btn{margin-top:20px}
}

/* Contato: +80px de altura e mascote 5% maior (base alinhada ao fim da seção) */
@media (min-width:1367px){
  .contato{--mw:calc(var(--hw) * 2.94);padding-bottom:calc(var(--hw) * .33 + 80px)}
  .contato__mascote{top:auto;bottom:0}
}
@media (max-width:1366px){.contato{padding-bottom:170px}.contato__mascote{width:min(54.6vw,756px)}}
/* Contato: mascote +10% */
@media (min-width:1367px){.contato{--mw:calc(var(--hw) * 3.234)}}
@media (max-width:1366px){.contato__mascote{width:min(60vw,830px)}}

/* ===== Card do formulário: medidas internas do original, em fração da largura do card (--cw) ===== */
@media (min-width:1367px){
  .form-vidro{--cw:calc(var(--hw) * 2.42);--c:calc(var(--cw) * .087);border-radius:calc(var(--cw) * .035);
    min-height:0;height:calc(var(--cw) * .99);padding:calc(var(--cw) * .085) calc(var(--cw) * .123) 0}
  .form-vidro>p{font-size:calc(var(--cw) * .0235);line-height:1.2;margin:0 auto calc(var(--cw) * .165);max-width:none}
  .contato .campo{margin-bottom:calc(var(--cw) * .0545)}
  .contato .campo span{font-size:calc(var(--cw) * .0245);line-height:1;margin-bottom:calc(var(--cw) * .0065)}
  .contato .campo input{height:calc(var(--cw) * .024);padding:0;font-size:calc(var(--cw) * .0245)}
  .contato .campo textarea{height:calc(var(--cw) * .136);min-height:0;padding:0;font-size:calc(var(--cw) * .0245)}
  .contato .campo:has(textarea){margin-top:calc(var(--cw) * .1);margin-bottom:0}
  .campos2{gap:calc(var(--cw) * .046)}
  .form-vidro .btn{margin-top:calc(var(--cw) * .049);min-height:calc(var(--cw) * .094);padding:0 calc(var(--cw) * .06);font-size:calc(var(--cw) * .0225)}
}
@media (min-width:1367px){
  .contato .campo input,.contato .campo textarea{display:block;width:100%}
  .form-vidro>p{font-size:calc(var(--cw) * .0305);margin-bottom:calc(var(--cw) * .127)}
  .contato .campo span{font-size:calc(var(--cw) * .0230)}
  .contato .campo input,.contato .campo textarea{font-size:calc(var(--cw) * .0230)}
}
@media (min-width:1367px){.form-vidro .btn{letter-spacing:0;font-size:calc(var(--cw) * .0245)}}

/* ===== Rodapé: fundo, rolagens dos links e, em ≥1367px, medidas do original em função de --hb (largura de "Our Games") ===== */
.rodape{background:radial-gradient(ellipse 30% 70% at 30% 0%,rgba(108,177,121,.9) 0%,rgba(108,177,121,0) 100%),linear-gradient(105deg,#6cab92 0%,#74b283 38%,#8fd2a5 68%,#99E2B4 100%)}
/* links pequenos: rolagem simples para cima (o texto que entra é igual ao que saiu) */
.rodape__cols .hover-text,.rodape__base .hover-text{vertical-align:top}
/* links grandes: o texto sólido sobe e sai; quem entra é o MESMO texto só com contorno (e é onde ele para) */
.rodape__grande .hover-text{display:block;width:max-content}
.rodape__grande .hover-text::after{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.6)}
.rodape__grande a:hover{color:#fff}
.rodape__base ul li+li::before{content:"·";margin:0 .6em;opacity:.7}
@media (min-width:1367px){
  .rodape{--fb:clamp(40px,3.9vw,72px);--hb:calc(var(--fb) * 3.583);padding:calc(var(--hb) * .338) 0 calc(var(--hb) * .187)}
  .rodape .container{max-width:none;width:calc(var(--hb) * 4.54);padding:0}
  .rodape__grade{display:block;position:relative;height:calc(var(--hb) * .846)}
  .rodape__grande a{font-size:var(--fb);line-height:1.01}
  .rodape__cols{position:absolute;left:calc(var(--hb) * 2.265);top:calc(var(--hb) * .007);display:grid;
    grid-template-columns:calc(var(--hb) * 1.135) auto;column-gap:0;row-gap:calc(var(--hb) * .2595)}
  .rodape h6{font-size:calc(var(--hb) * .05);line-height:calc(var(--hb) * .06);height:calc(var(--hb) * .06);margin:0 0 calc(var(--hb) * .0475);
    color:rgba(255,255,255,.55);letter-spacing:.02em}
  .rodape__cols div:nth-child(n+3) h6{margin-bottom:calc(var(--hb) * .0025)}
  .rodape__cols li{height:calc(var(--hb) * .149);line-height:calc(var(--hb) * .149);font-size:calc(var(--hb) * .0525);margin:0}
  .rodape__social{height:calc(var(--hb) * .149);align-items:center}
  .newsletter{margin-top:calc(var(--hb) * .534);height:calc(var(--hb) * .56);padding:0 calc(var(--hb) * .135) 0 0;border-radius:calc(var(--hb) * .06);
    grid-template-columns:calc(var(--hb) * 1.46) calc(var(--hb) * 1.295) calc(var(--hb) * 1.65);align-items:center;gap:0}
  .newsletter img{left:calc(var(--hb) * .287);bottom:0;width:calc(var(--hb) * .924)}
  .newsletter p{font-size:calc(var(--hb) * .0745);line-height:1.15;max-width:calc(var(--hb) * 1.1)}
  .newsletter form{height:calc(var(--hb) * .21)}
  .newsletter input[type=email]{font-size:calc(var(--hb) * .0545);padding:0 calc(var(--hb) * .104)}
  .newsletter .aviso-form{position:absolute;left:calc(var(--hb) * 1.46);top:calc(100% + 6px);margin:0}
  .newsletter .cf-slot:empty{display:none}
  .rodape__base{margin-top:calc(var(--hb) * .142);line-height:calc(var(--hb) * .06);font-size:calc(var(--hb) * .0525)}
  .rodape__base ul{color:rgba(255,255,255,.55);padding-right:calc(var(--hb) * .054)}
}
@media (min-width:1367px){
  .newsletter p{grid-column:2;font-size:calc(var(--hb) * .0682)}
  .newsletter form{grid-column:3}
}

/* ===== Lista de jogos: filtros + cards "acordeão" (o card sob o mouse abre e empurra os outros) ===== */
.filtros2{display:flex;align-items:flex-end;gap:29px;flex-wrap:wrap;margin:56px 0 54px}
.sel{display:block;width:206px}
.sel>span{display:block;font:500 12px/1 var(--fonte-texto);text-transform:uppercase;letter-spacing:.02em;color:#8C99A6;margin-bottom:10px}
.sel select{width:100%;appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23596B70' stroke-width='1.6'/%3E%3C/svg%3E") right 4px center no-repeat;
  border:0;border-bottom:1px solid var(--borda);border-radius:0;padding:0 24px 12px 0;font:400 18px/1.2 var(--fonte-texto);color:var(--texto);cursor:pointer}
.sel select:focus{outline:0;border-bottom-color:var(--primario)}
.filtros2 .btn{min-height:58px;padding:0 60px;margin-bottom:-2px}
.acordeon{container-type:inline-size;margin-bottom:30px}
.acordeon__linha{--u:calc(100cqw / 315.1);--gap:calc(var(--u) * 7.55);display:flex;gap:var(--gap);height:calc(var(--u) * 126.8)}
.acordeon__linha>.jogo-card{flex:1 1 0;min-width:0;aspect-ratio:auto;transition:flex-grow .6s cubic-bezier(.4,0,.2,1)}
.acordeon__linha>.jogo-card:hover,.acordeon__linha>.jogo-card:focus-within{flex-grow:2.59}
.acordeon__linha>.estado-vazio{flex:1;align-self:center}
.acordeon__linha+.acordeon__linha{margin-top:calc(var(--u) * 7.55)}
.acordeon__linha>.jogo-card--vazio{visibility:hidden;pointer-events:none}
/* tamanhos internos fixos (não mudam quando o card cresce): 1 u = 1% da largura do card fechado */
.acordeon__linha .jogo-card{container-type:normal}
.acordeon__linha .jogo-card__corpo{padding:0 calc(var(--u) * 12.7) calc(var(--u) * 12.3)}
.acordeon__linha .jogo-card__icone{width:calc(var(--u) * 35.1);border-radius:calc(var(--u) * 2.8)}
.acordeon__linha .jogo-card__titulo{font-size:calc(var(--u) * 9.6)}
.acordeon__linha .pills{margin-top:calc(var(--u) * 3.2);gap:calc(var(--u) * 1)}
.acordeon__linha .pill{height:calc(var(--u) * 4.7);padding:0 calc(var(--u) * 4.5);font-size:calc(var(--u) * 2.2);--c:calc(var(--u) * 1.4)}
.acordeon__linha .jogo-card__resumo{font-size:calc(var(--u) * 3.55);line-height:calc(var(--u) * 5.7);margin-top:calc(var(--u) * 4.4);max-width:calc(var(--u) * 86)}
.acordeon__linha .jogo-card__extra .btn{margin-top:calc(var(--u) * 6);min-height:calc(var(--u) * 14);padding:0 calc(var(--u) * 15.3);font-size:calc(var(--u) * 3.7);--c:calc(var(--u) * 3.3)}
.acordeon__linha .jogo-card__icone-box>div{padding-bottom:0}
@media (max-width:900px){
  .acordeon__linha{flex-direction:column;height:auto;--u:calc(100cqw / 120)}
  .acordeon__linha>.jogo-card{flex:none;height:calc(var(--u) * 126.8 * .8);transition:none}
  .acordeon__linha>.jogo-card:hover{flex-grow:0}
  .acordeon__linha>.jogo-card--vazio{display:none}.acordeon__linha+.acordeon__linha{margin-top:var(--gap)}
  .acordeon__linha .jogo-card__extra{grid-template-rows:1fr;opacity:1;margin-top:6px}.acordeon__linha .jogo-card__icone-box{grid-template-rows:1fr}
}
/* Largura máxima das páginas internas = a mesma das seções da página inicial (1315px), com respiro nas laterais */
body[data-pagina="games"] .container,body[data-pagina="jogo"] .container,body[data-pagina="blog"] .container,body[data-pagina="404"] .container{max-width:calc(var(--site-w) + 96px)}
.conteudo-lista{max-width:calc(var(--site-w) + 96px);padding:0 48px}
@media (max-width:1100px){.conteudo-lista{padding:0 24px}}
@media (max-width:900px){.conteudo-lista{padding:0 16px}}
body[data-pagina="games"] .container,body[data-pagina="jogo"] .container,body[data-pagina="blog"] .container,body[data-pagina="404"] .container{padding-left:48px;padding-right:48px}
@media (max-width:1100px){body[data-pagina="games"] .container,body[data-pagina="jogo"] .container,body[data-pagina="blog"] .container,body[data-pagina="404"] .container{padding-left:24px;padding-right:24px}}

/* ===== Hero da lista de jogos: banner do mascote + película preta (50%) igual à da página inicial ===== */
.lista-hero{--c:40px;position:relative;margin:var(--margem);border-radius:var(--raio);min-height:clamp(380px,43.5vw,860px);color:#fff;
  background:linear-gradient(rgba(2,8,14,.50),rgba(2,8,14,.50)),#3B9E8C url("/assets/img/banner-projetos.webp?v=1") center/cover no-repeat;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - 60px) calc(100% - var(--c)),calc(100% - 60px - var(--c)) 100%,0 100%)}
.lista-hero__in{width:100%;max-width:var(--site-w);margin:0 auto;padding:clamp(100px,8vw,150px) 0 0}
.lista-hero h1{font-size:clamp(64px,6.85vw,140px);line-height:.95}
.lista-hero__base{width:100%;max-width:var(--site-w);margin:0 auto;padding:0 0 calc(var(--c) + 6px)}
@media (max-width:1366px){.lista-hero__in,.lista-hero__base{max-width:none;padding-left:20px;padding-right:20px}.lista-hero__in{padding-top:110px}.lista-hero h1{font-size:clamp(48px,7.4vw,100px)}}
@media (max-width:760px){.lista-hero{min-height:360px}.lista-hero h1{font-size:clamp(44px,12vw,72px)}}

@media (min-width:1367px){body[data-pagina="games"] .cab__in,body[data-pagina="jogo"] .cab__in,body[data-pagina="blog"] .cab__in,body[data-pagina="404"] .cab__in{max-width:var(--site-w)}}
/* faixa de título das páginas simples (404): mesmo entalhe da identidade */
.pagina-topo{--c:40px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - 60px) calc(100% - var(--c)),calc(100% - 60px - var(--c)) 100%,0 100%);padding-bottom:calc(80px + var(--c))}

/* ícones SVG (sprite) */
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* cartão de jogo: troféu (se tiver prêmio). Fechado: à esquerda; aberto (hover): desliza para a direita */
.jogo-card{--s:var(--u,4px)}
.jogo-card__premio{--c:28%;--sz:calc(var(--s) * 10);position:absolute;z-index:4;top:5%;left:6%;width:var(--sz);height:var(--sz);display:grid;place-items:center;color:#FFC21A;font-size:calc(var(--sz) * .56);
  background:rgba(4,12,30,.66);backdrop-filter:blur(6px);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:left .6s cubic-bezier(.4,0,.2,1)}
.jogo-card__premio .ic{stroke-width:2}
.jogo-card:hover .jogo-card__premio,.jogo-card:focus-within .jogo-card__premio{left:calc(94% - var(--s) * 10)}
@media (hover:none){.jogo-card__premio{left:calc(94% - var(--s) * 10)}}
.lista-hero{background-color:#3B9E8C}

/* ===== Lista de jogos: menu lateral de filtros ===== */
.lista-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start;margin-top:48px}
.lista-main{min-width:0}.lista-info{margin:0 0 18px;font-size:14px;color:var(--texto-claro)}
.lf{display:grid;gap:16px}
.lf__topo{display:flex;align-items:center;justify-content:space-between}.lf__topo strong{font:600 18px/1 var(--fonte-texto);color:#14232f}
.lf__limpar{border:0;background:none;padding:0;font:600 13px/1 var(--fonte-texto);color:var(--primario);text-decoration:underline;cursor:pointer}.lf__limpar--inline{margin-left:6px}
.lf__bloco{padding:18px 20px 20px;border:1px solid var(--borda);border-radius:14px;background:#fff}.lf__bloco[hidden]{display:none}
.lf__bloco h3{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:600 12.5px/1 var(--fonte-texto);letter-spacing:.09em;text-transform:uppercase;color:var(--primario)}.lf__bloco h3::after{content:"";flex:1;height:1px;background:var(--borda)}
.lf__busca{display:flex;gap:8px}.lf__busca input,.lf__bloco select{width:100%;min-width:0;height:42px;padding:0 14px;border:1.5px solid var(--borda);border-radius:99px;font:400 14.5px/1 var(--fonte-texto);color:var(--texto);background:#fff}
.lf__bloco select{appearance:auto;padding:0 12px}.lf__busca input:focus,.lf__bloco select:focus{outline:0;border-color:var(--primario);box-shadow:0 0 0 4px rgba(68,187,164,.16)}
.lf__busca button{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--primario);color:#fff;display:grid;place-items:center;font-size:18px;cursor:pointer}.lf__busca button:hover{background:var(--primario-hover)}
.lf__lista{display:grid;gap:2px;margin:0 -8px}
.lf__item{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;cursor:pointer;font:500 14.5px/1.2 var(--fonte-texto);color:var(--texto);transition:background .2s}
.lf__item:hover{background:var(--fundo-claro)}.lf__item small{font-size:11.5px;font-weight:600;color:var(--texto-claro)}
.lf__item input{position:absolute;opacity:0;pointer-events:none}
.lf__cx,.lf__dot{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--borda);background:#fff;display:block;transition:all .2s}
.lf__dot{--cor:#44BBA4;border-color:var(--cor);background:color-mix(in srgb,var(--cor) 14%,#fff)}
.lf__item input:checked+.lf__cx{background:var(--primario);border-color:var(--primario);box-shadow:inset 0 0 0 3px #fff}
.lf__item input:checked+.lf__dot{background:var(--cor);box-shadow:inset 0 0 0 3px #fff}
.lf__item input:focus-visible+.lf__cx,.lf__item input:focus-visible+.lf__dot{outline:3px solid var(--primario);outline-offset:2px}
.lf__tags{display:flex;flex-wrap:wrap;gap:7px}.lf__tag{height:32px;padding:0 14px;border-radius:99px;border:1px solid #d3ebe3;background:#e3f6ee;color:#2f6a5c;font:500 13px/1 var(--fonte-texto);cursor:pointer;transition:all .2s}
.lf__tag:hover{border-color:var(--primario)}.lf__tag.on{background:var(--primario);border-color:var(--primario);color:#fff}
.lf__bloco--premio{padding:12px 20px}.lf__item--premio{grid-template-columns:30px minmax(0,1fr);margin:0 -8px}
.lf__tr{width:30px;height:30px;display:grid;place-items:center;color:#FFC21A;background:#14232f;font-size:16px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:box-shadow .2s}
.lf__item--premio input:checked+.lf__tr{background:var(--primario);color:#fff}
.lf-toggle{display:none;align-items:center;gap:10px;height:46px;padding:0 20px;margin-top:28px;border:1px solid var(--borda);border-radius:99px;background:#fff;font:600 14.5px/1 var(--fonte-texto);color:var(--texto);cursor:pointer}
.lf-toggle small{min-width:20px;height:20px;border-radius:99px;background:var(--primario);color:#fff;display:inline-grid;place-items:center;font-size:11px;padding:0 6px}.lf-toggle small[hidden]{display:none}
@media (max-width:1100px){.lista-layout{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:20px}.lf-toggle{display:inline-flex}.lf{display:none;position:static;max-height:none;overflow:visible}.lf.aberto{display:grid}}


/* o conjunto de ícones (sprite) não ocupa espaço nenhum na página */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* seletor de idioma: bandeiras (EUA = inglês, Brasil = português), no canto direito do cabeçalho */
.idioma{--c:8px;display:inline-flex;align-items:center;gap:4px;padding:4px;flex:none;background:rgba(255,255,255,.16);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.idioma a{--c:6px;display:block;width:34px;height:25px;padding:3px;opacity:.6;transition:opacity .2s,background .2s;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.idioma a svg{display:block;width:100%;height:100%}
.idioma a:hover{opacity:1;background:rgba(255,255,255,.3)}.idioma a[aria-current="true"]{opacity:1;background:#fff}
@media (max-width:1024px){.cab__in{grid-template-columns:auto 1fr auto auto;gap:10px}.cab__logo{justify-self:center}.cab__in>.idioma{grid-column:3;grid-row:1;margin:0}.cab__in>.btn{grid-column:4}}
@media (max-width:420px){.idioma a{width:30px;height:23px}.cab__in>.btn{padding:0 16px}}

/* home: últimas notícias do blog */
.home-noticias{padding:10px 0 90px}.home-noticias[hidden]{display:none}
.home-noticias__topo{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.home-noticias h2{margin:0;font:600 clamp(24px,2.1vw,30px)/1.1 var(--fonte-texto);letter-spacing:.03em;text-transform:uppercase;color:var(--primario)}

/* desempenho e acessibilidade */
.rotulo-v{color:#2c8a76}.hero-card p{color:#5a6a76}
@media (hover:none),(max-width:1024px){.hero,.lista-hero,.contato{background-attachment:scroll!important}}
.jogo-card .pill{min-height:24px}