/* ============================================================================
   SUMMIT — a casca dos diagnósticos
   ----------------------------------------------------------------------------
   Serve às DUAS telas de diagnóstico da casa: o geral (/diagnostico, "qual o
   melhor plano para mim?") e o do Private (/diagnostico-private, o desenho da
   mentoria). Elas fazem perguntas diferentes e chegam a coisas diferentes, mas
   são a MESMA cena: a mesma noite, a mesma barra de progresso, o mesmo cartão
   de opção, o mesmo envelope lacrado que abre no envio.

   Nasceu dentro do <style> de /quiz/index.html e saiu de lá em set/2026, no dia
   em que o segundo diagnóstico apareceu. Copiar as duzentas linhas para o
   arquivo novo faria a Summit ter dois envelopes que só por acaso são iguais —
   e no primeiro ajuste de um deles, deixariam de ser.
============================================================================ */
  :root{
    --obsidian:#07060D; --indigo:#130E26; --indigo2:#1B1436;
    --ink:#EFEDF6; --muted:rgba(239,237,246,.64); --faint:rgba(239,237,246,.4);
    --lilac:#A99BE0; --violet:#3A2179;
    --linha:rgba(239,237,246,.11);
    --display:'Bodoni Moda',Georgia,serif; --sans:'Poppins',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;overflow-x:hidden}
  body{background:radial-gradient(900px 520px at 50% -10%,rgba(124,99,201,.15),transparent 62%),
      linear-gradient(172deg,#0C0918,var(--obsidian)) fixed,var(--obsidian);
    color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;
    min-height:100vh;display:flex;flex-direction:column;align-items:center}
  a{color:var(--lilac)}
  .topbar{width:100%;max-width:820px;display:flex;justify-content:space-between;align-items:center;padding:22px}
  .topbar a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-decoration:none}
  main{flex:1;width:100%;display:flex;justify-content:center;padding:6px 20px 90px;min-width:0}

  .cena{width:100%;max-width:680px;animation:entra .5s cubic-bezier(.16,1,.3,1)}
  @keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  .rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--lilac);margin:0 0 14px}
  h1{font-family:var(--display);font-weight:400;font-size:clamp(31px,6.6vw,50px);line-height:1.12;margin:0 0 16px;letter-spacing:-.01em}
  h1 em{font-style:italic;color:var(--lilac)}
  h2{font-family:var(--display);font-weight:400;font-size:clamp(25px,5vw,36px);line-height:1.2;margin:8px 0 26px}
  .apoio{font-size:16px;line-height:1.72;color:var(--muted);margin:0 0 28px}
  .apoio strong{color:var(--ink);font-weight:500}
  /* linha de apoio da pergunta — sobe para debaixo do h2, que já tem respiro */
  .sub{font-size:14px;line-height:1.65;color:var(--faint);margin:-18px 0 22px;max-width:44em}
  .nota{font-size:12.5px;line-height:1.65;color:var(--faint);margin:18px 0 0}

  .barra{height:3px;border-radius:99px;background:rgba(239,237,246,.09);overflow:hidden;margin-bottom:20px}
  .barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--lilac));
    transition:width .5s cubic-bezier(.16,1,.3,1)}
  .passo{display:flex;align-items:center;gap:12px}
  .opcional{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--faint);border:1px solid var(--linha);border-radius:99px;padding:3px 9px}

  .ops{display:flex;flex-direction:column;gap:10px}
  .op{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
    background:rgba(239,237,246,.04);border:1px solid var(--linha);border-radius:14px;padding:15px 18px;
    font-family:var(--sans);font-weight:300;font-size:15.5px;line-height:1.4;color:var(--ink);
    -webkit-tap-highlight-color:transparent;
    transition:border-color .2s,background .2s,transform .2s}
  /* Só quem tem mouse recebe hover. No celular o :hover gruda no item tocado e,
     como a pergunta seguinte renderiza embaixo do dedo, a opção que cai naquela
     posição aparece acesa — dá a impressão de resposta já marcada. E o hover é
     de propósito mais fraco que o .on: aceso ≠ escolhido.
     No desktop o defeito era o mesmo por outro caminho: o cursor fica parado
     onde a pessoa clicou e a pergunta seguinte nasce debaixo dele, já acesa.
     Por isso o hover só existe depois de .mexeu, que o quiz põe no primeiro
     mousemove de cada pergunta — realce é resposta ao movimento, não estado
     inicial da tela. */
  @media (hover:hover) and (pointer:fine){
    .ops.mexeu .op:hover{border-color:rgba(169,155,224,.34);background:rgba(239,237,246,.06)}
  }
  .op:active{transform:scale(.985)}
  .op.on{border-color:var(--lilac);background:rgba(169,155,224,.14)}
  .op-k{flex:none;width:27px;height:27px;border-radius:50%;border:1px solid rgba(169,155,224,.4);
    display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--lilac)}
  .op.on .op-k{background:var(--lilac);border-color:var(--lilac);color:#160F2C}

  .campo-aberto{margin-top:16px}
  .campo-aberto label,.campo label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint);margin-bottom:7px}
  .campo-aberto input,.campo input{width:100%;height:50px;padding:13px 16px;font-family:var(--sans);font-size:15px;
    font-weight:300;color:var(--ink);background:rgba(239,237,246,.045);border:1px solid rgba(239,237,246,.14);
    border-radius:11px;transition:border-color .2s,background .2s}
  .campo-aberto input:focus,.campo input:focus{outline:none;border-color:var(--lilac);background:rgba(239,237,246,.07)}
  .campo input.ruim{border-color:#E8836A}
  .campo .erro{display:block;font-size:11.5px;color:#E8836A;margin-top:6px;min-height:1px}

  .nav{display:flex;gap:10px;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--linha)}
  .nav .btn:last-child{margin-left:auto}
  .btn{font-family:var(--sans);font-weight:500;font-size:14.5px;padding:0 26px;height:48px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s,opacity .2s}
  .btn-p{background:var(--lilac);color:#160F2C;font-weight:600}
  .btn-p:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(169,155,224,.5)}
  .btn-p:active{transform:scale(.97)}
  .btn-p:disabled{opacity:.32;cursor:not-allowed}
  .btn-g{background:transparent;color:var(--ink);border:1px solid rgba(239,237,246,.22)}
  .btn-g:hover{border-color:var(--lilac);color:var(--lilac)}
  .btn-txt{background:none;border:none;color:var(--faint);font-size:13px;padding:0;height:auto;margin-top:34px}
  .btn-txt:hover{color:var(--lilac)}

  /* ----------------------------- o envelope -----------------------------
     Mesmo envelope da carta de /resultado/ — a Summit tem UM envelope, não um
     por página. Moldura de platina com a luz correndo pela borda, lacre de
     platina escovada que racha pelo monograma, e a carta saindo devagar pela
     boca de cima. Quando ela termina de sair, a cena se retira e o resultado
     ENTRA na tela: nada de corte seco.
     ---------------------------------------------------------------------- */
  .env-cena{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    min-height:min(72svh,580px);padding:10px 0 30px;
    transition:opacity .5s ease,transform .5s ease}
  /* O portão é a MESMA cena do envelope, mas com o formulário embaixo: não
     precisa da altura de tela cheia, senão o botão nasce abaixo da dobra. */
  .portao{min-height:0;justify-content:flex-start}
  /* Tudo aqui é medido para caber junto: a leitura, o envelope e o botão de
     enviar na mesma tela. Um "Abrir o meu diagnóstico" abaixo da dobra é um
     formulário que metade da gente não vê. */
  .portao .env-titulo{margin-bottom:6px}
  .portao .env-apoio{margin-bottom:16px}
  .portao .moldura{width:min(264px,70vw)}
  .portao .env-toque{margin-top:12px}
  .form-portao{width:100%;max-width:400px;text-align:left;margin-top:16px;
    transition:opacity .45s ease,transform .45s ease}
  .abrindo .form-portao{opacity:0;transform:translateY(-12px);pointer-events:none}
  .form-portao form{display:flex;flex-direction:column;gap:14px}
  .form-portao .btn{width:100%;margin-top:4px}
  .form-portao .nota{text-align:center;margin-top:2px}
  .campo label i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}
  .env-cena.saiu{opacity:0;transform:translateY(-20px) scale(.97);pointer-events:none}
  .env-titulo{font-family:var(--display);font-weight:400;font-size:clamp(24px,5.4vw,34px);line-height:1.2;
    margin:0 0 8px;color:var(--ink)}
  .env-apoio{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 32px;max-width:32em}
  .env-cena .rotulo,.env-titulo,.env-apoio{transition:opacity .45s ease .35s,transform .45s ease .35s}
  .abrindo .rotulo,.abrindo .env-titulo,.abrindo .env-apoio{opacity:0;transform:translateY(-12px)}

  /* moldura de platina viva — a luz corre pela borda */
  .moldura{position:relative;width:min(360px,84vw);padding:1.5px;border-radius:13px;
    background:linear-gradient(115deg,
      rgba(201,207,217,.08) 0%, rgba(246,248,251,.62) 18%, rgba(169,155,224,.42) 34%,
      rgba(201,207,217,.10) 52%, rgba(246,248,251,.55) 72%, rgba(201,207,217,.08) 100%);
    background-size:300% 100%;animation:correLuz 8s linear infinite;
    box-shadow:0 46px 90px -34px rgba(0,0,0,.95), 0 0 70px -30px rgba(124,99,201,.5)}
  @keyframes correLuz{from{background-position:0 0}to{background-position:300% 0}}

  /* No portão o envelope não é botão: ele não abre no toque, abre no envio.
     Sem cursor de mão e sem o salto no hover — prometer clique que não existe
     é pior do que não prometer nada. */
  .portao .envelope{cursor:default}
  .portao .moldura:hover .envelope{transform:none}
  .envelope{position:relative;display:block;width:100%;aspect-ratio:1.58/1;perspective:1500px;
    background:none;border:0;padding:0;cursor:pointer;border-radius:11px;
    -webkit-tap-highlight-color:transparent;transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .moldura:hover .envelope{transform:translateY(-6px)}
  .envelope:focus-visible{outline:2px solid var(--lilac);outline-offset:10px}
  .envelope > span,.envelope > i{position:absolute}

  .env-tras{inset:0;z-index:1;border-radius:11px;
    background:linear-gradient(158deg,#241A47,#1B1436 60%,#130E26)}

  /* a carta mora inteira atrás do painel; sai pela boca de cima */
  .carta{left:5%;right:5%;bottom:12px;z-index:2;border-radius:6px;padding:19px 18px 21px;text-align:center;
    background:linear-gradient(168deg,#F7F8FB,#DDE1E9 62%,#C4C9D4);
    box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9);
    transform:translateY(0);transition:transform 1.35s cubic-bezier(.22,1,.28,1) .7s}
  .abrindo .carta{transform:translateY(-190%)}
  .carta-rot{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;
    text-transform:uppercase;color:#6B7183;margin:0 0 7px}
  .carta-plano{display:block;font-family:var(--display);font-weight:500;font-size:26px;line-height:1.1;
    letter-spacing:-.02em;color:#24124D}
  .carta-linha{display:block;font-family:var(--display);font-style:italic;font-size:14.5px;
    color:#5A5270;margin:5px 0 0}

  .env-frente{inset:0;z-index:3;border-radius:11px;overflow:hidden;
    background:linear-gradient(168deg,#2A1F52,#1B1438 58%,#14102A);
    box-shadow:inset 0 1px 0 rgba(239,237,246,.09)}
  .env-frente::before,.env-frente::after{content:"";position:absolute;inset:0}
  .env-frente::before{background:linear-gradient(120deg,rgba(239,237,246,.05),transparent 60%);
    clip-path:polygon(0 0,50% 47%,0 96%)}
  .env-frente::after{background:linear-gradient(240deg,rgba(239,237,246,.05),transparent 60%);
    clip-path:polygon(100% 0,50% 47%,100% 96%)}
  /* brilho que varre o papel de tempos em tempos */
  .lustro{inset:0;z-index:4;border-radius:11px;pointer-events:none;overflow:hidden}
  .lustro::before{content:"";position:absolute;top:-60%;bottom:-60%;width:26%;left:-40%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.11),transparent);
    transform:skewX(-16deg);animation:varre 6.5s ease-in-out infinite}
  @keyframes varre{0%,62%{left:-40%}92%,100%{left:118%}}
  .abrindo .lustro{opacity:0;transition:opacity .3s}

  .aba{top:0;left:0;right:0;height:56%;z-index:5;transform-origin:top center;
    transform:rotateX(0deg);transform-style:preserve-3d;
    background:linear-gradient(180deg,#33254F,#221A3C);clip-path:polygon(0 0,100% 0,50% 100%);
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 -1px 0 rgba(239,237,246,.13));
    transition:transform .95s cubic-bezier(.6,.02,.24,1) .3s, z-index 0s .8s}
  .abrindo .aba{transform:rotateX(-179deg);z-index:0}

  /* ---- lacre de platina escovada, rachando pelo monograma ---- */
  /* A sombra externa fica no invólucro: dentro das metades, o clip-path a
     recortaria em quadrado. */
  .selo{left:50%;top:52%;z-index:6;width:72px;height:72px;margin:-36px 0 0 -36px;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.72))}
  .selo-metade{position:absolute;inset:0;border-radius:50%;overflow:hidden;
    background:
      repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 2px,rgba(18,22,32,.07) 2px 4px),
      linear-gradient(148deg,#F4F6F9 0%,#C2C7D1 24%,#EFF1F5 46%,#969CA9 72%,#D9DCE3 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.95), inset 0 -5px 11px rgba(34,38,48,.45),
      inset 0 0 0 1px rgba(255,255,255,.25);
    transition:transform .6s cubic-bezier(.36,.07,.19,.97),opacity .6s ease}
  .selo-metade.esq{clip-path:polygon(0 0,52% 0,45% 33%,55% 60%,47% 100%,0 100%)}
  .selo-metade.dir{clip-path:polygon(52% 0,100% 0,100% 100%,47% 100%,55% 60%,45% 33%)}
  .selo-logo{position:absolute;inset:16%;
    -webkit-mask:url(/assets/summit-icon.png) center/contain no-repeat;
    mask:url(/assets/summit-icon.png) center/contain no-repeat;
    background:linear-gradient(115deg,#5A5F6B,#8E94A2 38%,#FFFFFF 50%,#8E94A2 62%,#5A5F6B);
    background-size:260% 100%;animation:brilha 3.6s linear infinite;
    filter:drop-shadow(0 1px 1px rgba(255,255,255,.5))}
  @keyframes brilha{from{background-position:130% 0}to{background-position:-130% 0}}
  .abrindo .selo-metade.esq{transform:translate(-30px,18px) rotate(-26deg);opacity:0}
  .abrindo .selo-metade.dir{transform:translate(30px,20px) rotate(28deg);opacity:0}

  .env-toque{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--faint);margin:28px 0 0;animation:respira 2.8s ease-in-out infinite}
  @keyframes respira{0%,100%{opacity:.4}50%{opacity:.95}}
  .abrindo .env-toque{opacity:0;animation:none;transition:opacity .3s}

  /* O resultado não corta: entra. */
  .entrada{opacity:0;transform:translateY(24px);
    transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
  .entrada.entrou{opacity:1;transform:none}

  /* ---------------------------- resultado ---------------------------- */
  .plano{font-size:clamp(36px,8vw,62px);margin-bottom:6px;
    background:linear-gradient(100deg,#8A90A0,#E9EDF4 30%,#FFF 44%,#B9BFCB 60%,#EDF1F7 78%,#7E8494);
    background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
  .linha{font-family:var(--display);font-style:italic;font-size:19px;color:var(--lilac);margin:0 0 26px}
  .acoes{display:flex;gap:11px;flex-wrap:wrap}
  .acoes .btn{flex:1 1 200px}
  /* o fecho do resultado: o plano em cima, e daqui só duas saídas */
  .acoes-fim{margin-top:38px}
  .btn-zap{background:#25D366;color:#08331A;font-weight:600;text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;gap:9px}
  .btn-zap svg{width:20px;height:20px;flex:none}
  .btn-zap:hover{background:#1FBE5A;transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(37,211,102,.5)}
  .btn-zap:active{transform:scale(.97)}
  .acoes-fim .btn-g{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

  .aceite{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--muted);cursor:pointer}
  .aceite input{width:17px;height:17px;margin-top:1px;flex:none;accent-color:var(--lilac);cursor:pointer}
  .aceite span{min-width:0;overflow-wrap:anywhere}

  /* ------------------------------- celular -------------------------------
     No fim do quiz as DUAS saídas são botões de verdade, empilhados: o
     WhatsApp em cima, porque é o que a pessoa veio fazer. A regra antiga que
     rebaixava o segundo a link sublinhado continua valendo nas outras telas. */
  @media(max-width:600px){
    main{padding:4px 18px 70px}
    .nav{flex-wrap:wrap}
    .nav .btn{flex:1 1 auto;padding:0 16px;font-size:13.5px;height:46px}
    .apoio{font-size:15px}
    .op{padding:14px 16px;font-size:15px;gap:12px}
    .op-k{width:25px;height:25px;font-size:10.5px}

    .plano{font-size:clamp(33px,9.4vw,44px)}
    .linha{font-size:17px;margin-bottom:22px}

    .form-portao .btn{height:50px}
    .acoes{flex-direction:column;gap:6px;align-items:stretch}
    .acoes .btn{flex:none;width:100%;height:50px;font-size:14.5px}
    .acoes .btn-g{height:auto;padding:12px 0;border:0;font-size:13.5px;font-weight:400;
      color:var(--muted);text-decoration:underline;text-underline-offset:4px}
    .acoes .btn-g:hover{color:var(--lilac)}
    .acoes-fim{margin-top:30px;gap:10px}
    .acoes-fim .btn-zap{order:-1}
    .acoes-fim .btn-g{height:50px;padding:0 26px;border:1px solid rgba(239,237,246,.22);
      font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none}
    .btn-txt{margin-top:28px}

    .moldura{width:min(320px,86vw)}
    .carta-plano{font-size:23px}
    .selo{width:64px;height:64px;margin:-32px 0 0 -32px}
    .env-toque{margin-top:24px;font-size:9.5px;letter-spacing:.2em}
  }
  @media (prefers-reduced-motion: reduce){
    .cena{animation:none} .barra i{transition:none}
    .carta,.aba,.selo-metade,.env-cena,.entrada{transition-duration:.01ms}
    .env-toque,.moldura,.lustro::before,.selo-logo{animation:none}
  }