/* cramasinara.org, 2026: segnaletica di porto. Campi pieni blu porto, giallo segnale per cartelli e azioni,
   un solo colore per sezione. Caratteri: Barlow Condensed (cartelli, titoli, tabellone) e Barlow (testo). */

:root {
  --porto: #0b2545;
  --porto-2: #12345f;
  --notte: #071a31;
  --crama: #2f62d9;
  --crama-chiaro: #4b7bea;
  --segnale: #ffc928;
  --segnale-scuro: #e8ad00;
  --rosso: #c8232c;
  --bianco: #ffffff;
  --nebbia: #e9f0f7;
  --nebbia-2: #d6e2ee;
  --inchiostro: #0b1a2e;
  --testo-2: #43546b;
  --su-porto-2: #b9c9df;
  --filo: 2px;
  --largo: 1240px;
  --stretto: 760px;
  --margine: clamp(16px, 4vw, 40px);
  --spazio: clamp(64px, 9vw, 128px);
  --cartello: "Barlow Condensed", "Arial Narrow", sans-serif;
  --testo: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --entra: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--testo);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--bianco);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--crama); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--porto); }
::selection { background: var(--segnale); color: var(--porto); }
:focus-visible { outline: 3px solid var(--segnale); outline-offset: 3px; box-shadow: 0 0 0 6px var(--porto); }
html { scrollbar-color: var(--porto-2) var(--nebbia); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--cartello); font-weight: 700; line-height: 1.02; letter-spacing: 0; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
.vis-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--segnale); color: var(--porto); padding: 10px 16px; font-weight: 600; }
.salta:focus { top: 12px; }

.contenitore { width: min(100% - 2 * var(--margine), var(--largo)); margin-inline: auto; }
.contenitore--stretto { width: min(100% - 2 * var(--margine), var(--stretto)); margin-inline: auto; }

/* icone disegnate (freccia di direzione, ecc.) */
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }

/* ---------- campi di colore: uno per sezione ---------- */
.campo { padding-block: var(--spazio); }
.campo--porto { background: var(--porto); color: var(--bianco); }
.campo--notte { background: var(--notte); color: var(--bianco); }
.campo--segnale { background: var(--segnale); color: var(--porto); }
.campo--nebbia { background: var(--nebbia); }
.campo--crama { background: var(--crama); color: var(--bianco); }
.campo--porto a:not(.cartello, .biglietto), .campo--notte a:not(.cartello), .campo--crama a:not(.cartello) { color: var(--bianco); }

.titolo-sezione { font-size: clamp(2.25rem, 3.4vw + 1rem, 4rem); text-transform: uppercase; margin-bottom: clamp(24px, 3vw, 40px); }
.titolo-sezione--piccolo { font-size: clamp(1.9rem, 2vw + 1rem, 2.75rem); }
.testa-sezione { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.testa-sezione .titolo-sezione { margin: 0; }
.introduzione { font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem); line-height: 1.55; max-width: 62ch; }

/* ---------- cartelli: le azioni ---------- */
.cartello {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--cartello); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; line-height: 1;
  padding: 15px 20px 14px; border: var(--filo) solid currentColor;
  transition: background-color 0.2s var(--entra), color 0.2s var(--entra), transform 0.2s var(--entra);
}
.cartello .ico { transition: transform 0.25s var(--entra); }
.cartello:hover .ico { transform: translateX(4px); }
.cartello:active { transform: translateY(1px); }
.cartello--giallo { background: var(--segnale); border-color: var(--segnale); color: var(--porto); }
.cartello--giallo:hover { background: var(--bianco); border-color: var(--bianco); color: var(--porto); }
.cartello--porto { background: var(--porto); border-color: var(--porto); color: var(--bianco); }
.cartello--porto:hover { background: var(--crama); border-color: var(--crama); color: var(--bianco); }
.cartello--vuoto { color: inherit; background: transparent; }
.cartello--vuoto:hover { background: var(--porto); border-color: var(--porto); color: var(--bianco); }
.campo--porto .cartello--vuoto:hover, .campo--notte .cartello--vuoto:hover, .campo--crama .cartello--vuoto:hover { background: var(--bianco); border-color: var(--bianco); color: var(--porto); }
.collegamento-freccia { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cartello); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; }
.collegamento-freccia:hover .ico { transform: translateX(4px); }
.collegamento-freccia .ico { transition: transform 0.25s var(--entra); }

