/* NUKKO Vision (4/Out/2026). Só esta página o carrega; as cores são as do styles.css. */
/* O styles.css põe overflow-x:hidden no html e no body, o que faz do body uma caixa de scroll e
   desliga o position:sticky do palco. O clip corta o mesmo excesso sem criar essa caixa. */
html,body{overflow-x:clip}
.vision{background:#04150f;color:#fff}
/* ... e dá a todas as <section> margens, fundo claro e uma linha por baixo. */
.vision-scroll,.vision-pile{padding:0;border-bottom:0;background:#04150f}
.vision-fin{border-bottom:0}
.vision-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* O palco fica colado ao ecrã enquanto a secção alta passa por baixo. */
.vision-scroll{position:relative}
.vision-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#04150f}

/* A moldura tem sempre 16:9 e cobre o palco: as etiquetas posicionam-se em % da fotografia. */
.vision-frame{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100vw,177.78vh);aspect-ratio:16/9;
}
.vision-layer{position:absolute;inset:0;width:100%;height:100%;will-change:opacity}
.vision-layer img,.vision-frame > img{width:100%;height:100%;object-fit:cover;display:block}
.vision-tags{position:absolute;inset:0}

/* Escurece a base para o texto se ler por cima de qualquer fotografia. */
.vision-voile{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(2,20,14,.88) 0%, rgba(2,20,14,.45) 30%, rgba(2,20,14,0) 58%);
}

.vision-concept{
  position:absolute;top:104px;right:24px;z-index:3;   /* por baixo da barra de navegação, que fica colada ao topo */
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#022c22;background:var(--accent-3);padding:7px 14px;border-radius:999px;
}

.vision-legende{
  position:absolute;left:clamp(24px,6vw,96px);bottom:clamp(40px,9vh,96px);max-width:640px;z-index:2;
}
.vision-sur{
  display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-3);margin-bottom:14px;
}
.vision-legende h2,.vision-fin h2{
  font-weight:900;font-size:clamp(34px,5.2vw,76px);line-height:.98;letter-spacing:-.03em;
  margin:0 0 16px;color:#fff;text-wrap:balance;
}
.vision .italic{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--accent-3)}
.vision-legende p{font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:var(--mint-soft);margin:0;font-weight:500}

.vision-barre{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12);z-index:3}
.vision-barre i{display:block;height:100%;background:var(--accent-3)}

/* Etiquetas: o que o sistema NUKKO mostra dentro das lentes. */
.vision-tag{
  position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:1.1vw 1.3vw;min-width:13vw;max-width:26vw;
  background:rgba(4,21,15,.82);border:1.5px solid #34d399;border-radius:14px;
  box-shadow:0 0 0 1px rgba(52,211,153,.18),0 18px 40px -18px rgba(0,0,0,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.vision-tag-sur{font-family:var(--font-mono);font-size:max(10px,.72vw);letter-spacing:.14em;text-transform:uppercase;color:#6ee7b7}
.vision-tag-nom{font-size:max(15px,1.5vw);font-weight:600;color:#fff}
.vision-tag-prix{font-size:max(22px,2.5vw);font-weight:900;letter-spacing:-.02em;color:#34d399;line-height:1}
.vision-tag-prix small{font-size:.5em;font-weight:700}
.vision-tag-pill{
  margin-top:4px;font-family:var(--font-mono);font-size:max(10px,.78vw);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#022c22;background:#34d399;padding:5px 12px;border-radius:999px;
}
.vision-tag-ligne{display:flex;justify-content:space-between;gap:2vw;width:100%;font-size:max(14px,1.3vw);color:#a7f3d0}
.vision-tag-ligne b{font-weight:500}
.vision-tag-ligne em{font-style:normal;font-weight:800;color:#fff}
.vision-tag-ligne--ok em{color:#34d399}
.vision-tag-item{position:relative;padding-left:1.6em;font-size:max(14px,1.25vw);color:#fff}
.vision-tag-item::before{
  content:"";position:absolute;left:0;top:.2em;width:.95em;height:.95em;border-radius:50%;
  border:1.5px solid #6ee7b7;box-sizing:border-box;
}
.vision-tag-item--ok{color:#a7f3d0;text-decoration:line-through;text-decoration-color:rgba(167,243,208,.6)}
.vision-tag-item--ok::before{background:#34d399;border-color:#34d399}
.vision-tag--voix{max-width:30vw}
.vision-tag-voix{display:flex;align-items:center;gap:.9vw;font-size:max(15px,1.45vw);font-weight:600;color:#fff;line-height:1.3}
.vision-onde{display:inline-flex;align-items:center;gap:3px;flex:none;height:1.6em}
.vision-onde i{display:block;width:3px;border-radius:2px;background:#34d399;animation:vision-onde 1.1s ease-in-out infinite}
.vision-onde i:nth-child(1){height:35%}
.vision-onde i:nth-child(2){height:90%;animation-delay:.15s}
.vision-onde i:nth-child(3){height:60%;animation-delay:.3s}
.vision-onde i:nth-child(4){height:80%;animation-delay:.45s}
@keyframes vision-onde{50%{transform:scaleY(.4)}}

/* Fecho */
.vision-fin{background:linear-gradient(180deg,#04150f 0%,#022c22 100%);padding:120px 40px}
.vision-fin-inner{max-width:820px;margin:0 auto}
.vision-fin p{font-size:19px;line-height:1.6;color:var(--mint-soft);margin:0 0 22px}
.vision-liste{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:12px}
.vision-liste li{padding:16px 20px;border:1px solid rgba(110,231,183,.28);border-radius:14px;color:var(--mint-soft);font-size:17px;line-height:1.45}
.vision-liste strong{color:#fff}
.vision-fin-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.vision-fin-cta a:first-child{
  display:inline-block;background:var(--accent-3);color:#022c22;font-weight:800;
  padding:16px 26px;border-radius:999px;text-decoration:none;
}
.vision-fin-lien{color:#6ee7b7;text-decoration:underline;font-weight:600}

/* Telemóvel e movimento reduzido: capítulos empilhados, sem palco colado. */
.vision-pile{display:grid;gap:56px;padding:0 0 64px}
.vision-carte .vision-frame{position:relative;left:auto;top:auto;transform:none;width:100%;overflow:hidden}
.vision-carte .vision-legende{position:static;max-width:none;padding:24px 24px 0}
.vision-carte .vision-concept{top:12px;right:12px;font-size:10px;padding:5px 10px}
.vision-pile .vision-tag{padding:8px 10px;gap:3px;border-radius:10px;min-width:0;max-width:46vw;backdrop-filter:none;-webkit-backdrop-filter:none}
.vision-pile .vision-tag-sur{font-size:8px}
.vision-pile .vision-tag-nom,.vision-pile .vision-tag-ligne,.vision-pile .vision-tag-item,.vision-pile .vision-tag-voix{font-size:11px}
.vision-pile .vision-tag-prix{font-size:17px}
.vision-pile .vision-tag-pill{font-size:8px;padding:3px 8px}
.vision-pile .vision-tag--voix{max-width:44vw}
@media (prefers-reduced-motion: reduce){ .vision-onde i{animation:none} }
@media (max-width:820px){ .vision-fin{padding:72px 24px} }