/* =========================================================================
   Camera Italo-Brasiliana di Cooperazione Sostenibile
   Prototipo sito istituzionale - versione PT-BR
   Layout provvisorio basato sul sito attuale (da rifinire graficamente).
   ========================================================================= */

:root {
  --bg: #ffffff;
  --ground: #f4f6fa;
  --ground-2: #eef1f7;
  --surface: #ffffff;
  --line: #e0e5ef;
  --line-strong: #c9d1e0;
  --ink: #131b2e;
  --ink-2: #3a4459;
  --muted: #6a7488;
  --navy: #0e1e3d;
  --navy-2: #152a54;
  --accent: #16705f;
  --accent-2: #0f5647;
  --accent-soft: #e5f0ec;
  /* I pulsanti sono neri con testo bianco: il verde resta il colore
     istituzionale di accenti, link e dettagli. */
  --btn: #101319;
  --btn-2: #2b3038;
  --btn-ink: #ffffff;
  --gold: #b98a2e;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .06);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 18px rgba(16, 24, 40, .05);
  --maxw: 1120px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1220;
    --ground: #0f1626;
    --ground-2: #141d30;
    --surface: #131b2b;
    --line: #263149;
    --line-strong: #33405c;
    --ink: #e9edf6;
    --ink-2: #b8c1d4;
    --muted: #8a94ad;
    --navy: #0a1526;
    --navy-2: #101c34;
    --accent: #4bb59d;
    --accent-2: #6ac6b0;
    --accent-soft: #16302b;
    /* Su fondo scuro un pulsante nero sparirebbe: si inverte in chiaro. */
    --btn: #f2f5fb;
    --btn-2: #ffffff;
    --btn-ink: #101319;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 156px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 640;
}
/* h1 e h2 con lo stesso corpo su tutte le pagine */
h1, h2 { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.15rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; color: var(--ink-2); }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.container-narrow { max-width: 780px; margin-inline: auto; padding-inline: 22px; }

