/* ==============================================================
   Mesa de Jogo Site — stile.css
   Foglio di stile unico del direttorio. Estetica da registro:
   angoli retti, righe sottili, verde oliva su bianco.
   Convenzione: classi in kebab-case, hook data-azione.
   Componenti nativi (classi ES6) al posto di funzioni sciolte.
   ============================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("./font/archivo-var.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./font/lora-var.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./font/lora-italic.woff2") format("woff2");
}

:root {
  --sfondo: #f3f5f0;
  --superficie: #ffffff;
  --superficie-tenue: #eaeee4;
  --oliva: #55643a;
  --oliva-scuro: #414e2b;
  --oliva-chiaro: #dde4d2;
  --inchiostro: #232620;
  --inchiostro-tenue: #5a5f52;
  --inchiostro-lieve: #8b9080;
  --riga: #d9ddd2;
  --riga-forte: #b9c0ac;
  --timbro-rosso: #a33e35;
  --timbro-rosso-tenue: #f6e8e6;

  --carattere-titoli: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --carattere-testo: "Lora", Georgia, serif;

  --larghezza-contenuto: 860px;

  --spazio-1: 0.25rem;
  --spazio-2: 0.5rem;
  --spazio-3: 0.75rem;
  --spazio-4: 1rem;
  --spazio-5: 1.5rem;
  --spazio-6: 2rem;
  --spazio-7: 3rem;
  --spazio-8: 4rem;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--carattere-testo);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--inchiostro);
  background-color: var(--sfondo);
}

img,
svg,
picture {
  max-width: 100%;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--carattere-titoli);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
}

h2 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
}

h3 {
  font-size: 1.2rem;
}

p {
  max-width: var(--larghezza-contenuto);
}

a {
  color: var(--oliva);
}

a:hover {
  color: var(--oliva-scuro);
}

ul,
ol {
  list-style: none;
  padding-left: 1.4rem;
}

/* O reset acima remove marcadores por padrão; o corpo de texto do artigo
   (`.articolo`) precisa deles de volta para listas de conteúdo real —
   mas não para componentes com marcador próprio, como `.lista-requisiti`. */
.articolo ul:not([class]) {
  list-style: disc;
}

.articolo ol:not([class]) {
  list-style: decimal;
}

:focus-visible {
  outline: 2px solid var(--oliva);
  outline-offset: 2px;
}

.solo-lettore {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Disposizione con barra laterale ----------
   Mobile-first: la disposizione a colonna única é a base; a barra
   lateral fixa e a divisória só chegam a partir do primeiro tier
   de largura (ver @media (min-width: 960px) mais abaixo). */
.disposizione {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.contenuto-principale {
  min-width: 0;
  border-left: none;
  background-color: var(--sfondo);
}

.blocco {
  width: min(920px, 100% - 3rem);
  margin-inline: auto;
  padding-block: var(--spazio-7);
}

.blocco + .blocco {
  border-top: 1px solid var(--riga);
  margin-top: 0;
}

@media (min-width: 960px) {
  .disposizione {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .contenuto-principale {
    border-left: 1px solid var(--riga);
  }

  .blocco {
    padding-block: var(--spazio-8);
  }
}

/* ---------- Barra laterale ---------- */
.barra-laterale {
  background-color: var(--superficie);
  padding-block: 0.9rem;
  padding-inline: 1.4rem;
  border-bottom: 1px solid var(--riga);
}

.marchio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--inchiostro);
  margin-bottom: 0;
}

.marchio-quadro {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background-color: #fff;
  border: 1px solid var(--riga);
  color: #fff;
  font-family: var(--carattere-titoli);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 3px;
  overflow: hidden;
}

.marchio-quadro img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Selo do operador dentro de cada card de aposta (lista/diretório/fichas) */
.operador-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.1rem;
  background-color: var(--inchiostro);
  margin-bottom: 0.8rem;
}

.operador-selo img {
  height: 1.9rem;
  width: auto;
  display: block;
}

.marchio-nome {
  font-family: var(--carattere-titoli);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.2;
}

