/* ================================================================
   A · SINAL - variantes A1 A2 A3 A4
   Base comum: vídeo fixo em ecrã inteiro, conteúdo por cima,
   scroll a controlar o tempo do filme. Cada variante muda paleta,
   ritmo tipográfico e a forma da secção de serviços.
   ================================================================ */
:root{
  --ink:#f2f5f8;
  --dim:#7d8a95;
  --bg:#07090c;
  --line:#1b2027;
  --accent:#5b8cff;
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
/* paletas por variante */
body[data-v="a2"]{--accent:#ff6b35;--bg:#0b0806;--line:#241a14;--dim:#8b7a70}
body[data-v="a3"]{--accent:#34d399;--bg:#050a08;--line:#12241c;--dim:#6f8a80}
body[data-v="a4"]{--accent:#c084fc;--bg:#08060c;--line:#1e1826;--dim:#8b8095}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- palco ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#04060a}
.stage video{width:100%;height:100%;object-fit:cover}
.stage::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 85% at 50% 30%,rgba(4,6,10,.18) 0%,rgba(4,6,10,.62) 58%,rgba(4,6,10,.94) 100%)}
.flow{position:relative;z-index:1}

/* ---------- abertura ---------- */
.open{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 22px;text-align:center}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin:0 auto 26px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 16%,transparent)}
.name{font-size:clamp(2.9rem,13.5vw,7.5rem);line-height:.92;letter-spacing:-.045em;font-weight:600;
  text-shadow:0 2px 30px rgba(4,6,10,.55)}
.role{margin-top:20px;font:600 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:#c3ccd6;text-shadow:0 1px 12px rgba(4,6,10,.9)}
/* a2: nome em caixa alta apertada */
body[data-v="a2"] .name{text-transform:uppercase;letter-spacing:-.02em;font-weight:700;font-size:clamp(2.4rem,11vw,6rem)}
/* a3: nome em duas linhas com regra */
body[data-v="a3"] .open{align-items:flex-start;text-align:left}
body[data-v="a3"] .dot{margin:0 0 26px}
body[data-v="a4"] .name{font-weight:300;letter-spacing:-.05em}

/* ---------- painéis ---------- */
.panel{min-height:88dvh;display:flex;align-items:center;padding:80px 22px}
.panel .in{max-width:640px}
.panel h2{font-size:clamp(1.8rem,7vw,3.1rem);line-height:1.06;letter-spacing:-.03em;font-weight:600}
.panel p{margin-top:16px;color:var(--dim);font-size:1.05rem;max-width:52ch}
.panel.right{justify-content:flex-end;text-align:right}
.panel.right p{margin-left:auto}
.tag{display:inline-block;margin-bottom:18px;font:600 11px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- o que faço (serviços imersivos) ---------- */
.svc{background:var(--bg);padding:90px 0 20px}
.svc h2{padding:0 22px;font-size:clamp(1.8rem,7vw,3.1rem);letter-spacing:-.03em;font-weight:600;max-width:16ch}
.svc .sub{padding:16px 22px 0;color:var(--dim);max-width:56ch}
.cards{margin-top:38px;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.card{background:var(--bg);padding:34px 22px;position:relative;overflow:hidden}
.card b{display:block;font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.card h3{font-size:1.35rem;letter-spacing:-.02em;font-weight:600;line-height:1.15}
.card p{margin-top:12px;color:var(--dim);font-size:.98rem;max-width:46ch}
.card ul{margin-top:16px;display:grid;gap:8px;list-style:none}
.card li{color:var(--dim);font-size:.92rem;padding-left:18px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent)}
.card::after{content:attr(data-n);position:absolute;right:16px;top:6px;font:700 4rem/1 var(--mono);
  color:color-mix(in srgb,var(--ink) 5%,transparent)}
/* a2: cartões alternam fundo */
body[data-v="a2"] .card:nth-child(even){background:color-mix(in srgb,var(--accent) 6%,var(--bg))}
/* a4: cartões com borda arredondada e separados */
body[data-v="a4"] .cards{background:transparent;border:0;gap:14px;padding:0 22px}
body[data-v="a4"] .card{border:1px solid var(--line);border-radius:18px}

/* ---------- números honestos ---------- */
.facts{background:var(--bg);padding:28px 22px 8px;display:grid;gap:20px}
.fact strong{display:block;font-size:clamp(2rem,9vw,3rem);letter-spacing:-.03em;font-weight:600;color:var(--accent)}
.fact span{color:var(--dim);font-size:.92rem}

/* ---------- trabalho ---------- */
.work{background:var(--bg);padding:70px 0 0}
.work h2{padding:0 22px;font-size:clamp(1.8rem,7vw,3.1rem);letter-spacing:-.03em;font-weight:600;margin-bottom:34px}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:24px 22px;border-bottom:1px solid var(--line);transition:background .3s ease,color .3s ease}
.row:hover,.row:focus-visible{background:var(--ink);color:var(--bg)}
.row .n{font:600 11px/1 var(--mono);color:var(--accent);transition:color .3s ease}
.row:hover .n{color:var(--bg)}
.row .t{font-size:1.18rem;font-weight:600;letter-spacing:-.015em}
.row .t span{display:block;font-size:.88rem;font-weight:400;color:var(--dim);margin-top:4px;transition:color .3s ease}
.row:hover .t span{color:rgba(7,9,12,.6)}
.row .go{font-size:1.05rem}

/* ---------- fecho ---------- */
.close{background:var(--bg);padding:90px 22px 60px}
.close h2{font-size:clamp(1.8rem,7vw,3.1rem);letter-spacing:-.03em;font-weight:600;max-width:16ch}
.close p{margin-top:16px;color:var(--dim);max-width:48ch}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.cta{display:inline-flex;align-items:center;gap:10px;width:fit-content;white-space:nowrap;
  background:var(--accent);color:#050a18;font-weight:700;padding:16px 26px;border-radius:8px;transition:transform .18s ease}
.cta:active{transform:translateY(1px)}
.cta-wa{background:transparent;color:var(--ink);border:1px solid var(--line)}
.foot{background:var(--bg);border-top:1px solid var(--line);padding:26px 22px 92px;color:var(--dim);
  font:400 12px/1.6 var(--mono)}

/* ---------- alternador ---------- */
.switch{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:2px;
  background:rgba(7,9,12,.82);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;padding:4px}
.switch a{font:600 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim);padding:9px 12px;border-radius:999px}
.switch a.on{background:var(--ink);color:var(--bg)}

@media (min-width:900px){
  .panel{padding:110px 8vw}
  .work h2,.rows .row,.close,.foot,.svc h2,.svc .sub,.facts{padding-left:8vw;padding-right:8vw}
  .cards{grid-template-columns:repeat(3,1fr)}
  .card{padding:44px 34px}
  .facts{grid-template-columns:repeat(3,1fr);gap:34px}
  body[data-v="a4"] .cards{padding:0 8vw}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}