/* Kingdom Tracktion: o que é próprio desta página, por cima de site.css.
   Títulos em Instrument Serif itálico com o espaçamento condensado, o selo no lugar do sinal,
   a metodologia, o "para quem é" a dois e a candidatura. */

/* ---------------- Títulos: Instrument Serif itálico, condensado ---------------- */
.hero h1, .cabeca h2, .fecho h2, .cartao h3, .pilar h3, .plano h3, .app-ola, .slider-frase, .cert-nome, .vitrine-titulo{
  font-family:var(--serifa); font-style:italic; font-weight:400; letter-spacing:-.035em;
}
.hero h1{ font-size:clamp(50px, 7.6vw, 108px); line-height:.96; max-width:15ch; margin-inline:auto; }
.cabeca h2, .fecho h2{ font-size:clamp(42px, 5.6vw, 72px); line-height:1; }
.cartao h3{ font-size:clamp(30px, 2.8vw, 38px); line-height:1.02; }
.cartao-largo .cartao-texto h3{ font-size:clamp(38px, 4vw, 54px); }
.pilar h3{ font-size:clamp(32px, 3vw, 42px); line-height:1.02; }
.plano h3{ font-size:42px; line-height:1; }
.app-ola{ font-size:34px; line-height:1; }
.slider-frase{ font-size:clamp(28px, 2.7vw, 36px); line-height:1.12; letter-spacing:-.03em; }
.cert-nome{ font-size:34px; }
.vitrine-titulo{ font-size:26px; }