.marchio-nome small {
  display: block;
  font-family: var(--carattere-testo);
  font-weight: 400;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--inchiostro-tenue);
}

.apri-menu {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.55rem;
  background-color: var(--superficie-tenue);
  border: 1px solid var(--riga);
  font-family: var(--carattere-titoli);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inchiostro);
  cursor: pointer;
}

.menu-laterale {
  display: none;
  margin-top: 0.8rem;
  border-top: 1px solid var(--riga);
  padding-top: 1rem;
}

.menu-laterale.aperto {
  display: block;
}

.menu-laterale ul {
  list-style: none;
  padding: 0;
}

.menu-laterale a {
  display: block;
  padding: 0.5rem 0.7rem;
  font-family: var(--carattere-titoli);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--inchiostro-tenue);
  border-left: 3px solid transparent;
}

.menu-laterale a:hover {
  color: var(--oliva-scuro);
  background-color: var(--superficie-tenue);
}

.menu-laterale a[aria-current] {
  color: var(--oliva-scuro);
  border-left-color: var(--oliva);
  background-color: var(--oliva-chiaro);
}

.coda-laterale {
  display: none;
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid var(--riga);
  font-size: 0.78rem;
  color: var(--inchiostro-lieve);
}

.coda-laterale .eta {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid var(--timbro-rosso);
  color: var(--timbro-rosso);
  font-family: var(--carattere-titoli);
  font-weight: 700;
  font-size: 0.78rem;
  margin-bottom: 0.6rem;
}

@media (min-width: 960px) {
  .barra-laterale {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-block: 1.6rem;
    padding-inline: 1.4rem;
    border-bottom: none;
  }

  .marchio {
    margin-bottom: 1.6rem;
  }

  .apri-menu {
    display: none;
  }

  .menu-laterale {
    display: block;
    margin-top: 0;
  }

  .coda-laterale {
    display: block;
  }
}

/* ---------- Striscia informativa ---------- */
.striscia {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding: 0.55rem 1.5rem;
  background-color: var(--oliva-scuro);
  color: #e6eadb;
  font-size: 0.78rem;
  font-family: var(--carattere-titoli);
  letter-spacing: 0.05em;
}

.striscia a {
  color: #fff;
}

/* ---------- Intestazione di registro ---------- */
.intestazione-registro {
  background-color: var(--superficie);
  border-bottom: 1px solid var(--riga);
}

.intestazione-registro .blocco {
  padding-block: clamp(1.4rem, 1rem + 1.3vw, 2.1rem);
}

.sopratitolo {
  font-family: var(--carattere-titoli);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oliva);
  margin-bottom: 0.7rem;
}

/* Cabeçalho de registro (hero da home): título mais compacto para que o
   comparativo dos 3 operadores fique visível sem rolagem em telas
   desktop — ver .intestazione-registro .blocco acima. */
.intestazione-registro .sopratitolo {
  margin-bottom: 0.4rem;
}

.intestazione-registro h1 {
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem);
}

.intestazione-registro .guida {
  font-size: 1.02rem;
  font-style: italic;
  color: var(--inchiostro-tenue);
  margin-top: 0.6rem;
}

.quadro-riassunto {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1.1rem;
  border: 1px solid var(--riga-forte);
  background-color: var(--superficie);
}

.quadro-riassunto div {
  flex: 1 1 180px;
  padding: 0.6rem 1.2rem;
  border-right: 1px solid var(--riga);
}

.quadro-riassunto div:last-child {
  border-right: none;
}