/* ---------- testata: insegna di banchina ---------- */
.testata { position: sticky; top: 0; z-index: 50; background: var(--porto); border-bottom: 4px solid var(--segnale); }
.testata__riga { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.testata__logo { display: block; flex: none; }
.testata__logo img { width: 150px; height: auto; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.menu__lista { display: flex; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu__voce { position: relative; }
.menu__link, .menu__apri {
  display: flex; align-items: center; gap: 6px; height: 76px; padding: 0 9px; white-space: nowrap;
  font-family: var(--cartello); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--bianco); text-decoration: none; background: none; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--segnale);
  transition: box-shadow 0.2s var(--entra);
}
.menu__link:hover, .menu__apri:hover, .menu__apri[aria-expanded="true"] { color: var(--segnale); box-shadow: inset 0 -6px 0 0 var(--segnale); }
.menu__link[aria-current="page"], .menu__voce--attiva > .menu__apri { color: var(--segnale); }
.menu__apri .ico { width: 0.7em; height: 0.7em; transition: transform 0.2s var(--entra); }
.menu__apri[aria-expanded="true"] .ico { transform: rotate(180deg); }
.sottomenu {
  position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--porto); border-top: 6px solid var(--segnale);
  box-shadow: 0 18px 40px rgba(7, 26, 49, 0.28);
}
.sottomenu[hidden] { display: none; }
.sottomenu a { display: block; padding: 10px 20px; color: var(--bianco); text-decoration: none; font-weight: 500; }
.sottomenu a:hover, .sottomenu a[aria-current="page"] { background: var(--porto-2); color: var(--segnale); }
.lingue { display: flex; gap: 2px; margin-left: 8px; }
.lingue a {
  font-family: var(--cartello); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.06em;
  color: var(--bianco); text-decoration: none; padding: 6px 7px; border: var(--filo) solid transparent;
}
.lingue a:hover { border-color: var(--bianco); color: var(--bianco); }
.lingue a[aria-current="true"] { background: var(--segnale); color: var(--porto); }
.testata__adotta { margin-left: 8px; padding: 13px 14px 12px; font-size: 1rem; white-space: nowrap; }
.testata__menu-mobile { display: none; }

