/* =========================================================
   FERSOL — Camada de anotacoes UX
   Tudo o que esta a MAGENTA nao faz parte do design final.
   E a camada explicativa para o cliente.
   ========================================================= */

/* ---------- Dock de controlo ---------- */
.dock{
  position:fixed;right:18px;bottom:18px;z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.dock__panel{
  background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:4px;padding:12px;display:grid;gap:10px;min-width:238px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  transform-origin:bottom right;
}
.dock.is-min .dock__panel{display:none}
.dock__title{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.5;display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.dock__modes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;background:rgba(255,255,255,.09);padding:3px;border-radius:3px}
.dock__modes button{
  padding:8px 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  border-radius:2px;opacity:.62;transition:.22s var(--ease);text-align:center;
}
.dock__modes button:hover{opacity:1}
.dock__modes button.is-on{background:var(--note);opacity:1;color:#fff}
.dock__row{display:flex;gap:6px;flex-wrap:wrap}
.dock__row button{
  flex:1;min-width:0;padding:8px 8px;border:1px solid rgba(255,255,255,.24);border-radius:2px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;
  transition:.22s var(--ease);white-space:nowrap;
}
.dock__row button:hover{background:rgba(255,255,255,.12);opacity:1}
.dock__row button.is-on{background:var(--note);border-color:var(--note);opacity:1}
.dock__hint{font-size:11px;line-height:1.5;opacity:.55}
.dock__toggle{
  display:flex;align-items:center;gap:8px;
  background:var(--note);color:#fff;border-radius:999px;padding:11px 17px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 10px 26px rgba(229,0,76,.36);
}
.dock__toggle b{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Rail lateral de seccoes ---------- */
.rail{
  position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:115;
  display:grid;gap:2px;
}
.rail a{
  display:flex;align-items:center;gap:9px;padding:4px 0;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);opacity:.55;transition:.28s var(--ease);
}
.rail a i{display:block;width:16px;height:1.5px;background:currentColor;transition:width .28s var(--ease)}
.rail a span{opacity:0;transform:translateX(-4px);transition:.28s var(--ease);white-space:nowrap}
.rail:hover a span{opacity:1;transform:none}
.rail a:hover,.rail a.is-on{opacity:1;color:var(--note)}
.rail a.is-on i{width:30px}
body.on-dark .rail a{color:rgba(255,255,255,.62)}
body.on-dark .rail a:hover,body.on-dark .rail a.is-on{color:#fff}

/* ---------- Pins de anotacao ---------- */
.pin{
  position:absolute;z-index:60;width:24px;height:24px;border-radius:50%;
  background:var(--note);color:#fff;border:2px solid rgba(255,255,255,.85);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0;
  cursor:help;box-shadow:0 3px 12px rgba(229,0,76,.45);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.pin::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--note);
  opacity:.55;animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.85);opacity:.6}70%,100%{transform:scale(1.5);opacity:0}}
.pin:hover,.pin:focus-visible{transform:scale(1.22);outline:none;z-index:80}
.pin:hover::after{animation:none;opacity:0}

/* posicionamento */
.pin--tr{top:-11px;right:-11px}
.pin--tl{top:-11px;left:-11px}
.pin--br{bottom:-11px;right:-11px}
.pin--bl{bottom:-11px;left:-11px}
.pin--inline{position:relative;display:inline-grid;vertical-align:middle;margin-left:7px;top:-1px}

/* balao */
.pin__tip{
  position:absolute;z-index:90;width:min(340px,80vw);
  background:#fff;color:var(--ink);border:1.5px solid var(--note);border-radius:4px;
  padding:14px 16px;text-align:left;
  box-shadow:0 20px 48px rgba(29,37,45,.28);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  pointer-events:none;font-family:var(--sans);
  top:32px;left:50%;margin-left:-170px;
}
.pin:hover .pin__tip,.pin:focus-visible .pin__tip,.pin.is-open .pin__tip{opacity:1;visibility:visible;transform:none}
.pin__tip h5{
  margin:0 0 7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--note);font-weight:600;
}
.pin__tip .what{font-size:13.5px;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.pin__tip .fx{
  font-size:12.5px;line-height:1.5;margin:0;padding:9px 11px;border-radius:3px;
  background:var(--note-soft);color:var(--ink-2);
}
.pin__tip .fx b{color:var(--note);font-weight:600}
.pin__tip .need{
  margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--line-2);
  font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--ink-2);letter-spacing:.01em;
}
.pin__tip .need b{color:var(--ink);font-weight:600;display:block;margin-bottom:4px;letter-spacing:.12em;font-size:9.5px;text-transform:uppercase}
.pin--tip-left .pin__tip{left:auto;right:32px;top:-8px;margin-left:0}
.pin--tip-right .pin__tip{left:32px;right:auto;top:-8px;margin-left:0}
.pin--tip-up .pin__tip{top:auto;bottom:32px}