.quadro-riassunto dt {
  font-family: var(--carattere-titoli);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

.quadro-riassunto dd {
  margin: 0.2rem 0 0;
  font-family: var(--carattere-titoli);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ---------- Titoli di sezione ---------- */
.titolo-sezione {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.titolo-sezione::before {
  content: "";
  width: 2.2rem;
  height: 3px;
  background-color: var(--oliva);
}

/* ---------- Scheda operatore (riga di registro) ---------- */
.scheda-operatore {
  background-color: var(--superficie);
  border: 1px solid var(--riga-forte);
  margin-block-end: 1.4rem;
}

/* Mobile-first: uma coluna até o tier de 721px; o layout de duas
   colunas (resumo + ações) chega a partir daí. */
.scheda-testata {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding-block: 1.4rem;
  padding-inline: 1.6rem;
}

@media (min-width: 721px) {
  .scheda-testata {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
  }
}

.scheda-riga-alta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}

.scheda-riga-alta h3 {
  font-size: 1.45rem;
  margin-inline-end: 0.3rem;
}

.timbro {
  display: inline-block;
  font-family: var(--carattere-titoli);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva-scuro);
  border: 1.5px solid var(--oliva);
  padding: 0.18rem 0.55rem;
  transform: rotate(-1.5deg);
}

.conteggio {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--carattere-titoli);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--oliva-scuro);
  background-color: var(--oliva-chiaro);
  padding: 0.2rem 0.7rem;
}

.conteggio small {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--inchiostro-tenue);
}

.scheda-offerta {
  font-family: var(--carattere-titoli);
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.scheda-sintesi {
  font-size: 0.95rem;
  color: var(--inchiostro-tenue);
  margin-bottom: 0.8rem;
}

.scheda-campi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.6rem;
  font-size: 0.85rem;
  color: var(--inchiostro-tenue);
}

.scheda-campi span b {
  font-family: var(--carattere-titoli);
  color: var(--inchiostro);
}

.scheda-azioni {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.scheda-azioni .nota-termini {
  font-size: 0.75rem;
  color: var(--inchiostro-lieve);
  text-align: center;
}

/* Etichetta di contenuto remunerato */
.etichetta-remunerata {
  display: block;
  text-align: center;
  font-family: var(--carattere-titoli);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--timbro-rosso);
}

/* Dettaglio espandibile */
.scheda-dettaglio {
  display: none;
  border-top: 1px dashed var(--riga-forte);
  padding-block: 1.4rem;
  padding-inline: 1.6rem;
  background-color: var(--superficie-tenue);
}

.scheda-dettaglio.aperto {
  display: block;
}

.apri-dettaglio {
  width: 100%;
  padding: 0.6rem;
  background-color: var(--superficie);
  border: none;
  border-top: 1px solid var(--riga);
  font-family: var(--carattere-titoli);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oliva-scuro);
  cursor: pointer;
}

.apri-dettaglio:hover {
  background-color: var(--oliva-chiaro);
}

.lista-requisiti {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem 1.6rem;
  font-size: 0.9rem;
}

.lista-requisiti li {
  padding-left: 1.5rem;
  position: relative;
}

.lista-requisiti li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-family: var(--carattere-titoli);
  font-weight: 700;
  color: var(--oliva);
}

.lista-requisiti li.non-soddisfatto {
  color: var(--inchiostro-lieve);
}

.lista-requisiti li.non-soddisfatto::before {
  content: "—";
  color: var(--timbro-rosso);
}

.lista-requisiti .data-verifica {
  display: block;
  font-size: 0.75rem;
  color: var(--inchiostro-lieve);
}

/* ---------- Bottoni ---------- */
.bottone {
  display: inline-block;
  font-family: var(--carattere-titoli);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
}

.bottone-pieno {
  background-color: var(--oliva);
  color: #fff;
}

.bottone-pieno:hover {
  background-color: var(--oliva-scuro);
  color: #fff;
}

.bottone-bordo {
  background-color: transparent;
  color: var(--oliva-scuro);
  border: 1.5px solid var(--riga-forte);
}

.bottone-bordo:hover {
  border-color: var(--oliva);
}

/* ---------- Processo di verifica (passi) ---------- */
.processo {
  counter-reset: passo;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
}

.passo {
  background-color: var(--superficie);
  border: 1px solid var(--riga);
  padding: 1.2rem 1.3rem;
  counter-increment: passo;
}

.passo::before {
  content: "Etapa " counter(passo);
  display: block;
  font-family: var(--carattere-titoli);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
  margin-bottom: 0.4rem;
}

.passo h3 {
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
}

.passo p {
  font-size: 0.88rem;
  color: var(--inchiostro-tenue);
}

/* ---------- Biblioteca ---------- */
.libreria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