@media (max-width: 1279px) {
  .testata__riga { min-height: 68px; }
  .testata__logo img { width: 128px; }
  .testata__menu-mobile {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    font-family: var(--cartello); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.0625rem;
    background: var(--segnale); color: var(--porto); border: 0; padding: 12px 16px 11px; cursor: pointer;
  }
  .testata__menu-mobile .ico { width: 1.1em; height: 1.1em; }
  .menu {
    position: fixed; inset: 72px 0 0 0; border-top: 1px solid rgba(255, 255, 255, 0.16); z-index: 49; display: block; margin: 0; padding: 24px var(--margine) 40px;
    background: var(--porto); color: var(--bianco); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.25s var(--entra), transform 0.25s var(--entra), visibility 0s linear 0.25s;
  }
  .menu--aperto { transform: none; opacity: 1; visibility: visible; transition: opacity 0.25s var(--entra), transform 0.25s var(--entra); }
  .menu__lista { flex-direction: column; gap: 0; }
  .menu__voce { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .menu__link, .menu__apri { height: auto; width: 100%; padding: 16px 0; font-size: 1.5rem; color: var(--bianco); justify-content: space-between; }
  .menu__link:hover, .menu__apri:hover, .menu__apri[aria-expanded="true"], .menu__link[aria-current="page"], .menu__voce--attiva > .menu__apri { box-shadow: none; color: var(--segnale); }
  .sottomenu { position: static; box-shadow: none; border-top: 0; padding: 0 0 12px; background: transparent; }
  .sottomenu a { padding: 8px 0 8px 16px; font-size: 1.125rem; color: var(--su-porto-2); }
  .lingue { margin: 28px 0 0; }
  .lingue a { color: var(--bianco); font-size: 1.125rem; padding: 8px 12px; }
  .lingue a:hover { border-color: var(--bianco); }
  .lingue a[aria-current="true"] { background: var(--segnale); color: var(--porto); }
  .testata__adotta { margin: 24px 0 0; display: flex; justify-content: space-between; font-size: 1.25rem; padding: 18px 20px; }
  body.menu-aperto { overflow: hidden; }
}
@media (max-width: 1279px) and (prefers-reduced-motion: reduce) { .menu { transition: none; } }

/* ---------- apertura della home ---------- */
.apertura { position: relative; background: var(--notte); color: var(--bianco); overflow: hidden; }
.apertura__foto { position: absolute; inset: 0; }
.apertura__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.apertura__foto img.attiva { opacity: 1; }
.apertura__foto::after { content: ""; position: absolute; inset: 0; background: rgba(7, 26, 49, 0.3); }
.apertura__griglia {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 64px); align-items: end;
  min-height: min(calc(100svh - 78px), 860px); padding-block: clamp(40px, 6vw, 72px);
}
.pannello { background: var(--porto); padding: clamp(24px, 3vw, 44px); border-top: 8px solid var(--segnale); max-width: 640px; }
.apertura__titolo { font-size: clamp(2.6rem, 3.6vw + 1.2rem, 5.25rem); text-transform: uppercase; line-height: 0.95; }
.apertura__testo { margin: 20px 0 28px; font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); color: var(--su-porto-2); max-width: 46ch; }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.apertura__didascalia { position: absolute; right: var(--margine); top: 18px; z-index: 2; font-size: 0.875rem; }
.apertura__didascalia a { color: var(--bianco); background: rgba(7, 26, 49, 0.7); padding: 6px 10px; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.apertura__didascalia a:hover { background: var(--segnale); color: var(--porto); }
@media (max-width: 900px) {
  .apertura__griglia { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 38vh; }
  .apertura__foto { bottom: auto; height: 62vh; }
  .apertura__foto::after { background: rgba(7, 26, 49, 0.15); }
}

/* ---------- tabellone arrivi e rilasci ---------- */
.tabellone { background: var(--notte); color: var(--bianco); border: var(--filo) solid #20406b; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.tabellone__testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--segnale); color: var(--porto); }
.tabellone__titolo { font-family: var(--cartello); font-weight: 700; font-size: 1.375rem; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.tabellone__titolo .ico { width: 1.1em; height: 1.1em; }
.tabellone__ora { font-family: var(--cartello); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.tabellone table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabellone th:first-child { width: 42%; }
.tabellone th {
  text-align: left; font-family: var(--cartello); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--su-porto-2); padding: 12px 18px 8px; border-bottom: 1px solid #20406b;
}
.tabellone td { padding: 12px 10px 12px 18px; border-bottom: 1px solid #1a3558; vertical-align: top; }
.tabellone tr:last-child td { border-bottom: 0; }
.tabellone a { color: inherit; text-decoration: none; }
.tabellone tbody tr { transition: background-color 0.2s var(--entra); }
.tabellone tbody tr:hover { background: #0e2747; }
.flap {
  display: inline-flex; flex-wrap: wrap; gap: 4px 0;
  font-family: var(--cartello); font-weight: 600; font-size: 1.125rem; line-height: 1; text-transform: uppercase;
  color: var(--segnale); font-variant-numeric: tabular-nums;
}
.parola { display: inline-flex; gap: 1px; }
.cella {
  position: relative; display: inline-block; min-width: 0.82em; padding: 5px 1px 4px; text-align: center;
  background: #173a68; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.cella::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.55); }
.cella--vuota { background: transparent; box-shadow: none; min-width: 0.5em; }
.cella--vuota::after { display: none; }
.flap--bianco { color: var(--bianco); }
.flap--bianco .cella { background: #12305a; }
.flap--spento { color: #6f87a8; }
.tabellone__nota { display: block; color: var(--su-porto-2); font-size: 0.875rem; margin-top: 2px; white-space: normal; }
.tabellone__piede { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid #20406b; }
.tabellone__piede a { color: var(--segnale); }
@media (max-width: 560px) {
  .tabellone thead { display: none; }
  .tabellone table, .tabellone tbody { display: block; }
  .tabellone tr { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 14px; border-bottom: 1px solid #1a3558; }
  .tabellone td { display: block; padding: 0; border: 0; }
  .tabellone td:first-child { grid-column: 1 / -1; margin-bottom: 8px; }
  .tabellone td:nth-child(2)::before, .tabellone td:nth-child(3)::before { display: block; margin-bottom: 4px; font-family: var(--cartello); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--su-porto-2); }
  .tabellone td:nth-child(2)::before { content: attr(data-etichetta); }
  .tabellone td:nth-child(3)::before { content: attr(data-etichetta); }
  .tabellone td, .tabellone th { padding-inline: 10px; }
  .flap { font-size: 0.9375rem; }
  .tabellone td:first-child .flap { font-size: 1.1875rem; }
  .cella { min-width: 0.9em; padding: 4px 1px 3px; }
  .tabellone__ora { display: none; }
  .pannello, .tabellone { min-width: 0; }
}

/* ---------- striscia dei numeri ---------- */
.numeri { background: var(--segnale); color: var(--porto); border-block: var(--filo) solid var(--porto); }
.numeri__lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0 auto; padding: 0; }
.numeri__voce { padding: clamp(20px, 2.5vw, 32px) clamp(12px, 1.5vw, 24px); border-left: var(--filo) solid var(--porto); display: grid; gap: 4px; align-content: start; }
.numeri__voce:first-child { border-left: 0; }
.numeri__icona { width: 1.75rem; height: 1.75rem; stroke-width: 2; }
.numeri__cifra { font-family: var(--cartello); font-weight: 700; font-size: clamp(2.5rem, 2.5vw + 1rem, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
.numeri__nome { font-family: var(--cartello); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; line-height: 1.2; }
@media (max-width: 900px) {
  .numeri__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .numeri__voce:nth-child(3n + 1) { border-left: 0; }
  .numeri__voce:nth-child(n + 4) { border-top: var(--filo) solid var(--porto); }
}
@media (max-width: 480px) {
  .numeri__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeri__voce { border-left: var(--filo) solid var(--porto) !important; border-top: 0 !important; }
  .numeri__voce:nth-child(odd) { border-left: 0 !important; }
  .numeri__voce:nth-child(n + 3) { border-top: var(--filo) solid var(--porto) !important; }
}

/* ---------- tre direzioni (chi siamo, scuole, adotta) ---------- */
.direzioni { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: var(--filo); background: var(--porto); border: var(--filo) solid var(--porto); }
.direzione { position: relative; display: block; overflow: hidden; color: var(--bianco); text-decoration: none; background: var(--porto); min-height: 280px; }
.direzione:first-child { grid-row: span 2; min-height: 600px; }
.direzione img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--entra); }
.direzione:hover img { transform: scale(1.04); }
.direzione__cartello {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 14px; justify-content: space-between;
  min-width: min(100%, 360px); padding: 18px 22px; background: var(--porto); color: var(--bianco);
  font-family: var(--cartello); font-weight: 700; font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); text-transform: uppercase; line-height: 1;
  transition: background-color 0.25s var(--entra), color 0.25s var(--entra);
}
.direzione:hover .direzione__cartello { background: var(--segnale); color: var(--porto); }
.direzione__cartello .ico { width: 0.8em; height: 0.8em; transition: transform 0.25s var(--entra); }
.direzione:hover .direzione__cartello .ico { transform: translateX(6px); }
.direzione:hover { color: var(--bianco); }
@media (max-width: 760px) {
  .direzioni { grid-template-columns: 1fr; }
  .direzione:first-child { grid-row: auto; min-height: 420px; }
}

/* ---------- dicono di noi ---------- */
.voci { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.voce { border-top: 6px solid var(--porto); padding-top: 20px; margin: 0; }
.voce blockquote { margin: 0 0 14px; }
.voce__testo { font-size: 1.0625rem; line-height: 1.6; }
.voce__autore { font-family: var(--cartello); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.125rem; }
@media (max-width: 900px) { .voci { grid-template-columns: 1fr; } }

/* ---------- biglietti di adozione ---------- */
.biglietti { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.biglietto {
  --buco: 11px;
  position: relative; display: grid; grid-template-rows: auto 1fr auto; color: var(--porto); background: var(--bianco); text-decoration: none;
  -webkit-mask: radial-gradient(circle var(--buco) at 0 calc(100% - 96px), transparent 98%, #000) , radial-gradient(circle var(--buco) at 100% calc(100% - 96px), transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask: radial-gradient(circle var(--buco) at 0 calc(100% - 96px), transparent 98%, #000), radial-gradient(circle var(--buco) at 100% calc(100% - 96px), transparent 98%, #000);
  transition: transform 0.3s var(--entra);
}
.biglietto:hover { transform: translateY(-4px); color: var(--porto); }
.biglietto__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--nebbia); }
.biglietto__foto img { width: 100%; height: 100%; object-fit: cover; }
.biglietto__corpo { padding: 20px 22px 24px; }
.biglietto__nome { font-size: clamp(1.6rem, 1vw + 1.1rem, 2.1rem); text-transform: uppercase; }
.biglietto__testo { margin: 10px 0 0; color: var(--testo-2); font-size: 1rem; }
.biglietto__matrice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 96px; padding: 0 22px;
  border-top: 3px dashed var(--nebbia-2); background: var(--segnale);
}
.biglietto__prezzo { font-family: var(--cartello); font-weight: 700; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.biglietto__azione { font-family: var(--cartello); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 8px; }
.biglietto:hover .biglietto__azione .ico { transform: translateX(4px); }
.biglietto__azione .ico { transition: transform 0.25s var(--entra); }
@media (max-width: 900px) { .biglietti { grid-template-columns: 1fr; max-width: 460px; } }

/* ---------- donazioni ---------- */
.dona { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.dona__iban { background: var(--porto); color: var(--bianco); padding: clamp(22px, 3vw, 36px); border-top: 8px solid var(--segnale); }
.dona__etichetta { font-family: var(--cartello); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; color: var(--su-porto-2); }
.dona__codice { font-family: var(--cartello); font-weight: 600; font-size: clamp(1.35rem, 1.2vw + 1rem, 2rem); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin: 4px 0 16px; color: var(--segnale); }
.dona__codice--bianco { color: var(--bianco); }
.dona__copia { margin-top: 4px; }
.dona__copia[data-copiato="1"] { background: var(--bianco); border-color: var(--bianco); color: var(--porto); }
.elenco-semplice { padding-left: 1.2em; margin: 0 0 1.2em; }
.elenco-semplice li { margin-bottom: 6px; }
@media (max-width: 900px) { .dona { grid-template-columns: 1fr; } }

/* ---------- schede (news, pazienti, specie, staff) ---------- */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.griglia--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.scheda { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.scheda__foto { aspect-ratio: 1; overflow: hidden; background: var(--nebbia-2); position: relative; }
.scheda__foto--largo { aspect-ratio: 4 / 3; }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--entra); }
.scheda:hover .scheda__foto img { transform: scale(1.04); }
.scheda__targa {
  position: absolute; left: 0; bottom: 0; background: var(--segnale); color: var(--porto); padding: 6px 12px 5px;
  font-family: var(--cartello); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9375rem;
}
.scheda__corpo { padding-top: 16px; border-top: 6px solid var(--porto); margin-top: -1px; position: relative; }
.scheda__titolo { font-size: clamp(1.5rem, 0.8vw + 1.1rem, 1.875rem); text-transform: uppercase; transition: color 0.2s; }
.scheda:hover .scheda__titolo { color: var(--crama); }
.campo--porto .scheda:hover .scheda__titolo, .campo--notte .scheda:hover .scheda__titolo { color: var(--segnale); }
.scheda__dati { margin: 10px 0 0; font-size: 0.9875rem; color: var(--testo-2); }
.campo--porto .scheda__dati, .campo--notte .scheda__dati { color: var(--su-porto-2); }
.scheda__data { font-family: var(--cartello); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9375rem; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.scheda__estratto { margin: 10px 0 0; color: var(--testo-2); }

/* staff */
.persone { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.persona { color: inherit; text-decoration: none; }
.persona__foto { aspect-ratio: 1; overflow: hidden; background: var(--nebbia-2); }
.persona__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); transition: transform 0.8s var(--entra), filter 0.4s; }
.persona:hover .persona__foto img { transform: scale(1.04); filter: none; }
.persona__iniziali { display: grid; place-items: center; width: 100%; height: 100%; background: var(--porto); color: var(--segnale); font-family: var(--cartello); font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: 0.04em; }
.persona__nome { display: block; margin-top: 12px; font-family: var(--cartello); font-weight: 700; text-transform: uppercase; font-size: 1.375rem; line-height: 1.05; }
.persona__ruolo { display: block; color: var(--testo-2); font-size: 0.9375rem; margin-top: 2px; }
.campo--porto .persona__ruolo { color: var(--su-porto-2); }
@media (max-width: 900px) { .persone { grid-template-columns: repeat(2, 1fr); } }

/* ---------- gioco e video ---------- */
.gioco { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.gioco img { width: clamp(140px, 16vw, 220px); }
.gioco__titolo { font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem); text-transform: uppercase; }
.gioco p { margin: 8px 0 0; color: var(--su-porto-2); max-width: 52ch; }
.campo--crama .gioco p { color: var(--bianco); }
.gioco:not(:has(> img)) { grid-template-columns: 1fr auto; }
@media (max-width: 760px) { .gioco, .gioco:not(:has(> img)) { grid-template-columns: 1fr; justify-items: start; } }
.striscione { display: block; margin-top: clamp(28px, 4vw, 48px); border: var(--filo) solid #2a4a74; transition: border-color 0.2s; }
.striscione:hover { border-color: var(--segnale); }
.striscione img { width: 100%; }
.video { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.video__titolo { margin-top: 12px; font-family: var(--cartello); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; }
@media (max-width: 760px) { .video { grid-template-columns: 1fr; } }

/* contenuti di terzi bloccati finché non c'è il consenso */
.terzi { position: relative; aspect-ratio: 16 / 9; background: var(--porto-2); color: var(--bianco); overflow: hidden; }
.terzi--mappa { aspect-ratio: auto; height: clamp(320px, 40vw, 460px); }
.terzi iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.terzi__blocco { position: absolute; inset: 0; display: grid; place-content: center; justify-items: start; gap: 14px; padding: clamp(20px, 4vw, 48px); background-size: cover; background-position: center; }
.terzi__blocco::before { content: ""; position: absolute; inset: 0; background: rgba(7, 26, 49, 0.78); }
.terzi__blocco > * { position: relative; }
.terzi__blocco p { margin: 0; max-width: 46ch; font-size: 0.9875rem; color: var(--su-porto-2); }
.terzi__blocco strong { font-family: var(--cartello); font-size: 1.5rem; text-transform: uppercase; color: var(--bianco); font-weight: 700; }

/* ---------- testata delle pagine interne ---------- */
.testa-pagina { background: var(--porto); color: var(--bianco); padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); border-bottom: 8px solid var(--segnale); }
.briciole { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin: 0 0 18px; padding: 0; font-family: var(--cartello); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; color: var(--su-porto-2); }
.briciole a { color: var(--su-porto-2); text-decoration: none; }
.briciole a:hover { color: var(--segnale); }
.briciole li + li::before { content: "/"; margin-right: 10px; color: #5b7396; }
.testa-pagina__titolo { font-size: clamp(2.6rem, 4vw + 1rem, 5.5rem); text-transform: uppercase; line-height: 0.95; max-width: 18ch; }
.testa-pagina__sotto { margin: 18px 0 0; color: var(--su-porto-2); font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); max-width: 60ch; }

/* ---------- testo lungo (dall'admin) ---------- */
.lettura { padding-block: clamp(40px, 6vw, 88px); }
.lettura__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.lettura__griglia--sola { grid-template-columns: minmax(0, var(--stretto)); }
.lettura__media { position: sticky; top: 104px; }
.lettura__media img { width: 100%; }
@media (max-width: 900px) { .lettura__griglia { grid-template-columns: 1fr; } .lettura__media { position: static; } }
.testo-lungo { max-width: 68ch; font-size: 1.125rem; line-height: 1.7; overflow-wrap: break-word; }
.testo-lungo > :first-child { margin-top: 0; }
.testo-lungo p, .testo-lungo li { color: var(--inchiostro); }
.testo-lungo [style*="justify"] { text-align: left !important; }
.testo-lungo h2, .testo-lungo h3, .testo-lungo h4 { font-size: clamp(1.6rem, 1vw + 1.1rem, 2.1rem); text-transform: uppercase; margin: 1.6em 0 0.5em; }
.testo-lungo ul, .testo-lungo ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.testo-lungo li { margin-bottom: 0.4em; }
.testo-lungo li::marker { color: var(--crama); }
.testo-lungo strong { font-weight: 600; }
.testo-lungo hr { border: 0; border-top: var(--filo) solid var(--porto); margin: 2em 0; }
.testo-lungo img { max-width: 100%; height: auto; }
.testo-lungo table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 1rem; }
.testo-lungo td, .testo-lungo th { border: 1px solid var(--nebbia-2); padding: 8px 10px; text-align: left; vertical-align: top; }
.testo-lungo a { overflow-wrap: anywhere; }

/* galleria (album dall'admin) */
.galleria { display: grid; gap: 8px; }
.galleria__grande { aspect-ratio: 4 / 3; background: var(--nebbia-2); overflow: hidden; }
.galleria__grande img { width: 100%; height: 100%; object-fit: cover; }
.galleria__miniature { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.galleria__miniature button { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 3px solid transparent; background: none; cursor: pointer; overflow: hidden; }
.galleria__miniature button[aria-current="true"] { border-color: var(--segnale); }
.galleria__miniature img { width: 100%; height: 100%; object-fit: cover; }

/* dati di una scheda (paziente, specie) */
.dati { margin: 0; display: grid; grid-template-columns: max-content 1fr; border-top: var(--filo) solid var(--porto); }
.dati dt, .dati dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--nebbia-2); }
.dati dt { padding-right: 24px; font-family: var(--cartello); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; color: var(--testo-2); }
.dati dd { font-weight: 500; }
.dati em { font-style: italic; }
@media (max-width: 480px) { .dati { grid-template-columns: 1fr; } .dati dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- pazienti ---------- */
.anni { display: flex; flex-wrap: nowrap; gap: 4px; list-style: none; margin: 0; padding: 0 0 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a5a86 transparent; }
.anni li { flex: none; }
.anni a {
  position: relative; display: block; padding: 10px 10px 9px; font-family: var(--cartello); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; text-decoration: none; color: var(--bianco); background: var(--notte);
}
.anni a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.35); }
.anni a:hover { color: var(--segnale); }
.anni a[aria-current="page"] { background: var(--segnale); color: var(--porto); }
.anni a[aria-current="page"]::after { display: none; }
@media (max-width: 700px) { .anni { margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); } }
.registro { width: 100%; border-collapse: collapse; }
.registro th {
  text-align: left; font-family: var(--cartello); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--testo-2); padding: 0 16px 10px 0; border-bottom: var(--filo) solid var(--porto);
}
.registro td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--nebbia-2); vertical-align: middle; }
.registro tbody tr { transition: background-color 0.2s var(--entra); }
.registro tbody tr:hover { background: var(--nebbia); }
.registro__foto { width: 72px; }
.registro__foto img, .registro__foto span { width: 64px; height: 64px; object-fit: cover; display: block; background: var(--nebbia-2); }
.registro__nome a { font-family: var(--cartello); font-weight: 700; text-transform: uppercase; font-size: 1.375rem; color: var(--porto); text-decoration: none; line-height: 1.05; }
.registro__nome a:hover { color: var(--crama); }
.registro__data { font-family: var(--cartello); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; font-size: 1.0625rem; }
.registro__causa { color: var(--testo-2); font-size: 0.9875rem; max-width: 46ch; }
.stato { display: inline-block; font-family: var(--cartello); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9375rem; padding: 4px 8px 3px; white-space: nowrap; }
.stato--rilasciata { background: var(--segnale); color: var(--porto); }
.stato--nessuno { color: var(--testo-2); padding-inline: 0; }
@media (max-width: 860px) {
  .registro thead { display: none; }
  .registro, .registro tbody, .registro tr, .registro td { display: block; }
  .registro tr { display: grid; grid-template-columns: 72px 1fr; column-gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--nebbia-2); }
  .registro td { border: 0; padding: 0; }
  .registro__foto { grid-row: span 4; }
  .registro__causa { margin-top: 4px; }
  .registro td.registro__rilascio { margin-top: 8px; }
}
.riassunto { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.riassunto div { display: grid; background: var(--notte); padding: 14px 18px 12px; border-top: 4px solid var(--segnale); }
.riassunto b { font-family: var(--cartello); font-weight: 700; font-size: clamp(2.25rem, 2vw + 1rem, 3.25rem); line-height: 1; color: var(--segnale); font-variant-numeric: tabular-nums; }
.riassunto span { font-family: var(--cartello); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--su-porto-2); }

/* ---------- biologia: schede per categoria ---------- */
.filtri { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(24px, 3vw, 40px); }
.filtri button {
  padding: 10px 16px 9px; font-family: var(--cartello); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--porto); background: transparent; border: var(--filo) solid var(--porto); cursor: pointer;
}
.filtri button:hover { background: var(--nebbia); }
.filtri button[aria-pressed="true"] { background: var(--porto); color: var(--bianco); }
.scheda[hidden] { display: none; }

