/*═══════════════════════════════════════════════════════════════
  VILLA VITALIS® — folha de estilo das páginas legais
  Partilhada por politica-privacidade.html e termos.html.
  Mesmos tokens do site, mas tipografia de leitura longa.
═══════════════════════════════════════════════════════════════*/
@font-face{
  font-family:'Archivo';
  src:url('media/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('media/fonts/inter-tight-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --volt:#90C008; --volt-hi:#B4E82A; --on-volt:#0A0E09;
  --ink:#070A06; --ink-2:#0D110B; --carbon:#151A13;
  --line:rgba(242,242,238,.14); --line-2:rgba(242,242,238,.07);
  --paper:#F2F2EE; --mute:#9AA093; --mute-2:#787E72;
  --d:'Archivo',Helvetica,Arial,sans-serif;
  --b:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pad:clamp(20px,4.4vw,72px);
  --e:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--b);font-size:clamp(15.5px,1vw,17px);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--volt);color:var(--on-volt)}
a{color:inherit;text-decoration:none}

.wrap{max-width:820px;margin:0 auto;padding-inline:var(--pad)}

/*── topo ──*/
.top{
  position:sticky;top:0;z-index:10;background:rgba(7,10,6,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2)
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding-block:clamp(14px,2vw,20px);max-width:1100px}
.mark{display:inline-flex;align-items:center;gap:.7rem}
.mark svg{height:30px;width:auto;color:var(--paper)}
.voltar{
  display:inline-flex;align-items:center;gap:.55rem;padding:.62rem 1.05rem;border-radius:100px;
  border:1px solid var(--line);color:var(--paper);
  font-family:var(--d);font-size:.66rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  transition:border-color .35s var(--e),background .35s var(--e);white-space:nowrap
}
.voltar:hover{border-color:var(--volt);background:rgba(144,192,8,.09)}
.voltar svg{width:13px;height:13px;flex:none}

/*── cabeçalho da página ──*/
.head{padding-block:clamp(56px,9vw,110px) clamp(30px,4vw,48px);border-bottom:1px solid var(--line-2)}
.kicker{font-family:var(--d);font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--volt);margin-bottom:1.4rem}
h1{font-family:var(--d);font-weight:600;line-height:.98;letter-spacing:-.035em;
  font-size:clamp(2.5rem,6.4vw,4.2rem);font-variation-settings:'wdth' 96}
.meta{margin-top:1.8rem;color:var(--mute-2);font-size:.86rem}
.meta b{color:var(--mute);font-weight:500}

/*── índice ──*/
.toc{margin-block:clamp(34px,5vw,52px);padding:1.5rem 1.7rem;border:1px solid var(--line-2);background:var(--ink-2)}
.toc p{font-family:var(--d);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute-2);margin-bottom:1rem}
.toc ol{list-style:none;counter-reset:t;display:grid;gap:.5rem}
.toc li{counter-increment:t;display:flex;gap:.8rem;align-items:baseline}
.toc li::before{content:counter(t,decimal-leading-zero);font-family:var(--d);font-size:.7rem;
  font-weight:600;color:var(--volt);flex:none;min-width:1.6em}
.toc a{color:var(--mute);transition:color .3s;font-size:.95rem}
.toc a:hover{color:var(--paper)}

/*── corpo ──*/
main{padding-bottom:clamp(60px,9vw,120px)}
section{padding-top:clamp(40px,5.5vw,68px);scroll-margin-top:96px}
h2{font-family:var(--d);font-weight:600;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(1.35rem,2.5vw,1.85rem);margin-bottom:1.2rem;display:flex;gap:.9rem;align-items:baseline}
h2 .n{font-size:.6em;color:var(--volt);font-variation-settings:'wdth' 100;flex:none}
h3{font-family:var(--d);font-weight:600;font-size:1.02rem;letter-spacing:-.012em;
  margin:2rem 0 .7rem;color:var(--paper)}
p{color:#D3D7CD;margin-bottom:1.1rem}
p:last-child{margin-bottom:0}
strong{color:var(--paper);font-weight:600}
em{font-style:normal;color:var(--volt)}
ul{list-style:none;display:grid;gap:.72rem;margin:1.1rem 0 1.4rem}
ul li{position:relative;padding-left:1.4rem;color:#D3D7CD}
ul li::before{content:"";position:absolute;left:.2rem;top:.72em;width:5px;height:5px;
  background:var(--volt);border-radius:50%}
ol.num{margin:1.1rem 0 1.4rem 1.3rem;display:grid;gap:.72rem}
ol.num li{color:#D3D7CD;padding-left:.3rem}
ol.num li::marker{color:var(--volt);font-family:var(--d);font-weight:600;font-size:.9em}
a.ul{color:var(--volt);border-bottom:1px solid rgba(144,192,8,.4);transition:border-color .3s}
a.ul:hover{border-color:var(--volt)}

/*── tabela de dados ──*/
.tab{width:100%;border-collapse:collapse;margin:1.3rem 0 1.6rem;font-size:.93rem}
.tab th,.tab td{text-align:left;padding:.85rem .9rem;border:1px solid var(--line-2);vertical-align:top}
.tab th{font-family:var(--d);font-size:.64rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mute-2);background:var(--ink-2)}
.tab td{color:#D3D7CD}
.tab td:first-child{color:var(--paper);font-weight:500}
@media(max-width:640px){
  .tab,.tab tbody,.tab tr,.tab td{display:block;width:100%}
  .tab thead{display:none}
  .tab tr{border:1px solid var(--line-2);margin-bottom:.8rem}
  .tab td{border:0;border-bottom:1px solid var(--line-2);padding:.7rem .9rem}
  .tab td:last-child{border-bottom:0}
  .tab td::before{content:attr(data-l);display:block;font-family:var(--d);font-size:.6rem;
    font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mute-2);margin-bottom:.25rem}
}

/*── barra de topo em telemóvel ────────────────────────────────────
  O logótipo (150 px) mais "Voltar ao site" (190 px, sem quebra) mais
  o intervalo não cabiam nos 320 px úteis de um ecrã de 360, e a barra
  empurrava a página inteira 6 px para o lado. O logótipo encolhe e o
  botão passa a dizer só "Voltar": a seta já diz para onde. */
@media(max-width:560px){
  .top .wrap{gap:.7rem}
  .mark{gap:.5rem;min-width:0}
  .mark svg:first-of-type{height:26px!important;width:26px!important}
  .mark svg:last-of-type{height:16px!important;width:100px!important}
  .voltar{padding:.56rem .85rem;gap:.45rem;flex:none}
  .voltar span{font-size:0}
  .voltar span::after{content:'Voltar';font-size:.66rem}
}

/*── caixa de destaque ──*/
.box{border:1px solid var(--line-2);border-left:2px solid var(--volt);
  background:var(--ink-2);padding:1.3rem 1.5rem;margin:1.5rem 0}
.box p{margin-bottom:.7rem}
.box p:last-child{margin-bottom:0}

/*── campos por preencher ──*/
.todo{background:rgba(144,192,8,.14);color:var(--volt-hi);
  border-bottom:1px dashed rgba(144,192,8,.55);padding:.05em .3em;font-weight:500}

/*── rodapé ──*/
footer{border-top:1px solid var(--line-2);padding-block:clamp(34px,5vw,54px);background:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  align-items:center;max-width:1100px}
footer p{color:var(--mute-2);font-size:.86rem;margin:0}
.fnav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.88rem}
.fnav a{color:var(--mute);transition:color .3s}
.fnav a:hover{color:var(--volt)}
.fnav a[aria-current]{color:var(--paper)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}