/* Página de apresentação do Missão PLANCON (missaoplancon.com.br). Mesma identidade do jogo. */
:root{
  --fundo:#0b2429; --fundo-2:#0f2f33; --madeira:#204b49; --madeira-clara:#46766a;
  --creme:#fff4d8; --pergaminho:#f5f1e4; --pergaminho-2:#ece5d0; --tinta:#183834; --tinta-suave:#526a61;
  --ouro:#edc568; --ouro-escuro:#c99a2e; --sair:#D94E0F; --abrigar:#1F5C8B; --saude:#16794A; --fel:#6a3f8f;
  --raio:16px; --largura:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--fundo);color:var(--creme);font:17px/1.55 "Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
h1,h2,h3{font-family:"Lilita One","Segoe UI",sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.08;margin:0}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.35rem}
p{margin:0}
a{color:inherit}
.destaque{color:var(--ouro)}
.sem-quebra{white-space:nowrap}
.sobretitulo{font-weight:700;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro);margin-bottom:.6rem}

/* ---------- botões ---------- */
.botao{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.85rem 1.4rem;border-radius:12px;font:1.05rem "Lilita One",sans-serif;letter-spacing:.03em;text-decoration:none;cursor:pointer;border:2px solid transparent;background:var(--madeira);color:var(--creme);transition:transform .15s,box-shadow .15s,background .15s}
.botao:hover{transform:translateY(-2px)}
.botao:focus-visible,.link:focus-visible,.opcao-alarme:focus-visible,.sirene:focus-visible,.menu a:focus-visible,.marca:focus-visible{outline:3px solid var(--ouro);outline-offset:3px}
.botao-ouro{background:linear-gradient(#f6d77e,#e2b445);color:#3a2410;box-shadow:0 4px 0 #9b6f1c,0 10px 24px rgba(0,0,0,.25)}
.botao-ouro:hover{box-shadow:0 6px 0 #9b6f1c,0 14px 28px rgba(0,0,0,.3)}
.botao-contorno{background:transparent;border-color:rgba(255,244,216,.55)}
.botao-contorno:hover{background:rgba(255,244,216,.08)}
.botao-pequeno{padding:.55rem 1rem;font-size:.95rem}
.link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--madeira);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link.discreto{color:var(--tinta-suave);font-weight:400;margin-left:1rem}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.7rem max(16px,calc((100vw - var(--largura))/2));background:rgba(8,28,31,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(237,197,104,.18)}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:1.25rem "Lilita One",sans-serif;color:var(--creme);margin-right:auto}
.marca img{border-radius:50%}
.menu{display:flex;gap:1.4rem}
.menu a{text-decoration:none;color:rgba(255,244,216,.82);font-weight:700;font-size:.95rem}
.menu a:hover{color:var(--ouro)}
.rotulo-curto{display:none}
.marca span{white-space:nowrap}

/* ---------- abertura ---------- */
.abertura{position:relative;min-height:calc(100vh - 62px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:2rem;padding:4rem max(16px,calc((100vw - var(--largura))/2)) 3rem;overflow:hidden;isolation:isolate}
.abertura-fundo{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,30,32,.97) 0%,rgba(8,30,32,.88) 42%,rgba(8,30,32,.35) 75%,rgba(8,30,32,.55) 100%),linear-gradient(0deg,var(--fundo) 0%,transparent 30%),url("img/encontro.webp") center/cover}
.selo{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .9rem;border:1px solid rgba(237,197,104,.45);border-radius:99px;font-weight:700;font-size:.85rem;letter-spacing:.06em;color:var(--ouro);background:rgba(237,197,104,.08);margin-bottom:1.4rem}
.ponto-alarme{width:10px;height:10px;border-radius:50%;background:#ff5a2a;box-shadow:0 0 0 0 rgba(255,90,42,.7);animation:pulso 1.4s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 12px rgba(255,90,42,0)}100%{box-shadow:0 0 0 0 rgba(255,90,42,0)}}
.abertura h1{font-size:clamp(2.6rem,5.4vw,4.6rem);text-shadow:0 4px 0 #071a1c,0 12px 30px rgba(0,0,0,.4)}
.abertura-texto{font-size:1.15rem;max-width:36rem;margin:1.4rem 0 2rem;color:rgba(255,244,216,.9)}
.acoes{display:flex;flex-wrap:wrap;gap:.9rem}
.numeros{list-style:none;padding:0;margin:2.6rem 0 0;display:flex;gap:2.2rem;flex-wrap:wrap}
.numeros strong{display:block;font:2.3rem/1 "Lilita One",sans-serif;color:var(--ouro)}
.numeros span{font-size:.9rem;color:rgba(255,244,216,.75)}
.abertura-produto{position:relative;margin:0;width:100%;max-width:620px;justify-self:center;padding:0 5% 2.2rem 0}
.notebook{filter:drop-shadow(0 24px 34px rgba(0,0,0,.5))}
.notebook-tela{background:#0d1617;border:solid #1c2a2b;border-width:10px 10px 14px;border-radius:16px 16px 4px 4px;overflow:hidden}
.notebook-tela img{display:block;width:100%;height:auto}
.notebook-base{position:relative;height:16px;margin:0 -7%;background:linear-gradient(#d3d6d2,#9aa09d 70%,#7d8380);border-radius:2px 2px 16px 16px}
.notebook-base::after{content:"";position:absolute;left:50%;top:0;width:18%;height:6px;transform:translateX(-50%);background:#aeb3b0;border-radius:0 0 8px 8px}
.celular-tela{position:absolute;right:0;bottom:0;width:25%;border:6px solid #13201f;border-radius:22px;overflow:hidden;background:#13201f;box-shadow:0 22px 40px rgba(0,0,0,.55);transform:rotate(3deg)}
.celular-tela img{display:block;width:100%;height:auto;border-radius:15px}

/* ---------- seções ---------- */
.secao{padding:6rem max(16px,calc((100vw - var(--largura))/2))}
.secao-cabeca{max-width:46rem;margin:0 auto 3rem;text-align:center}
.secao-cabeca > p:not(.sobretitulo){margin-top:1rem;font-size:1.1rem;color:rgba(255,244,216,.82)}
.nota{text-align:center;margin-top:1.4rem;font-size:.92rem;color:rgba(255,244,216,.65)}

/* ---------- teste do alarme ---------- */
.teste{background:radial-gradient(ellipse at 50% 0,rgba(217,78,15,.16),transparent 60%),var(--fundo-2)}
.alarme-cartao{max-width:780px;margin:0 auto;background:var(--pergaminho);color:var(--tinta);border-radius:22px;padding:2rem;border:3px solid var(--ouro);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.alarme-topo{display:flex;gap:1.4rem;align-items:center}
.sirene{position:relative;flex:none;width:92px;height:92px;border-radius:50%;border:0;background:var(--sair);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 0 #8f3008}
.sirene svg{position:relative}
.onda{position:absolute;inset:0;border-radius:50%;border:4px solid var(--sair);opacity:0}
.tocando .sirene svg{animation:balanca .25s ease-in-out infinite alternate}
.tocando .onda{animation:onda 1.2s ease-out infinite}
.tocando .onda + .onda{animation-delay:.6s}
@keyframes onda{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.8);opacity:0}}
@keyframes balanca{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.alarme-situacao{font-size:1.1rem;margin-bottom:.4rem}
.descricao-toque{margin-top:.5rem;font-weight:700;color:var(--sair)}
.alarme-pergunta{font:1.6rem "Lilita One",sans-serif;margin:1.6rem 0 1rem}
.alarme-opcoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.opcao-alarme{display:grid;gap:.25rem;text-align:left;padding:1rem;border-radius:14px;border:2px solid #d6ccb2;border-left-width:8px;background:#fffdf6;color:var(--tinta);font:inherit;cursor:pointer;transition:transform .12s,border-color .12s,opacity .2s}
.opcao-alarme b{font-family:"Lilita One",sans-serif;font-weight:400;font-size:1.2rem}
.opcao-alarme span{font-size:.92rem;color:var(--tinta-suave)}
.opcao-alarme.sair{border-left-color:var(--sair)}
.opcao-alarme.abrigar{border-left-color:var(--abrigar)}
.opcao-alarme.esperar{border-left-color:#9b9b8a}
.opcao-alarme:hover:not(:disabled){transform:translateY(-2px);border-color:var(--madeira-clara)}
.opcao-alarme:disabled{cursor:default}
.opcao-alarme.certa{border-color:var(--saude);background:#e2f1df}
.opcao-alarme.errada{border-color:#c0392b;background:#f8e3df}
.opcao-alarme.apagada{opacity:.45}
.alarme-retorno{margin-top:1rem;border-radius:12px;font-size:1.02rem}
.alarme-retorno:not(:empty){padding:1rem 1.2rem}
.alarme-retorno.ok{background:var(--saude);color:#fff}
.alarme-retorno.nao{background:#a8321f;color:#fff}
.alarme-rodape{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.2rem;font-weight:700;color:var(--tinta-suave)}
.alarme-rodape .botao{background:var(--madeira)}

/* ---------- vídeo ---------- */
.video-moldura{max-width:960px;margin:0 auto;border-radius:20px;overflow:hidden;border:3px solid rgba(237,197,104,.6);box-shadow:0 30px 70px rgba(0,0,0,.45);background:#000}
.video-moldura video{width:100%}

/* ---------- como funciona ---------- */
.como{background:var(--fundo-2)}
.passos{list-style:none;margin:0;padding:0;display:grid;gap:4rem}
.passo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:3rem;align-items:center}
.passo:nth-child(even){grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.passo:nth-child(even) figure{order:2}
.passo figure{margin:0;border-radius:14px;overflow:hidden;border:2px solid rgba(237,197,104,.35);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.passo-num{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--ouro);color:#3a2410;font:1.5rem "Lilita One",sans-serif;margin-bottom:1rem}
.passo h3{font-size:1.9rem;margin-bottom:.7rem}
.passo p{color:rgba(255,244,216,.85);font-size:1.08rem}

/* ---------- missões ---------- */
.cod{padding:.05rem .45rem;border-radius:6px;color:#fff}
.cod.sair,.tag.sair{background:var(--sair)} .cod.abrigar,.tag.abrigar{background:var(--abrigar)} .cod.saude,.tag.saude{background:var(--saude)} .tag.fel{background:var(--fel)}
.tag.ouro{background:var(--ouro);color:#3a2410}
.grade-missoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.missao{background:var(--pergaminho);color:var(--tinta);border-radius:var(--raio);overflow:hidden;border:2px solid var(--ouro);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.missao:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.35)}
.missao img{aspect-ratio:3/2;object-fit:cover;width:100%}
.missao > div{padding:1rem 1.1rem 1.2rem;display:grid;gap:.45rem;align-content:start}
.tag{justify-self:start;font-weight:700;font-size:.72rem;letter-spacing:.12em;padding:.2rem .55rem;border-radius:6px;color:#fff}
.missao p{font-size:.95rem;color:var(--tinta-suave)}
.missao-treino{background:linear-gradient(160deg,var(--madeira),#163a38);color:var(--creme);justify-content:center}
.missao-treino p{color:rgba(255,244,216,.82)}
.missao-treino .botao{justify-self:start;margin-top:.5rem}

/* ---------- para a escola ---------- */
.escola{background:var(--pergaminho);color:var(--tinta);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3.5rem 3rem}
.escola .sobretitulo{color:#9b6f1c}
.escola-grade{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:center}
.escola h2 .destaque{color:var(--sair)}
.lista-check{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.9rem}
.lista-check li{position:relative;padding-left:2.1rem;font-size:1.08rem}
.lista-check li::before{content:"";position:absolute;left:0;top:.2rem;width:1.35rem;height:1.35rem;border-radius:6px;background:var(--saude) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.navegador{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(24,56,52,.3);border:1px solid #d9d0b6}
.navegador-barra{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;background:#ece5d0}
.navegador-barra span{width:11px;height:11px;border-radius:50%;background:#d4c7a5}
.navegador-barra span:first-child{background:#e0796a}.navegador-barra span:nth-child(2){background:#e7c25a}.navegador-barra span:nth-child(3){background:#7cb66b}
.navegador-barra p{margin-left:.8rem;flex:1;background:#fff;border-radius:7px;padding:.25rem .8rem;font-size:.9rem;color:var(--tinta-suave)}
.navegador-barra p b{color:var(--sair)}
.pino{position:absolute;left:var(--x);top:calc(var(--y) + 38px);background:var(--pergaminho);border:2px solid var(--ouro);border-radius:10px;padding:.35rem .7rem .35rem 2.1rem;font:1rem "Lilita One",sans-serif;color:var(--tinta);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.pino::before{content:"▶";position:absolute;left:.45rem;top:50%;transform:translateY(-50%);width:1.2rem;height:1.2rem;border-radius:50%;background:#245b40;color:#fff4cf;font-size:.55rem;display:grid;place-items:center}
.recursos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-content:center}
.recursos article{background:#fffdf6;border:1px solid #ddd3b8;border-radius:var(--raio);padding:1.4rem}
.icone{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--ouro);color:var(--tinta);margin-bottom:.8rem}
.recursos h3{margin-bottom:.35rem}
.recursos p{color:var(--tinta-suave);font-size:.98rem}
.celulares{margin:0;display:flex;align-items:center}
.celulares img{width:210px;border-radius:30px;border:9px solid #13201f;box-shadow:0 24px 48px rgba(24,56,52,.35)}
.celulares img + img{margin-left:-60px;transform:translateY(40px) rotate(4deg)}
.celulares img:first-child{transform:rotate(-4deg)}

/* ---------- como levar ---------- */
.linha-tempo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;position:relative}
.linha-tempo::before{content:"";position:absolute;left:12%;right:12%;top:27px;height:3px;background:repeating-linear-gradient(90deg,var(--ouro) 0 10px,transparent 10px 18px)}
.linha-tempo li{position:relative;text-align:center;padding:0 .5rem}
.linha-tempo span{position:relative;display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--fundo);border:3px solid var(--ouro);color:var(--ouro);font:1.5rem "Lilita One",sans-serif;margin-bottom:1rem}
.linha-tempo h3{margin-bottom:.4rem}
.linha-tempo p{color:rgba(255,244,216,.8);font-size:.98rem}

/* ---------- origem ---------- */
.origem{display:flex;align-items:center;justify-content:center;gap:2rem;padding:3.5rem max(16px,calc((100vw - var(--largura))/2));background:var(--madeira)}
.origem img{width:120px;flex:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
.origem blockquote{margin:0;max-width:44rem}
.origem blockquote p{font:clamp(1.4rem,2.6vw,2rem)/1.2 "Lilita One",sans-serif}
.origem footer{margin-top:.8rem;color:rgba(255,244,216,.8)}

/* ---------- contato ---------- */
.contato{text-align:center;background:radial-gradient(ellipse at 50% 120%,rgba(237,197,104,.25),transparent 60%),var(--fundo)}
.contato-logo{display:block;width:min(300px,70vw);height:auto;margin:0 auto 1.6rem;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}
.contato h2{font-size:clamp(2.2rem,4.6vw,3.4rem);max-width:20ch;margin:0 auto}
.contato > p{margin:1.2rem auto 2rem;max-width:36rem;font-size:1.12rem;color:rgba(255,244,216,.85)}
.contato .acoes{justify-content:center}

.rodape{padding:2rem 16px 3rem;text-align:center;font-size:.9rem;color:rgba(255,244,216,.6);border-top:1px solid rgba(237,197,104,.15);display:grid;gap:.4rem}

/* ---------- aparecer ao rolar ---------- */
.revela{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.revela.visivel{opacity:1;transform:none}

/* ---------- telas menores ---------- */
@media (max-width:1000px){
  .menu{display:none}
  .grade-missoes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .escola{grid-template-columns:minmax(0,1fr)}
  .escola-grade{grid-template-columns:minmax(0,1fr)}
  .celulares{justify-content:center;padding-bottom:2.5rem}
  .linha-tempo{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.4rem}
  .linha-tempo::before{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .topo{gap:.8rem}
  .marca span{font-size:1.05rem}
  .rotulo-longo{display:none}.rotulo-curto{display:inline}
  .abertura{grid-template-columns:minmax(0,1fr);padding-top:2.5rem;min-height:0;gap:1rem}
  .abertura-fundo{background:linear-gradient(180deg,rgba(8,30,32,.92) 0%,rgba(8,30,32,.82) 60%,var(--fundo) 100%),url("img/encontro.webp") center/cover}
  .abertura{gap:0}
  .abertura-conteudo{display:contents}
  .abertura-produto{order:1;max-width:520px;padding-right:7%;margin:1.6rem auto .2rem}
  .abertura-texto,.acoes,.numeros{order:2}
  .celular-tela{width:27%;border-width:4px;border-radius:16px}
  .celular-tela img{border-radius:12px}
  .notebook-tela{border-width:6px 6px 9px;border-radius:10px 10px 3px 3px}
  .notebook-base{height:10px}
  .numeros{gap:1.4rem}
  .secao{padding-top:4rem;padding-bottom:4rem}
  .alarme-cartao{padding:1.3rem}
  .alarme-topo{flex-direction:column;text-align:center}
  .link.discreto{margin:0;display:block;margin:.5rem auto 0}
  .alarme-opcoes{grid-template-columns:minmax(0,1fr)}
  .alarme-rodape{flex-direction:column;align-items:stretch;text-align:center}
  .passo,.passo:nth-child(even){grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .passo:nth-child(even) figure{order:0}
  .grade-missoes{grid-template-columns:minmax(0,1fr)}
  .recursos{grid-template-columns:minmax(0,1fr)}
  .pino{font-size:.75rem;padding:.25rem .5rem .25rem 1.7rem}
  .celulares img{width:160px;border-width:7px;border-radius:24px}
  .linha-tempo{grid-template-columns:minmax(0,1fr)}
  .origem{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .revela{opacity:1;transform:none}
}