/* ---------- contatti e modulo ---------- */
.contatti { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .contatti { grid-template-columns: 1fr; } }
.modulo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.modulo__campo { display: grid; gap: 6px; }
.modulo__campo--largo { grid-column: 1 / -1; }
.modulo label { font-family: var(--cartello); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; }
.modulo input[type="text"], .modulo input[type="email"], .modulo input[type="tel"], .modulo textarea {
  width: 100%; padding: 13px 14px; background: var(--bianco); border: var(--filo) solid var(--porto); border-radius: 0; color: var(--inchiostro);
  transition: box-shadow 0.15s var(--entra);
}
.modulo textarea { min-height: 180px; resize: vertical; }
.modulo input:focus, .modulo textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--segnale); }
.modulo input:user-invalid, .modulo textarea:user-invalid { border-color: var(--rosso); }
.modulo__consenso { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-family: var(--testo) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem !important; font-weight: 400 !important; }
.modulo__consenso input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--porto); flex: none; }
.modulo__nota { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--testo-2); margin: 0; }
.modulo__invia { grid-column: 1 / -1; justify-self: start; cursor: pointer; }
.campo-nascosto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .modulo { grid-template-columns: 1fr; } }
.recapiti { background: var(--porto); color: var(--bianco); padding: clamp(24px, 3vw, 40px); border-top: 8px solid var(--segnale); }
.recapiti h2 { font-size: 2rem; text-transform: uppercase; margin-bottom: 16px; }
.recapiti p { color: var(--su-porto-2); }
.recapiti a { color: var(--bianco); }
.recapiti__voce { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.recapiti__voce span { font-family: var(--cartello); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; color: var(--su-porto-2); }
.recapiti__voce a, .recapiti__voce b { font-weight: 500; font-size: 1.0625rem; overflow-wrap: anywhere; }

/* avvisi (esito del modulo) */
.avvisi { position: relative; z-index: 2; }
.avviso { display: flex; gap: 12px; align-items: center; margin: 0; padding: 16px var(--margine); font-weight: 500; }
.avviso--success { background: var(--segnale); color: var(--porto); }
.avviso--error { background: var(--rosso); color: var(--bianco); }

/* numero per le emergenze (contatti) */
.emergenza { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 20px 13px; background: var(--segnale); color: var(--porto) !important; text-decoration: none; font-family: var(--cartello); font-weight: 700; font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.emergenza .ico { width: 0.9em; height: 0.9em; }
.emergenza:hover { background: var(--bianco); }

/* utilità */
.campo--sottile { padding-block: 24px; }
.spazio-sopra { margin-top: 32px; }
.tabellone__nota--scura { color: var(--testo-2); }
@media (min-width: 901px) { .lettura__griglia--persona { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }
.icone-social { display: flex; gap: 10px; }
.icone-social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: var(--filo) solid var(--porto); color: var(--porto); font-size: 1.125rem; text-decoration: none; }
.icone-social a:hover { background: var(--porto); color: var(--bianco); }
.campo--notte .icone-social a, .campo--porto .icone-social a { border-color: #2a4a74; color: var(--bianco); }
.campo--notte .icone-social a:hover, .campo--porto .icone-social a:hover { border-color: var(--segnale); background: transparent; color: var(--segnale); }

/* ---------- piede ---------- */
.piede { background: var(--notte); color: var(--su-porto-2); padding-block: clamp(48px, 6vw, 80px) 28px; font-size: 0.9875rem; }
.piede a { color: var(--bianco); text-decoration: none; }
.piede a:hover { color: var(--segnale); text-decoration: underline; }
.piede__griglia { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.piede__titolo { font-family: var(--cartello); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--segnale); font-size: 1rem; margin-bottom: 12px; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.piede__logo { display: inline-block; margin-bottom: 18px; }
.piede__logo img { width: 150px; }
.piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.875rem; }
.piede__fondo button { background: none; border: 0; padding: 0; color: var(--bianco); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.piede__social { display: flex; gap: 10px; }
.piede__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: var(--filo) solid #2a4a74; font-size: 1.125rem; }
.piede__social a:hover { border-color: var(--segnale); text-decoration: none; }
@media (max-width: 900px) { .piede__griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .piede__griglia { grid-template-columns: 1fr; } }

/* ---------- banner dei cookie ---------- */
.consenso {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 720px; margin-inline: auto;
  background: var(--porto); color: var(--bianco); border-top: 8px solid var(--segnale); padding: 22px 24px;
  box-shadow: 0 24px 60px rgba(7, 26, 49, 0.45);
}
.consenso[hidden] { display: none; }
.consenso__titolo { font-size: 1.5rem; text-transform: uppercase; margin-bottom: 8px; }
.consenso p { color: var(--su-porto-2); font-size: 0.9875rem; margin-bottom: 14px; }
.consenso p a { color: var(--bianco); }
.consenso__scelte { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.consenso__scelte label { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9875rem; color: var(--bianco); }
.consenso__scelte input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--segnale); flex: none; }
.consenso__scelte small { display: block; color: var(--su-porto-2); }
.consenso__azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.consenso__azioni .cartello { font-size: 1rem; padding: 12px 16px 11px; cursor: pointer; }

/* ---------- pagine legali ---------- */
.legale { padding-block: clamp(40px, 6vw, 88px); }
.legale .testo-lungo h2 { font-size: clamp(1.5rem, 0.8vw + 1.1rem, 1.9rem); margin-top: 2em; }
.legale__aggiornato { font-family: var(--cartello); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--testo-2); }

/* ---------- 404 ---------- */
.smarrito { min-height: 60vh; display: grid; align-content: center; }