/* Tela de início (index.php) — visual no estilo do jogo, independente do tema claro/escuro */
body.home-page .portal-main { max-width: none; padding: 0; }
body.home-page .site-foot { margin-top: 0; }

.hm { --game: "Lilita One", "Rajdhani", var(--font); color: #fff; background: #0c1626; }
.hm-wrap { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }

/* texto "de jogo": fonte grossa, contorno e sombra dura */
.hm h1, .hm h2, .hm h3, .hm-gbtn, .hm-ribbon, .hm-card-tag, .hm-card-go, .hm-step-face b {
  font-family: var(--game); font-weight: 400; letter-spacing: 0.01em;
}
.hm h1, .hm h2 { margin: 0; color: #fff; -webkit-text-stroke: 1.5px #1a1206; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }

/* fita de seção */
.hm-ribbon { position: relative; display: inline-block; width: fit-content; padding: 6px 22px; background: linear-gradient(180deg, #ffd34d, #f0a019); color: #4a2a00; font-size: 0.95rem; text-transform: uppercase; border-radius: 4px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 0 #8a5300; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); }

/* botões do jogo */
.hm-cta { display: flex; flex-wrap: wrap; gap: 14px; }
/* Uma peça só: cor + base sólida embaixo. Hover troca a cor (filter/transform
   fracionado deixa o texto borrado no Chrome). */
.hm-gbtn { --top: #8bd43f; --top-h: #9be04d; --base: #3f7d16; --shine: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  position: relative; top: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 32px; border-radius: 14px;
  background-color: var(--top); background-image: var(--shine); background-repeat: no-repeat; background-size: 260% 100%; background-position: 160% 0;
  font-size: 1.2rem; text-decoration: none; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 5px 0 var(--base);
  transition: top 0.12s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.12s, background-color 0.15s;
  animation: hmPop 0.55s cubic-bezier(.3, 1.5, .5, 1) both, hmShine 4.5s ease-in-out 1.2s infinite; }
html body.portal-body .hm a.hm-gbtn, html body.portal-body .hm a.hm-gbtn:hover { color: #fff; }
.hm-gbtn:hover { top: -3px; background-color: var(--top-h); box-shadow: 0 8px 0 var(--base); }
.hm-gbtn:active { top: 3px; box-shadow: 0 2px 0 var(--base); transition-duration: 0.05s; }
.hm-gbtn--gold { --top: #ffb81f; --top-h: #ffc53d; --base: #a35f00; }
.hm-cta .hm-gbtn:nth-child(2) { animation-delay: 0.12s, 2.4s; }

/* anel pulsando no botão principal */
.hm-gbtn--green::after { content: ""; position: absolute; inset: -5px -5px -10px; border: 3px solid var(--top); border-radius: 18px; opacity: 0; pointer-events: none; animation: hmRing 2.4s ease-out 0.8s infinite; }
.hm-gbtn--green:hover::after { animation: none; }

/* a animação de entrada mexe em transform só enquanto roda; parado fica sem transform (texto nítido) */
@keyframes hmPop { 0% { opacity: 0; transform: translateY(14px) scale(0.85); } 100% { opacity: 1; transform: none; } }
@keyframes hmShine { 0%, 70% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@keyframes hmRing { 0% { opacity: 0.75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.3); } }

/* topo */
.hm-hero { position: relative; display: flex; align-items: center; min-height: calc(100vh - 67px); min-height: calc(100svh - 67px); overflow: hidden; isolation: isolate; }
.hm-hero-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; animation: hmZoom 18s ease-out both; }
@keyframes hmZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* tropas voando pela home inteira: sprites do jogo (folha horizontal, sombra do chão cortada) */
.hm { position: relative; }
.hm-flyers { position: absolute; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.hm-fly { position: absolute; left: 100%; animation: hmFlyX var(--dur) linear var(--delay) infinite; }
.hm-fly-bob { transform-origin: center; animation: hmBob2 var(--bob, 3.2s) ease-in-out infinite; }
.hm-fly i { display: block; width: var(--w); height: var(--crop); background: var(--sheet) 0 0 no-repeat; background-size: calc(var(--w) * var(--frames)) var(--h); animation: hmFlap var(--flap) steps(var(--frames)) infinite; }
.hm-fly--electro { --w: 393px; --h: 422px; --crop: 340px; --frames: 16; --flap: 1.33s; --sheet: url("../coc/troops/idle/electro_dragon.webp"); --dur: 38s; --delay: -6s; --sc: 0.42; top: 6%; }
.hm-fly--dragon { --w: 300px; --h: 263px; --crop: 205px; --frames: 8; --flap: 0.67s; --sheet: url("../coc/troops/idle/dragon.webp"); --dur: 30s; --delay: -19s; --sc: 0.42; --bob: 2.6s; top: 30%; }
.hm-fly--baby { --w: 109px; --h: 179px; --crop: 135px; --frames: 19; --flap: 1.58s; --sheet: url("../coc/troops/idle/baby_dragon.webp"); --dur: 24s; --delay: -3s; --sc: 0.55; --bob: 2.2s; top: 52%; }
.hm-fly--minion { --w: 160px; --h: 212px; --crop: 170px; --frames: 8; --flap: 0.53s; --sheet: url("../coc/troops/idle/minion.webp"); --dur: 20s; --delay: -12s; --sc: 0.45; --bob: 1.8s; top: 70%; }
.hm-fly--healer { --w: 196px; --h: 212px; --crop: 175px; --frames: 12; --flap: 1s; --sheet: url("../coc/troops/idle/healer.webp"); --dur: 44s; --delay: -30s; --sc: 0.45; --bob: 3.6s; top: 12%; }
@keyframes hmFlap { to { background-position: calc(var(--w) * var(--frames) * -1) 0; } }
@keyframes hmFlyX { from { transform: translate(0, 0); } to { transform: translate(calc(-100vw - 500px), 90px); } }
@keyframes hmBob2 { 0%, 100% { transform: translateY(0) scale(var(--sc)); } 50% { transform: translateY(-18px) scale(var(--sc)); } }

.hm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(8, 18, 38, 0.88) 0%, rgba(8, 18, 38, 0.55) 38%, rgba(8, 18, 38, 0) 65%),
  linear-gradient(180deg, rgba(8, 18, 38, 0) 70%, #0c1626 100%); }
[dir="rtl"] .hm-hero::after { background:
  linear-gradient(270deg, rgba(8, 18, 38, 0.88) 0%, rgba(8, 18, 38, 0.55) 38%, rgba(8, 18, 38, 0) 65%),
  linear-gradient(180deg, rgba(8, 18, 38, 0) 70%, #0c1626 100%); }
.hm-hero-inner { display: grid; gap: 22px; justify-items: start; padding: 80px 0 120px; }
.hm-hero h1 { font-size: clamp(3rem, 7vw, 5.6rem); line-height: 0.98; -webkit-text-stroke: 2.5px #1a1206; text-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.4); }
.hm-hero h1 span { color: #ffd23f; }
.hm-hero-inner > p { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, 0.92); font-size: 1.15rem; font-weight: 600; line-height: 1.55; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.hm-hero .hm-cta { margin-top: 10px; }
.hm-scroll { position: absolute; left: 50%; bottom: 26px; width: 46px; height: 46px; margin-left: -23px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; color: #fff; background: rgba(8, 18, 38, 0.4); backdrop-filter: blur(4px); animation: hmBob 1.8s ease-in-out infinite; }
.portal-body .hm-scroll:hover { color: #ffd23f; border-color: #ffd23f; }
@keyframes hmBob { 50% { transform: translateY(6px); } }

/* cabeçalhos de seção */
.hm-head { display: grid; gap: 14px; justify-items: start; max-width: 640px; margin-bottom: 64px; }
.hm-head--center { justify-items: center; margin-inline: auto; text-align: center; }
.hm-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); line-height: 1.05; }
.hm-head p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 1.08rem; line-height: 1.6; }

/* sistemas */
.hm-systems-sec { position: relative; padding: 100px 0 120px; background:
  radial-gradient(800px 400px at 15% 0%, rgba(72, 140, 255, 0.18), transparent 70%),
  radial-gradient(700px 380px at 90% 100%, rgba(255, 190, 40, 0.12), transparent 70%), #0c1626; }
.hm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 28px; padding-top: 40px; }
.hm-card { --c1: #4aa3ff; --c2: #1f5fc9; --edge: #123a7a; position: relative; display: flex; flex-direction: column; border: 3px solid var(--edge); border-radius: 24px; background: #15233a; text-decoration: none; box-shadow: 0 6px 0 var(--edge), 0 24px 40px rgba(0, 0, 0, 0.4); transition: transform 0.2s, box-shadow 0.2s; }
.portal-body a.hm-card, .portal-body a.hm-card:hover { color: #fff; }
.hm-card:hover { transform: translateY(-6px); box-shadow: 0 12px 0 var(--edge), 0 34px 50px rgba(0, 0, 0, 0.45); }
.hm-card--blue { --c1: #5cb4ff; --c2: #1f62d1; --edge: #10357a; }
.hm-card--green { --c1: #8ee05a; --c2: #3a9a22; --edge: #1f5a10; }
.hm-card--pink { --c1: #f07cf5; --c2: #a12fc4; --edge: #5a1673; }
.hm-card--gold { --c1: #ffd75a; --c2: #e08a0b; --edge: #8a5300; }
.hm-card--dark { --c1: #8d6bd8; --c2: #3b2370; --edge: #22133f; }
.hm-card--red { --c1: #ff8a5c; --c2: #d03a1c; --edge: #7a1c0a; }
.hm-card-stage { position: relative; height: 170px; border-radius: 20px 20px 0 0; background:
  radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.35), transparent 60%),
  repeating-conic-gradient(from 0deg at 50% 110%, rgba(255, 255, 255, 0.08) 0deg 10deg, transparent 10deg 20deg),
  linear-gradient(180deg, var(--c1), var(--c2)); }
.hm-card-stage img { position: absolute; left: 50%; bottom: 0; width: 220px; height: 220px; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45)); transition: transform 0.25s; }
.hm-card:hover .hm-card-stage img { transform: translateX(-50%) scale(1.07) translateY(-4px); }
.hm-card-tag { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 4px 12px; border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--edge); font-size: 0.85rem; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.hm-card-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 24px 24px; border-top: 3px solid var(--edge); }
.hm-card h3 { margin: 0; font-size: 1.7rem; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.hm-card p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.96rem; line-height: 1.55; }
.hm-card-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; color: var(--c1); font-size: 1.15rem; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.hm-card-go svg { transition: transform 0.2s; }
.hm-card:hover .hm-card-go svg { transform: translateX(4px); }

/* passos */
.hm-steps-sec { padding: 110px 0; background: linear-gradient(180deg, #0c1626, #12233d); border-top: 3px solid #1d3458; }
.hm-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; }
.hm-steps::before { content: ""; position: absolute; top: 66px; left: 18%; right: 18%; border-top: 4px dashed rgba(255, 210, 63, 0.4); }
.hm-steps li { position: relative; display: grid; justify-items: center; gap: 10px; }
.hm-step-face { position: relative; width: 132px; height: 132px; margin-bottom: 10px; padding: 6px; border: 4px solid #8a5300; border-radius: 28px; background: linear-gradient(180deg, #ffe27a, #e08a0b); box-shadow: 0 6px 0 #5a3500, 0 18px 30px rgba(0, 0, 0, 0.4); }
.hm-step-face img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; }
.hm-step-face b { position: absolute; right: -14px; bottom: -14px; width: 46px; height: 46px; display: grid; place-items: center; border: 3px solid #1f5a10; border-radius: 50%; background: linear-gradient(180deg, #b6ea5a, #4f9a1f); color: #fff; font-size: 1.4rem; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); box-shadow: 0 3px 0 #1f5a10; }
.hm-steps h3 { margin: 0; font-size: 1.6rem; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.hm-steps p { margin: 0; max-width: 30ch; color: rgba(255, 255, 255, 0.75); line-height: 1.55; }

/* dúvidas */
.hm-faq-sec { padding: 110px 0; background: #12233d; }
.hm-faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.hm-faq-wrap .hm-head { margin-bottom: 0; }
.hm-faq { display: grid; gap: 14px; }
.hm-faq details { border: 3px solid #0a1528; border-radius: 16px; background: #1b2f4f; box-shadow: 0 4px 0 #0a1528; }
.hm-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer; list-style: none; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary i { position: relative; flex: none; width: 30px; height: 30px; border: 2px solid #8a5300; border-radius: 50%; background: linear-gradient(180deg, #ffe27a, #e08a0b); }
.hm-faq summary i::before, .hm-faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 3px; margin: -1.5px 0 0 -6px; border-radius: 2px; background: #5a3500; transition: transform 0.2s; }
.hm-faq summary i::after { transform: rotate(90deg); }
.hm-faq details[open] summary i::after { transform: rotate(0deg); }
.hm-faq p { margin: 0; padding: 0 22px 20px; color: rgba(255, 255, 255, 0.78); line-height: 1.6; }

/* chamada final: céu do jogo */
.hm-final { position: relative; overflow: hidden; padding: 90px 0 0; background: radial-gradient(900px 400px at 75% 100%, rgba(255, 255, 255, 0.35), transparent 70%), linear-gradient(180deg, #2b8cf0 0%, #5fb8ff 60%, #a8dcff 100%); }
.hm-final::before { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(180deg, #7ccf3e, #4f9a1f); border-top: 4px solid #3d7d16; }
.hm-final-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
.hm-final-copy { display: grid; gap: 16px; padding-bottom: 150px; }
.hm-final h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.02; }
.hm-final p { margin: 0 0 6px; color: #fff; font-size: 1.15rem; font-weight: 700; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.hm-final-th { width: min(380px, 38vw); height: auto; margin-bottom: 30px; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.35)); }

@media (max-width: 1080px) {
  .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-faq-wrap { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .hm-wrap { width: calc(100% - 32px); }
  .hm-flyers .hm-fly { --sc: 0.28; }
  .hm-hero::after, [dir="rtl"] .hm-hero::after { background: linear-gradient(180deg, rgba(8, 18, 38, 0.55) 0%, rgba(8, 18, 38, 0.85) 60%, #0c1626 100%); }
  .hm-hero-inner { padding: 60px 0 110px; }
  .hm-cards, .hm-steps { grid-template-columns: 1fr; }
  .hm-steps::before { display: none; }
  .hm-systems-sec, .hm-steps-sec, .hm-faq-sec { padding: 72px 0; }
  .hm-final-inner { grid-template-columns: 1fr; }
  .hm-final-copy { padding-bottom: 0; }
  .hm-final-th { justify-self: center; width: 240px; margin-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-art, .hm-scroll { animation: none; }
  .hm-flyers { display: none; }
  .hm-card, .hm-card-stage img, .hm-gbtn { transition: none; }
  .hm-gbtn, .hm-gbtn--green::after { animation: none; }
  .hm-card:hover { transform: none; }
}