/* halo do elemento anotado.
   :where() tem especificidade zero — garante que este "position:relative"
   so se aplica a elementos sem posicionamento proprio. Sem isto, esta regra
   sobrepunha-se a .hero__bg / .stmt__bg (absolute), porque a camada de
   anotacoes carrega depois da camada de estrutura. */
:where([data-anno]){position:relative}
body.anno [data-anno]{outline:1px dashed rgba(229,0,76,.42);outline-offset:5px}
body.anno [data-anno]:hover{outline-color:var(--note);outline-style:solid}

/* ---------- Modo: esconder anotacoes ---------- */
body:not(.anno) .pin,body:not(.anno) .rail{display:none}

/* ---------- Modo briefing: cartoes de conteudo ---------- */
.brief{
  display:none;margin-top:26px;border:1.5px solid var(--note);border-radius:4px;background:#fff;color:var(--ink);
  padding:18px 20px;
}
body.brief-on .brief{display:block;animation:fadeUp .5s var(--ease) both}
.brief__h{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--note);font-weight:600;
}
.brief__h::before{content:"";width:18px;height:1.5px;background:var(--note)}
.brief__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.brief__i{border-top:1px solid var(--line-2);padding-top:11px}
.brief__i b{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.brief__i p{font-family:var(--mono);font-size:11px;line-height:1.65;color:var(--ink-2)}
.brief__i em{font-style:normal;color:var(--note);font-weight:600}
.brief__note{
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);
  font-size:12.5px;line-height:1.55;color:var(--ink-2);
}
.brief__note b{color:var(--ink)}

/* ---------- Grelha de layout ---------- */
.grid-ov{
  position:fixed;inset:0;z-index:110;pointer-events:none;display:none;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}
body.grid-on .grid-ov{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.grid-ov i{background:rgba(229,0,76,.075);border-left:1px solid rgba(229,0,76,.16);border-right:1px solid rgba(229,0,76,.16)}

/* ---------- Ecra de abertura ---------- */
.intro{
  position:fixed;inset:0;z-index:300;background:var(--ink);color:#fff;
  display:grid;place-items:center;padding:24px;
  transition:opacity .6s var(--ease),visibility .6s;
}
.intro.is-gone{opacity:0;visibility:hidden}
.intro__box{max-width:620px;text-align:left}
.intro__k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--note);margin-bottom:16px}
.intro h1{font-size:clamp(26px,4vw,42px);margin-bottom:16px;line-height:1.1}
.intro p{color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.6;margin-bottom:14px}
.intro ul{margin:0 0 26px;padding-left:18px;color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.85}
.intro ul b{color:#fff;font-weight:500}
.intro .btn{border-color:var(--note);background:var(--note);color:#fff}
.intro .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.intro__meta{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.42}

/* ---------- Legenda flutuante topo ---------- */
.legend{
  position:fixed;top:calc(var(--hdr) + 12px);right:18px;z-index:118;
  background:rgba(255,255,255,.94);border:1px solid var(--note);border-radius:3px;
  padding:8px 12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--note);display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 22px rgba(29,37,45,.14);
}
.legend b{width:7px;height:7px;border-radius:50%;background:var(--note)}
body:not(.anno) .legend{display:none}

@media (max-width:860px){
  .rail{display:none}
  .dock{right:10px;bottom:10px;left:10px}
  .dock__panel{min-width:0;width:100%}
  .dock__toggle{align-self:flex-end}
  .pin__tip{width:min(300px,86vw);margin-left:-150px}
  .legend{display:none}
}