.volume {
  background-color: var(--superficie);
  border: 1px solid var(--riga);
  border-left: 5px solid var(--oliva);
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.volume .collana {
  font-family: var(--carattere-titoli);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

.volume p {
  font-size: 0.92rem;
  color: var(--inchiostro-tenue);
  flex-grow: 1;
}

/* ---------- Painel de perguntas (acordeão de vários abertos) ----------
   Cada pergunta é um <details> nativo com id próprio (ligável por hash).
   A barra do painel expande/recolhe todas de uma vez. */
.painel-perguntas {
  max-width: var(--larghezza-contenuto);
  counter-reset: pergunta;
}

.painel-perguntas-barra {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.8rem;
}

.painel-perguntas-barra .bottone {
  padding: 0.45rem 0.9rem;
  font-size: 0.72rem;
}

.pergunta {
  counter-increment: pergunta;
  border-top: 1px solid var(--riga);
  padding: 1rem 0;
}

.pergunta:first-of-type {
  border-top: none;
  padding-top: 0;
}

.pergunta summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--carattere-titoli);
  font-weight: 700;
  font-size: 1.05rem;
}

.pergunta summary::-webkit-details-marker {
  display: none;
}

.pergunta summary::before {
  content: counter(pergunta, decimal-leading-zero) ".";
  color: var(--oliva);
  flex: none;
}

.pergunta summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--carattere-titoli);
  color: var(--inchiostro-lieve);
}

.pergunta[open] summary::after {
  content: "–";
}

.pergunta .resposta {
  margin: 0.6rem 0 0 1.5rem;
  color: var(--inchiostro-tenue);
}

.pergunta:target {
  background-color: var(--oliva-chiaro);
  margin-inline: -1rem;
  padding-inline: 1rem;
}

/* ---------- Articolo ---------- */
.articolo {
  max-width: var(--larghezza-contenuto);
}

.articolo > h2 {
  margin-top: 2.2rem;
  margin-bottom: 0.7rem;
}

.articolo > h3 {
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}

.articolo > p,
.articolo > ul,
.articolo > ol {
  margin-bottom: 1rem;
}

.articolo .apertura {
  font-size: 1.12rem;
  font-style: italic;
  color: var(--inchiostro-tenue);
}

/* Scheda documento (metadati in testa alle pagine legali/articoli) */
.scheda-documento {
  background-color: var(--superficie);
  border: 1px solid var(--riga-forte);
  margin-block: 1.4rem 2rem;
}

/* Mobile-first: uma coluna com divisórias horizontais até 640px;
   o grid com divisórias verticais chega a partir de 641px. */
.scheda-documento dl {
  display: grid;
  grid-template-columns: 1fr;
}

.scheda-documento div {
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--riga);
}

.scheda-documento div:last-child {
  border-bottom: none;
}

.scheda-documento dt {
  font-family: var(--carattere-titoli);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inchiostro-lieve);
}

.scheda-documento dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-family: var(--carattere-titoli);
  font-weight: 600;
}

@media (min-width: 641px) {
  .scheda-documento dl {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .scheda-documento div {
    border-right: 1px solid var(--riga);
    border-bottom: none;
  }

  .scheda-documento div:last-child {
    border-right: none;
  }
}

/* ---------- Riquadro di avvertenza ---------- */
.avvertenza {
  background-color: var(--superficie);
  border: 1px solid var(--riga-forte);
  border-left: 5px solid var(--timbro-rosso);
  padding-block: 1.1rem;
  padding-inline: 1.4rem;
  margin-block: 1.6rem;
  font-size: 0.95rem;
}

.avvertenza p {
  max-width: none;
}

.avvertenza .rubrica {
  font-family: var(--carattere-titoli);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--timbro-rosso);
  display: block;
  margin-bottom: 0.3rem;
}

/* ---------- Briciole di pane ---------- */
.briciole {
  font-size: 0.82rem;
  font-family: var(--carattere-titoli);
  color: var(--inchiostro-lieve);
  padding: 1rem 0 0;
}

.briciole ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.briciole li + li::before {
  content: "→";
  margin-inline: 0.5rem;
}