/* ---------------- O selo como sinal ---------------- */
.sinal-selo, .app-selo, .tel-sinal{ background:#002C19; overflow:hidden; padding:0; box-shadow:0 6px 16px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(230,222,186,.18); }
.sinal-selo img, .app-selo img, .tel-sinal img{ width:100%; height:100%; display:block; }
.nucleo-selo{ background:#002C19; overflow:hidden; box-shadow:0 0 0 10px rgba(230,222,186,.06), 0 18px 40px -12px rgba(0,0,0,.9); }
.nucleo-selo img{ width:100%; height:100%; display:block; }
.fluxo-av{ background:var(--marca); color:var(--sobre-marca); }
.fluxo-av-selo{ background:#002C19; overflow:hidden; padding:0; }
.fluxo-av-selo img{ width:100%; height:100%; display:block; }
.fecho-selo{ width:clamp(120px, 13vw, 160px); height:auto; margin:0 auto 36px; filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)); }

/* capas da janela da abertura */
.capa-marfim{ --cc:#E6DEBA; } .capa-bege{ --cc:#F2D9B5; } .capa-ferrugem{ --cc:#E2A47B; } .capa-musgo{ --cc:#A9C79C; }

/* botão verde, para o cartão marfim */
.btn-verde{ background:linear-gradient(180deg, #145F3D 0%, #003A21 100%); color:#F4EDD2; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 26px -12px rgba(0,44,25,.9); }
.btn-verde:hover{ transform:translateY(-2px); }

/* «Ao vivo» na janela da mesa */
.aula-ao-vivo{ position:absolute; left:14px; top:14px; display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:999px; background:rgba(0,0,0,.35); font-size:12px; font-weight:500; color:var(--texto); }
.aula-ao-vivo i{ width:7px; height:7px; border-radius:50%; background:#E07A5F; box-shadow:0 0 0 3px rgba(224,122,95,.25); animation:pisca 1.6s ease-in-out infinite; }
@keyframes pisca{ 50%{ opacity:.35; } }

/* advising: a lista do plano */
.cert-lista{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--texto-2); }
.cert-lista li{ display:flex; align-items:center; gap:10px; }
.cert-lista i{ width:16px; height:16px; border-radius:5px; box-shadow:inset 0 0 0 1.5px rgba(230,222,186,.5); position:relative; }
.cert-lista i::after{ content:""; position:absolute; left:4.5px; top:2.5px; width:4px; height:7px; border:solid var(--laranja); border-width:0 1.8px 1.8px 0; transform:rotate(45deg); }
.ranking-nota{ margin:10px 4px 0; font-size:11.5px; color:var(--texto-3); text-align:right; }

/* ---------------- Metodologia ---------------- */
.metodo{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.passo{ padding:30px 28px 28px; display:flex; flex-direction:column; gap:12px; min-height:300px; }
.passo-num{ font-family:var(--serifa); font-style:italic; font-size:72px; line-height:.8; letter-spacing:-.04em; color:var(--laranja); }
.passo h3{ margin-top:auto; }
.passo p{ margin:0; font-size:15px; }
.passo .barra{ margin-top:10px; }
.passo .barra > span{ background:var(--marca); transform:scaleX(0); }
.anima .passo.visto .barra > span, .passo .barra > span{ transform:scaleX(var(--p)); }
.anima .passo:not(.visto) .barra > span{ transform:scaleX(0); }
.anima .passo.visto .barra > span{ transition:transform 1.4s .4s var(--sai); }

/* ---------------- Para quem é: dois cartões ---------------- */
.planos-dois{ grid-template-columns:1.05fr 1fr; align-items:start; }
.planos-dois .plano{ padding:40px 38px 36px; }
.planos-dois .plano-desc{ min-height:0; margin-bottom:6px; }
.planos-dois .plano ul{ margin-bottom:28px; }
.planos-dois .plano li span{ text-wrap:pretty; }
.plano-nao li svg{ color:#C98476; }
.plano-nao .plano-ico{ color:#C98476; }
.plano.destaque li svg, .plano.destaque .plano-ico{ color:var(--sobre-marca); }
.plano.destaque .plano-desc{ color:rgba(0,44,25,.78); }
.plano.destaque .btn{ width:auto; align-self:flex-start; }

/* ---------------- Candidatura ---------------- */
.cartao-aplicar{ align-items:stretch; }
.cartao-aplicar .cartao-texto{ max-width:560px; display:flex; flex-direction:column; align-items:flex-start; }
.cartao-aplicar .pilar-itens{ margin:28px 0 34px; }
.aplicar-visual{ border-left:1px solid var(--linha); min-height:100%; }

/* ---------------- Detalhes do telemóvel ---------------- */
@media (max-width:1000px){
  .metodo{ grid-template-columns:repeat(2, 1fr); }
  .planos-dois{ grid-template-columns:1fr; }
  .aplicar-visual{ border-left:0; border-top:1px solid var(--linha); }
  .cartao-aplicar .cartao-texto{ padding-bottom:40px; max-width:none; }
}
@media (max-width:600px){
  .hero h1{ font-size:clamp(46px, 13vw, 60px); }
  .metodo{ grid-template-columns:1fr; }
  .passo{ min-height:0; }
  .passo h3{ margin-top:14px; }
  .planos-dois .plano{ padding:30px 24px 26px; }
  .plano h3{ font-size:36px; }
  .planos-dois .plano .btn{ width:100%; }
  .cartao-aplicar .btn{ width:100%; }
  .app-ola{ font-size:28px; }
  .slider-frase{ font-size:26px; }
}

/* ---------------- Abertura: os quatro modelos ---------------- */
.hero-modelos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; text-align:left; }
.mm{
  display:flex; flex-direction:column; gap:16px; padding:22px 22px 24px; border-radius:var(--raio-lg);
  background:linear-gradient(160deg, var(--cartao-a) 0%, var(--cartao-b) 70%); border:1px solid var(--linha);
}
.mm b{ display:block; font-size:16.5px; font-weight:500; letter-spacing:-.015em; }
.mm small{ display:block; font-size:14px; color:var(--texto-3); line-height:1.45; margin-top:4px; }
.mm-ico{ width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center; background:var(--marca); color:var(--sobre-marca); box-shadow:0 10px 24px -12px rgba(205,190,140,.7); }
.mm-ico svg{ width:21px; height:21px; }
.anima .hero-palco .mm{ opacity:0; transform:translateY(14px); transition:opacity .8s var(--sai), transform 1s var(--sai); }
.anima .hero-palco.visto .mm{ opacity:1; transform:none; }
.anima .hero-palco.visto .mm:nth-child(2){ transition-delay:.1s; } .anima .hero-palco.visto .mm:nth-child(3){ transition-delay:.2s; } .anima .hero-palco.visto .mm:nth-child(4){ transition-delay:.3s; }
@media (max-width:900px){ .hero-modelos{ grid-template-columns:1fr 1fr; } }

/* ---------------- Fora do ecrã: as fotografias ---------------- */
.slider{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); }
.slider-foto{ padding:0; min-height:460px; background:#05170E; }
.slider-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:opacity .4s, transform .7s var(--sai); }
.slider-foto::after{ content:""; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(0deg, rgba(0,14,7,.6), transparent); pointer-events:none; }
.slider-foto.muda img{ opacity:0; transform:scale(1.04); }
.slider-tipo-selo{ width:22px; height:22px; border-radius:50%; overflow:hidden; background:#002C19; display:block; }
.slider-tipo-selo img{ width:100%; height:100%; display:block; }
.slider-nome{ font-size:clamp(44px, 4.8vw, 68px); line-height:.98; margin-top:28px; }
.slider-negocio{ margin:14px 0 0; font-size:17px; color:var(--laranja-ink); }
.slider-pe{ flex-direction:column; align-items:flex-start; gap:16px; }
.slider-contador{ white-space:nowrap; }
.miniaturas{ display:flex; flex-wrap:wrap; gap:6px; }
.miniaturas button{ width:42px; height:42px; padding:0; border:0; border-radius:50%; overflow:hidden; cursor:pointer; background:#05170E; opacity:.55; box-shadow:0 0 0 2px var(--fundo-2), 0 0 0 3px transparent; transition:opacity .3s, box-shadow .3s, transform .3s var(--sai); }
.miniaturas button img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.miniaturas button:hover{ opacity:.9; transform:translateY(-2px); }
.miniaturas button[aria-selected="true"]{ opacity:1; box-shadow:0 0 0 2px #050505, 0 0 0 4px var(--laranja); }

@media (max-width:860px){
  .slider{ grid-template-columns:1fr; }
  .slider-foto{ min-height:0; aspect-ratio:4 / 4.1; }
}
@media (max-width:600px){
  .slider-nome{ font-size:44px; margin-top:20px; }
  .slider-pe{ flex-direction:column; align-items:flex-start; gap:16px; }
  .miniaturas button{ width:40px; height:40px; }
}