.section { padding: clamp(22px, 2.6vw, 34px) 0; }
.section-tight { padding: clamp(16px, 1.9vw, 24px) 0; }
.section.alt { background: var(--ground); }
.section.navy { background: var(--navy); color: #eef2fb; }
.section.navy h1, .section.navy h2, .section.navy h3 { color: #fff; }
.section.navy p { color: #c4cee2; }

.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.section.navy .eyebrow { color: #8fd8c7; }

/* Il capoverso d'apertura ha lo stesso corpo e lo stesso colore del testo:
   due capoversi vicini di corpo diverso si notano piu' della gerarchia che
   dovrebbero costruire. La classe resta perche' la usano la spaziatura del
   blocco di testata e l'allineamento nelle sezioni centrate. */
.lead { max-width: none; }
.measure { max-width: none; }

/* --------------------------------------------------------------------------
   Allineamento del testo: SEMPRE a sinistra su tutto il sito. Nessuna
   giustificazione, nessuna sillabazione automatica. Solo i blocchi marcati
   .center sono centrati.
   -------------------------------------------------------------------------- */
main, main p, main li, main .lead, main .measure,
main h1, main h2, main h3, main h4,
main .card p, main .card li, main .flow .node,
main .form-card p, main .form-card li,
main .panel p, main .panel li,
main table th, main table td {
  text-align: left;
  text-justify: auto;
  hyphens: manual;
  -webkit-hyphens: manual;
}

main .center, main .center p, main .center li { text-align: center; }
main .center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .96rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-2); }
/* Sul fondo chiaro non esistono pulsanti solo contornati: sono tutti neri
   pieni, esattamente come quelli principali. */
.btn-ghost { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn-ghost:hover { background: var(--btn-2); border-color: var(--btn-2); color: var(--btn-ink); }

/* Dentro le aree blu notte il nero sparirebbe: li' i pulsanti sono bianchi
   pieni con il testo blu notte. */
.cta-band .btn, .section.navy .btn, .card-navy .btn {
  background: #fff; color: var(--navy); border-color: #fff;
}
.cta-band .btn:hover, .section.navy .btn:hover, .card-navy .btn:hover {
  background: #e6ebf5; border-color: #e6ebf5; color: var(--navy);
}
.btn-lg { padding: .95rem 1.7rem; font-size: 1.02rem; }

/* Pulsanti verdi "accesso a risorsa" (portal, dossiês, Observatório, PAS,
   Mapa de Oportunidades, newsletter): stessa larghezza minima, verbo "Acesse",
   testo SEMPRE centrato, senza frecce né altri caratteri speciali. */
.btn-cta { min-width: 14rem; justify-content: center; text-align: center; }
.btn-cta.btn-lg { min-width: 15rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* pieno, non translucido: scorrendo la pagina il testo che passa sotto
     si vedeva in trasparenza e sembrava una macchia */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 84px;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 650; color: var(--ink); letter-spacing: -.01em; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 50px; max-height: 54px; width: auto; max-width: 72vw; }
@media (max-width: 520px) { .brand img { height: 38px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { filter: brightness(0) invert(1); } }
.brand .brand-text { font-size: .98rem; max-width: 20ch; line-height: 1.2; }

.primary-nav { margin-left: auto; }
.primary-nav ul { list-style: none; display: flex; flex-wrap: nowrap; gap: .2rem; margin: 0; padding: 0; }
.primary-nav a {
  display: block;
  padding: .5rem .62rem;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: .92rem;
  font-weight: 550;
  white-space: nowrap;
}
.primary-nav a:hover { background: var(--ground-2); color: var(--ink); text-decoration: none; }
.primary-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

/* Selettore lingua: fascia sottile sotto l'header (libera spazio in alto) */
.lang-bar .container { display: flex; justify-content: flex-end; padding-top: 12px; padding-bottom: 2px; }

.lang-switch { display: flex; gap: 2px; padding: 3px; background: var(--ground-2); border-radius: 999px; }
.lang-switch a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .3rem .55rem;
  border-radius: 999px;
  color: var(--muted);
}
.lang-switch a:hover { text-decoration: none; color: var(--ink); }
.lang-switch a.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.lang-switch a[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.nav-toggle {
  margin-left: auto;
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* Il menu esteso ha bisogno di circa 1160px: sotto, le voci sbordavano dal
   contenitore e la pagina scorreva di lato. Da qui in giu' si passa al menu
   a scomparsa. */
@media (max-width: 1160px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .primary-nav {
    position: fixed;
    inset: var(--header-h, 84px) 0 auto 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 12px 22px 20px;
    transform: translateY(-120%);
    transition: transform .25s ease;
    margin-left: 0;
    /* se le voci non ci stanno, il pannello scorre da solo invece di finire
       fuori dallo schermo */
    max-height: calc(100vh - var(--header-h, 84px));
    max-height: calc(100dvh - var(--header-h, 84px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open .primary-nav { transform: translateY(0); }
  /* nowrap: in colonna, con wrap, le voci prendono solo la larghezza del
     testo e l'area toccabile resta stretta */
  .primary-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .primary-nav a { padding: .8rem .6rem; font-size: 1rem; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(46px, 6vw, 96px) 0 clamp(40px, 5vw, 72px); }
/* stesse colonne e stesso spazio di .grid.g2: cosi' l'immagine di
   apertura ha la stessa larghezza di tutte le altre affiancate al testo */
/* La foto dell'apertura parte dalla prima riga del testo e finisce dove finisce
   il testo: prima era in un riquadro 4/3 fisso e sbordava di 45px sopra e sotto. */
.hero-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: center; }
/* La foto resta intera: il riquadro prende il formato della foto (3:2) invece
   del 4:3 di default, che ne tagliava gli estremi. */
.hero-grid > .hero-media { aspect-ratio: 3 / 2; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { margin-bottom: 0; }
.hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* variante piu' stretta, per le immagini istituzionali che non devono
   occupare tutta la colonna. Le proporzioni restano quelle date inline. */
.hero-media-sm { max-width: 760px; margin-inline: auto; }

/* Riga discreta sotto il Portal de Dados: sostituisce il menu interno del
   Portal, che dentro al sito era una seconda intestazione. */
.portal-rotas { margin-top: 1rem; font-size: .9rem; }
.portal-rotas a { color: var(--accent); font-weight: 550; }
/* Riga dell'edizione sotto il titolo della pubblicazione: stesso peso
   del testo, corpo ridotto, cosi' non compete con l'H1. */
.ed-sub { font-size: 1.05rem; color: var(--muted, inherit); margin-top: -.4rem; margin-bottom: 1rem; }

@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .35em; }

/* Nelle schede affiancate l'occhiello verde e il titolo nero partono alla
   stessa altezza in tutte le colonne: si riserva lo spazio di due righe,
   cosi' anche i testi sotto restano allineati. */
.grid.g3 > .card > .eyebrow { line-height: 1.35; min-height: 2.7em; }
.grid.g3 > .card > .eyebrow + h3 { min-height: 2.36em; }
/* In colonna singola non c'e' niente da allineare: lo spazio riservato
   diventerebbe solo un buco. */
@media (max-width: 640px) {
  .grid.g3 > .card > .eyebrow,
  .grid.g3 > .card > .eyebrow + h3 { min-height: 0; }
}
.card p:last-child { margin-bottom: 0; }
.card-media { padding: 0; overflow: hidden; }
.card-media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-media .card-body { padding: 22px 24px 26px; }

/* Card con arte propria (Observatório, dossiê): l'immagine contiene già del
   testo, quindi va mostrata intera e mai ritagliata come le foto delle altre
   card. Le arti dell'Observatório sono quadrate, così le tre card della riga
   restano allineate. */
.card-art { padding: 0; overflow: hidden; }
.card-art > img { display: block; width: 100%; height: auto; }
.card-art .card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card-art .card-body .btn-row { margin-top: auto; }
/* in colonna flex un elemento inline si stirerebbe su tutta la larghezza */
.card-art .card-body > .tag { align-self: flex-start; }

/* Card larga con l'arte di fianco al testo (Portal de Dados Oficiais). */
.card-split { display: grid; grid-template-columns: 210px 1fr; gap: clamp(20px, 3vw, 34px); align-items: center; }
.card-split-art img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 640px) {
  .card-split { grid-template-columns: 1fr; }
  .card-split-art { max-width: 260px; }
}

/* Riquadro blu notte con testo bianco: si applica ai gruppi di card che
   devono staccare dal fondo chiaro della sezione. */
.card-navy {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.card-navy h3, .card-navy h4, .card-navy strong { color: #fff; }
.card-navy p { color: rgba(255, 255, 255, .84); }
.card-navy .tag, .card-navy .dim { color: rgba(255, 255, 255, .7); }
/* l'occhiello verde sul blu notte non si legge: stesso verde chiaro delle
   fasce navy (contrasto 10:1) */
.card-navy .eyebrow { color: #8fd8c7; }
a.card-navy:hover { background: var(--navy-2); border-color: var(--navy-2); }


/* Etichette blu notte, stessa famiglia dei riquadri */
.pill-list.pill-navy li { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Apertura della home su fondo grigio, cosi' l'alternanza bianco/grigio
   riprende regolare da li' fino in fondo alla pagina. */
.hero.alt { background: var(--ground); }

/* contenitore neutro: serve solo a tenere insieme la riga di pulsanti */
.sposta-giu { }

.card-link { display: block; color: inherit; }
.card-link:hover { text-decoration: none; border-color: var(--accent); }

/* Card affiancate: testo sempre a sinistra; il titolo occupa un'altezza
   uniforme così il testo sotto parte alla stessa altezza in tutte le card
   della riga. */
.grid .card { display: flex; flex-direction: column; }
.grid .card > .card-body { flex: 1; }
/* Con testi di lunghezza diversa, il pulsante resta agganciato in basso così
   i tasti delle card affiancate sono allineati orizzontalmente. */
.grid .card > .btn-row { margin-top: auto; padding-top: 1.6rem; }

/* Card con immagine (pilastri): titolo su UNA riga */
.card-media .card-body h3 {
  font-size: .92rem;
  line-height: 1.3;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .55rem;
}

/* Card senza immagine in griglia (g2/g3): il titolo occupa un'altezza
   uniforme (fino a 2 righe) così il testo sotto è allineato tra le card. */
.grid.g2 > .card > h3,
.grid.g3 > .card > h3 {
  min-height: 2.5em;
  margin-bottom: .45em;
}

.pillar { display: flex; gap: 14px; align-items: flex-start; }
.pillar .num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: .95rem;
}

/* ---------- Steps / timeline ---------- */
/* padding e margine dell'elenco azzerati: senza questo i riquadri
   restavano rientrati di 40px rispetto al titolo della sezione */
.steps { counter-reset: step; display: grid; gap: 14px; margin: 0; padding: 0; }
.steps li {
  list-style: none;
  position: relative;
  padding: 18px 20px 18px 62px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 18px; top: 16px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: grid;
  place-items: center;
}
.steps li strong { display: block; color: var(--ink); }

.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
/* I nodi del percorso sono blu notte con testo bianco, come i riquadri
   della stessa famiglia. */
.flow .node {
  flex: 1 1 170px;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 16px 16px;
  font-size: .92rem;
  color: rgba(255, 255, 255, .84);
}
/* titolo del nodo: altezza uniforme (fino a 2 righe) così il testo sotto
   è allineato tra tutti i nodi affiancati */
.flow .node b { display: block; color: #fff; line-height: 1.3; min-height: 2.6em; margin-bottom: .35rem; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
/* Il testo che segue l'elenco deve staccarsi come fra due paragrafi:
   senza questo si appiccica all'ultima voce. Solo quando c'e' davvero
   qualcosa dopo, cosi' un elenco che chiude un blocco non lascia vuoto. */
.checklist + p, .checklist + h2, .checklist + h3, .checklist + ul { margin-top: 1.15rem; }
.checklist li { padding-left: 30px; position: relative; color: var(--ink-2); }
.checklist li::before {
  content: "";
  position: absolute; left: 4px; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- CTA band ---------- */
/* La sezione della fascia CTA prende il fondo opposto a quello della sezione
   che la precede, cosi' l'alternanza bianco/grigio non si spezza mai. */
.section:not(.alt) + .section.cta-sezione { background: var(--ground); }
.section.alt + .section.cta-sezione { background: var(--bg); }
.hero:not(.alt) + .section.cta-sezione { background: var(--ground); }
.hero.alt + .section.cta-sezione { background: var(--bg); }

/* Contenuto centrato e larghezze bilanciate: h2, testo e pulsante
   condividono lo stesso asse, così il blocco blu resta simmetrico. */
.cta-band {
  background: var(--navy); color: #fff; border-radius: var(--radius);
  padding: clamp(34px, 5vw, 60px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta-band h2 { color: #fff; max-width: 26ch; margin: 0 auto; text-align: center; }
.cta-band p { color: #c9d3e6; max-width: 54ch; margin: 1rem auto 0; text-align: center; }
.cta-band .btn-row { justify-content: center; margin-top: 1.8rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .85rem; color: var(--muted); padding-top: 20px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* Link "Voltar" in cima alle pagine interne */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  padding: .3rem .1rem;
}
.back-link:hover { color: var(--accent); text-decoration: none; }
/* meno aria fra il "Voltar" e il titolo della pagina */

.back-contact {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--ink-2); padding: .3rem .1rem;
}
.back-contact:hover { color: var(--accent); text-decoration: none; }

/* ---------- People ---------- */
.person { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: start; }
.person img { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; }
.person .role { color: var(--accent); font-weight: 600; font-size: inherit; margin-bottom: 0; }
/* Riga del ruolo: a sinistra il ruolo, a destra il collegamento a LinkedIn,
   sulla stessa linea di base.
   Niente flex-wrap: con l'a capo automatico il collegamento restava accanto
   ai ruoli corti e scendeva sotto quelli lunghi, quindi nella stessa pagina
   le tre schede si comportavano in tre modi diversi. Adesso la riga e' una
   sola sopra i 720px (il ruolo, se serve, va a capo dentro il suo spazio) e
   diventa una colonna sotto, uguale per tutti quale che sia il ruolo. */
.role-riga {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: nowrap; margin-bottom: 1rem;
}
.role-riga .role { min-width: 0; }
@media (max-width: 720px) {
  .role-riga { flex-direction: column; align-items: flex-start; gap: .3rem; }
}
.linkedin {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 600; color: var(--accent);
  white-space: nowrap;
}
.linkedin svg { flex: none; }
.linkedin:hover { color: var(--accent-2); }
/* Ruolo citato dentro un paragrafo (COO): stesso verde e stesso peso di .role,
   corpo del testo corrente. La sigla fra parentesi resta fuori dallo span. */
.role-inline { color: var(--accent); font-weight: 700; }
@media (max-width: 560px) { .person { grid-template-columns: 1fr; } .person img { width: 96px; height: 96px; } }
/* Profilo con piu' paragrafi (COO): spaziatura fra i capoversi */
.person p + p { margin-top: .7rem; }


/* ---------- Video placeholder ---------- */
.video-embed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b1424;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.video-embed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video-embed .play {
  position: relative;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid; place-items: center;
  color: var(--navy);
}
.video-embed .play::after { content: ""; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent currentColor; margin-left: 4px; }
.video-embed .caption { position: absolute; left: 16px; bottom: 12px; color: #fff; font-size: .85rem; background: rgba(0,0,0,.4); padding: .25rem .6rem; border-radius: 6px; }

.video-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #0b1424;
}
/* fascia blu notte dietro al video: occupa tutta la colonna, il video sta
   al centro e non si allarga oltre la sua misura */
.video-band {
  background: #0b1424;
  border-radius: var(--radius);
  padding: 0 clamp(14px, 2.2vw, 30px);   /* solo ai lati: non aggiunge altezza */
  display: flex;
  justify-content: center;
}
.video-band .video-frame {
  width: 100%;
  border: 0;
  box-shadow: none;
}
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b1424; }
.video-caption { font-size: .88rem; color: var(--muted); margin-top: .5rem; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--ink); }
.field .hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: .96rem;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-note { font-size: .88rem; color: var(--muted); border-left: 3px solid var(--line-strong); padding-left: 14px; margin: 18px 0; }
.req { color: var(--gold); }
/* Gruppi di scelte (radio/checkbox) nei form */
.field .choices { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: .3rem; }
.field .choice { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; margin: 0; cursor: pointer; }
.field .choice input { width: auto; min-width: 0; margin: .15rem 0 0; padding: 0; }
.field .choice.block { width: 100%; }

/* ---------- Notices ---------- */
.notice {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: .95rem;
  color: var(--ink-2);
}

/* ---------- Modale "Identifique-se" ---------- */
body.id-open { overflow: hidden; }
.id-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(9, 14, 25, .55);
  backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 20px;
}
.id-modal {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  width: 100%; max-width: 440px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow);
}
.id-modal h2 { margin: 0 0 .4em; font-size: 1.3rem; }
.id-modal .field { margin-bottom: 16px; }
.id-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); text-align: left; }
.id-consent input { margin-top: .25rem; flex: none; }
.id-err { display: none; margin: 6px 0 0; font-size: .85rem; color: #b4433b; }
.id-modal .btn { width: 100%; justify-content: center; margin-top: 8px; }
.id-cancel {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--muted); text-align: center;
}
.id-cancel:hover { color: var(--ink); }
.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--ground-2);
  color: var(--muted);
}
.tag.open { background: #e4f4ec; color: #1b7a4b; }
.tag.soon { background: #fdf0dc; color: #a5701c; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #c7d0e2; padding: 26px 0 20px; }
.site-footer a { color: #dbe3f2; }
.site-footer a:hover { color: #fff; }
/* Uma única linha: logo à esquerda, os três links na mesma linha, à direita. */
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.footer-logo { height: 34px; width: auto; flex: none; }
.footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: .92rem; }
.footer-bottom { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; color: #8b96af; }
@media (max-width: 520px) {
  .footer-top { justify-content: flex-start; }
}

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2.2rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.dim { color: var(--muted); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 0; }
.pill-list li { background: var(--ground-2); border-radius: 999px; padding: .4rem .85rem; font-size: .88rem; color: var(--ink-2); }
/* Variante "categorie": chip più grandi, testo a corpo pieno, che riempiono
   la riga in orizzontale invece di stare in colonna con spazio vuoto a destra. */
.pill-list-lg { gap: 10px; }
.pill-list-lg li { font-size: 1rem; padding: .55rem 1.1rem; border: 1px solid var(--line); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 100; }
.skip-link:focus { left: 0; }

/* ---------- Dashboard ---------- */
.dash-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; margin-bottom: 26px; }
.dash-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-controls select, .dash-controls button {
  padding: .55rem .8rem; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer;
}
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi-grid + .kpi-grid { margin-top: 0; }
@media (max-width: 620px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.kpi .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpi .value { font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin-top: .2rem; }
.kpi .delta { font-size: .82rem; margin-top: .3rem; }
.kpi .delta.up { color: #1b7a4b; }
.kpi .delta.down { color: #b4433b; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
.panel h3 { margin-bottom: 1rem; font-size: 1.02rem; }
.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .dash-2col { grid-template-columns: 1fr; } }

.bar-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bar { display: grid; grid-template-columns: 200px 1fr 56px; gap: 12px; align-items: center; font-size: .9rem; }
.bar .track { background: var(--ground-2); border-radius: 999px; height: 12px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--accent); border-radius: 999px; }
.bar .val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .bar { grid-template-columns: 120px 1fr 46px; } }

.spark { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.spark span { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; min-height: 3px; }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.data th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
table.data td { color: var(--ink-2); }
table.data tr:last-child td { border-bottom: 0; }

.dash-note { font-size: .82rem; color: var(--muted); margin-top: 8px; }

/* ---------- Menu a tendina ----------
   Su desktop la sottovoce si apre al passaggio del mouse e, per chi naviga da
   tastiera, anche quando un link interno riceve il focus (:focus-within).
   Sotto 1040px il menu diventa il pannello a panino: la tendina si appiattisce
   in una lista rientrata sempre visibile, perche' l'hover non esiste al tocco. */
/* Il bottoncino che apre la tendina serve solo sul telefono. */
.primary-nav .sub-toggle { display: none; }
.primary-nav .has-sub { position: relative; }
.primary-nav .has-sub > a { padding-right: 1.4rem; }
.primary-nav .has-sub > a::after {
  content: "";
  position: absolute; right: .55rem; top: 50%; margin-top: -1px;
  width: 0; height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  opacity: .5;
}
/* fascia invisibile che copre lo stacco fra voce e tendina: senza, spostando
   il mouse verso il basso il menu si richiuderebbe */
.primary-nav .has-sub::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
}
.primary-nav .sub {
  position: absolute; left: 0; top: calc(100% + 6px);
  min-width: 15.5rem;
  flex-direction: column;
  gap: 1px;
  margin: 0; padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 60;
}
.primary-nav .has-sub:hover > .sub,
.primary-nav .has-sub:focus-within > .sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .sub a {
  font-size: .89rem; font-weight: 500;
  padding: .55rem .7rem; border-radius: 8px;
}
/* la voce principale resta evidenziata quando sei in una sua sottopagina */
.primary-nav .has-sub > a.is-parent-current { color: var(--accent); }

@media (max-width: 1160px) {
  .primary-nav .has-sub::after,
  .primary-nav .has-sub > a::after { display: none; }
  .primary-nav .has-sub > a { padding-right: .6rem; }
  .primary-nav .sub {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 4px;
    margin: 0 0 4px .75rem;
    background: transparent; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; box-shadow: none;
  }
  .primary-nav .sub a { font-size: .95rem; padding: .6rem .9rem; }

  /* Fisarmonica: la tendina resta chiusa finche' non si tocca la freccia,
     cosi' il menu parte corto e si legge tutto. */
  .primary-nav .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .primary-nav .has-sub > a { flex: 1 1 auto; }
  .primary-nav .sub-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    flex: none; width: 44px; height: 44px;
    padding: 0; border: 0; background: transparent;
    color: var(--ink-2); cursor: pointer; border-radius: 8px;
  }
  .primary-nav .sub-toggle::before {
    content: "";
    width: 0; height: 0;
    border: 5px solid transparent; border-top-color: currentColor;
    margin-top: 5px;
    transition: transform .2s ease;
  }
  .primary-nav .has-sub.aperto > .sub-toggle::before {
    transform: rotate(180deg); margin-top: -5px;
  }
  .primary-nav .sub { flex-basis: 100%; display: none; }
  .primary-nav .has-sub.aperto > .sub { display: flex; }
}

/* Checklist a due colonne: usata quando la sezione occupa tutta la larghezza
   e le righe risulterebbero troppo lunghe da leggere. */
/* display:block obbligatorio: .checklist e' display:grid e in un grid le
   colonne CSS (columns) non hanno effetto. */
.checklist.cols-2 { display: block; columns: 2; column-gap: 42px; }
.checklist.cols-2 li { break-inside: avoid; margin-bottom: 10px; }
@media (max-width: 760px) { .checklist.cols-2 { columns: 1; } }

/* Le ultime voci del menu sono vicine al bordo destro: la loro tendina va
   ancorata a destra, altrimenti sborda dalla finestra e crea scroll orizzontale. */
.primary-nav > ul > li.has-sub:nth-last-child(-n+2) > .sub { left: auto; right: 0; }

/* Griglia dei riquadri ODS (icone ufficiali ONU Brasil, SVG in pt-BR).
   Ogni icona è un file a sé, così resta nitida a ogni dimensione e ognuna
   porta il proprio testo alternativo. */
.ods-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.ods-grid li { margin: 0; }
.ods-grid img { width: 100%; height: auto; border-radius: 4px; display: block; }
@media (max-width: 520px) { .ods-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Entrevistas ----------
   Le domande dell'intervistatrice sono <h2 class="pergunta">: devono staccarsi
   dalle risposte senza avere il peso di un titolo di sezione. */
.entrevista .pergunta {
  font-size: 1.06rem;
  font-weight: 640;
  line-height: 1.4;
  color: var(--accent);
  letter-spacing: 0;
  margin: 2.3rem 0 .9rem;
  padding-left: 16px;
  border-left: 3px solid var(--accent-soft);
}
.entrevista .pergunta:first-child { margin-top: 0; }
.entrevista p { margin-bottom: 1.1rem; }

/* Blocco a scomparsa dentro le schede: si apre senza JavaScript */
.expand { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.expand > summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--accent); list-style: none; }
.expand > summary::-webkit-details-marker { display: none; }
.expand > summary::after { content: " +"; }
.expand[open] > summary::after { content: " \2013"; }
.expand h4 { margin: 1rem 0 .2rem; font-size: 1rem; }
/* Schede affiancate che finiscono con un pannello a scomparsa: il link verde
   viene spinto sul fondo, cosi' i tre link restano alla stessa altezza anche
   quando i testi sopra hanno lunghezze diverse. */
.grid.schede-fondo > .card { display: flex; flex-direction: column; }
.grid.schede-fondo > .card > .expand { margin-top: auto; }
.expand p { font-size: .95rem; }

/* ---------- Riga alta: Voltar a sinistra, contatto a destra ----------
   Resta agganciata sotto l'header quando la pagina scorre. */
.back-bar {
  position: sticky; top: 85px; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.back-line { margin: 0; padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.back-bar + section { padding-top: clamp(22px, 2.6vw, 36px); }
.back-bar + section.hero { padding-top: clamp(30px, 3.6vw, 52px); }
.btn-sm { padding: .48rem 1.05rem; font-size: .86rem; }

/* ---------- Mappamondo: scelta della lingua ---------- */
.primary-nav .idioma > .idioma-btn {
  display: flex; align-items: center;
  background: none; border: 0; cursor: pointer;
  padding: .5rem .62rem; border-radius: 8px;
  color: var(--ink-2);
}
.primary-nav .idioma > .idioma-btn:hover { background: var(--ground-2); }
.primary-nav .idioma .sub-dx { left: auto; right: 0; min-width: 14.5rem; }
.primary-nav .idioma .sub a,
.primary-nav .idioma .sub .idioma-off {
  display: flex; align-items: center; gap: .6rem;
}
.idioma .bandeira { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.idioma .idioma-off { padding: .5rem .62rem; opacity: .55; cursor: default; font-size: .92rem; }
.idioma .idioma-off em { font-style: normal; font-size: .76rem; opacity: .8; margin-left: auto; }
@media (max-width: 1040px) {
  /* l'header resta appiccicato in alto anche col menu a panino */
  .back-bar { top: 85px; }
  .primary-nav .idioma > .idioma-btn { padding: .8rem .6rem; }
}

/* La scritta accanto al mappamondo serve solo nel menu a panino */
.idioma-testo { display: none; }
@media (max-width: 1040px) {
  .idioma-testo { display: inline; margin-left: .5rem; font-size: 1rem; font-weight: 550; }
}

/* Andata e ritorno fra Camera e associato: due riquadri blu e, in mezzo,
   la doppia freccia che li lega. */
.mao-dupla { margin-top: 1.4rem; }
.mao-dupla .arco {
  display: block; width: min(320px, 52%); height: auto;
  margin: 0 auto .5rem; color: var(--accent);
}
.caixa-azul {
  background: var(--navy); color: #fff;
  border-radius: var(--radius); padding: clamp(18px, 2.2vw, 26px);
}
.caixa-azul p { color: #fff; }
.caixa-azul .rotulo {
  color: rgba(255, 255, 255, .72);
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; margin-bottom: .45rem;
}

/* Testo a sinistra e foto a destra, centrate verticalmente */
.grid.testo-foto { align-items: center; }
/* Variante: la foto parte dalla prima riga del titolo e finisce dove finisce
   il testo di fianco. L'altezza la detta il testo, la foto la riempie. */
.grid.affianca-alto { align-items: stretch; }
/* L'ultimo capoverso non lascia il suo margine sotto: altrimenti la riga della
   griglia e' piu' alta del testo e la foto di fianco finisce 16px piu' in
   basso dell'ultima riga. Cosi' i due lati chiudono alla stessa altezza. */
.grid.affianca-alto > div:not(.hero-media) > :last-child { margin-bottom: 0; }
/* La foto non deve dettare l'altezza della riga, altrimenti sborda sotto il
   testo: si toglie dal flusso e riempie il riquadro, che a sua volta si
   allunga fino all'altezza della colonna di testo. */
.grid.affianca-alto .foto-alta { position: relative; aspect-ratio: auto; min-height: 220px; }
.grid.affianca-alto .foto-alta img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* nella foto delle bandiere il cielo vuoto sta in basso: quando il riquadro
     e' piu' basso della foto si taglia da li', cosi' le bandiere restano intere */
  object-position: center top;
}
@media (max-width: 860px) {
  /* min-height + aspect-ratio facevano calcolare la larghezza dall'altezza:
     sotto i 340px la foto sbordava dallo schermo. */
  .grid.affianca-alto .foto-alta { height: auto; aspect-ratio: 3 / 2; min-height: 0; }
}
@media (max-width: 860px) { .grid.testo-foto { grid-template-columns: 1fr; } }

/* ---------- Mobile: campi e aree di tocco ----------
   Sotto i 16px iOS ingrandisce la pagina appena si tocca un campo, e l'utente
   resta con la pagina zoomata. I pallini e le caselle avevano un'area di
   tocco di 24px: sotto il minimo di 44px raccomandato. */
@media (max-width: 640px) {
  .field input, .field select, .field textarea { font-size: 16px; }
  .field .choices { gap: 2px 18px; }
  .field .choice { min-height: 44px; padding-block: 7px; }
  .field .choice input { width: 20px; height: 20px; margin-top: .1rem; flex: 0 0 auto; }
}

/* Le tabelle larghe su telefono: ogni riga diventa un blocco e ogni cella
   porta l'intestazione della sua colonna. La classe la mette main.js. */
@media (max-width: 640px) {
  table.data.impila, table.data.impila tbody, table.data.impila tr, table.data.impila td { display: block; width: 100%; }
  table.data.impila thead { display: none; }
  table.data.impila tr { padding: 13px 0; border-bottom: 1px solid var(--line); }
  table.data.impila tr:last-child { border-bottom: 0; }
  table.data.impila td { border: 0; padding: 3px 0; text-align: left !important; }
  table.data.impila td::before {
    content: attr(data-rot);
    display: block;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 600;
  }
  table.data.impila td:empty { display: none; }
}

/* ---------- Misura della riga ----------
   Provata e scartata: tecnicamente la riga corta si legge meglio (82 caratteri
   invece di 120), ma con le immagini e le griglie a tutta larghezza il bordo
   destro a zigzag sembrava un difetto. Tutto il testo, indice compreso, resta
   a tutta larghezza del contenitore. */

/* ---------- Indice di pagina ----------
   Le pagine lunghe (sedici schermate di telefono) avevano un solo modo per
   essere consultate: scorrere. */
.indice { margin: 1.8rem 0 0; padding: 15px 18px; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; }
.indice-tit { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: 0 0 .45rem; }
.indice ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 22px; }
.indice li { margin: 0; }
.indice a { color: var(--ink); font-weight: 550; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding: 5px 0; display: inline-block; }
.indice a:hover, .indice a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 640px) {
  .indice ul { flex-direction: column; gap: 0; }
  .indice a { padding: 11px 0; width: 100%; }
}
/* l'ancora non deve finire sotto l'intestazione fissa */
main [id] { scroll-margin-top: calc(var(--header-h, 84px) + 18px); }
/* rimando alla nota in fondo alla pagina */
a.ast { text-decoration: none; color: var(--accent); font-weight: 700; padding-left: 1px; }
/* col menu aperto la pagina dietro non deve scorrere */
body.nav-open { overflow: hidden; }
@media (min-width: 1161px) { body.nav-open { overflow: visible; } }