.briciole a {
  color: var(--inchiostro-tenue);
}

.briciole [aria-current] {
  color: var(--oliva-scuro);
  font-weight: 600;
}

/* ---------- Righe di contatto ---------- */
.recapiti {
  border: 1px solid var(--riga-forte);
  background-color: var(--superficie);
  max-width: 46rem;
}

/* Mobile-first: pilha em coluna única até 560px; o grid de duas
   colunas (rótulo + valor) chega a partir de 561px. */
.recapito {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--riga);
}

.recapito:last-child {
  border-bottom: none;
}

.recapito .voce {
  font-family: var(--carattere-titoli);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oliva-scuro);
  align-self: center;
}

.recapito p {
  font-size: 0.95rem;
  color: var(--inchiostro-tenue);
  max-width: none;
}

.recapito a {
  font-family: var(--carattere-titoli);
  font-weight: 600;
  word-break: break-all;
}

@media (min-width: 561px) {
  .recapito {
    grid-template-columns: minmax(9rem, 13rem) 1fr;
    gap: 1rem;
  }
}

/* ---------- Piè di pagina ---------- */
.pie-di-pagina {
  background-color: var(--superficie-tenue);
  border-top: 3px double var(--riga-forte);
  padding-block: 2.2rem 2.4rem;
  padding-inline: 1.5rem;
  font-size: 0.85rem;
  color: var(--inchiostro-tenue);
}

.pie-interno {
  width: min(920px, 100%);
  margin-inline: auto;
}

.pie-collegamenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.5rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--riga);
  font-family: var(--carattere-titoli);
  font-size: 0.8rem;
}

.pie-collegamenti a {
  color: var(--inchiostro-tenue);
  text-decoration: none;
}

.pie-collegamenti a:hover {
  color: var(--oliva-scuro);
  text-decoration: underline;
}

.pie-loghi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.2rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--riga);
}

.pie-loghi img {
  height: 28px;
  width: auto;
}

/* Il logo IBJR è bianco: scurito per questo fondo chiaro */
.logo-scurito {
  filter: brightness(0.3);
}

.pie-testo p {
  max-width: none;
  margin-bottom: 0.55rem;
  font-size: 0.8rem;
}

/* ---------- Faixa de acesso (idade + cookies, um único aviso em linha) ----------
   Substitui o antigo par avviso-cookie / verifica-eta (barra + modal em tela
   cheia) por uma única faixa fixa no topo do fluxo, com dois passos
   sequenciais. Nunca cobre a tela inteira; enquanto pendente, o conteúdo
   principal recebe o atributo `inert` (ver script.js). */
.faixa-acesso {
  display: none;
  position: sticky;
  top: 0;
  z-index: 80;
  background-color: var(--inchiostro);
  color: #eceee7;
  border-bottom: 3px solid var(--oliva);
}

.faixa-acesso.visibile {
  display: block;
}

.faixa-acesso-interno {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: 0.85rem 1.5rem;
}

.faixa-passo {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
}

.faixa-passo.ativo {
  display: flex;
}

.faixa-passo-rotulo {
  font-family: var(--carattere-titoli);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva-chiaro);
  flex: 0 0 100%;
}

.faixa-acesso p {
  flex: 1 1 24rem;
  font-size: 0.85rem;
  max-width: none;
  margin: 0;
}

.faixa-acesso a {
  color: #fff;
}

.faixa-acesso .azioni {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.faixa-acesso .bottone {
  padding: 0.5rem 1.1rem;
  font-size: 0.75rem;
}

.faixa-bloqueio {
  display: none;
  align-items: center;
  gap: 0.6rem 1.4rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.faixa-bloqueio.visivel {
  display: flex;
}

/* Enquanto a faixa pede resposta, o registro abaixo fica inerte (sem foco,
   sem interação) e visualmente contido — ver `inert` aplicado via JS.
   Nunca a própria faixa: os elementos marcados inert são a barra lateral
   e o conteúdo principal, não `.faixa-acesso`. */
[inert] {
  filter: saturate(0.55) brightness(0.96);
}